Muse button testing

This is test of interactivity of my app. Using Adobe Muse I’ve created three pages with a button. Each button is linked to another page. This was a testing to see how buttons will be linked on an actual app.

At first I’ve created a home page with a green colour and a number “1”. Then I added a button and coloured it black. I’ve created a second page and and copied the same content, just now I applied blue colour as the background and changed the number to “2”. Finally I’ve created a third page with a purple colour and a number “3” on it. On the “1” page I linked the black button to a page “2”, on the “2” page I’ve linked the button to “3” page, and on “3” page I’ve linked the button to home, which is called “1”. In preview mode (as we see in the video) when you click the black button it takes us to the page we have linked to.

Advertisements

Barry animation

Inverse Kinematics – animation where one point affects other points while moving

Forward Kinematics – different points of animation working individually

To create a character first thing we need to do is to create a rig. Any character needs to have a skeleton with different parts (head, hands, torso and etc.) This time with Barry character a skeleton rig has been already created for us so we had to apply it by going windows-animation editors-quick rig. Then this window with different joints appear:

Screen Shot 2017-11-20 at 11.22.49.png

By clicking a joint it appears on the character and we can move, scale or rotate it.

Screen Shot 2017-11-20 at 10.51.09.png

Using these functions I’ve tried to make this character walk using a walk cycle reference:

walkacyle.jpg

On each key frame I tried to change the character’s body parts location and create movement to make it look like as he was walking.

Screen Shot 2017-11-20 at 10.54.34.png

However the first time creating the walking cycle wasn’t successful because it looked unnatural. To fix that problem I had to create more keyframes in between and add more detail to rotation an movement.

 

TASK 2: First game concept and story

This is going to be my very first game concept and story. I came up with this idea when we got the tasks handed in. I always enjoy creating stories which could have a deeper meaning and make you something learn from it. A story with a lesson and and deeper thoughts in it might make people relate to it, which could make them more attached to the game.

When I just created this character I felt really attached to it because I really liked her personality and the person she was – someone who is reserved but will do anything and fight for the people she loves.

The atmosphere of the game would have been really fast, energetic and exciting, because she would have ridden a motorcycle and would have travelled with it exploring new places. It also had to be the main icon of her, which would define and explain her personality.

However, I wasn’t allowed to make her have a motorcycle, and I recently realised why – I wouldn’t have to make the jumping and walk cycles and it would have been too easy.

Perhaps it doesn’t sound like an important detail, but for me it was and it meant quite a lot to my story. Because of that I’ve decided to change my whole character and story into something different.

Here is the concept art for my character and the game story behind the pictures:

She’s a sporty and daredevil looking character. Her name is Lea. She has a scar on her face and a bunch of tattoos on her arms.

Back in the day she used to be an innocent and naive girl. She was living with her father far in the mountains and forests. The view from their wooden house was incredible.

Her dad, Adrien, was a member of a mafia group. However, he wasn’t a bad guy, just the fate pushed him this way. He loved his daughter more than anything else and would do anything for her. Lea was everything he had since the mother was kidnapped by other mafia gang for a blackmail. Sadly, after a certain amount of money paid they never returned her. Adrien went furious, and him with his other group members went to fight them. However, the other gang was bigger than expected and Adrien had no other choice than to leave his members and run away so no one could find him. He knew they were all going to get killed. Of course, he felt sorrowful for his betrayal, but daughter was his main priority. So Adrien with Lea travelled to a God’s forgotten place, where the only living were them, animals and the nature itself.

Lea didn’t know his dad was involved in any of

this. Adrien was making his best hiding everything and that his daughter is living a peaceful life. The father taught her a lot of different things, from reading to fighting, since Adrien used to be a professional boxer. Also, dad knew how to build a lot of things. The last thing he was building was a motorbike which put his all heart in. ‘After I finish this and you grow older you’ll go up those hills going so fast as the flying wind, looking at all this beauty of our nature and feeling like you own the world.’

However, a day came when the peace was destroyed.

The mafia gang came back. They needed Adrien because he knew some important information that they needed. They came at night and took the father. Lea tried to help and fight them back, but she was too weak, and she got a scar on her face when one of the members attacked her with a knife.

17 years old she was left alone in the woods. They destroyed their furniture and the house, took everything that was precious to them. One thing they’ve left was the motorbike dad just finished building, which was at the small cabin a bit further away from their house. She wanted to bring her dad back, so she went on a journey back to the dark city sitting on the only thing her dad has left – the motorbike dad has put all the heart in.

Screen Shot 2017-09-20 at 11.55.29.pngHere we can see I’ve already started working with the Illustrator and doing the colouring. I still wasn’t decided which colours I wanted to use, but at the moment the red hair colour seemed the best colour to match her brave personality.Screen Shot 2017-09-20 at 12.32.26.png

The idea of city environment and fighting I got from the game called ‘Final Fight’ which I did the research on. I think the game atmosphere, background and palettes of this game would have looked similar to mine.

Super_Nes_-_Final_Fight_2_Intro.jpg

TASK 2 : Second game concept and story

I was thinking what story should I use to make it more meaningful since I have abandoned the previous story. I thought I would go with something relatable to more people – anxiety and depression. These days a lot of people, especially teenagers, are suffering from these things. Making a game about it will make them relate to it and feel closer and more attached to the game and it’s story.

Nonetheless, it might even help to overcome these fears since it will remind them they’re not alone and that if you look at things from the other side everything can get better.

Story:

The story is about young girl who falls asleep, while she is asleep in her mind she is travelling where the game takes place.

She suffers from anxiety, depression and paranoia. She understands that all these fears are deep in her unconscious mind. When she is asleep her sub-concence brings forward all the problems that she faces in her normal life.

Gameplay:

When she falls asleep and the gameplay begins, the first thing she does is to find and destroy the 3 monsters. (Game will contain 3 levels). Nonetheless the game level that I like to develop is about anxiety.

Each monster will be like a boss at the end of the level. The main monster will send smaller monsters which are a part of him. These will try to wake her up so she doesn’t reach the root of her fear in her unconscious mind (the monster).

For example, she’s trying to chase the anxiety in her mind. The anxiety will send small monsters such as ‘hopelessness’ and ‘guilt’ so she wakes up and doesn’t reach the root of her main problem – depression.

She will have to fight them off to stay awake and get deep into her mind to fight her fear. After she wins the fight against the boss she will get rid of the monster also known as some kind of disorder.

She will also have to collect 6 crystals. The crystals will appear each time at once, and after she collects the first crystal the second one will appear at the other place. While collecting the crystals she will have to avoid the smalls ‘bullets’ which the enemies will be shooting. Some of the platforms and enemies will be moving to sides or up and down. You will also be able to collect 2 shields which can protect you up to 3 bullets and 2 lives which will appear as hearts.

After collecting all the crystals the skulls are going to disappear and the slowly falling petals off the tree are going to turn black. The girl will have to make her way to the doors which are in the top right corner to get to the next level.

If you lose all your hearts, she wakes up from the dream and game is over.

There are going to be 3 levels and each of them is going to get harder. After she completes them she will have to fight the main boss which, in this case, is going to be her ‘anxiety’.

There will also be a tree in the middle to separate platforms in two sides. To get to the other side you will have to take the doors, and this is how you move between two sides. Other asset which is going to help to move between platforms are ladders:

As we can see in the picture I wanted to create a pastel and dreamy looking background which would create a mysterious and out of this world atmosphere. Since she is in a dream, I used stars and put a big moon in the background. The whole mood of the game background and visuals looks quite positive. However, the enemies are going to appear in a black colour which will be a good contrast to positive and pastel looking background.

I put the HUD at the top to not draw too much attention

Characters:

You
Anxiety + panic, fear, shortness of breath
Paranoia + betrayal, anger, mistrust
Depression + guilt feelings, hopelessness, decreased energy

I made a little research on how these disorders affect the person and what are the symptoms. I used the symptoms to be ‘the smaller monsters’ which are the part of the ‘main monster’.

Screen Shot 2017-10-03 at 10.32.26.png

Screen Shot 2017-10-03 at 10.31.38.png

Screen Shot 2017-10-03 at 10.31.09.png

The art style of the game

For the scenery I want it to look creative and have no limitations (since dreams can be anything). I want to use surrealism as the art style of my game. I would use different images and merge them together to create interesting sceneries. For example, something like this:

However, I’d like to use different colours. I want them to be more vibrant and psychedelic looking. Something like this:

The art style of the ‘monsters’:

They will be dark like silhouettes with faces. Each monster will have different attributes

Maya lighting

Six types of light sources:
ambient – brightens all parts of the scene uniformly
useful for simulating a combination of direct and indirect lighting
directional – even illumination of a scene using parallel rays of light
useful far away sources (ex: sunlight)
point – light radiates in all directions from a single point
ideal for omni-directional sources (ex: lightbulb)
spot – creates a cone of light in one directions
useful for beams of light (ex: flashlight, lighthouse)
area – 2D rectangular light sources
useful for windows, ceiling lights (longer render time)
volume – light fills a 3D shape (sphere, cylinder, etc.)
useful for a visual representation of the extent of the light
create – lights
three point lighting
key light – main source illuminating the object
secondary (fill) light – highlights details of the object
back light – distinguishes the objets from the background
attributes of light:
intensity – how much light emitted from the light source
fall-off/decay – how much light diminishes away form the source light (fall-off)
cone angle – width of the lights cone of influence – area outside cone not illuminated
penumbra angle – fall off at the edge of cone angle – more gives a softer edge to the light cone
drop-off – how much the light diminishes at the outer edges
colour – set an RGB colour for the light – affect colour of scene
light controls
aim from/aim at
fall-off rate
cone radius
penumbra/umbra control
non-linear fall-off
all in one control
two types of shadows:
depth math
raytrace
three types of shadow effects
hard shadows
soft shadoes
fall-out – shadow becomes lighter at the top of the shadow
Shading
its a combination of the basic material of an object and any textures that are applied to it
window – rendering editors – hypershade
types of materials:
blinn – used for metallic surfaces
lamber – matte surfaces
phong -shiny surfaces
standart AI
Robot tutorial:
 
I started off by creating three Ai Area lights. I done this by clicking on Arnold>Lights>Area Light. I positioned the lights on either side and one in the center above the robot.
Screen Shot 2017-11-06 at 11.08.38.png
Then I increased the exposure of the lights to 8. I enabled the colour temperature and left it at 6500. This will gave a cool blue feel to the light. I selected the light on the left and did the same, but now I used a warmer colour, and set the temperature to 4000.
Screen Shot 2017-11-06 at 11.07.30.png
To reduce the noise in the shadows from the Ai Area lights, I increased the light samples to 3. However,  the higher the number of samples, the lower the noise, and the longer it takes to render.
Screen Shot 2017-11-06 at 11.12.56.png
I’ve assigned an Ai Standard shader to the robot. I lowered the diffuse to 0.2 and changed the diffuse colour to a colour and increased the specular weight to around 0.4.
Screen Shot 2017-11-06 at 11.24.14.pngI selected the render camera and open its Arnold attributes in the attribute editor and enabled DOF. I selected the robot’s head and clicked Display>Heads up display>Object Details. I typed the distance from the camera that the head model was value into the Focus Distance attribute, so the robot’s head is in focus.
Screen Shot 2017-11-06 at 11.42.21.png

App and App Design research

UI ( User Interface ) – are the visual elements that the user sees on the screen. It can be buttons, images, icons, and other visual elements.

UX ( User experience ) – it’s the experience that user has as they interact with a certain app.

Wireframing – it’s a schematic guide of how the website or app is going to look like and will be functioned.

15033569833_a327c79601_b.jpg

 

5 well designed apps:

iOS weather app

ios10-weather-app-icon.png

This app was made to inform people about the weather of any location. Everyone can use this app and it’s easy to control. When you open it the first thing you see is the weather of you location:

unnamed.png

At the top there is a text with the name of your location. It’s written in the biggest size so it draws your attention. A little lower there is a slightly smaller text with the description of the weather. It gives the person a rough idea of how the weather is like. The number in the top middle shows the temperature of the weather. It’s in the largest size because it’s one of the most important things and purpose of the app.

A little lower we can see the app lists seven days of the week – from Monday to Sunday.  Today’s date has a gap between other days of the week to show more detailed information. At the left it says the highest and lowest temperature of the day. At the top of the timeline there are hours of the day, and below it we can see little icons of the weather and the temperature. The icons represent what the weather is going to be ( sunny, cloudy, rainy, etc. ) and it shows the sunset and the sunrise. By dragging this weather timeline to the left we can see further hours of the day. Present temperature is the most important which is why it’s presented in bold. Since days are brighter than nights, the day’s temperature is shown in bright colour while the night’s is darker and faded.

Below the timeline there are listed other days of the week with little weather icon on the left. It also says the highest day temperature and the lowest night temperature.

The icons are very minimalistic and understandable. Main of them are sun, cloud, moon, thunder, rain, snowflake, wind, fog and thermometer. Some of them are both combined to create a special icon to represent a specific weather (for example sun and cloud combined creates cloudy icon). Darker cloud represent that it’s night.

ios_weather_icons_1x.png

At the bottom we can see a little cursor and a line of dots. Each dot is a different homepage to a city or location and the little cursor shows your current location. As we can see there is no back or forward button, so to get to another page you have to swap with your finger to left of right.

The background of the page is a picture of the sky which would represent the current weather and the time of the day. If it’s night, the background always has a dark tone. On the day the background is always lighter, but the colour also relies on the weather. For example, if it’s partly cloudy (like shown in the picture) the background will have a blue light sky with a couple of moving clouds. However, if it was cloudy and rainy, the background would appear grey with animated raindrops, or if there was thunder the sky would be really dark with lightning flashing through the clouds and etc.

To create a background first they use a base colour:

iOS-7-iPhone-Backgrounds-PSD-Free.png

Then they other assets such as animated images of the thunder, clouds etc. and the text and layout. The use of white for colour was to make it stand out from the background.

By clicking a small icon of list at the right bottom we get dragged to this page:

unnamed.jpg

It lists all the cities that you have in your app and shows the time and the temperature of it. Each colour of the city also show what’s the weather like in there. At the bottom we can choose whether we can’t to see the temperature in Celsius of Fahrenheit. If you want to remove a city you swipe from right to left on the city and click delete. Little plus icon at the right allows to add more cities to your list:

unnamed-2.png

Smoothies from Whole Living

175x175bb.jpg

 

It is a smoothie app which teaches you how to make healthy smoothies. The smoothies are categorised so you can easily choose what type of smoothie you want:

320x568bb.jpg

When you choose a smoothie the app shows you a more detailed information about how it is good for your health, what it consists of and how to make it:
480x360bb.jpg

 

Bouncing ball animation

To start off, I changed the camera settings first. I went to viewcamera settingsresolution gate. Resolution gate gives a frame for your animation and shows in what resolution it’s going to be seen. You can edit the resolution to any size. For this project I’ve been working in 960×540. I’ve also enabled interactive creation by going polygon primitivesinteractive creation. If the interactive creation wasn’t enabled, the software would create a perfect dimension cube. However, with interactive creation we can drag our shape and create it in any dimensions we want. I also was working by facing the front camera. This is how it looks:Screen Shot 2017-10-16 at 11.34.12.png

I’ve placed the sphere at the top by y axis. By clicking ‘s’ key I’ve selected all keys:

Screen Shot 2017-10-16 at 11.35.47.png

Then by selecting the 24th frame I’ve dragged the ball down by y axis and selected all keys again. Then I’ve dragged the cursor on the timeline to 48th frame and pulled the ball back up again and selected all keys. These were my main points of animation.

Now I’ve selected the ball and turned on graph editor by going windowsanimation editorsgraph editor. A graph editor is a graphical representation of interpolation between animation keys that you can modify. The window with a sphere graph appeared:

screen-shot-2017-10-16-at-10-59-48.png

By selecting the graph I’ve smoothed out the corners and broke the tangents so it would be easier to edit the graph. By altering tangent handles you can change animation curves value and timing.

Screen Shot 2017-10-16 at 11.00.24Screen Shot 2017-10-16 at 11.00.55
Then I started distorting the sphere on the 24th frame to make it look stretched and squished by changing the scale by x, y and z axis:

Screen Shot 2017-10-16 at 11.07.58.png

After that I’ve started adding in between frames to make the animation look more natural. On each frame I’ve changed the shape of the ball to make it look as if the ball was affected by its weight, gravity and mass.

Screen Shot 2017-10-16 at 11.42.20.png