Below you can see the 2D Platform game that I have built as part of our Living Coasts project. Also you can see the method in which I used to build the game in Unreal Engine 4.7.6.
- The first thing that I did, before even opening up the Unreal Engine, was to make a character in Adobe Photoshop. To do this I used an art style commonly referred to as Pixel Art, a form or digital art that uses large pixels to show a blocky character. My penguin character is shown in the below image:
However, when playing the actual game, this would just be a static sprite, with no animation, so I needed to draw out some separate poses that my character would make and then compile them into a flipbook once I reached Unreal. Below are the other poses that I drew out for my character in Photoshop again:
Because I decided, due to the tight time contraints, to make a 2D character and game, that meant I didn’t need to UV Texture any models, nor did I need to worry about render or export times, and instead could import my different frames into Unreal directly.
- The next step to making my 2D side scrolling platformer was to open up the Unreal editor, along with its built in Starter Content, in order to give me a small head-start when it comes to building the Blueprints, as shown below:
- I then imported all of the above images of my Penguin character as textures, all with an Alpha channel so I can have just the character visible, and without the white box around it. Below you can see all of the textures that I imported into Unreal:
- Once the different textures had been imported I created sprites for them all to fit, this way they would become solid objects in the 2D space, as opposed to just textures, which nothing would interact with and cannot be controlled like a sprite can be. The Sprites:
- Once these textures were all individual sprites, I create two separate Flipbooks. This allowed me to place the different sprites in an order and animate them, giving the illusion of movement. One of my flipbooks, the one that will be played when the character is moving, is displayed below:
As you can see above, in the centre is displayed which image is currently being shown, along the bottom there is a timeline where the number of seconds it takes to play the short animation is shown. Just above the timeline, where the three white box shapes are displayed, is another version of the same timeline, however this one displays which image is being played, and which image is next etc. Below you can find my 3 different flipbooks in my file system:
- Once I had created, compiled, and saved all of my flipbooks I began working on the blueprints for the character. To do this I had to replace the default sprite that Unreal had in there as part of the starter content, with my own Penguin Idle Animation sprite. Next was just resizing the sprite and making sure it was level with the ground.
The arrow on the penguin is the direction that the character will be facing when it spawns, and the tablet shaped wireframe around the character is the collision area, so the feet of the sprite are touching the bottom of the collision area making it appear as if the character is placed on the solid ground, whereas in fact its the collision area that is touching the ground. The wireframe collision zone cannot be seen when playing, only in the blueprints as a reference.
Below I have shown you the different flow diagrams that I have made for my character. Each one has its own purpose and does something that makes the game flow correctly and the character interact with all the things it needs to.
This flow diagram shows how the character will handle animation. The first red box shows the title ‘Update Animation’ – this is a command. When prompted it will cast to the ‘Set Flipbook’ command, which has to decide whether the is ‘False’ or ‘True’. When the character is false it plays the ‘Idle’ animation, because False represents the character when its not in motion. When the character is ‘True’ it will play the ‘Run’ animation, because True represents the character when it is in motion.
The below diagram shows how the character will deal with movement. When the player inputs the ‘Right’ command (because it is a 2D side scroller it can only move right at the beginning, then left, which will refer to the same piece of code but in reverse), it will move the character to the right by a certain set velocity. It will also call upon the ‘Update Animation’ command and so then the movement animation will play because the character is now ‘True’ or moving.
The command below is probably the most simple out of all of them. It reads that when the jump key is pressed, that the character should jump, and when released it should stop jumping. Its as simple as that.
The two images below are both part of the same flow diagram, but it too big to fit into one screenshot so I had to split it into two – the white line that exits the first image at the bottom of the screen connects directly to the ‘Delay’ box in the second shot.
In the first shot, the ‘Event Begin Play’ box at the very beginning tells the game that this should be played from the start of the game, when it is first loaded up. Then, the next two boxes refer to my counter, (which we will discuss a bit later), and then I have implemented code to allow my character to respawn when it falls off the platforms. It basically tells the game to, when the player is killed, to get another character and place it at the beginning of the game, with 0 delay, and allow the player to continue playing.
- Once I had my character set up completely I began working on the layout of the 2D Platforms, building a challenging yet fun, linear style, platform race, with coins to collect along the way. The completed course looked like this:
Down in the lower left hand corner you can see a small flag and an arrow: this is where the character will spawn at the beginning of the game, and then respawn when it falls off the platforms. Along the route I have placed ‘rings’ that are illuminated slightly and rotate on the spot. Once the character bumps into these rings a short audio cue will sound, and the ring will disappear. The audio indicates to the player that they have collected this coin – and is shown in the top left corner via a simple counter.
For my coins I made a basic Torus in an ‘Actor’ Blueprint, and added a golden texture to them to give them a ring type look. I then also added a light to the bottom of each ring, in order to give them more of a shine and made it so that they will rotate on the spot. Below you can see all the things required for my rings:
As you can see in the code above, I have it tell the game that this object can can be interacted with by the player, in that the character will be able to pass through it as though it wasnt there. Also, I have set it so that when the player touches it, it will be destroyed, and an audio cue will sound along with an increase of 1 on the counter. This tells the player that they have picked up the coin.
- Test!
The next thing I did was to quickly test the game, now that the layout and character were both complete. Before this I had obviously been testing it through every step, but this was the first test I made when everything was complete, testing every aspect of the game as I went.
- After I had tested the game and fixed any and all bugs that I found I began work on two things: a menu at the beginning of the game, and an ending title screen.
The first thing I needed to do was to create a new level, this would be within the same project file that the main game is in, its just as a separate level. I opened up a new and empty project file and, down in the project menu, I clicked ‘new Widget Blueprint’. This would create a new blueprint that would display a screen over the original level.
Using this I created a very simple menu system, with a plain white background:
Using the same flow diagram system as shown for some other aspects of my game I made the buttons take you to their respective places – the ‘Quit Game’ button will close the game entirely, and the ‘Play Game’ button will take you to the main level. You can see this below:
Now that all of the buttons were set up I needed to make it appear on this level. To do this I went into the empty blueprint for the level and made the following flow chart:
This tells the game that, when this level is played, to create the menu widget, add it to the screen, and show the mouse so you can click either button. In the main game this code is the same, however it makes sure the menu is removed from the viewport and that the mouse disappears instead.
Once I had finished creating each of these different splash screens (the ending one is the same, however it says ‘congratulations’ and it displays when you reach a certain location) my level file system looked like this:
Bugs and Problems
I encountered very few problems when making my game, due to the fact that I managed to find some very good tutorials online, and thanks to the help of my tutors, who managed to help me with any and all of the problems I encountered.
One of the main problems I did encounter was, due to the fact that the tutorial I was watching was made in an earlier version of the Unreal engine, I did not have some of the flow commands that they used. This proved difficult for me as I had to work out how to divert past this problem and try to avoid it all together. Eventually though I managed to find a simple and easy way to bypass it, only using one extra command, and all of it worked perfectly as though I had used their code.
One problem that I have not managed to solve was the problem that my character did not have a jump animation. Or rather, he did have a jump animation, however, I could not figure out how to make it so the game would play this animation when it jumped. In one of the previous sections of this post, I said how that when the character was ‘True’ it would play one animation, and when ‘False’ it would play another. Due to this binary system of playing animation, there was no third state, so effectively there was no jump, only in the ‘Jump’ command, the character treated it as just moving. After I spent a good 2hrs online looking through many different tutorials and after talking to my tutor about it extensively, we didn’t manage to come up with a solution to this problem, and both decided that it was better to focus my attention elsewhere.
Evaluation
This is my critical evaluation for the Living Coasts Game Project that we had to make.
Process:
Originally I had planned to make a 3D Open World game, where your character, an animal from the park that would be hidden from you, would go around the park and talk to animals to find clues as to which animal you were and what home you belong in – the cliffs, the ocean, the coast etc etc. To do this, I planned on making all of my assets using techniques that I have picked up over the past 3 years, in Cinema 4D, as I was most familiar with that program. I would also make my characters using a piece of free software called Sculptris, where you can model like you would with clay, and sculpt out a penguin and other animals that can be found on the Living Coasts site. I would have taken all of my textures straight from Living Coasts, after we took a short trip there to take some reference images for our ideas generation, I thought that, to make it look even more like the park, that I would take pictures of the cliffs and grasses and get my textures first hand.
However, due to the time constraints put onto this project, this was not possible, and so instead I decided to make a smaller 2D platform game, with cartoony graphics. I used my Adobe Photoshop skills, as well as the software, and my graphics tablet to draw a pixel character and some pixel styled platforms for my character to jump across on. This was a whole new style to me and I found it fun and a new challenge. I think that both assets – the platforms and the character – both turned out really well and I may considered furthering my development of these skills and this artistic style. Once these assets were made, I brought them into Unreal and then used some new skills which I picked up from online tutorials and my tutors.
Problems:
As outlined above, i did not have many difficulties when making this project, due to the good tutorials that I followed and the help from my tutors. However, there was one major issue that I found that I have yet to resolve. The problem that my character did not have a jump animation. Or rather, he did have a jump animation, however, I could not figure out how to make it so the game would play this animation when it jumped. In one of the previous sections of this post, I said how that when the character was ‘True’ it would play one animation, and when ‘False’ it would play another. Due to this binary system of playing animation, there was no third state, so effectively there was no jump, only in the ‘Jump’ command, the character treated it as just moving. After I spent a good 2hrs online looking through many different tutorials and after talking to my tutor about it extensively, we didn’t manage to come up with a solution to this problem, and both decided that it was better to focus my attention elsewhere.
This problem may have a chance at being solved over the summer, as I will not be constrained by the tight time constraints that the course has come with.
Improvements:
One major improvement that I would like to make to my project is the addition of more sound effects and some ambient music for the background. This could come with sounds such as footsteps, some penguin noises, a clap or crowd cheer for the congratulations screen at the end, and maybe even some background ambiance as well as the music.
Conclusion:
In conclusion I believe that my project was a success, despite the lack of music or sounds, or the jump animation. I believe this because, despite all these factors, it is a fully functioning game – with a character, a goal, collectables, a beginning middle and end, and some short sound bites. With some small refinements to the game, and some better animations of the menus, I believe this could be a game that kids visiting Living Coasts could all enjoy for hours on end.
Games and Interactive Design 