Jack Finch s4011668 - CT4011 Animated Prototype

​​​​​​​

The initial idea for my game to animate is a survival style game inspired by strardew valley, civilisation and terraria. In which the player must discover new lands and start to set up a new colony while interacting with the local wildlife and native inhabitants. I started by gathering some reference images of what id like the theme of the game to be.

This mood board shows the aesthetic of what the "game" will be, with an old fashioned colonialism vibe, where the interactions with the natives could be that of either fighting them for land or trading with them for resources. I made a rough strory board at this point to show how the animation should play out subject to change...

The story board is showing how the animation will start with a ship on the ocean, then a panned out image of the ship aproaching an island. The camera will then shift to a character pointing out towards the land, where the Title of the game would pop up on screen (No finalised name as of yet). The animation would then change pace to montage demonstrating the things you can do in said game, which as you can see will go from gather resources (Wood to food and others), then building your new town, then demonstrating the interactions with the natives. I have thought of other ideas that could be added, none of whch are finalised as they will be considered based on time constraints of the animation itself and how long the animation of the parts so far take up.

Before getting into any of the animation software properly I wanted to get some mood boards of the games that gave me inspiration for this game, so i gathered some images of the parts of said games that reprisent my idea for this now frontier game the best.

After experimenting with character animation in After effects I quickly started to realise that it was taking me longer than I wanted to get use to the software. I also started to lose interest in the original idea for the animation, so what with the original idea being a fairly large undertaking what with the plans I had for it, I decided to put push back this idea for a game, and instead find a new inspiration for a game that would not only keep me interested but also be more managable in terms of animating it. 

My new ispiration for my game came from my dog murphy. I wanted to make a simple mobile game based around him on the farm. I started looking at successful mobile games that the majority of people would know, and thought of games like flappy bird that were very simple but people everywhere played it over and over even with a very basic game loop. So I want to use some how make a game based on this idea.  

In the MoodBoard above, I have included images of Murphy thr dog for reference also flappybird and a Flappy bird knock off game that was released after the original game was taken off the app store. I also used pictures of FarmVille as its a game i remember playing as a child that has a farm aesthetic that I would like to aim for in my game where it is cartoony and family friendly.

Now that I had my game idea I needed to start creating the assets ready to be used in After effects. To start with I created the main character muphy using the reference images from before and some other images of dogs in profile to get the side on proportions correct. 

I drew murphy using photoshop and a graphics tablet, where I created each body part as a seperate layer, this is done so that when the Photoshop file if opened in the After effects project the indevidual layers can be animated as seperate parts making it easier to be able to make a run animation. 

Above can be seen the Finished run animation for murphy, using some of the priciples of animation I have made sure that the seperate parts of the legs follow through as the bend forward and back to make its look less like the legs are straight sticks coming off of the body and more like legs of a real animal. Majority of the movement for murphy was done using Rotation key frames, but this still looked too static and un natural, so what witht the body section being the master of the other parts I used Position key frames to also give him a slight bob up and down as hes running.

Now that I had the run animation sorted I needed to start working on the aniamtion for the main gameplay of the game. For this I needed to make a Background that could loop so it would apear as the back ground is scrolling past as muphy is running... 

By using the resolutions for the iphoneX built into photoshop I set the height to match that of the phone screen and then times the width of the canvas by 6 so that there would be essentially 6 seperate images across the back ground before it looped again. Using rulers in photoshop I made sure that the clouds and hill would loop as well.

The above video shows how I wanted the back ground to look as it loops making apear as though thedog is running when in reality he is stationary for almost all of the animation. The Looped effect is acheived by having one part of the background take up the Phone screen sized gap in the front image, it then slides to the left being revealed in the phone screen gap as it moves, when it reaches the end it then loops back to the start allowing this peice of animaton be able to be played for any given amount of time needed, which will be helpful for fitting enough game play into the final animation.

Next I needed the Obsticles for murphy to avoid. Sticking with the farm scene I decided to go with large round hay bales rolling towards the player... 

I used a single bale that used a similar method to the back ground in which it is hidden behind the front phone border (Which will be updated later on), and when it passes across the visible section it then moves back to the right side of the screen again so that it can then be repeated.

For the Jump animation seen about I simply used the position key frames of the main body to have him apear to jump over the bale. I also timed this jump with the point in his run animation where his legs are fuller spread apart to further sell the idea of a Jump.

Now that I had a repeatable animation of murphy jumping a haybale I needed an end state for the game for when the player aloows murphy to hit one of the bales instead of jumping it...

For the Game over screen I timed the frames so that the moment the murphy sprite touches the hay bale a number of things happen:

1. The back ground stops scrolling .

2. the back ground shakes left and right to give the visual feedback of the impact with the Hay bale.

3. The postion of murphy moves upo and to top left corner of the screen before disapearing.

4. the Scale of murphy decreases to apear as if he is flying off into the distance.

5. the game over sign swells into screen.

The Sign slightly goes off screen to give it a somewhat rubbery effect where its momentum keeps it growing before it springs back to its set size.

Going forward I would like to add a retry and a manu button after the game over scene but I will want these Buttons to match those of the main menu.

For the menu I want to keep in the Farm theme and Use hay bales again, but this time use the smaller sqaure bales for the Buttons, I also need a Title for the game. I went with Murphy mayhem and wanted the title to be in a cartoony crayon like style...

I created the font by using the font "Tw Cen MT Condensed Extra Bold" then layering on top the outer black lines the colour inside leaving it somewhat rough and then the highlights using a charcoal brish in photoshop. I'll use this same font style to keep the rest of thr game/animation consistent. Each letter was made as a seperate layer as well so i could animate it into a title sequence. 

For the menu buttons I used this Haybale i made again in photoshop sticking with the farmville inspired cartoon style. 

Using simailar techniques to the main game play I've made the menu pieces appear from off the edges of the visible space. Then I gave them a slight wobble as to make the screen look less static once all the buttons are on the screen. I created another background similar to the main game one but not needing as much what with the buttons and the title covering most of the screen and being the key part of this scene.

I needed title scene anouncing the name of my game (Murphy Mayhem) so using the Titile peice I made earlier I animated the seperate letters to make the words fly in from the edge of the screen and then dance around. Once I figure out my Background scene i will also be coming back tot his title sequence to make it a little more interesting.

The next step for the animation is to go back and add in any of the backgrounds and replace the white block that is standing in for the phone screen and background to the trailer/advert. 

Using the sqaure haybale image used for the buttons created a background in which the bales are stacked in a brick wall style to sit behind the the "Phone" and what else is on the screen. I included the head from the murphy sprite, and left a large gap under him so that I will be able to later go back and add a speech bubble allowing murphy to explain the game and what can be seen on the screen.

On this screen I also added the apple and google store download icons to fit with the theme of this animation being a trailer or advert for murphy mayhem . 

Now That I had my back ground sorted I was able to go back to the Game play scene and the menu scene and replace the place holder back ground.

For the main game play scene I added the new background as you can see above, not only that I took the chance of going back to add the Menu and try again buttons using the same asset as the butoons on the menu screen with their own then have them animate from off the edge of the screen into the centre just like the menu buttons do than wobble again to keep the screen looking active.

For the Menu screen as well as the proper back ground being added, I have also added a small animation to the end in which the play button scales down then back up making it appear as if the button has been pressed. This will have an audio clip play along side it as well to clarify this.

Finally on the Title screen I used the same brick pattern of hay bales closing in from either side of the screen to transition into the animation, in which the Murphy Mayhem title moves into the screen, this has been sped up ever so slightly as well at this point to make up for the extra part of the bales closing at the begining.

Almost every mobile game on the market has some sort of cosmetic that can either be unlocked or purchased! I wanted one of the main features of my game to be the ability to unlock cosmetics for something. I did consider other murphy sprites but as the game is called murphy mayhem i thought being able to change the main character takes away from that name a little bit, so i considered instead the haybale rolling towards you, but instaead trying to keep it within a theme of being farm related or dog related.

In this Section you can see the examples of the Obtacles that can be Unlocked through game play, from left to right you have:

1. Haybale

2. Tennis Ball

3. Egg

4. Tractor Tyre

5. Round Cow

6. Skull

7. Cheese Wheel

I wanted the Trailer to end after this part so to do this I extended the scene ever so slightly and made the cosmetics fly away from the centre of the screen until they are out of veiw, after which the Title (Murphy Mayhem) fades in from the centre of the screen, then shift up to the top then Download now appears on the screen for a few seconds before the whole screen fades to black as the animation ends.

Before the indevidual parts of the aniamtion can be stitched together the menu scene and the gameplay scene need the speech bubble and dialogue added to them...

This relativly short step was just to add dialogue on the two main parts of the animation o explain how the games played and introduce the game...

The dialogue for the Main gameplay took a little while longer as the timing of certain parts needed to appear as if they were reacting to specific moments in the animation.  

As you'll also notice in this section I shanged the font used! I was originally using the font that the Murphy Mayhem logo was based on, but I felt as though it didnt fit with the theme of the rest of what was on the screen. So I used a different font called colouful crayon making the text appear much more as if it was part of the rest of the video as a whole.

The Final Video (No Audio) 

Each of the seperate parts of my animation were created in seperate projects in After Effect, once I had exported each of the segments of the whole video I decided to use Premier Pro to compile the animations together...

... My reasoning for this was that I have prior Knowledge of using Premier pro for comiling video and audio together from my level 3 year at University. Seeing as we are using the alot of software across the Adobe Creative suite for the majority of this project, I wanted to have an attempt at using transferable skills from the different softwares I have learned how to use over the years on this course. 

As you can see above I simply compiled the Parts of the animations together by exporting them from After Effects as Mp4 files and then placing them in the correct order with in the work area of premier pro.

Now the main body of the animation if all compiled together the Audio is the last part to complete the animation...

The audio for the animation are copyright free clips and music taken from websites. These clips include:

The Music: 

St. Louis Tickle

by Heftone Banjo Orchestra

From the Free Music Archive https://freemusicarchive.org/home

https://creativecommons.org/licenses/by-sa/4.0/legalcode

The Button Click sound:

From ZapSplat https://www.zapsplat.com/

The Retro Jump Sound:

From ZapSplat https://www.zapsplat.com/

The Haybale Bash sound:

From ZapSplat https://www.zapsplat.com/

The Dog Yelp:

From ZapSplat https://www.zapsplat.com/

For the final part of our assignment we have been tasked to create a 5 second gif of an animated banner to advertise our game, similar to the randomly generated advertisments you would see on the side of webpages.

For this banner I used alot of the assets previously made for the main Animation and created a new Ae (After effects) composition lasting 5 seconds, set to 160 x 600 resolution. I then used the Murphy animation composition as it was already a loopable run animation for the character and used the same technique on the background of having it appear to loop by having the postion be the same on the first and last frame so that once the animation is looped into a .gif it would seemlessly repear over and over. the bales were also using the same technic of rolling in from off screen and shifting position to the start point once it disapear off the left side of the composition. Finally I used the same Murphy Mayhem Title and the Download Now icons I made for the end scene of the animation and placed them in the banner with the Title Scaling to make it appear to pulse, the anchor point was move closer to the top of the title to make the scaling with with the banner better. The App Store and Play Store Icons were also added to show where this game would be available from as a mobile game.

This is the End Result: