• Home
  • Games Design
  • Mobile Apps I
  • VFX
  • Advertising
  • CPA
  • Experiential
  • Mobile Apps II

Slider

Yasmin - 0325946 - BIMD AUG 2015

I had made some micro interactions using After Effects. It is quite a process where you have to export it as a video, and then import to Photoshop and export it as a gif. What I dislike about this process is that if the page needs minor tweaking or updating, I would have to reimport to Photoshop and it repeats. So, in order to avoid that, I had make sure before exporting it as a video on After Effects, that there are no minor things that need to be fixed. However, mistakes happen and nobody is perfect, so there is really no way around it. It is a trial and error process.

Here are some of the gifs that I made.

loading page

landing page
home page

men's menu

women's menu

sidebar menu
Items page

Item page



Here is the link to my prototype in inVision for better view of the app I created.

Text UI
Private = can't be affected by other scripts

void Awake = similar to start but it will be processed first before the start.

++ incremental, add one
-- minus one

Instatiate (what, where.position,where.rotation) as Rigidbody;

transform.right (moving to the right)


public float 
The term public will make it adjustable on the Unity inspector meaning that we can change the value there instead of in the C# script.

For the variable float, we would need use the a decimal value and end with f.

/* multi land command */
// single line command

print (check console)

Variable types
int = integer (whole numbers)
bool = boolean (true or false)
string = collection of characters

Arithmetic Operators
+ Addition
- Subtraction
* Multiplication
/ Division

Comparison Operators
== is equal to
! = not equal to 
> larger than
< less than
> = larger than or equal to
<= less than or equal to

Switch Statement

switch (weapon)
{
  case 1:
   print ("You found life");
   break;

  case 2:
   print ("You found nothing");
   break;

  case 3:
   print ("You found greatness");
   break;

  default:
   print ("You found ______ ");
   break;
 }

default is used when there's nothing else

Naming Convention
FirstCapital: Function
secondCapital: Variable

void: function
start (at the start of the game)
update (every frame in the game)

custom (); to execute play/use it.

call upon by key (Input Manager)
if (Input. GetKeyUp ("space")) {
custom ();
}

Vector 3 (x,y,z)



This was done using the element 3D plugin. This can help for our title sequence assignment. 3D helps make a footage more realistic. 
Character in Environment
*Artwork not final
The background environment will consist of enlarged ingredients.
Game Keys
Keyboard
Action
Space bar
Jump
↓
Duck
←
Move Forward Slower
→
Move Forward Faster

Screen Shot 2016-10-17 at 7.47.03 PM.png
Character with villain (Artwork not Final)

Game Keys with Villain

Keyboard
Action
Space bar
Throw item/ingredients that were collected
↓
Duck
←
Move Left
→
Move Right
This exercise basically makes a still image alive as if it was a video by using as if there is camera movement. This is achieved by using the grid, camera and light. The grid is used to identify which is the floor, the sky, the left side, and the right side. Then the light would vary according to the layer, whether to cast shadow, accept shadows, accept light and etc.

Here is the result:
*one of the three tries we did in class. but this picture is my favorite :D
Game Screenshots Breakdown
Characters
Description
Main Character: Amelia
  • Passionate
  • Loves pink
  • Cute
Screen Shot 2016-10-17 at 7.47.03 PM copy.png
The Mad Mixer (Artwork not final)
  • Not in the mood to bake at the moment
  • Stubborn
  • Throws fire sparks at Amelia
  • The character's life/health bar will decrease in the final battle if hit.

Obstacles
Description
Hot chocolate puddle
Player would have to jump over it by pressing space bar.
This will decrease the time limit as it is hot.
Milk drips
Player would have to time when it’s going to drop so would have to estimate whether to jump or duck.
The player will lose one random ingredient according the amount displayed underneath the ingredient.
E.g: since one sugar is 10g, so 10g of sugar will be minused off. The ingredient will be chosen at random.

Attack of the utensils
Player would have to avoid it by jumping or ducking, according to the incoming warning (!!)
The player would have to restart the game in order to continue.


Collectables
Main Ingredients
Description
Strawberry
Requires 500g of strawberries.
Players would have to collect 25 of these.
Chocolate
Requires 150g of chocolate.
Players would have to collect 10 of these.
Butter
Requires 200g of butter.
Players would have to collect 4 of these.
Corn Starch
Requires 30g of corn starch.
Players would have to collect 3 of these.
Flour
Requires 125g of flour.
Players would have to collect 5 of these.
Milk
Requires 400ml of milk.
Players would have to collect 4 of these.
Egg
Requires 4 eggs.
Players would have to collect 4 of these.
Sugar
Requires 350g of sugar.
Players would have to collect 3 of these.


Other collectibles
Description
Donut
This will increase the time limit.
Pastry Hat
This will form a bubble around the character which protects the character from obstacles.
Coins
Coins are used to upgrade equipments and power ups.


Game Genre
2D Adventure Running Platform Game
Educational Value
In this game, players will be educated on increasing knowledge in cooking skills as the way the game is played is similar to real life. The fact that they are collecting ingredients that are the same measurement in real life, they can try out the recipe. This also requires them to use mathematics as their needed ingredients are spread out through grams on the platform. This game also helps in concentration and focus ability of the players since they would have to pay attention to which ingredients and also the obstacles that are in the game.
Target Audience
Young Adults
Platform
Mobile and Web based
Look and Feel
This game will be done using vector arts on Illustrator. The images will be in 2D and a cartoon style to it. The colors would be pinkish and have food elements. The obstacles would consist of elements consisting of desserts like hot melted chocolate, milk droplets, cake dough and etc. (refer game screenshot for visuals starting from page 6)
Game Summary
Help Amelia make one of the most hardest dessert as well as increasing her bakery skills by collecting ingredients that she needs to complete her task. The problem is she has a tough time collecting the right amount of ingredients. So Amelia needs guidance from the players in order to not waste time and only collect the right amount of ingredients she needs. There will be a bar on the screen that will assist in how much more of that specific ingredient that she needs. In the end, she will have to assemble all these ingredients with the Mad Mixer who is stubborn. Amelia would also need help in throwing in the ingredients in the mixer.
Game Overview
In this game you are tasked to assist Amelia in collecting all the ingredients she need in order to create a Strawberry Chocolate Cake. The problem is she has a tough time collecting the right amount of ingredients as the ingredients will be spread across the platform with their weight underneath it. She has to collect the ingredients according to the amount she needs. She would also need to assemble the dessert by throwing it in her mixer. But, her mixer is stubborn. So, the player would need to help Amelia.
The required ingredients will be displayed in the screen and you will be able to see how much an ingredient weighs in the platform. The obstacles will minus off about 10 seconds from the current time limit, so make sure to avoid these. The obstacles include hot melted chocolate which has to be avoided by jumping, drips of milk from above which requires estimation skills whether to jump or duck and the attack of the utensils which has to be ducked. There will also be bonuses and special items that can be collected. The bonuses which is a pastry chef hat will create a protective bubble around her which allows her to float and be protected from obstacles. The special items which is a donut will increase her time limit.
Once you open the game, there is two options. To read instruction or click play. Once you click play, the game will start with an opening scene of how Amelia wants to be a baker and she asks help from a well known baker in town. The baker agrees to help train Amelia. One of the first test, is to collect ingredients to make a Strawberry Chocolate Cake. So then, we are brought to the scene of the game which is inside in the ingredients world. The faster that she is able to collect all the ingredients and assemble the dessert, she would be able to collect medals and create achievements for herself. Players can compete with each other to achieve the best possible completion time. The completion time will be shown on the high score leaderboard.
In the world, when you click play. She will automatically be running collecting coins along the way which she can use to upgrade her outfits and equipments. This can help her in the long run as the better equipments she has, the faster she can level up and the frequency of bonuses increases during the gameplay.
Gameplay
You will start the game by being shown of how to play the game and also what ingredients you would need to collect. At the same time you would need to be aware of obstacles.The ingredients that you collected will be displayed on the platform. There are bonuses which can protect the character from being affected by the obstacles. Once she’s been hit by the utensils, the game restarts. So, help Amelia avoid the obstacles, assemble her dessert and collect the ingredients in the fastest time possible. In the end, she will also face her mixer which will be stubborn in assembling the dessert. The player will be able to move left and right to avoid fire sparks from the mixer while Amelia will need to throw the items she collected to bake the cake. Before the actual fight an instruction will appear. There will be a HUD indicating the life/health bar for both the hero and villain to give an indication who is currently winning. If Amelia is successful then the cake will be baked to perfection.


My idea for second assignment is to use sceneries and put them in places that you don't usually see. For this, I'm planning to use clips of the windows of my house and show the sceneries in them. 
Particles have the power to replicate rain, snow, explosion and so on. For this exercise, it was used to create rain. The rain drops was done using CC Mr.Mercury and it can imitate blobs, drops and etc. There is a lot of things to consider when it comes to replicating elements such as the rain, you have to think about the gravity, the resistance, direction and so on.



The still image looked like a video with the use of CC slant, wave warp, and overlaying of clouds. The CC slant was used on the grass to move by pinpointing the floor and moving things above the floor left or right. The wave warp was used on the lake where the use of wave type could be chosen, wave direction, width and height. The clouds was overlaid over the image to create the atmosphere of the setting.


Our next learning exercise was 3D tracking. It was quite challenging at first to understand how it works. But, after playing around with it, these are what I came up with.



The first gif was done using 3D camera tracking which tracks the camera and it will show track points like so. With this points you can select it and create a null object in which other footage or images can be parented to. This will then make the image/footage remain where it is. Instead of following the movement of the handheld camera, it will follow the 3D track camera.



The second gif was done using the "Track Motion" technique which pinpoints and tracks the area that has been selected in the footage. There will be keyframes which would have to be copy pasted to the wanted element/footage to be attached to.





Personally, I prefer the track camera method because of it's flexibility. If I decide to use another tracking point within the footage, it will be easier to create one since it would already be rendered before. The track motion would be useful if I have already set my mind to the object I want my element to be tracked to. Either way, 3D tracking is a cool thing but it takes time and patience to learn, understand, and especially to wait for it to track.
Newer Posts Older Posts Home

ABOUT AUTHOR

Yasmin Kamarudin
a year older on the 19th of May
Taylor's University BIMD
Malaysia

Blog Archive

  • ►  2017 (11)
    • ►  July (4)
    • ►  May (1)
    • ►  February (4)
    • ►  January (2)
  • ▼  2016 (41)
    • ►  December (7)
    • ▼  November (22)
      • My own micro interactions
      • C# Script Notes II
      • C# Script Notes I
      • 3D Element
      • Environment + Game Keys
      • Exercise: Still Image → Video II (3D Camera)
      • Game Assets
      • Game Flowchart
      • Game Details (GDD)
      • Assignment 2: Matte Painting
      • Exercise: Particles
      • Exercise: Moving Still Image using puppet tool
      • Exercise: Still Image → Video I
      • Exercise: 3D Tracking
      • Exercise: Swipes and Blobs
      • Micro Interaction
      • Presentation Feedback
      • Self-Promotional Video Final
      • Progress of Mock-ups
      • Wireframes / Flow Chart
      • Survey // Survey Results
      • Idea Progression/ Choices
    • ►  September (12)
Powered by Blogger.

Copyright © 2015 Yasmin - 0325946 - BIMD AUG 2015. Designed by OddThemes