Layout Inspiration

Color and Font

Proposal: My app is a Outfit Of The Day(OOTD) app which is for consumers to know where the products are being bought from an instagram OOTD post. With this, once the user click on the link that directs it to the shop where it is bought, the user can see the nearest outlet and the price.

Bad Website Issues

Web Version

Mobile Version

In (8th September 2016)'s games design class, we had discussed on the storyline of our own game. For me, I had finalized on the theme which is desserts. The storyline needs a bit of tweaking because I would have to create a much more substantial reward in the end. I now have to create a reward, find inspirations and references of what I want my game to look like.

First Storyline

Theme: Desserts

Objective: A aspiring chef helper that needs to collect all the ingredients needed to make the perfect dessert.

Storyline: The aspiring chef is currently just a chef helper, and needs help to buy and collect ingredients as the one that this aspiring chef is under is an owner of the bakery. The owner of the bakery entered a competition and needs the chef helper to buy the ingredients since they just realized they didn't have enough ingredients. The chef helper is in a rush because the competition is on the next day. The chef needs your help to collect them in time. So in this case, the storyline is now about the chef helper (it's their job) to help find the ingredients because they're authentic ingredients where you can just find it at a nearby store. So the levels would be changed according to what sort of competition it is. There's simple recipes and harder recipes as it goes a level higher.

Target Audience: My targeted audience is girls aged 7-12. The simplicity of the gameplay would make it easy for them to understand and play the game. It can also be played for older kids if they'd liked.

Ideas for reward system: 

• Difficulty: Easy
• If they collect all the ingredients the happiness of the customers/judges is 100%. If it's not enough ingredients, it will be less than that. This can happen because if they jump or duck at the wrong time, they'll miss the ingredient.
• Difficulty: Medium if it's side scrolling.
• There is a timer where they need to collect all the ingredients. If they don't get all of it in time, they automatically loses.
• Difficulty: A bit hard if it's endless run so this is if it's side scrolling.
• There are several types of the same ingredient. They all have different points or something like XP, where the higher the number is, the better the dish is going to be and so the happier the customer is. For example, there are two or three types of butter, the butter with the most points is the premium butter and so in the end of the game, if the player successfully collect the premium butter, the better and delicious the dish, the happier the customer is. 

Character look & feel

Something like this, with round eyes and a chef apparel.

Alternative Storyline within the same theme
The chocolate chips have escaped towards the dessert making factory. It is up to Emily to go and chase after the chocolate chip cookies. But wait, there are obstacles such as gooey chocolate quicksand, and cookie shaper along the way that you would have to avoid.
_____________________________

Alternative Storyline 1 (in progress)

Theme: Galaxy; Alternate Universe

Objective: To help find Orion's lost star and become the hero of the galaxy.

Storyline: A character who wants to be heroic and to prove it he is gonna help search for one of Orion's stars. But there are others like him and are worried he might find the star first, so things get in his way.

Gameplay: Collect stardust but is stopped by quicksand or ...
_____________________________

Alternative Storyline 2 (in progress)

Theme: Nature

Objective: To chase after the creature and give back it's possessions and find out more about the creature and it's possessions.

Storyline:  In this universe, lives a lonely character on a journey. One day, while it was walking through the woods, it stumbled upon gem stones and decided to follow it. It then led to the most beautiful creature it had ever seen. As it was about to approach the creature, the creature ran away but it left something behind, its bag filled with its possessions (which consist of the pictures that character knows). As it wanted to know more,, the character went to go chase after the creature by following the gem stones that marks the trail.

Gameplay: Collect gems but there's obstacles like wooden logs and etc.

What I am putting

Storyboard

My reference video is like these two introduction videos, where it is a mix of illustrations, voice narrative, music and video.

https://www.youtube.com/watch?v=2qoIIa3B88c
https://www.youtube.com/watch?v=aspaCObUD4Y

I plan on trying to use any of these transitions from these videos
https://www.youtube.com/watch?v=RSsYMEyZCJM (0:19 - 0:30)
https://www.youtube.com/watch?v=4m9IQSpCNr0

Here is my moodboard:


Inspiration

Gif of my animation in class (9th September 2016)

In class, I learned more on how the trim path works, and also a new effect called the venetian blind. We can use the trim path to make a trail or make it follow the path we created. We would just have to play around with the start and end keyframes, by offsetting it too, creates another effect. The venetian blinds is an effect that describes what it does. It basically creates the illusion of a venetian blind. We can play with the width of the stripes, the angles and etc. Other than that, he revisited on the topic of expressions, such as loop, ping pong, and wiggle. The wiggle expression can randomize anything.

Venetian blinds effect used on the word hi

These first 2 weeks, we had learned how to animate the texts which include enlarging them, offsetting the characters, played with the z position and etcetera.

The first week, I had learned how to offset the characters of the word, playing with the character of the word by rotating them around in 3D and how to easy ease the keyframes. Other than that, I changed the color of the text by making a drip effect momentarily and then going back to the original color. For that, I had learned how masking works. Mr. Kannan also taught us the shortcut keys including on how to snap the anchor point by holding the control key. By pressing y, is the shortcut key to move the anchor point. Other shortcut keys are similar to photoshop and other adobe softwares. One of the most useful one for me is cutting the timeline according to the marker which is by pressing alt + ] and alt + [ depending on which side we would like to cut. One other shortcut key I find useful is j and k, to go to the accurate point in a keyframe.

Here are some snapshots of what I did in class as an exercise:

Character Offset

Character Offset + Duplication with a different fill color

Rotation of Z positioning of 3D character

Masking with 'dripping' effect

Final look

gif of the text animation

The second week, Mr. Kannan had taught us more about masking, about the graph editor and how we can change the speed of our keyframes, null objects (making circular rotation on the z-plane) repeaters, alphas, expressions, and how to animate text using by using the trim paths. After a few experimentations, I realized that the graph editor and easying ease the keyframes makes the transition smoother; by using repeaters, we can a make burst effect; the power of the track matte where you can reveal underneath the shape layer as it moves or hide the layer underneath it; ping pong effect and loops can be created by using expressions; by using trim paths, your text can be transition into the screen into a whole new level.

Here are some gifs of what we did in class:

rotation with a null object

more text-animations with track matte

gif of hello with trim path (press if it doesn't move)

 Note: The animation look choppy due to low frame rates

Things I have finalize last week was the target audience, which is for kids.

I have looked at several games and how their gameplay works. One that I had personally was inspired by and would like it to be my reference game is Jetpack Joyride, due to its simplicity.



For now, my theme is Aishah's bakery (not the title). I had settled on this idea after discussing and thinking about it more with my sister herself.

Storyline:  There is a pastry competition where the best chef who wins will get their own bakery. The pastry chef would have to create their perfect dessert. However, they would need to get the ingredients, to get them, the chef would have to run through obstacles while collecting the ingredients.

Gameplay: The player collects as much ingredients as they can or the number of ingredients needed for the chef, before the other pastry chefs gets it. Along the way they can collect coins to gain  The obstacles is that they will be icing sugar on the floor where the player would have to jump over it, if they run over it, they'll become slower (or lose points, TBD). But, if they collect lollipops, they will gain energy where they will boost their position amongst other bakers. There are one more obstacle which is if they are hit by cake batter, or cookie dough, they automatically lose.

My elements would consist of bakery ingredients such as butter, sugar, eggs and etc. I would want the style of my elements to be like the emojis on iOS like so:





Color Palette: Sweet (maybe pastel)

Art Style*: Like Jetpack Joyride in terms of having outlines and clear fills. It'll probably be a flat design (where theres only a shadow and no highlights). I would probably want to implement emoji-like features into the game but I'll try to ruminate on this more.

*subject to change, still under process

"4th September 2016"

These notes were jotted and these ideas were brainstormed during the classes in Week 1.



Following is a written version of it.

Some of the themes and elements I had in mind were:

• Aishah's (my sister's; could be anyone else's) Bakery 
• Malaysian characters (they can choose and make their own character)
• Castles, princess, medieval era and etc.
• Tribal patterns; jungle theme; stranded on an island (something along the line of Moana)
• Dystopian; buildings covered with vines;
• Futuristic; Robotic 
• Using Emojis

Testing testing 123

Testing testing 123