CT4011 Assignment 2 - Animated Prototype for Game or App
Update 1 - Introduction to Semester 2: Part 1 Animated prototype
We went over the basics of assignment 2 including, the concept for out game or app how it can be a variation, refinement or improvement of an existing game or app, the animated video including demonstrations of the key features, mechanics and components of the game including highlighting the visual style and target audience.
For the visual prototype it should include as a minimum a main menu and examples of the main gameplay or functionality and you are encouraged to highlight sections within the video through audio (voiced) and/or text annotations.
Specifications:
The animated prototype should adhere to the following specifications,
1280x720 (landscape or portrait) @ 25 fps
MP4 (H.264 Codec)
60 Seconds (+/-10%)
Important notes:
The concept for your 2D game or app must be your own, visual elements and animations used should be your own, you are permitted to use copyright free music and audio.
Part 2: Promotional Poster or Animated Banner
We were shown to create a promotional poster or animated banners to help "promote" our original game or app by reusing assets of our prototypes and to create a title, logo and slogan, the overall poster should be to these specifications
Posters: Resolution A4 @ 150dpi, File type PNG.
Animated Banner: Resolution 160 x 600px @ 72dpi, File type Animated Gif, 5 seconds.
Part 3: Weekly Progress Report
Create a new project called: CT4011 Prototype and publish weekly progress of the briefs with a minimum of 10 posts by the end of the assignment, each update should include screenshots including any issues you found and how you resolved them.
Assignment 2: Submission
Submit online via Moodle on Friday 13th may 2022:
Video.mp4
Poster.PNG or Banner.GIF
Source.zip
Design.zip
Include any mood boards and/or sketches you created for this assignment.
Source files: All PSD, AI, After FX, InDesign project files.
Initial Idea
My first idea for this assignment was a small simple pvp style game similar to worms with ghost shaped characters which could move and pickup interactable which could be activated by the player, I had some small UI design as seen in the video below, but in the end I decided on a different style of game to animate.
Update 2 - Animating vector shapes
During this week we were introduced to the effects and positionings of vectors to create effect animations using anchor points, scale, size and effects.
Following the presentation we were tasking with making a small animation using circles which trail causing them to disappear.
Update 3 - 12 Principles of Animation
During this lecture we were shown a short presentation regarding the popular "12 principles of animation". Following this we were shown a video in which it explained each of the principles with a small animation and explanation.
The 12 principles are:
01. Squash and stretch
02. Anticipation
03. Staging
04. Straight ahead action and pose to pose
05. Follow through and overlapping action
06. Slow in and slow out
07. Arc
08. Secondary action
09. Timing
10. Exaggeration
11. Solid drawing
12. Appeal
Update 4 - Character Animation in After Effects
During this weeks lecture we looked into a video talking about Richard Williams book "The Animator's Survival Kit" in which he explains to you how to animate characters effectively and other useful things within animation. Following this we we tasked with following a short tutorial in which we made our own short animation showing how effective use of joints and rotations using after effects creates a great animation.
Update 5 - Collation of ideas for project
Following my initial research and learning of adobe after effects and its applications I began to collate ideas and inspiration for what I wanted my animation to be themed and based around.
I came to the conclusion after toying with a couple ideas that I found Tetris would be an interesting game to make an animated prototype for.
Following my research I found that I would need quite a lot of elements and assets to create my animated prototype being;
Tetrominos in which they are all made from the same 4 blocks just in different orientations being called, I, O, T, S, Z, J and L.
A playtime background for the Tetris game.
A full background the area around the play area.
A font type I find matches the overall aesthetic of my prototype.
Following my research into the assets I need I began looking into the style of Tetris prototype I wanted to create, I found I like the jungle theme and colour palette that came with it. Furthermore I chose to go with a pixel art style for my prototype.
Following the creation of of my tetrominos I decided to find a colour palette I found appealing and that would fit the scheme and theme of my game prototype. I thought this colour palette would fit with the theme I had in mind.
This is a link I used for a couple of the main game mechanics of Tetris I wasn't 100% certain on https://tetris.fandom.com/wiki/Playfield
Update 6 - Creation of play area
Following my initial creation of my tetrominos I decided to create the play area through the use of my earlier created tetrominos I found it effective using effects and assets within photoshop to create a greyed out area for the game to be played.
After making the general play area I realised I will need time, score, hold and next pieces boxes which I found using my already created assets for would be useful and keep with the overall theme.
I made a rough sketch for ideas of where I wanted specific UI to sit within my scene.
After adding rough text I thought it fit the theme of my game quite well.
Update 7 - Implementing assets into adobe after effects
Following the creation of my assets within photoshop I began to implement my assets into adobe after effects to begin animating and deciding how I want my animations to look and storyboard out how I want my overall animated prototype to look.
Update 8 - Importing to After Effects
After importing my assets into after effects I realised I didn't have a font style I wanted for my pixel style Tetris game.
I found a font that would fit my style of game and it was available for non-commercial use.
https://www.dafont.com/arcade-classic-2.font
Update 9 - Sorting out the introduction title screen
Following starting my animation within adobe after effects I began importing needed assets and began animating starting with my introduction title screen, as seen in the gif below I used very simplistic effects in line with the style of game I wanted and I think they effect suited the introduction title screen well.
Update 10 - Start of the Game
Following my introduction I began sorting out how my scene would look for my game, setting up where specific assets were going to sit and how they looked in comparison to my storyboard.
Update 11 - Animation of falling blocks
After creating my main scene showing where the key objects were going to be placed I began editing and animation my first few tetrominos onto my scene using multiple transform effects including, position, rotation and opacity and scale.
In addition to this my unique tetromino containing a bomb is shown explaining what it does when cleared.
Update 12 - Player Clears a line
Throughout my animation and with the limit of a minute for animation I decided to only show the player clearing a full Tetris as they have the same animation and would have wasted time.
Update 13 - Player Clear Tetris
As seen in the gif below the player clears a Tetris as this happens the cleared blocks are removed and any remaining blocks fall slowly, setting up the player to continue playing.
Update 14 - Game Ends
Here we can see the game ending shortly after the player clears a Tetris and a GAME OVER text bar appears and shortly transitions into the high score scene in the next update.
Update 15 - Game High score screen
After the game over scene has been displayed a counter showing the drop 10 scores achieved by players is shown with numbers counting up, an effective display from a short tutorial I followed. Reference https://www.youtube.com/watch?v=ZXQbyxg-EsQ
This was used on the timer also.
Update 16 - Game Coming Soon Scene
Finally we have the game coming soon scene showing a very basic animation, which fades to black as the opacity of the assets is reduced to nothing.
Finally with the animation completed we move onto the audio section to finish my video.
Update 17 - Audio for final video
All the following pieces of sound were obtained from websites which i mixed into a backing track for my animation.
The Music:
Jungle Yuweinsta Equador 10.8
By TheTunk
https://creativecommons.org/licenses/by-sa/4.0/legalcode
https://freesound.org/people/TheTunk/sounds/182102/
Birds-Unprocessed
By Schluppupuppie
https://creativecommons.org/licenses/by-sa/4.0/legalcodehttps://freesound.org/people/schluppipuppie/sounds/8060/
Beach Drive
By B_Sean
https://creativecommons.org/licenses/by-sa/4.0/legalcode
https://freesound.org/people/B_Sean/sounds/421885/
Day Time Sounds in Malaysian Jungle
By paulprit
https://creativecommons.org/licenses/by-sa/4.0/legalcode
https://freesound.org/people/paulprit/sounds/619264/
Minimalist Monkey
By code_box
https://creativecommons.org/licenses/by-sa/4.0/legalcode
https://freesound.org/people/code_box/sounds/521607/
Update 17 - Audition Splicing
After searching for a backing track to no avail I decided to create my own simple backing track, I pulled together the sounds seen above in my behance and editing their decibel volumes to ensure each sound was at the correct level then I exported it out of audition to pull it into after effects for my backing track.
Here is my final backing track audio, I thought through the combination of an ambient sound with birds and monkeys in the background would fit my jungle themed animation.
Update 18 - The Final Animation
Now I have pulled together all of the assets and sound files I needed, Tetris in the jungles is complete and in its final state complete, here it is.
Update 19 - The Poster
Following the finalisation of my animation i decided to create a poster to promote my game reusing assets created for the animated prototype.
For my poster I used a lot of my previously made assets from my main animation, I used the arcade font for any text within my poster as I kept with the retro theme of the game, I included download buttons in my poster to show my game would be primarily made for mobile use, having them of to the side allowing the main Tetris board to be the primary focus, I used a real Tetris game to generate the random pieces to make the poster look like it was from a real game.
