Second Life Breakdown

EE3609-EE3610
Cynthia Olemoh-Odunuyi 1612956

Cynthia Olemoh-Odunuyi 1612956 EE3609-EE3610 2
Table of content

Title Page
Introduction 3
Software development life cycle: 3

Procreate to illustrator 4

Design principals and purpose to Design 6

Illustrator to After Effects: 10
My After Effects workflow (Guide To Run 15
Project)
Rigging 16
Animation 18
Design principals and purpose to 26
animation
Effects used in animation: 34
After Effects To Premier 35
Sound Design principals and purpose 37
Issues/challenges, and ways around it 38
(Innovation)
Functionality, Features and More 49
What the artifact doesn’t do 50
Support artifacts and further explanation 50
Non-Functional Requirements 51
User (viewer) Testing 52

Animation testing based Development: 55
The Evaluation: 55
Technical evaluation 57
Conclusion 58
References 60


Introduction

In this documentation I have been tasked to report about the implementation process
of my final year project artifact and critically form an evaluation.

Software development life cycle:

SDLC s is a terminology used to explain how software is delivered to a customer in a
series of steps. These steps take software from the ideation phase to delivery.

Procreate to Illustrator
(Design to implementation)

In order to create my assets I imported my sketches from the software procreate (digital
drawing software for Ipad) and imported them into illustrator.

Once this was done I used the reference as a guide to trace over to create the vector
version of my asset using the pen tool. While doing this I used flat colors just to set
references to allow me to focus on creation and execute colours later. I also had to
ensure that each asset was set on a different layer in order to prepare for animation in
the future, after this was done I then worked on a colour pallet applied the final colours.

Some scenes were created straight from illustrator due to changes in my
animatic/storyboard after the Research and design; changes in designs were also done
at this stage.

An inside look to asset creation in illustrator.

Design principals and purpose to Design
Character Assets:
Game related design:

Theme and colour:
• Each character wears black to represent their awareness to the games main plot
apart from ‘snow’, which is a contradiction to the characters personality done
deliberately to represent ignorance/innocence to the world and people around
her.

• Most characters by default have unhappy/unamused expression which helps
convey the vibe of the game.

• The game is supposed to be set in a cold forgotten city so a lot of them wear
boots and long sleeved clothing.

Distinctiveness and personality (novelties): The characters are designed to overall have a
youthful appearance but not too much to give off their actual ages due to the target
demographics of the game. Each character has special features to make them unique
from each other and is an extension of their personality for example;
• ‘Isabelle’s freckles and smile. (Happy)
• ‘Clyde’s’ eyebrows and red hoody. (Expressive)
• ‘Bays’ hair colour, big earring and backpack. (Rebellious and on the go)
• ‘Ivory’s’ earrings, skirt and eye shape. (Edgy)
• ‘Pikes’ hat and necklace. (Chill)
• ‘Snows’ lack of mouth expression and clothing. (Indifferent)

• ‘Almonds’ hair colour (similar to brothers ‘clyde’/ lack of identity)
• ‘Navy’s’ long hair and coat. (Femininity)
• ‘Bryson’s’ hair shape and short sleeve football jersey (sporty)
Most characters have gradients to make them look livelier in addition to their own blush
colour on their cheeks.

(Names from right to left- Bay, Clyde, Isabelle, Ivory, Snow, Pike, Navy, Bryson and
Almond.)

Scene Assets:
I decided to add multiple scenes in order for viewers to get a feel of the world in the
game, however from a motion design perspective I knew I wanted to include multiple
environments in order to keep the viewers interest or it would be boring.
Colours and contrast
Each scene has a group of colours that were used in order to keep it harmonious. The
colours consisted of a combination of soft colours and darker colours to make the scene
and prevent it looking ‘flat’ more likely to keep contrast.


Space And Focus point:
The negative space is just as important as areas that are filled to have a purpose, as this
helps to direct the viewers attention for example in the ‘shopping’ scene the shelving
takes up majority of the on screen where the action happens while keeping ‘snow’ as an
extra background detail, and in ‘buba tea’ the scene has been designed to show the
center of the restaurant in a way to keep the characters in focus in the middle.

Alignment: In order to keep things looking clean and minimalistic I made sure that
everything I scene I created had assets that were aligned properly, this was easily done
by using illustrators rulers and guide system as it also helps show when an object is
aligned with another, to prevent artwork from looking sloppy.

User Interface Assets:


Repetition:
The user interface had to keep consistency of the games theme of black and white,
which strongly correlates to the two main characters. The secondary theme of circles
and curved squares and white text also had to be kept throughout the games interface
design, which included the transitions and the pop up texts for the animation that
inform the viewer about the game.

Asset Development:
I have included a PDF document containing the development process of my assets

Development PDF places in the implementation and development folder

Illustrator to After Effects:
Colour conversion, and art board settings – I had to ensure my artwork was in the
correct colour format, as after effects deals with RBG. In order to double-check this I
decided to select all my artworks and convert them to ‘RGB’ in addition to illustrator
colour settings, this is a natural percussion because illustrator tends to deal with
CYMK by default.

As for art boards in order to simulate the scrolling scene effect seen in games I
decided to ensure that my canvas size would be much longer than the screen
composition size in after effects.


Preparing for asset rigging- In order to be able to rig and animate my character and
other designs properly I needed ensure that each artwork layer that I was going to rig
was on its own layer system as after effects sees a layer as a one image. Therefore the
sub layer system was not going to work. In order to achieve this I had to separate them
into ‘sequences’. Once this was done I renamed them so I will be able to identify them
in after effects.

Bottles that are under 1 layer and will be classified as one whole image to AE


Separates sub layers/children into individual parent layer. Each asset is now has its
own layer ready to rig and animate

Adobe Cross compatibility:
Rather than having to import assets one by one adobe, illustrator files can be
dropped into after effects as a composition with the asset split into layers allowing
easier animation and workflow.

This aids in productivity and workflow in the long run because anytime I needed to
go back and add, remove or change things in my assets (design wise) that are part of
a specific AI file I would easily be able to do so without it having to redo the
animation for that layer.

Orgnisation and manageability:
Initially when designing the concept for the animation I inserted all the necessary
assets for each scene in the relevant scenes AI (illustrator) file, that way I could
create the coloured version storyboard.

However because my animation is asset heavy containing user interface,
environment and characters, all which needed individual animation, and contained
in a single file with 30-40 layers, what I decided to do was to duplicate my illustrator
files into three. That way each file will only contain one type of asset making it easier
for me to manage in after effects, as each will be in their separate compositions.

In this scene the bottles, football ui, and characters move so it was important to
distinguish between things that will not be animated and static assets.

Characters in own AI file with separated sequenced layering system

I would simply ‘hide’ the unnecessary extra layers in illustrator or ‘hide’ them in after
then delete them effects but keep them in illustrator to prevent permanent loss, that
way I could use the other assets as reference guides (for instance where to place the
separately imported characters) when importing from another AI file and deleting them.

After importing into after effects I colour coded things to make it easier to identify, as
the first scene was quiet asset heavy. The greens represented the bottles, the light blue
for static assets and cyan for pre compositions and character folders.

My After Effects workflow (Guide To Run Project)
In order to keep the workflow clean and allow easy modifications to pace without
running the animation I came up with a simple workflow.
• All scenes are put into the main composition (what is considered a ‘scene’ is
based on my storyboard layout)
• Each scene has been numbered as there are times when a composition will need
to be higher in the hierarchy despite appearing later on due to transitions, and
UI overlays therefore are coloured blue and yellow.
• Some scenes that took longer and required constant work that integrated with
other scenes were colour labeled according to the character or scene for
example the storage scene is labeled orange and bar scene red
• Each scene composition length is cut according to the time that is needed for it
to be there, this aided during the animation stage so I could know what is
happening when without having to trace each composition length.


Rigging
Character rig Pipeline:
For my character rigs I followed the same pipeline structure for all of them:
• Every Character is kept in its own composition
• Everything apart from the eyes remain in the main body of the composition
• Any object the character interact with remains in their composition for
animation precision
• Areas of the body are colour coded based on –leg layers, arms layers, mouth
(except ‘snow’ who doesn’t have one and ‘Isabelles’ which changes therefore
has a separate ‘mouth expressions’ composition, hair layers, main body (control
point) and other parts such as ear and other clothing.
• Different areas of the characters body are rigged to similar to the human body,
keeping the main torso as the center rig.
• Rigs are performed through a parenting.
• Characters such as ‘Isabelle’, ‘Clyde’, and ‘Bryson’ have an extra facial controller,
which allows their facial features to move without moving their actual head for a
more 3-dimential/ animated look.
• Eyes are separated into further composition by left and right eye and colour
coded


Main composition for character ‘snow’

Composition containing just ‘snows’ eyes. This way I could focus on eye animation
(blinking)

Further composition containing left eye to reduce layer clutter in one composition.
Example of the Composition pipeline for character rig displayed at the top, ‘Bryson’
refers to the scene the character is currently in and ‘Bryson home extended’ being the
scenes composition’, while ‘main comp’ being where all the masters layers are.

Multiple facial features are parented to the ‘null’, which is the central control allowing
the further facial animating and 3-d look. This null is then parented back to the head to
prevent offsetting from the main body control. (An example of when this is used is
shown during ‘Isabelle’s animated walk cycles)

‘Isabelles’ range of expressions in a pre-composition able to be toggled on and off when
needed.

Animation
Character Animation:

The goal I had in mind for the characters is to animate them in a ‘cycle’; similar to the
way games have their characters animations loop to keep them lively. This meant I had
to adjust my workflow to be able to keep character animation presets for when I
wanted them at different points of the animation.

Therefore for the characters that I knew were going to appear more than once
throughout the animation I decided to take their already rigged compositions, duplicate
them, and use them perform variant stance animations similar to in game character
animations for example Isabelle’s character has:

A walk cycle (with and without phone), standing animation (with and without phone),
speech specific trigged movement, and a sitting animation (at desk and with phone).

Automation and expressions:
Every character has a blink animation which are timed to go off automatically every 4-5
seconds for every character this is done by creating the single blink animation and
entering an expression to reloop the process.

‘snows’,’ivorys’,’brysons ’and ‘isabelles’ automated eye blink.

The same process is applied to a characters default stance animation so I wouldn’t have
to reanimated the stance movement for their arms, body ,ear or hair jitter for the
duration of the scene quickening my workflow.

The layers with the red digits represent have expressions with the automated cycled
animation. Expression used: loopOut(‘pingpong’)

‘Snows’ character was the first one I rigged and animated as a trial before adapting the
workflow to other characters.

Delicate animation:
Gentler Areas of the characters such as hair and eyelashes were animated differently
through the use of the puppet tool. This allowed me to simulate airy style animations to
prevent it from looking stiff.

The puppet tool was also used in conjunction with the natural rigging of the characters
on areas of the body such as joints and limbs for a more natural look.

Scene animations:
Workflows for scenes are similar to that of the character animation, as mentioned
earlier from the illustrator to after effects pipeline scenes were already separated into
moving areas, stills and miniature components, for example in the ‘phone ui animation’
scene there’s a lot of transitions from multiple assets. These assets are then pre-
composed to aid in workflow orgnisation, later modification and ease of animation.


In this scene the ‘citizen bios’ change on a mobile phone screen while the original
gameplay/animation remains in the background after that the games ‘timeline’ is
displayed.

This shows the workflow inside the ‘IDs’ composition, which controls the ‘citizen bios’

Within the ‘timeline’ composition, which is the scene that shows on the phone after the
‘IDs’ we have further compositions that control the ‘timeline’

The ‘timeline’ controls the actual moving parts in the foreground of the scene ‘timeline’
itself.

While the ‘timeline floats’ controls the background animation of the timeline.

Which when put all together in the ‘phone ui aniamiton’ comp looks like this.

User Interface:
The animation UI ups work in a similar format to the character rigging
I set up the workflow the first time around by putting assets and animated characters in
the pop ups compositions, then animating the entire Uis animation once.


1st pre-comp position on the overall main animation screen

2nd pre-comp controlled the UI ‘bounce’ and colour effect

3rd pre-comp controlled the outter shine on the UI circle, text , text banner animation
and animated character(s) in the Ui

Afterwards it was as simple of duplicating the UI ‘overlays’ switching out texts from
illustrator and the banner length under the text.

The main variation in each Ui pop up would be weather both or which main characters
are in the UI or the position of the Ui on the screen.

Despite having to re animate due to location of the UI due to my workflow I wouldn’t
have to animate the actual UI intro and outro itself or the characters due to the
compositions, therefore I just had to redo the ‘bounce’ into the main screen.

Design principals and purpose to animation

Due to the nature of this project being somewhat different I decided that for the
animation I would combine principals from animation, motion and games design.

I wanted elements of motion design in the trailer but not too much that take away the
gameplay aspect of It as most game trailers would be recorded gameplay from the
actual game itself (unless specifically made for cinematic purposes) therefore fancy
motion design transitions would not be possible within gameplay unless they were text
cut scenes like these:


Several text scenes taking from other game trailers
(YouTube, 2019) ,(cynthia-designs, 2019), (YouTube, 2019), (YouTube, 2019)

Animation principals applied to trailer are:

Squash and stretch- game title, ‘UI pop ups, black square transitions, ‘Isabelle’s’ hair
(when bouncing in the UI or sneezing), ‘brysons’ hair when talking, conversation UI
(coming out), ‘timeline’ in the ‘phone UI’ scene , interface on ‘Isabelle’s phone’ in the
‘isa home’ scene, ‘decision UI, ‘inventory, all text in the call to action scene.

Pose to pose- when initially trying to figure out character animation posses and cycles I
created the main in-between transition posses before filling out the remaining key
frames and smoothed them in the graph editor.


Slow in slow out- used quiet a lot, in after effects I used a lot of ease ins, ease outs, or
easy eases along with the graph editor to make the animations look more natural and
flowy and prevent stiffness especially when animating the characters moving their areas
like arms, legs. This was also applied to transitions such as when ‘Isabelle’s’ pulls the
scene the character slows down and bends backwards the scene itself also closes in
slower than the speed it did in the start.

Secondary action – applied to characters anytime they move, for instance when ‘snow’
walks, or performs actions like throwing the beer bottle, or when bouncing in the UI pop
ups her hair moves in retaliation due to those movements. When ‘isabelle’ sneezes in
the ‘buba tea’ scene her bun performs a ‘squash and stretch effect’. ‘Ivory’s’ ponytail
‘bounces’ as she moves her body ‘breathes’.

Timing – applied throughout the animation so that people get enough time to see
what’s going on screen, things like transitions, speech, expressions, UIs ( text and on
screen in a screen) had to be timed with noticeability in mind.


Staging- each scene has extra things so viewers can understand the environment. For
example the shopping scene is made clear by the trolley transition. The ‘almond scene’
is made clear by the ease in of buildings and to let the viewers know that ‘snow’ is high
in the sky the moon position and builds in the distance give reference points a mystical
vibe is added with the use of particles. The ‘buba tea’ makes it obvious it’s a public
setting by the moving item pricing displays in the back. In the ‘buba tea’ to phone
transition it was made clear that what was on the screen is the games interface by the
drawing out motion, user interface and touch interaction. The ’decisions’ ui had a frozen
gameplay effect (created by time freezing the animation), to emphasise this I added a
fade to the background and added a faint moving foreground. The game is based In a
city which is shown in the call to action, ‘in city corp’ has the desk and sign to make it
clear its an office setting its also the dullest coloured scene.

Appeal – some characters have extra features for example ‘snow’ is often portrayed as a
casual character often seen in the animation sleeping, playing, or gathering beer and
doesn’t show facial expression much. ‘Isabelle’ has a more noticeable role and is always
‘active’ and has more expressions. ‘ Navy’ doesn’t blink and continuously just stares ,
‘Clyde’ is a fidgety/restless and constantly looks around ( all based on character
background stores). Elements of the ‘user interface’ design are animated in the same
way to keep consistency, they squash and stretch, bounce even bigger UI like the
timeline, inventory and bios, assets that look like the games UI but aren’t such as the
call to action texts in similar looking black banners follow the UIs rule.

Little perks/ other stuff (novelties and innovation) – games tend to have a lot of
movement, there were times when things didn’t need to move or characters were idle
but I needed to keep them alive like in an actual game. For example in the first scene
with ‘brysons house’, ‘snow’ has no purpose so I decided to play around with her
animation and have her play with a beer bottle. This also applied to the ‘shopping’
scene, ‘buba tea’, and ‘bar’. This was also applied to scenes as well to keep them less
static for instance the ‘brysons house’ scene has the football falling down and hitting
beer bottles, ‘buba tea’ had the moving retro style environment, ‘almonds scene’ had a
parallax effect, the ‘bar’ has flickering lights and a blinking screen colour overlay, the
‘storage scene’ has the scrolling environment effect seen in games, the call to action has
movement in the timeline overlays and previous scene previews are seen moving
around, all the text in the game ‘jitters’, speech is mimicked by the gradual reveal of
text. All to keep the animation feel livelier like a real game.

Effects used in animation:
• Duplicates of the characters were made to create the coloured reveal as they
walk in the intro the similar effect is used in the call to action to create the
illusion of shadows
• Duplication of ‘second life’ in the intro to create the text trace then fade to the
full text reveals.
• Masks were used to help create character eye blinking
• Track mattes were used to help animate all pop up style UI’s so that the text and
banners underneath can be revealed seamlessly without showing overlaps ( not
including conversation UI buuble)
• Motion blue was added to the UI of characters scrolling in the first scene to add
a sense of speed/scrolling.
• Two masks were used and timed to create the shopping cart transition
seamlessly. One to hide and the other to reveal.
• A glow effect was added to the touch interactions to make them stand out, they
were animated with masks to mimic a tap effect.
• Speech bubbles contained a mask to gradually reveal text and when leaving the
screen had a ‘fill’ effect to fade to black.
• A tint was used on ‘ivorys’ ‘face’ to make her face go red
Scenes like ‘buba tea’ and ‘bar’ with the lights and moving bricks were animated once
and had an expression put on them to last the duration of the scene. Other scenes that
had flickering opacity’s such as other lights and screen ui background

After Effects To Premier

POST PRODUCTION

After rendering my final animation in after effects I imported it into premier pro to sync
in music and sound effects.

After my music and sound effects selection process there were a few things I needed to
do before the final render.

Sync with animation- I cut down my chosen sound track and sound effects matched the
music’s journey to the animation, this was done by dragging around the audio clips and
using the razor tool then combining the split files together.

Level adjusting and mixing- Due to the fact that I did not use the full main audio track
and had to cut it down in order to fit the animation, this meant having to readjust my
audio levels to ensure they are always leveled and to avoid peaks and clipping in sound.


In order to equalize the main audio track together rather than just one piece I had to
create and ‘multiband compressor’ in the ‘audio track compressor’. This automatically
leveled everything out and I set the ‘gain’ to prevent levels above ‘-3bd which made it
possible for me to increase the overall sound of the track but keeping higher sounds at
the same level and only increasing softer sounds.

This same process was applied to the sound effects track for the same purposes.
Resulting in overall leveled audio for the animation.

Sound Design principals and purpose

There were several things I had to consider when selecting sounds:

Genre: The game is designed to be a mix of reality an fantasy, but there’s also a sense of
aspiration through the role of the main characters therefore I decided I would select
something mystical and motivational, I knew I didn’t want lyrics as it will be too
distracting and be difficult to read the text in the animation so I stuck to instrumental.
Upon research in the past its unlikely that a game will have lyrics unless its in the
cinematic genre/ (most 3d games) etc. As the game doesn’t have acted voices it would
be strange to have lyrics in the trailer.

Tempo/energy: The speed of the animation is neither slow or fast however the game
itself isn’t meant to be face paced as it has no action/fighting elements and is quiet
relaxed in the sense that there’s a lot of reading. Therefore I knew I needed a somewhat
mellow soundtrack. For example the beginning and the end of the animation have
similar but different energy, in the start I chose to include the part of the soundtrack
where the beat is a low more deeper relaxing and mellow as it, this was chosen as I
wanted a slow transition into the world of the game for the viewers. At the end the
music is fluttery and light to indicate that it’s the end of the journey.

Journey- In my initial process of designing the script for my animation I decided the
animation would have an a climax to provide an emotional journey, therefore I needed
to select a sound track that didn’t have the same pace and tones throughout. For
example in the ‘phone UI’ scene the tempo was matched to go off with the growing Uis
on the screen, as the soundtrack plays on it reaches it highest points during the ‘almond
scene’ which is the animations climax point.


Immersion- In games most sound effects are similar to that of real life therefore I
decided to find important sounds that I would like to emphasis in the trailer to provide a
sense of realism. For example each time the user clicks on something the sound effect
goes off for that touch and the UI. I also added extra sounds to convey things like
atmosphere and weight for example in the ‘storage scene’ the weight of the boxes are
also emphasized by sound. When ‘Isabelle’ drags the transition scene the sound of it
sliding and clicking into place is similar to that of a sliding glass to emphasize the action.

Consistency- sounds like the logo subtitle, speech bubbles interact clicking, and UI
needed to have the same sound effects applied throughout so people would be able to
identify the sound to the action/object.
Issues/challenges, and ways around it (Innovation)

The Games concept and trailer:
When I showed my work to my supervisor and submitted my R and D I was initially

happy with my designs, however after the interim show when I started to colour my
scenes I felt like the game felt incomplete. I decided to go back to my storyboard and
figure out what felt off. I came to the conclusion that it was because I felt like I was
missing a lot of elements from a game that would make my games trailer feel like a
game. In my initial animatic I didn’t have any touch interactions, only one user interface
(the timeline) and I didn’t explain how the main area of the game (decision and actions)
actually work. I felt like I was making more of an aesthetic piece with characters than an
actual game.
Therefore I decided to go back and add more functionality to the games concept, plan
out some user interface screens, re design my animatic in order to visualize what I was
planning to do and implement it along with my previous designs. This resulted in the
current project submitted.

(The original animatic and scrap test versions are placed in
implementation and development folder)
Design: colour palette: Coming up with a general colour pallet for all my assets was one
of the more difficult things in my design implementation process, there were so many
things to think about from the a games standpoint (do I want things to be dark, realistic
or clourful? How do I convey the games theme? What does my target audience want?)
And design standpoint (Aesthetics, legibility of text, colour blocking, how will having this
character colour effect the contrast of them and the background etc.) In the end rather
than focusing on each area of design and finishing it fully, I ended up doing a few
characters a few scenes and a few UIs and integrated them to see what worked and
what didn’t and kept repeating this until I got a firm foundation to apply to the rest of
my assets.
Workflow and organisation:
I had never done character animation, or rigging in after effects before as most of our
motion design stuff leans towards the VFX style and I am more comfortable moving
objects, and creating lighter assets and lighter minimalist texture/colour environment
scenes. Therefore one of the main challenges was keeping things organized by forms of
colour coding and labeling in the long run so that when I get to a certain stage later in
time it wouldn’t be chaotic.

Eyes: each character had to be designed in ways that their body parts overlap so when I
move them there wouldn’t be gaps. This was extremely important for limbs, joints, hair
and eyes.

The eyes in particular were the first thing I rigged when starting a character animation
and it took me a couple of days to get the hang of it. Due to the character designs
unique eye shape it was difficult to simulate as the top part of the eye is shaped
differently from the lower half unlike real human eyes that blend seamlessly.

Eyes pre rig

Animated eye blink but the iris and white parks show as eye blinks.

In order to combat this I split up the eyes into-lower lash, top lash, white parts and iris.
The white parts were duplicated and made into a track matte so the iris wouldn’t be
able to go out of bounds no matter how much it was moved and the top lash was
animated to hit a certain point using a combination of position and rotation key frames
in which the bottom lash joined after.

While doing this masks were used to hide the outline of the white parts. Resulting in a
blink animation.

Rasterizing, art boards and the puppet tool:
In after effects we have a rasteraztion feature, which keeps vector assets looking crisp,
despite being scaled to extremely large sizes similar to scaling images created in
illustrator. In previous projects I have had issues when I needed to use the puppet tool
in conjunction with a rasterized image, because vectors are calculated mathematically
to keep assets crisp, and the puppet tools job is to break down an asset into ‘meshes’
and pin them down in place, these two functions contradict each other resulting in after
effects not being able to apply the effect. If you take of the rasterization it will result in
the effect being applied however the asset looking pixilated compared to other assets
that are rasterized.

Knowing this ahead of time I decided to scale up every asset by double their size in
illustrator before importing into after effects.

The image looses quality in its double size in the scenes composition, however in the
main composition when the settings are set to standard screen size 1920x1080
(therefore all assets are being descaled in size) the asset quality looks just as good as the
other rasterized assets preventing overall artifact quality loss.

After effects colour settings:
Despite importing everything as an RPG the first time I did a test render in after effects
It was looked terrible. The colours did not blend, and there was a strong tint of yellow.
(Still somewhat white washed in areas but better.)

While also trying to fix the colour settings I decided to get some feedback from others
about the aesthetics/colors as I felt like it was lacking something , I ended up having to
minimalize the scene in illustrator as it felt too cluttered, the football was also too big,
and text too small. The only thing I actually recolored manually, was the couch
everything else changed due to the colour settings.

After quiet a lot of research, trials and errors, and opinions of others I managed to come
up with the best colour settings to render my animation with.

The final result was achieved by turning of the after effects ‘blend using 1.0 gamma’,
changing to ‘32 bits per channel’ and setting the colour settings to ‘colour match RGB’ I
found it strange because using the default AE settings and changing things to RGB alone
in illustrator for previous projects was usually fine the only thing I could assume could
be because I have a lot more gradients in this project, without all three of these things
changed the colours were off.

Colour correcting with curves and tints:
After fixing the colour render issue mentioned previously later on I realised some scenes
looked more faded or washed compared to other scenes that had more concentrated
colours, this was a design issue not after effects. Therefore I decided to edit it in after
effects rather than having to recolor the whole scene, this was done by increasing curve
levels in after effects. Although it may not be as noticeable in picture form it made a big
difference in terms of contras in the animation.


Before and after curve edit

There were similar issues in other scenes for characters for example in real life the
colours of items and lighting around us can reflect on us making our skin or hair tones
change. However due to each character being designed once they will carry their default
colours compared to for example being in a game engine or 3d software, therefore
when they were added in certain scenes I had to adjust them to fit in properly as if they
are actually a part of the environment.


Other minor illustrator to after effects –
There was a time when I would import an AI file and the composition size would be
extremely small despite it being regular size in illustrator, only to find out there were
multiple art boards active in illustrator, after deleting them the problem went away.

When creating the Ui screens for the game in illustrator I used masks to put the
characters inside, when imported to after effects they were fine and remained in
position however once in a while an error message would pop up, stating along the lines
that ‘after effects cant interpolate mask’. Nothing was done about this issue because
the masks didn’t get deleted or have visual appearance issues and was animated fine,
once in a while the error would pop up during rendering too but carry on like it fixed
itself very odd.


Post-production
After effects-Premier pro

Music sync issues and flow: it wasn’t until this stage that upon getting feedback I
realised I needed to cut the animation down as I felt like watching it along with music
made it feel more dragged out. I also didn’t like the speed of the animation so I went
back and made changes to aid in flow. (Mentioned in user testing and development)

Breakdown videos And Development:
I have included several breakdown videos of showing the implementation of everything
mentioned above from character to scene specific animation/rigging.

Breakdown videos places in the implementation and development folder

Functionality, Features and More

Aim: To successfully design a potential game idea with a theme of mental health to raise
awareness of common mental health issues in young people in order to get them to
support their peers.

Objectives:
1.To create a visual in nature yet informative artifact that will sell the potential of the
game concept.
2.To then further portray this information through an animated piece.
3. To reach a demographic of 15-25 year olds that have a common mental health issue,
or know someone with a mental health issue, are casual gamers that enjoy narrative
based games.

Overall my project provides an insight to what the game would actually be like if it were
a fully developed and distributed.
Here are the functions the project provides:
Function Purpose Feature
Basic game Provides the basic demographics, genre, Main target 15-25, story
information platform, theme, amount of players and rich/fantasy/Dark, single
stats for the game. player, cross compatible on
mobile devices and portables
(tablet), choose your own
adventure.
Characters Provides information on main characters, Larger open world based in a
and world supports, non-playable characters and post-apocalyptic city.
information gives insights as to what to expect in the
game. World containing interactive
objects and people that
affect the main storyline and
subplots.

Story and Informs of the theme, underlying Strong theme of mental
narration messages, games backstory and ultimate health (PTSD, depression,
premise of the game. chronic stress, anti social
personality disorder,
depersonalization, substance
abuse based depression
etc.), and how to deal with
struggles and making
difficult life decisions.
User Explains how the game mechanic works in Touch navigation, and simple
Interface terms of ;Interactivity, navigation, menus, user-friendly design.
and User design, in game pop ups, how the

experience characters are controlled etc.

What the artifact doesn’t do
The project was aimed to implement the design side of game development therefore is
not a fully functioning programmed game, but it is also not just a aesthetic piece as the
entire design aspect of the game has been implemented and thought of outside the
animated trailer in terms of background story, game mechanics, UI/UX and much more.

Support artifacts and further explanation
For this project I created a support artifact to give a deeper understanding of functions
and features of the Games Design/concept through a Game booklet. It explains the
functionality of every aspect of the game design mentioned that were carried out during
the research and design aspect of my project before the animation.

The Game booklet is available in the folder in the artifact and report folder

Non-Functional Requirements

1. Accessibility and portability – Most people have either a mobile phone or tablet
compared to a game console or powerful gaming pc, which allows easy access to
the target audience of the game (15-25). Other advantages include: cheaper to
run, no extra accessories needed (controllers/mouse), portability and available
on IOS and android.

2. Usability: The game has been designed with simplicity in mind. There isn’t too
much navigational interface that makes it over complicated, majority of the main
functions are accessible within 2-3 clicks and the Games mechanics are simple
compared to for example a shooter or RPG which may intimate non gamers,
therefore making it easy to play for even for casual /non gamers. it is designed
around the concept of using touch interactivity with the devices touch screen.
Therefore there is less user complexity in terms of having to remember how to
play or remembering controls.

3. Maintainability: App games tend to be smaller and due to it being connected to
the phones networking services it will be constantly updated without having the
users to go out of their way and waiting for long downloading lengths like on pc
or console.

4. Portrait and Landscape modes: To Avoid complexity the Game is designed to
only be playable in landscape mode, which means there will be no need to
support both portrait and landscape modes and supporting older devices.

User (viewer) Testing
Implementation ‘Quick and dirty’- viewer feedback based discussions

For the animation I constantly asked for feedback and viewer testing for each scene of
my animation. The tests were usually done by sitting the individual down and showing it
to them or sending it to them and, allowing them to watch it and asking them questions
and allow room for general feedback on the game concepts understanding

I would then implement these changes based on majority opinion (collected feedback
from several individuals) and move to the next scene, once the next scene was done the
testing process is repeated.

The demographic I selected were a mix of gamers; my supervisor, family members that
played games, and design students that are also gamers (which helped in assessing the
aesthetics). Among this group a good amount of people either has/had a ‘minor’
(usually stress induced or sadness induced) or more serious mental illness or
knew/knows someone who does personally.


Animation testing based Development:
Breakdown videos places in the implementation and development folder
The improvements based from of these testing are shown through my development
process video attached to this project.

Titled ‘development trailer’

The Evaluation:

Based from the results mentioned above I can form the following evaluation

Everyone seemed to like the design/ aesthetic side to the games trailer, as I got no
requests to change anything apart from the first scene, the main issues were mostly in
the flow of the animation in terms of animation vs. text eye control. So a lot of things
were slowed down, cut out or replaced in order to give the viewers more time to absorb
what is going on. In terms of the actual elements of the game concept, everyone
understood the general idea of how the game functions (basic game info, story,
gameplay etc.).

In the end they got a broad over view of the functionalities mentions earlier in the
trailer. Some curious people asked me more questions such as;
• ‘What is ‘the purger’?
• ‘Is that main character human’?
• ‘Why do the main characters help others’?
• Etc. (more background story related)

These are questions that will usually be left from an audience who watches a trailer and
is still curious about more information which indicates that the trailer didn’t oversell and
spoil the games concept, so if this was a real game perhaps they would be willing to play
it and find out.

The first part of my trailer was designed to give a steady introduction. It aims to give a
basic idea of the genre, and theme of the game. It then shows the main characters, their
role in the game and the other available characters in the game. The first half is meant
to somewhat have a story element with a mix of game mechanics (basic tapping and
dragging)

The second half aims to dive deeper into showing, showing the main gameplay (decision
making, and adventuring), how it works, and what is to be expected. The second half
was aimed to reveal a few of the games unique selling points and call of action.

Thanks to that structure it seems there was no problem in the understanding of the
trailer as a lot of information was covered within that 1min and 30 seconds short time
frame and based on the results I can say that the projects desired outcomes/objectives
were archived.

In the gaming industry a lot of final produced games have multiple game trailers often
times a story/cinematic trailer, gameplay trailer, and sometimes a teaser trailer (pre
release or on release day) to build up a hype. Based on the questions I got back from the
user testing, If I were to have more time or improve anything in this project I would
have actually enjoyed doing a second story trailer, which would probably, only be 20- 30
seconds in length and it would be more of an aesthetic ‘playful’ peace giving a tease to
the games story background which was mentioned in the games booklet.

Despite all this the games concept has still been able to form a bridge between visual
design, mental health, and games (entertainment) to form an immersive experience for
my target demographic.

Technical evaluation

Thanks to the software linkage I mentioned earlier it was very easy for me to make
these changes for instance adding elements to the first scene to extend it was as simple
as adding stuff to the original source file, I didn’t have to restart that chunk of the
animation. If not for that feature I would have put my project at risk of being
incomplete.

Other areas which involved slowing things down were achieved using after effects time
remapping feature which allowed me to adjust the speed of an entire composition
without having to moving all my key frames.

Due to using the appropriate software I didn’t have major setbacks implementing
changes from the user testing stage.

Based on the results from the user testing I believe the project resulted in the right
artefact without confusion from the viewer about the games general concept, was
simply because I was able to follow the information that I designed in the games booklet
which contained the entire concept of the game, this influenced the overall narrative for
the storyboard and animatic which made the animation much easier to do, as all I had
to focus on from then on was the actual animation aesthetics itself. Therefore it made
sense the feedback consisted on purely readability than complaints/confusion if
incorrect or unrelated an artefact to my objectives or aim.

Conclusion

(My project plan-Gantt Chart)

Looking back at my project plan I am proud to say that I did manage to stick with it
majority of the time, there were a few set backs due to other projects and the interim
show in January, but in the end I managed to be ahead of schedule most of the time
which I am grateful for because I spent a lot of time having to go back and forth form my
designs and re-plan my animatic/storyboard and create several new scripts and test
animatic to prevent risking more timeless which took (2/3 weeks), in addition the
animation was a lot more illustration heavy then planned things such as colouring and
character riggings took a lot more time than expected( roughly 3 weeks purely on
colouring and another 3 weeks purely on rigging and animation). There were also little
things like being a VFX student not having a lesson in user interface design before and
having to find out simple and effective ways to add UI to the game while thinking about
UX characteristics and touch interfaces was also time consuming.

If not for the extra somewhat exaggerated wriggle room I added in the project plan to
each phase I would have definitely not have had the time to improve the project the
way I wanted. I did also however manage to substitute time for example the animation
did not end up having a voice over so that week was used to colour the games booklet
(which was already planned during research and design as something to support the
game in print form for the actual design show) and create my breakdown videos, design
developments etc. to support my project. Overall I am thankful to the time organization
benefit that the project plan came with.

There were other ways to implement this project the first one which was actually
programming the game in unity and then recording the gameplay and implementing it
into the games trailer, however as I am not an experienced programmer and have not
used the software before I don’t think that would have been a good method. The pro
would have been I would have had a design and programmed game however I doubt the
results would have been as aesthetically pleasing as there are a lot of things I was able
to do in after effects such as applying motion design principals to make the trailer more
playful that I wouldn’t have been able to do if it were screen recorded.

The second option I got suggested to me by someone during the interim project was
creating the immersive experience through VR, although in theory it sounded amazing I
had and still don’t have any idea of where to start implementing such a project or how it
works, and at that stage I was already halfway through asset creation and didn’t think
it’ll be smart to waste time.

Therefore overall I am happy with the path I took to implementing this project, although
they were areas I felt somewhat confident with before (didn’t use new software) I was
able to expand on my technical software skills and gain deeper understanding in the
ones I do know and learn things that I didn’t know how to by pass before such as fixing
all the issues I had in my issues and ‘challenges section’ that I had in previous motion
projects, also learning new and challenging areas in those software such as character
rigging and animation, learning the fundamentals of UI/UX design, applying extra
thought to my design purposes and planning for the long run ( project management and
organization).

It was a difficult yet rewarding project as I was able to step out of my comfort zone, I
have also realizes how difficult it is to create a game because its not really like motion
design where you make a design piece based on a narrative, but making everything that
is implemented part of a bigger picture and planning it so that it all fits well together. I
could imagine the stress of actually presenting a fully playable game on top of all this.

On a personal note I have always wanted to know what it was like to make a game but I
knew I wouldn’t be able to fully do this due to somewhat despise for programming.
However I discovered new areas of game development; being game design, and was
able to still somewhat create my own game.

The drive for creating a passion project made me want to ensure that I implement it to
my best ability and it kept me going despite the many set backs and frustration to
complete the project. Therefore have also learned a lot of life skills that I can apply
working in industry.

References

Raygun Blog. (2019). The SDLC: 7 phases, popular models, benefits & more [2019] |
Raygun Blog. [online] Available at: https://raygun.com/blog/software-development-life-
cycle/#the-seven-phases [Accessed 22 Mar. 2019].

Mobile App Development and Design Company | CodigoDelSur. (2019). WHAT IS AGILE
SOFTWARE DEVELOPMENT? | Mobile App Development and Design Company |
CodigoDelSur. [online] Available at: http://codigodelsur.com/what-is-agile-software-
development/ [Accessed 22 Mar. 2019].

Marionette Studio. (2019). Agile Game Development - A Quick Overview - Marionette
Studio. [online] Available at: https://marionettestudio.com/agile-game-development-
quick-overview/ [Accessed 22 Mar. 2019].

cynthia-designs. (2019). Virus | Home | heycynthia. [online] Available at:
https://cynthia-designs.wixsite.com/cynthia-designs/virus [Accessed 23 Mar. 2019].

YouTube. (2019). Corpse Party: Blood Drive Launch Trailer. [online] Available at:
https://www.youtube.com/watch?v=TKCN73o8Js4 [Accessed 23 Mar. 2019].

YouTube. (2019). Cyberpunk Bartender Action: VA-11 Hall-A Final Trailer. [online]
Available at: https://www.youtube.com/watch?v=7x393waFKDw&t=47s [Accessed 23
Mar. 2019].

YouTube. (2019). Life is Strange - Launch Trailer. [online] Available at:
https://www.youtube.com/watch?v=mpRhaXfvG_0 [Accessed 23 Mar. 2019].

Second Life Breakdown

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Second Life Breakdown

Uploaded by

Copyright:

Available Formats

EE3609-EE3610

Cynthia Olemoh-Odunuyi 1612956

User (viewer) Testing 52

• ‘Snows’ lack of mouth expression and clothing. (Indifferent)

User Interface Assets:

are in the UI or the position of the Ui on the screen.

After Effects To Premier

Sound Design principals and purpose

Issues/challenges, and ways around it (Innovation)

When I showed my work to my supervisor and submitted my R and D I was initially

Workflow and organisation:

(Still somewhat white washed in areas but better.)

Functionality, Features and More

and User design, in game pop ups, how the

You might also like