This page contains all of the assets I produced for this project.

 

Sketches

In the images above you can see multiple sketches I did using pencil, alcohol ink marks and A3 paper. The designs are aimed towards children as they can easily understand the different shapes and colours without confusion meaning they will have no trouble with following the narrative visually, whereas they would struggle if all the designs looked similar and much more detailed.

Character Animation

Using a browser editor named Piskle I created sets of pixelated images and Animations for use as sprites and animation files inside my game engine when adding functionality and making my idea an executable video game.

In a 2D platformer, the sprites and character Animations are vital since the players will remember the cycle and perform their actions based on the timing of the level and the characters movements.

Storyboard

Below are the digital art images that I created so people could easily picture my idea and see the general look of my game and its first cutscene. Instead of using Photoshop this time I used Adobe Illustrator and learned quite a bit about the differences between the software, however, since this was my first time using Illustrator for a project it did slow down my production schedule.

 

Prezi Link

The following web link is a link to a powerpoint I used in a presentation explaining the steps I took during this project.

https://prezi.com/view/lvEsKFiqNnQt1DoQfH6l/

Unreal Engine work

Movement & Animations

To add visual movement to my character I created some unreal engine animation files by adding in my existing .png images into my content browser and compress them into the animation file. Once I had the animation files completed all I needed to do was add them to my characters blueprint code. This was easily done as I created an animation node which contained all my Animations and an algorithm to determine which animation would be played based on the current events and inputs.

Movement Controls

Since I am creating a 2D platformer my character would only ever move along the X-axis so all I did was edit my project settings to allow input from the player along the X-axis.

Unreal Engine is an advanced and professional programming engine already has a set of jump functions which are preprogrammed and to apply them to my character I just needed to add these functions to my characters blueprint.

Just like the jump functions unreal engine already has a pre-programmed crouch option which I enabled onto my characters mesh allowing him to crouch.

Animations

Below is a series of .GIF files containing the images I used to create my character’s animations.

Practice

This animated image is my first attempt using the online editor Piskel and also an example of me trying to understand how the different human limbs move when people are walking. The orange represents the left arm, the blue is the right leg and the two other colours are green for the right arm and purple for the left leg.Walking #1

Idle

This is what it would like if the player didn’t make any input to move the character (standing still because no one pressed the button). Sonic in the first video game (Titled: Sonic The Hedgehog) will change his movements if there is no input for a certain amount of time so that he is telling the player to hurry up and continue the level.

Fox Idle Cycle

Walk

Just like the human animation I did to practice I had to figure out which limbs would move where and how they would move to the next position, for this, I researched different images of a fox and referred to an animation that was published on YouTube. Whenever a player makes an input to move the character left or right they will see the animated image below but only whilst the character is still moving, once movement input stops the character will return to their “Idle” animation.

Fox Walk Cycle

Jump

It was difficult trying to figure out how animals and fox’s moved naturally compared to humans so for the jump animation I sped things along by assuming the movements I think a fox would make when performing a jump.

Fox Jump

Crouch

The crouch animation was the simplest animation to produce since the fastest way to make it is to use 1 or 2 poses and the desired amount of frames to set the speed at which the character model transitions from those positions. If I were to have a bigger time period I may have added more poses to increase the realistic movement when moving from a standing position to a crouching position, however, I was restricted to a small deadline for this project and could not have finished the more detailed animation in time.

Fox ICrouch

My Functions

To add a challenge to my level I researched and learned how to create certain functions and events within Unreal Engine.

Animation

The images below are a visual demonstration of how to create a 2D animation inside Unreal Engine (v4.17.2). First you must have a “Paper Sprite” for 2D games (on a 3D game you would need a mesh and animation file with .fbx on the end that has been exported from a 3d package such as Maya) and import all the individual frames you have into Unreal and Unreal will then label them as “Texture files”. Once you have your characters blueprint (the Paper Sprite file) and your individual frames inside Unreal Engine you can then “Create a Flipbook”, a flipbook is a set of images compressed together in one sequence, inside your flipbook editor window add the individual images into the flipbook and then save and close your flipbook editor window.

In the last two screenshots, you can see the blueprints needed to apply the flipbooks animations to your 2D character or Paper Sprite as Unreal would class it.

Crouch

Blueprint Crouch

Switch & Door

Adding this showed my capabilities in Unreal Engine and my understanding of meshes as well as blueprint coding.

Interaction

This is one of the most common functions inside video games since it gives the devolves freedom to quickly assign a default interaction class to any object and therefore allow the player to change something inside the video game level. In my case, I decided to use it so text will appear and disappear from the screen as the player interacted with objects like signs and None Player Characters (NPC’s).

Dialogue

Although I had created an interaction system which would display text I still need to tell Unreal Engine what text to display and when to display it. I did this by creating a table inside Microsoft Excel containing numbers assigned to the different lines of text I wanted to display for the player to see.

Launch Pad

In my level design, I had led the player character underground and needed a way for them to get back up to the surface which is where I researched and learned to create a jump pad that will launch the player into the air and feature its own spring animation.

Level Map

Using some royalty free and creative commons sprite images I created a tile map featuring the sprites and allowing me to create both a functioning level and a background. Using creative commons assets was very helpful since even though it was not my designs it allowed me to make up for any almost time in my schedules as I already had the images rather than creating some myself.

User Interface

Any time you are using a menu system it is actually a User Interface that someone has designed and I needed some so that I had a pause function and a home menu where the player could choose which level they wanted to play.

Packaging

The final development step is to package my project so that all my assets and files are compressed and can be saved as an executable file for distribution and allowing players to actually load up my video game. With Unreal Engine, all II had to do was tell it which platform I wanted people to be able to play my game on and Unreal Engine did the rest of the work automatically.

Below is a link to a Zip file containing the game Executable and all the other files needed to run my game on Windows.

https://studentsprestonac-my.sharepoint.com/:f:/g/personal/crobinson345041_students_preston_ac_uk/EtS3p3LaSCtNm-Tf4j4Z7qIB50YS-qqjO1eIZ7WldI3WdA?e=f0KPSe