Friday

End Credits

When conceptualising the end credits, I wanted to squeeze in just a little bit of extra story since the duration of the overall VN was over the discussed limit. That is when the idea hit me, reveal a few images to the player of the monster: Kikimora, haunting Zima's father during her childhood. It would enhance the eeriness of the narrative as well as show just how troubling life was for the father.

The music playing (mentioned in a previous post for the credits) would set a tone alongside these visuals. The piano tune is quite sad and emotional, implementing the unknown, loss and fate.

The very last scene, as the credits finally finish, would show a breaking news headline of Zima missing within the Siberian Wildlands. This would leave her fate to the fantasy of the player, ending on a depressing cliffhanger.




Background Art Full Colour

Below are a handful of background art scenes that are used for the final version of I AM HOME.

Taking inspiration from artistic lighting and use of dark toning in horror medium, I was able to produce images that would help set the tone of each scripting scene. In conjunction with sound effects and music of course this would aid the enhancement of the horror element. Certain images would feature close ups rather than showing the entire image at first to give a sense of strike or shock. Other scenes would remain the same but little areas or the entire colour mood would change with the text and the music. 

Each scene needed to have specific angle shots from cinematography to clearly identify what I want to show towards the player as well as establishing the scene. Blending and blurring tools were very helpful in flushing out light and dark to create positive and negative vibes.







Monday

User Testing and Proof Reading

Once I had finished a major Alpha build version of the visual novel, I sent a couple of copies to a few friends. I asked that they proof read and provide their thoughts on the scripting and overall experience so far. This would allow me to understand the perspective of someone who knows nothing about my story or visuals. One that would not expect what I can expect.

One of my reviewers does Historical Writing and another does Law.  The two of them gave a really constructive feedback on my visual novel build.

At first I did feel insulted to get such harsh, critical feedback from one of them, however the reality is that they know and understand what they're discussing. I took their opinions seriously and responded with such manner too. I began to visually see my errors along the way, correcting them to meet a professional standard and develop my scripting better.

Sakife’s review:
Pros: Art work is unique, good design, imaginative and creative. Story and lore was interesting as well as intriguing. Gameplay was satisfying. It was clearly a horror game, the atmosphere, the sounds, the music as well as the written dialog and personal thoughts were attention grabbing and drag the reader into this immerse plot.

Cons: Few writing errors, could improve grammar and some sentences.

Overall: This novel has great potential as well as being a great starting point. Interactions in the game was smooth. The artwork is beautiful and fun to go through, the game created a lot of tension and stress whilst i was playing it.


Jan’s review:

Improve the writing:
- Grammar: The thing is not fixable right now
- Unnecessary detail: 'the national road'
- Writing feels rigid: 'clothes absorb the water'
- Wearing and investigator's uniform, but still have to present a badge to officer
- What happened, he asked rhetorically
- News Tab, change 'counties' to 'oblasts'
- Exploring town, how can you differentiate between each building? Add lines where Zima notices their signs/ store windows.
- Message from officer, mechanic to pick 'it', say car instead.
- In town, write from present tense
- Romm 301 log abandoned for (10?) years, why is it still on. Add in text about charging it up, or taking out its disc.
- Patrol officer Arom? Never told you her name, strange for someone to introduce themselves through a text.
- Snap back to reality
- 'Volunteered to disappear'(edited)

But yeah, sound and controls are great.



The images below are my fellow user testers and proof readers who helped guide and shape my scripting to perfection.





Sunday

Miss Officer

A character I have designed for the story is labelled 'Miss Officer' who is a stranger the main character meets. She is a Police Patrol Officer within a Siberian oblast and happens to save the MC.

Her uniform is based off a real Russian female police appearance along with the fur hat. Giving her braids as a hairstyle was a way of 'hiding' her long hair into a compressed area as not to reveal a spoiler. Although her hair colour is sharply similar to the monster called Kikimora.

The overall design for her was to be a stranger the player could open up to. A police officer is normally represented as an essence of safety and law. Where everything comes in order, but that is completely turned at the ending.








Sound Design

For music production, I used both Fruity Loops Studio and Adobe Audition. I have an entire reference list of all sounds I have used throughout my project. 

Bluezone Corporation sound effects and ambiences were purchased. They included very impacting sounds that added eeriness or intense atmospheres to many scenes of my visual novel. 

Fruity Loops was used to enhance the main menu 'Tili Tili Bom' piano track such as the knife or mushing sounds to further enhance the opening.

FLVTO Downloader was used to convert YouTube videos into mp3 files that would then be imported into Adobe Audition for cutting and clipping. 


Text Box Concept

My initial concept for the textbox of I AM HOME was supposed to be the image below. I drafted a few ideas but it was quite frustrating. Below, the image is supposed to look sleek and sharp, like technology, but I chose to scrap a textbox design altogether and use a black box with opacity faded to at least 20% to still show the colour of the background image. 

Having a less fancy graphical design for the textbox aids towards the feel of the horror theme. A few peers told me that a clear textbox allows for a fuller background image, providing a better visual experience when suspense kicks in. I tend to agree with that perspective, although I would have liked to have used a more stylish design, but I guess it would suit a different genre for a visual novel.


Thursday

Story Structure and Script

My visual novel story narrative is structured into sections that takes the player through an engaging, intense script. I will discuss here what the story idea is and what elements have made the narrative interactive for the player.

Introduction Scene:

Revealing where the main female character (MC) is at present. The scene and location is set in a dense Siberian forest under a rainstorm at night. The player will learn of the MC's predicament and a bit about her backstory. Here the MC will meet a stranger, pretty much the only real character (apart from the MC) within the present time.

Ghost Story Scene:

From here, the MC tells the stranger a ghost story during their long road trip. The player will get to name the Secondary Main Character (SMC) of this story. In this story, the player will get a thrill from the tension and scenarios shown and told.

Town Scene:

During this period, the player is back in the present time of the story, having arrived at the abandoned town location with the stranger. They part ways and the player resumes following the MC as they explore the town, make choices and receive logs and news from the mail box. Increased eerie atmospheres and dark themes will increase, leaving a nerving yet curious trail.

End Scene:

In the final few scenes, the player will begin to learn the truth behind the ghost story as well as the present time situation, coming to a conclusive ending that delves into reality and fiction.


Choice examples:

Examine the Medical Clinic. ---> Scene change to clinic. Different sounds and dialogue.

Examine the Apartments. ---> Scene change to apartment room. Interior sounds. Quieter music.

Examine the Tech Store. --->  Scene change. Different text and music, transitions.

Several choices will lead to new and different text but will not change the story line drastically due to time constraint.

Font Use

Searching online, a lot of creepy fonts were available for me to use. Unfortunately, I constantly kept changing my mind, trying to find the correct combination of three different fonts that would be visually pleasing yet add towards the themes of psychological horror.

The three fonts I needed were for these categories:

-Text Box Font
-Name Box/Menu Font
-Mail Box Font

The text box font needed to be simplistic and neat as this was where the heavy text of the script would be read by the player. And fancy or compact font would be an eyesore to read.

The name box and menu font needed to be stylish, like headers that would have a big impact on the visual construction throughout the visual novel.

Lastly, for the mail box, the font needed to be somewhat easy on the eyes yet feel technological. As it was mail text within an electronic tablet.


Final Three Fonts I went with:


Main Menu Design

For the main menu, I wanted to have a really creepy/eerie screen that would immediately reveal to the player the theme that they're about to venture into. Using the blood spots on a dark screen (my main cover image), I used that as the background.

Pressed for time, I didn't want to spend a lot of hours trying to make an animated rain effect on Adobe Animate as a lot of art assets needed to be developed. Searching online, I found a royalty-free, smooth rain animation that would work for the main menu screen. It is a simple pelt-down of water droplets.

Applying this animation layered over the background image had created a dark, tense scene.

The next stage for the menu screen was to find the correct intro music that would add to this visual effect. That's when I found a really eerie piano version of the 'tili tili bom' russian film lullaby. It was slow, tense and perfect for what I imagined the intro to be.

I took the tili tili bom piano track and uploaded it into Fruity Loops Studio. From there, I added a few sound effects such as a knife clanging, mushing noises and various others that would enhance the creepiness of the lullaby.

The final addition was the rain sound effect that would loop over faintly behind the main piano track.



Aniss. (2017) Tili Tili Bom - Piano Verse. Available from: https://www.youtube.com/watch?v=NvAINaFF2rA

Ron. (2008) Flash FX Animation - #4 Rain. Available from: http://flashfx.blogspot.co.uk/2008/12/4-rain.html

Promotion of a Friend

One of my friends, Neal, produces music as a hobby whenever he can get the chance, primarily dealing within the genre of Metal and Rock. Although his main music tastes juxtapose my personal interests, I was really fond of his talent in developing music through computer software.

One of his tracks that he made for his own album, called: "A clean Slate", really connected with me in a creative way. The main usage of the piano struck my conceptual mind, inspiring me to want to use this track for my visual novel.

A problem I encountered however is that I did not know wherein the novel to play this piece. That's when the idea hit me, 'I should use this track for the credits'. Because my visual novel story will lead to a conclusive ending that can be considered a cliffhanger, I wanted to just push further the story a little more within the credits. This track would create a beautiful, yet sad tone to the story, showing how the Main Character is satisfied at the end, but through the eyes of the player, it is a rather horrific end.

Neal gave me full permission to use his track, and I gave him the same to promote my visual novel. This collaboration definitely improved our friendship, acknowledging eachother's talents and skills within our separate fields.

Below is a link to his album on Bandcamp.

Calangi, N.E. (2018) Reset Humanity: A Clean Slate. Available from: https://resethumanity.bandcamp.com/track/a-clean-slate [Accessed: 24th April 2018]

Wednesday

Mailbox GUI Design

This image screen appears when the player clicks on the top-right corner of the screen. It will open a mailbox screen in which the player will receive messages, news and logs as they progress through the story. 

The design is to represent a futuristic Holographic-like tablet, by the fictional corporation called 'Invicta Industries'. (A corp that I wish to reuse through various future projects). In order to concept this design, I had to download a mailbox template from the Ren'Py engine, then open it within Adobe Photoshop. It was scaled to the correct resolution and pixels, allowing me to just change the visuals rather than messing about with the measurements. Once that was done, it was a simple drag and replace into my game asset folder.

The game setting remains like modern reality, however there are a few technological advancements through the use of mobile communication and tablet devices. 



Female Lead

After a lot of thought I decided to remove the male main character and to just stick with the female counter-part. From time managing, I realised that making changes within the script for both him and her would take up a lot of essential time that would be needed for art asset development and music editing. So I chose to keep the female lead, hoping to tell a good enough story through her eyes instead.

The image below is the screen that appears when the player hovers the mouse over the character Zima. I wanted a blood splatter effect spanning the entire screen to add eerie tension from the get-go, along with the tense music that immediately opens the player up. 


The Letter Inspiration

I cannot express enough how much I love 'The Letter' nor how much it inspires and motivates me. The use of mechanics to create jumpscares and eerie tensions kept me hooked for more continuously. Although Yangyangmobile developed this through the Unity software, it is still valid towards my work. I could learn a lot from their use of tension build-up and how to turn a pleasant scene into an awkward, dark one. Their use of dark visuals, simplistic UI and GUI make for a perfect horror film replica. 

The following images are all in-game.









YangYangMobile. (2017) The Letter Visual Novel. Via Steam Platform.

Manga Studio 5.0 Layering and Colouring

In the first image, what is shown in the screenshot is my default layering plan. I always keep it simple and within minimalist order. The base colour which is the main 'fill' always stays near the bottom, the shadow colour just comes above to provide dark areas of the scene or character. Finally the light colour layer tops them both, as brighter colours highlight areas sharply and are more powerful when on top. 

The Ink layer must always remain ahead of all colour layers to keep them within each object. A few times I have coloured the entire screen in black, then reduced the opacity down to provide a rich, darker atmosphere to a scene. It helps enhance the audience's understanding, notifying them whether it is night time, or enclosed in a dark spacing. I also did the opposite to light scenes set in the day, just to give it a more uplifting feeling.

Key:
b - base colour
s - shadow colour
l - light colour
ink - final black inklines



Initial Background Art Sketches

Here are several rough sketches of the background art. Drawn using a graphics pen and monitor via the software: Manga Studio 5.0, I was able to plan out the visuals and perspectives of each scene. A rough draft is an important part of planning and structuring, showing how I wanted the scene to appear to the audience. Using my cinematography knowledge, I drew different perspective angles such as close ups, low-angle shots, wide shots and over-the-shoulder shots. These provide different atmospheres depending on positioning and most importantly: colouring. 

Pretty much, the way I work this is by writing the script and story line. Once that is done, I draw each image according to how I imagined each scene that I had written out. I try to match what I am drawing to what I have noted so that there isn't any visual errors conflicting with the text.










Main Character Design

During the story development, I wanted to provide the player with the option to select their main character's gender. Male or Female. The character's name by default would be 'Zima'. A russian origin. The images below show the before and after of a character selection when the mouse hovers over either character. A silhouette would appear behind them to show digital interactivity.

My initial idea for their character backstory would be that they were an Investigative-Operative serving under an Empress (See Bottom Image) of the 'United Nordic Kingdoms', comprising of Norway, Sweden, Denmark and Finland. I eventually decided to scrap this backstory entirely as it was complicating the plot and adding unnecessary detailed lore towards the psychological horror theme. Instead I shaped Zima to remain as an Investigator-Operative, more like a Detective than an espionage agent. I removed the Empress character from the script and changed how Zima starts off the story.

I should also mention, before I even chose to head towards psychological-horror, I was intending to create a Space Sci-Fi visual novel like I did the year before, but rather more in-depth. Unfortunately, due to time constriction, I would not have the needed assets in time nor the gameplay time to produce a detailed, lengthy storyline. I feel that switching away from that was a wise-decision as I AM HOME enables me to show off what I have learnt throughout the years of Media, Cinematography, Coding, as well as the Artistic and Musical implementation.




Coding Preparation Area

The following screenshots show the beginning of the coding script in which all images are referenced from the game folder, like an image library. This method allows for orderly viewing rather than placing them randomly throughout the script. Each art type is sectioned accordingly.

Background and Character assets are written as: image [artname] = "[artname].jpg/.png".

Character names are referenced in the second screenshot as: define [name] = character('[name]', color="[colourhexcode]"). Within the game, when a character speaks their line, their name box will appear, and in the colour defined.

Near the end of the second screenshot, I have added an opening disclaimer text that plays just after my logo and Ren'Py's logo. This is to warn younger audiences and people who are easily disturbed that my visual novel has content that will be of debate/concern. It will then force the player to manually click the 'I Agree' button in order to proceed towards the main menu screen. 



Tuesday

DDLC Ren'Py Coding Influence

On GitHub, a user uploaded the entire coding scripts for the visual novel Doki Doki Literature Club. It was a legal sharing of course, with expressed permission from the creator Team Salvato. From here I was able to learn a lot of different coding effects, transitions and transforms that create intensive atmosphere and disorientation to the player. This was a necessity if I was going to make a psychological horror too. 

Exploring the coding led me to testing out different elements such as pulsating veins on the screen to static distortion for a background image. This led to inspiring my development in creating a cinematographic jumpscare scene. 

Skull217, Team Salvato. (2017) DDLCtVN effects.rpy. Available from: https://github.com/Skull217/DDLCtVN/blob/master/effects.rpy [Accessed: 22nd January 2018]


Monday

DDLC Python Coding

This coding segment takes an image and converts it into a certain number of rectangles that can rapidly appear on the screen like a distorted, fuzzy effect. I got one of my friends to get this segment working for me as I struggled to get it working. Luckily he could do it within a few minutes because he can solve these python dilemmas. Unfortunately, his effort was slightly wasted as I decided not to use this piece of coding. I felt that this type of effect was out of place.

#These are three displayables (m_rectstatic, m_rectstatic2, m_rectstatic3) and
#one displayable effect RectStatic() that make a bunch of little boxes on the screen
#that blink on and off.

#Little black squares
image m_rectstatic:
   RectStatic(Solid("#000"), 320, 32, 32).sm
   pos (0, 0)
   size (32, 32)
#Little squares with a part of the logo
image m_rectstatic2:
   RectStatic(im.FactorScale(im.Crop("gui/Horror.png", (100, 100, 128, 128)), 0.5), 10, 32, 32).sm
#Little squares with a part of the menu
image m_rectstatic3:
   RectStatic(im.FactorScale(im.Crop("gui/FatherDeath.jpg", (100, 100, 64, 64)), 0.75), 10, 32, 32).sm
init python:
   import math
   #This effect takes a displayable, a number of rectangles to show concurrently,
   #and a size for the rectangles, then makes them randomly show up on the screen
   #RectStatic(Solid("#000"), 32, 32, 32) would make 32 32x32 black squares
   #That show up randomly on the screen
   class RectStatic(object):
       def __init__(self, theDisplayable, numRects=12, rectWidth = 30, rectHeight = 30):
           self.sm = SpriteManager(update=self.update)
           self.rects = [ ]
           self.timers = [ ]
           self.displayable = theDisplayable
           self.numRects = numRects
           self.rectWidth = rectWidth
           self.rectHeight = rectHeight

           #Make copies of the displayables
           for i in range(self.numRects):
               self.add(self.displayable)
               self.timers.append(random.random() * 0.1 + 0.1)

       #Rectangles show up on a grid
       def add(self, d):
           s = self.sm.create(d)
           s.x = random.randint(0, 40) * 32
           s.y = random.randint(0, 23) * 32
           s.width = self.rectWidth
           s.height = self.rectHeight
           self.rects.append(s)

       def update(self, st):
           for i, s in enumerate(self.rects):
               if st >= self.timers[i]:
                   s.x = random.randint(0, 40) * 32
                   s.y = random.randint(0, 23) * 32
                   self.timers[i] = st + random.random() * 0.1 + 0.1

           return 0

-----------------------------------------------------------------------------------------------------------------------------

This coding segment is going to be used to create a pulsing vein effect around the edge of the screen. This will represent sanity, stress, eye strain. It is very effective at enhancing the story text with the images as it adds towards the atmospheric tension that will emit in certain scenes.

init python:
   import math
   class AnimatedMask(renpy.Displayable):

       def __init__(self, child, mask, maskb, oc, op, moving=True, speed=1.0, frequency=1.0,       amount=0.5, **properties):
           super(AnimatedMask, self).__init__(**properties)

           self.child = renpy.displayable(child) #The image (or color) being filtered
           self.mask = renpy.displayable(mask) #A mask that hides the image
           self.maskb = renpy.displayable(maskb) #A second mask that hides the image
           self.oc = oc
           self.op = op
           self.null = None
           self.size = None
           self.moving = moving
           self.speed = speed
           self.amount = amount
           self.frequency = frequency

       def render(self, width, height, st, at):

           cr = renpy.render(self.child, width, height, st, at)#.subsurface(((st * 50) % width, 0, width, height))
           mr = renpy.render(self.mask, width, height, st, at)#.subsurface(((-st * 50) % width, 0, width, height))
           mb = renpy.Render(width, height)

           if self.moving:
               mb.place(self.mask, ((-st * 50) % (width * 2)) - (width * 2), 0)
               mb.place(self.maskb, -width / 2, 0)
           else:
               mb.place(self.mask, 0, 0)
               mb.place(self.maskb, 0, 0)

           cw, ch = cr.get_size()
           mw, mh = mr.get_size()

           w = min(cw, mw)
           h = min(ch, mh)
           size = (w, h)

           if self.size != size:
               self.null = Null(w, h)

           nr = renpy.render(self.null, width, height, st, at)

           rv = renpy.Render(w, h, opaque=False)

           rv.operation = renpy.display.render.IMAGEDISSOLVE
           rv.operation_alpha = 1.0
           rv.operation_complete = self.oc + math.pow(math.sin(st * self.speed / 8), 64 * self.frequency) * self.amount #Opacity varies sinusoidally with time
           rv.operation_parameter = self.op

           rv.blit(mb, (0, 0), focus=False, main=False)
           rv.blit(nr, (0, 0), focus=False, main=False)
           rv.blit(cr, (0, 0))

           renpy.redraw(self, 0)
           return rv

image veins:
   AnimatedMask("images/veinmask.png", "images/veinmask.png", "images/veinmaskb.png", 0.15, 16, moving=False, speed=10.0, frequency=0.25, amount=0.1)
   xanchor 0.05 zoom 1.10
   xpos -5
   subpixel True
   parallel:
       ease 2.0 xpos 5
       ease 1.0 xpos 0
       ease 1.0 xpos 5
       ease 2.0 xpos -5
       ease 1.0 xpos 0
       ease 1.0 xpos -5
       repeat
   parallel:
       choice:
           0.6
       choice:
           0.2
       choice:
           0.3
       choice:
           0.4
       choice:
           0.5
       pass
       choice:
           xoffset 0
       choice:
           xoffset 1
       choice:
           xoffset 2
       choice:
           xoffset -1
       choice:
           xoffset -2
       repeat