Interactive Media 13 : Preparation for Presentation

For tomorrow’s presentation, we have decided to create a short video to list out highlights of our game instead of playing it on the day itself to save the hassle of explaining too much with words. I record the screen of the game and edited it into several categories that is easily understood, such as usage of Morality Meter, Making choices and multiple endings etc. I will probably be explaining along the way to make each of them clearer. Sadly, time is really running out and I feel really frustrated that the video could not be polished further. Personally, I have a minimum standard that my work has to reach before I feel that it is suitable/sufficient for submitting, the same goes for the other parts like the ransom video and podcasts. The latter two are not bad but I feel that it could be improved much further and more professionally. It was just so unfortunate we do not have time on our side to create better ones. I will have to take note of this in the next production to ensure we can deliver a higher quality work.

Interactive Media 12 : Final build & Updated Script & Thought Process

Alexandra and I spent some hours re-editing the scripts and trying out best to keep the essential ones only. This helps to shorten the script but not by much, though the quality of the dialogues have been improved and is more natural now. They have been read through multiple times and grammar mistakes are almost eradicated from several play-testing.

Just in case, I have sent the final build to the previous play testers for one last beta test. As of version 3.5, most of the major errors have been fixed, with no problems occurring in both Windows, Mac and Android version. I will be exporting the final build one last time on Monday to ensure it is the Final Version to be submitted.

Thinking back for the past 2 weeks, I did not even believe that I would be able to create such story visual app by myself. Although we have planned for it to be watered down version, I could actually manage to complete the game without it being the main goal of this project. One of the things I felt was the right thing to do is changing from Flash to Renpy. Even though it’s using a completely different programming language that I have learned in Flash during Epicenter lessons, it was the right bet. I doubt I could even complete half the game if I continued in Flash. It’s a good thing I dared to ask the lecturers about using alternative software and it paid off well. Not only have I managed to learn a new software, but I am also becoming more accustomed to the new programming language.

Also, I get to experience the process of game making( or sort-of) with a group. Instead of just one person doing everything, we actually split the works equally. I did the character designs and programming while the scripts, social media advertisements and story is created by others and sometimes together as a team. The game will never be completed if one of us never did their part but alas, I am really grateful that I have a wonderful team. Each of us did the roles well and offered to help one another out, making the project fun and proceed smoother till completion.

Interactive Media 10: Tutorial Feedbacks & Beta Testing

Today is the last tutorial feedback and luckily I have managed to compile everything and the beta works smoothly enough. A day before, I send the prototype to my groupmates and some of my friends to get some feedbacks from them. With the help of many people helping to test the software, I manage to list and found out some coding errors or grammar mistakes along the way. This is one of the reasons I place importance on mass beta-testing, it really enables me to find out most problems within short period of time without having to play through the games so many times. I am grateful to all those who’s willing to take out some time to try my game and will probably credit them in the game itself as a token of appreciation.

The tutorial’s feeback is mostly positive, with the lecturers praising good use of images and sound and even simple effects like screen shaking due to ‘being punched’ etc. They like the character designs and backgrounds, and the music is said to be suitable and fit comfortably with the dark fairytale setting.  Use of well timed and appropriate sound effect is given recognition in most part too. Overall, they like the game very much and are suprised we have a fully working almost-completed prototype to show them a week before submission.

However, some criticism are given which I think it’s not really good suggestion, though some of them are valid and appropriate criticisms. Firstly, they want the text to be automatic and not to click to continue. However, taking account that modern games nowadays employ click-to-contiunue approach, this is actually one of the best method for this platform. By employing clicking method, the player can choose to go through the story at a faster rate or can just take their time playing at a slower rate. Sometimes player just wants to rush through the story to get to a certain point and clicking it helps them, rather than to force them rewatching the same dialogues at the same normal speed, which to them might seem painfully slow. Furthermore, as this app is playable on phone, clicking becomes the de facto method to play this game. Many games have become more fast-paced to accomodate modern gamers, which is used to doing things fast and have shorter attention span..  Thus employing automatic text will actually cause them to lose interest in the game itself.

There are several good suggestions though, one being the dialogues are pretty long winded. I agree to this partly as I have to rush the coding and did not place first priority on the dialogues. Some of them can be shortened or even deleted altogether for a more fast pace gameplay. For this issue, Alexandra will be helping me to check and edit the dialogues to ensure it is shorter and only necessary dialogues are retained.

Another issue is that they want the choices to appear much faster. This can probably be solved by shortening the dialogues but I am aware that this is almost unncessary. The main point of a visual story is the background story and dialogues between characters. Sometimes, adding an unncessary choices right at the beginning can pose problems for the script and the programmer. Alas, we are not creating a full game, which leaves us with so little time to explain the story to the player before they are allowed to make a choice that will affect the course of the game.

One last issue is the suggestion to continue showing the MagicBeans and Morality number meter till the end of the game. I understand that players may want to see how much they have earn or the number of morality at the end to keep score. However, due to this software being a prototype and much watered down version from the intended full game, the importance of magicBeans and morality will only last till the part when Gretel saves Hansel, at which point the game is almost over and those two numbers become unncessary. There’s no valid reason to let them be shown to the players when the game is ending. We don’t normally see money counter or life points during the game ending cutscenes for the reason that they are simply not needed anymore.

Later on, Lydia will be editing her video to reflect the changes from 1000 beans to 100 beans, which is the number of beans needed to rescue Hansel in the game. Petra will also be creating an official poster and logo for the Menu Screen of Sweet Hostage. If I have the time, I may try to animate the Menu Screen to make it more appealing and arouses interest for new players to try.

Interactive Media 11 : Porting to iOS

I was using Lydia’s iPhone 5 for the porting of the game to iOS this morning and realised that it posed to be a big problem. Unlike Android, which is based on open software, the iOS is a close software, and a strict one at that. While I have an easy time porting to Android at the click of a button, porting to iOS actually requires me to be a developer, which I might have to pay for. Thus, porting to iOS proved non-feasible. But thankfully I am able to port to Mac, Windows and Android with not much problem and everything almost error-free.

I have edited some of the Hansel Avatars to form the ghostly version of Hansel that will only appear if the player decided to abandon Hansel. It’s edited in Photoshop and applied the ‘Invert’ filter, it makes everything convenient while conserving the several facial expression of the originals. Time is not really on my side and I couldn’t afford to draw a completely original ones. If only I had the time, I would probably draw a bloodier version/tortured Hansel.

HanselShockedNegative HanselSmileNegative

Interactive Media 9: Multiple Endings & Remembering Choices & More Progress

After coding the menu for choices in-game that the players are allowed to choose, I have tried to experiment on making other characters remembering your choices or previous deeds. This means that if I choose to be a bad character with low morality, the other characters will treat you differently. For example, in the current prototype, player can choose to either betray the 3 pigs and help the Mr Wolfe or help to stop Mr Wolfe from eating the pigs. If the player choose the former, the character Red Riding Hood will appear in the later part of the game and reprimands Gretel for her actions. The same thing happens when the player chose to steal from Goldilock, which Red Riding Hood will know and speak different sentences to Gretel.

Alas, all these choices can be remembered and will lead to different endings. There are currently 6 different endings, of which there are 3 Good Endings that are only slightly different from one another, and 3 Bad Endings that are quite different. Some of the endings are premature endings which happen quite early on if the player choose very bad choices that lower their moralities by a large amount. Luckily I discovered that it is pretty easy to code this feature into the game itself to the simplification of the programming language.

Lastly, the final character to be drawn is the 3 Pigs. They have undergone pretty much changes from the original draft as they look too plain in the original. I have decided to give them shirts and trousers to wear and even some pretty cool hairstyles. Their color choices are based on the green-yellow-orange, a line of colour that is able to be mixed nicely, representing the 3 Pigs who are brothers. The three of them are their own being yet they have strong bonds with one another. The eldest pig is drawn to be more mature than the other two, with the youngest looking more child-like. Due to time constraint, I have not been able to find time to draw them separately and thus they are drawn as a single character avatar. However, due to the fact that only two of the pigs talk, it does not pose much of a problem to tell which pig is talking. I have made distinguishing the pigs easier by color coding the name, so the Eldest Pig text name and Youngest Pig text name will have different colours.

3Pigs 3PigsSmile

Interactive Media 8 : In-game Choices & Exporting to Android

Today I have experimented with in-game choices, as this is what made the game having multiple choices for the players to choose to experience multiple endings. Starting up, I check the tutorial for game choices, which is available in the software itself. Using the original script, I created 2 simple menu that looks like this:

Screen Shot 2015-04-18 at 19.59.05 Screen Shot 2015-04-18 at 19.59.11

At first the menu is hard to read due to the text being white and the box is paler in colour. Luckily, I manage to solve it by going through the settings and change it with coding too as seen below:

Screen Shot 2015-04-18 at 20.04.26

The colours, font type, font size and even bold or italics can be coded to fit what I want, Python language really is incredibly easy to type and understood. It uses HTML colour code which is one of the more used system in the website. I always employ the website,, to help me determine what code I need for the particular colour that I would use in-game.

I used it for giving different character’s name a different colour so as to make them more visible for reader to know who is talking.

Screen Shot 2015-04-18 at 20.14.33 Screen Shot 2015-04-18 at 20.14.40 Screen Shot 2015-04-18 at 20.14.49

Screen Shot 2015-04-18 at 20.05.59

Lastly, I have also tried to export the beta version to Android and turns out it WORKS wonderfully without any major hiccups. Thanks to the simplicity of the software itself, allowing me to export to Mac, Windows, Linux, iOS and Android easily.

Screen Shot 2015-04-18 at 19.59.24 Screen Shot 2015-04-18 at 20.08.5111160552_10205695555822554_1220378296_n

I have also added a new avatar for the bear that will be accompanying Goldilock.

3BearsThe bear is designed to look like the real bear, but still wear a pair of trousers to make it more human-like/fairytale like. I make sure not to change the appearance to differ from the original too much to keep authenticity.

Interactive Media 7 : Programming with adding effect to Image and Music & Progress

After further learning of the code process using online materials such as (Renpy wiki) and Forums, I start to get the hang of how things work in this software. And through all these, I am finally able to add effects like ‘dissolve’, fade in fade out for both images and music. Scaling of images can also be done through coding, along with the colour of the menu buttons etc. Everything can be changed with just a few lines of code or editing of the original!

Renpy really makes things easier than Flash. I made use of some Royalty Free Music from youtube and convert them to .mp3 format using the website ,, while the images are taken from my group-mates who designed/gained them from some supposedly royalty free sources.

Much of the problem has been solved now and all that is left is for me to draw more characters as avatars for the game, along with tweaking/editing of the background picture to give a feel of morning, day or night for further realism. Characters conversations has been smoothed out and reedited from the original ones, as I felt that the latter is a bit too long or wordy. I found that a shorter and simple sentence fits the visual story as it also depends on visuals to tell the story, so I try to focus less on the words, though they are still important.

Next I’m going to try exporting the app to Android for testing of the platform, however, I run into some weird problem that prevents me from doing so. It could be something to do with the coding it seems. Gonna check out the forums again for better understanding of the code error.

Meanwhile, Goldilock’s Avatars are finished, but I must admit I’m starting to run out of ideas on how to make her stand out. As she is a performer in this story, I tried to give her a more funky looks, with glasses, and star tattoo on her cheek, together with purple hair. I felt that this character still lacks something essential to have it at the same level as Gretel or the Witch, so gonna ask the group to hear their opinions in this!

GoldelockNormal GoldelockSad

Day, Night, Morning changes to background

Screen Shot 2015-04-17 at 01.13.35 Screen Shot 2015-04-17 at 01.14.06 Screen Shot 2015-04-17 at 01.14.29

Interactive Media 6: New Software for Programming

After today’s tutorial, I am so glad that we do not have to use Flash to create our app. From my past experiences, Flash has always given me headache and makes things much more complicated. I have tried several times creating just a single menu screen with button and it took me two days just for that. The coding, ActionScript 3.0, is hard to understand and requires certain knowledge of programming, making it less user friendly.

Luckily, I have been searching online for alternative software that specialises in Visual Storytelling and finally found a free one, that is available for Windows and Mac, while being able to export to iOS and Android for the final product. That software is called Ren’py.

Screen Shot 2015-04-14 at 23.02.13

Ren’Py allows the user to easily create interactive storytelling using images, sound and text. It’s program employs Python as the programming language. This is one of the easiest language to learn and understand. I have tried my hands at learning it and is able to grasp everything much faster than ActionScript 3. There are fewer lines typed for the same functions, allowing me to dedicate most of my time on the art, music and story. This software simplifies many of the processes and there is even a built-in tutorial explaining what I EXACTLY needed to know to start creating interactive media storytelling, which saves me time from randomly searching online only to find answers that I don’t really need for my situation or usages.

Today, within 3.5 hours, I have already set up and created first few dialogues exchange between characters and also include some music. Normally, this would have taken me much longer to do in Flash, and doing it here makes it less error-prone, due to the simplicity of the programming language and the software. I will be doing more research on the Python language to ensure I am able to create our app on time.

Screen Shot 2015-04-14 at 23.09.04

Interactive Media 5 : More Designs

For the past few days, it’s mostly spent on character redesigns, giving them modern twists; a modern fairytale. It is a world filled with dread yet colourful.

For Gretel case, she is completely redesigned from the original draft. I feel that the main heroine has to stand out more and unique personality and look. The original draft is too generic and plain. I gives her the blonde hair, which is same as Hansel, but in addition, she is made to have dyed her hair blue at her ends. This colour is quite often seen nowadays and is relatable to the modern world.

I cut her hair short, from the long one in the original, to make her seem more independent and a stronger girl. ‘Candy’ eyepatch is added at almost the last stage, just make her stand out even more. Her clothing of brown and striped cloth underneath is made to contrast with her hair colour, so as to not take too much attention away from the face.

For the witch, she has been 100% redesigned, using one of the pictures drawn by a group mate, which I used as reference. She is now more traditional looking, but with a rainbow hair to give contrast to her villain roles, and that since her house is made of candies, the hairstyle is designed to resemble similar stuff. Her shirt is toned down so as not to be too colourful that it distracts people away from the face.

Mr Wolfe is still the same, just that I give him darker colours to symbolise evilness and cunningness.

Original Reference for the Witch11041882_10153250051124448_5123938376153059616_o

GretelAngry GretelNormal GretelSad GretelSmile WitchesNormal WitchesSad


Interactive Media 4 : Official Colouring & Redesign of Character Avatars

The Easter breaks have become the time I do some work, starting with redesigning and colouring of the character avatars for use in the game. After a careful consideration and looking over the original character designs, I feel that they are a bit too two-dimensional, very flat character with nothing much that makes them unique.

With this in mind, I decided to add more splashes of colours and fashion, especially to the hairstyles, hair colour and also the shirt that they are wearing. Since this is is set in the modern time, I have planned to make it relevant to what we can normally see today, like, in this case, Hansel with a brown jacket and an inner layer of striped cloth, with his piercing near his mouth.

Each day is spent drawing the initial rough sketchup before marking the thick lines and applying colours. Artstyle wise is using hard brush, making it seem more like crayons or solid just like what’s normally seen on children fairy tales illustrations, with a modern twist.

Today is designing the characters of Red Riding Hood and Hansel. As we are making sort of Visual Novel type of game, I have created several different expressions, mostly different mouth posture to give the effect, simple but effective.

Screen Shot 2015-04-14 at 20.03.06 Screen Shot 2015-04-14 at 20.03.22 RRR Normal RRR Smile RRR Shocked HanselAngry HanselSmile HanselShocked HanselNormal