Game Development Blog

When starting this module I had next to n0ne in experience when it came to using Unreal Engine 4. This quickly changed after doing a lot extensive research in the form of lectures and individual research via articles and tutorial videos.

After starting up Unreal Engine I chose the 2D platformer template, to help me have the basic blueprints in order to get a kick start into making my game. Using the 2D platformer template is much more efficient that starting from scratch.

Importing and Editing Assets

The first step for me was to add the games character into the content tab. This is done by importing it via the “import” button. This imports your files that you have already made, In my case all of my assets where created within Photoshop. In order to make the asset into a sprite, you have to turn the asset into 2D style. This is done by right clicking on your asset in the content tab, then select “sprite actions” and then “apply Paper2D Texture Settings”. This vastly improves the overall look of my art style of my assets.

Asset Into 2D Style

You then have to turn the asset into a sprite in order to implement it into your game. This is done by the same process as making it paper 2D except you click “Create Sprite”.

Assets Into Sprite

After importing all of my individual frames for my characters animations I then had to change the edit options in order to get the size and style I wanted. After placing my character into the game I quickly realised that the size I made it in Photoshop was way too large for the game and looked very over sized. My first thought process in trying to resolve this was to go into the edit options within Unreal itself. After looking for quite some time i couldn’t seem to find any option to make the sprite smaller.

I then decided I would have to go back into my Photoshop files and edit all the frame sizes from there. Having over 40 different images that needed to be edited I quickly realised that this would be a very long process and that there must be a simpler way to do it. I looked online to try and find a quick way to edit the sprite size. I found a video in which it shows a way to edit the size from the edit menu within Unreal, not only that there was a way to edit the sprites in bulk. This was great news because prior to learning this information I was editing sprites individually, which was a very finicky process trying to remember all the numbers and values for each sprite.

If you select all of the assets you want to edit and click on asset actions and then select “bulk edit” you can edit a number of assets at the same time rather than doing it individually, which save some extra time while creating a game.

Editing In Bulk

The next step was to create an animation for my frames. This is done by selecting all the frames you want to use for your animation and then clicking “create flipbook”

Creating Flipbook

This then comes up with a tab called “flipbook editor”. Here you can make your frames longer and shorter by the tabs at the bottom. You can even change the order in which they play if you so desire.

FlipBook Editor

After I had created my animation via the flipbook I needed to change the default 2D character to my one. This is done by clicking on the 2D character blueprint in the blueprint tab.

Opening Viking Blue Print

The next move was to change the source image to the one I created earlier as a”flipbook”. You can find this in the options on the right side of screen under the “viewport tab”.

Viking idle as source.PNG

After changing all the default animations to my ones, I decided to add in other assets which would be used for the games environment. This is done in a similar way to the character assets except i found a way in which to import assets in bulk via a spritesheet. I wish i knew this before adding in my character because it would’ve saved a lot of time saving the different frames within Photoshop.

I had a Photoshop file which had 4 different tile sets on the same image. You can actually put that into Unreal and it will recognise the different assets instead of making it into one image.

You can add spreadsheets by pretty much the same process as “create sprite” but instead you click on “extract sprites”.

Extracting Sprites

Extracted sprites

Knowing this earlier on would of been great to save time earlier on within my project, but i now know that this is a much better way for importing sprites into Unreal.

Blueprints and Coding

When I started this module my main goal was to include a fairly detailed damage system within my game. This being my main focus I decided to start off with creating this within my game.

I wanted to create a health bar for my character and make him able to take damage and then also when he took enough damage eventually die, so the player couldn’t continue on any further.

The first step in doing this was to add a health bar in the UI so the player had an indicator on how much health the character had left. This was done by adding a “UI widget” within the “Blueprint tab”.

Creating Health bar

Within the “UI Widget” viewport I added a process bar and edited the colour and size of the visual bar.

Health Bar.PNG

This then needed to be binded to the character within the Blueprint system. By clicking on the “bind”on the right side of the menu it takes you to a blueprint, where you can edit the percentage of the bar according to who you have it linked to. This is the Blueprint that essentially links the health bars percentage to the character.

Binding healthbar with viking.PNG

Health widget Blueprint

The next step was to add damage to the character and give him different actions depending on what his health was at. Previously I have already created two animations that the sprite would do depending on the health bar. These two states where Knockback and dead. So I created a Blueprint which decided which state he would do depending on his health. The key part here is the “branch”box. This makes it possible to have a true and a false option within your blueprints. In this example I made it so if the percentage of his health was less than 0 he would go into a “dead state”, if not he would get knocked back and play the “Hit”animation. I linked the health bar with these different animations and this is what the blueprint looked like.

Player Damage false hit anim

The “hit”state however did not have any effect on the sprite and he didn’t get knocked back at all. To combat this I added a force to the “hit” state and added certain values to the different axis to give him a knock back effect. I also added a disable input on the player controller, so that when the players health gets below 0 the player couldn’t move anymore. Adding force to hit state.PNG

I had an issue in making the character get knocked back from the direction he was facing. The character seemed to spin around and face a strange direction, which just didn’t look right at all. I added a state which made it that he would always get knocked back from the way he was facing without spinning around to the wrong direction. This is done by adding another force as well as the knockback to make sure he was facing the right way, I called it “facing”.

Hit final settings.PNG

At this point I didn’t have a way of telling if the system was working or not since I haven’t implemented anything that could damage the sprite. So I simulated damage by added a custom event that was linked to the “/”key. I made it so the key took a certain percentage off the health bar. Decrease health to dead state Blueprint

After setting this test up I realised that my health bar wasnt showing up within the game. This took a very long time to work out why my process bar wasn’t showing up in game. After a lot of research I realised I needed to add a blueprint which shows the health bar within the viewport. In the end I ended up with this.

HealthBar blueprint view

This makes it so when you start to play a sequence starts bringing up the UI which i created earlier and links it to the player via a “HUD Widget”and then add it to the viewport so it can be seen throughout the game.

Game with healthbar.PNG

After making the health bar visible I could then test the damage system through the damage simulation I set up earlier. It all seems to be working very well and I could then move on to the next step which was making something within the game that could damage the player.

Adding Damage Assets

I needed to create an actor that could cause damage to the player. The best way i felt this could be done is by setting up spikes within the game. This is done by clicking on the blueprint menu and add a actor, which I called “spikes”.

Adding Spike blueprint actor

I then added a percentage to the collision box that the player would take if it came in contact with that certain area. This was done by making a blueprint that adds a certain damage value within the spike actor.

Spike Actor Blueprint.PNG

The main aspect of this was to add a damage system and link it to the character and have it go through the damage states which I set up earlier. Originally i thought i would of had to make the damage system all over again with the different states within the spike actor but this was not the case, if you simply link it to the characters blueprint.

Fixing Bugs

I had a continuous issue with the landing of the jumping animation, where it seemed to weirdly clip into the floor. At first I thought it was to do with the collision boxes set on the sprite or maybe the title asset he was clipping through. I spent a long time testing different tiles sets to see if it was just that one platform he was clipping through as well testing the sprite itself. I changed the collision boxes for box a number of times in many different ways with no luck.

issue with collion jumping.PNG

After a long time searching I finally found out that the pivot option wasnt change to same setting as all the other sprites that I did when I edited them via “edit bulk”. I must have missed this sprite when selecting the different sprites. A quick change of the pivot type and there was no more clipping through the titles.

Chaning Jumping pivot mode issue solved.PNG

 

Adding Collectables

I wanted to add coins as a collectable item within the game. After having a lecture showing us the process to create a collectable, which was essentially making a new actor blueprint and then making it so when the character overlapped the actor it would be destroyed, making it look like you collected it.Collectable BP

This wasn’t enough for me however, I wanted to add a sound effect that the player heard after picking up the coin. This was actually a very simple process. All it involved was importing an audio clip and making a event for when the player got to the coins location it played the sound.

Adding soud effect to coin

Adding Movement To Blocks

I wanted to make a platform move from one spot to another. Fortunately during a lecture i was shown exactly how to do it. it is infact very simply. All you have to do is add a thing called a “matinee”which adds a timeline where you can add keyframes of the position of the block you want to move.

Adding Matinee

Adding movement to blocks

Making a Main Menu

I really wanted to add a main menu into my game as a thing the player first came into contact with while starting the game. I started by creating a new level to start on. I then made a”UI Widget” that I could make the main menu on. I change the background to a title screen I made previously on Photoshop. This is done in a similar way to the sprites by changing the source image to the one have imported. I need to add buttons that linked t0 the original level I made. All i had to do was drag in the buttons and link them via blueprint by saying when its click start level 1.

Raid mainmenu adding buttons.PNG

Linking to main level.PNG

Final Thoughts

After finishing my main menu I ran out of time to add anymore elements to my game. In some ways I wish I managed my time better so I could of completed more aspects I planned to add at the beginning of pre productions, but over all I am happy with the final product I have created and I have learnt a great number of skills in process.

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s