My First 2D Game in UE4: Health Recovery and Ammo

Creating Pick-ups for Health Recovery and Ammo

In this tutorial we are going to import to the engine items that can  be collected to recover our health and to use as Ammo. For this purpose we will go deeper into the design of our HUD, adding text to display the ammo. Have your Textures for your collectibles ready with the transparency and the power of 2 size in format PNG or TGA as usual.

Health Recovery

We can star creating a Pick-up to restore our Health, as we already have a Health Bar, in a way that every time that we overlap one of those items the item will disappear from the scene and our health will be a little restored.

As usual, Import your texture to your textures Folder, right click on the Texture to open menu, Create Sprite, drag sprite to your sprite folder. You can adjust the pixels per unit and scale the object if you need as we did in previous tutorials. 

Sprite Folder

Now we need to create a blueprint with this object in order to be able to add some coding. Go to your blueprints folder, Right-click: Blueprint Class: Actor and name it Health_BP.

Blueprints Folder

Double-click in your blueprint to open and in the components section add a new component sprite and drag it on the default scene. Remember also to add the new sprite to the blueprint in the Details Panel. Search for a rotating movement in your components list to add to give a special effect to our health blueprint.

Blueprint Components

Before adding some code to the Health PickUp, we are going to create in our character Blueprint a system similar to the health one that we created in the previous tutorial but in this case, instead of taking health away, we are going to add health to the health system.

Create a custom event in the character Blueprint and call it Recovery_Sys. Add in the details panel an input that you can call Pickup. Drag the health Variable that we created in the previous tutorial and select Set. Drag it again and this time select Get. From the variable Get drag and type Float+float. Connect to the Set Health node. Connect the input Pickup to the node in the Float+Float.

Recovery System in Character Blueprint

We can go back now to our health blueprint. In the details panel make sure the collision preset is set to Overlap All.

Health_BP Collision Preset

Scroll down in the details panel and create an event On component Begin Overlap and this should open the Event Graph.

We have to cast this event to our character. Pull the exec node and type Cast to 2DsideScroller Character. Connect also Other Actor to the Object Node.

From the 2DSide Scroller we have to call the recovery system and connect the target node also to the character. Give a value to the input Pick Up.

On Begin Overlap Recovery System

If we test our game now, we lose live when we overlap the enemies and we recover when we overlap the Health Pick up, but there are two issues: First we want the pickup to disappear when we collect it and this has an easy solution. We have to add a new node with this order in a way that On Component Begin Overlap we want to Destroy the PaperSprite Component.

Destroy component

The second problem is that every time that we overlap the enemy, the enemy withdraws health and it keeps doing it in negative values, but we never die, and when we recover health, we keep recovering health even if our health bar is already full.

We are going to sort out the game over issue creating a very simple Game Over screen to cast when our character health is under 0.

Create a new level and name this GameOver. Maps Folder, right click on an empty space, select level and name it.

Import to your texture folder an image to use as a background image for your GameOver screen.

Let’s jump to our UI folder and create a Widget blueprint. Right click on an empty space in the UI folder, select User Interface and Widget Blueprint.

Create Widget Blueprint

Open your widget blueprint to have access to the canvas. Check this tutorial if you want to know in more detail how to create your Widget Screen.

Select in the Palette, to the left of your screen, image and drag it to the canvas. In the Details Panel with the image selected open the Anchors tab and select the big square in the left bottom corner of the options.

Select Anchor Point

Scale the image to cover the complete canvas dragging the corner of it.

Scale image to cover the canvas

In the Details Panel scroll down to the Appearance Section and open the option brush select the image that you imported for your gameover screen (in this case is not a sprite, it is a texture).

Add your Texture

From the palette drag also Text to you canvas. Again, we will do something very simple. Anchor this text to the centre of the screen and drag the text to the centre. In content, in text, type Game Over and this will change the text also in your screen. Change also the size and colour of your text to suit your preferences.

Adjust your text colour and size

We go now to our 2dside scroller blueprint to add to the character health system the instruction of changing to the level GameOver when our health is smaller than 0.

We have to add to our Health-Sys a condition. Pull from your Set Health a Branch. Get your variable Health and pull the node typing <= and connect to the Condition of the Branch and leave the value to 0. If this condition is True, we want to Open Level and the level name is going to be GameOver.

2DSide Scroller Blueprint

Now we want this screen to be added to the level GameOver Screen. Open the level double clicking on it from your content browser. In the toolbar above the viewport select Blueprints and then Open Level Blueprint.

Open Level Blueprint

In the event graph, From the Event BeginPlay we Create Widget and select the class that we just created: Game Over. The owning player is the Player Controller and we want to add this widget to the Viewport. Connect the target and the return value.

GameOver Level Blueprint

Now if you test your game, when your character’s health is under 0 the game over screen should pop-up. We have not design how to add in this screen the Return to Menu button or Quit button. But this is something that you should consider to add to your interface.

The last thing that we need to sort out in our health pickup, is that we only want to collect this item if our health is lower than 1. Let’s open the health pickup blueprint in our content browser. In our event graph we are going to establish this condition. Pull from the exec node of our 2Dside Scroller a branch. We don’t have our health variable here, because it is been created in the character blueprint but we can pull it out from our 2DSide Scroller node. We pull from the Get health the Float <=, change the value to 1, and link to the condition in the branch. Link the branch to the Recovery_Sys.

HealthPickUp Blueprint

If you try your game now it should be over when your character runs out of health and your character shouldn’t be able to collect the health pick ups when his life is full.

Create the Ammo Pickup

Create the Ammo pickup blueprint as we already did with the Health Pick Up

We are going to create a similar system as the ones we have created for our health in our character blueprint. Create a variable float Ammo for this system and an input  AmmoPickUp.

Ammo_Sys 2DSide Scroller Blueprint

Next, in your ammo blueprint create an Overlap Event as we did before, make sure the collision is set to overlap all and give a value to your pickup input of 5 or any amount that you want to increase your ammo when you collect the item. Remember to destroy the component.

Ammo Blueprint On Begin Overlap Event

In the UI in which we have created the health bar we are going to add our ammo too, so maybe it would be a good idea to change the name of this widget to HUD. Open it and, again something very simple(check this link to go deeper into the widget design): Drag two blocks of text to the Canvas. Place them wherever you like and in one type Ammo and in the other type 0. In the one that you Typed 0, in your details panel scroll down to the content and in text bind the text, because is in the text where we want to increase when we collect.

Canvas Details Panel: Bind Text

In the graph of the text we add this coding, the only difference with the code that we have for the health bar is that in this case the return value is a string which is used to print text, but the conversion gets don't automatically when you try to connect the nodes.

Binding Code for the Ammo

Add the ammo blueprint to the viewport of  your game and test the game to see if your text increases every time you collect the item and the item disappears from the screen.


Using these basics, some imagination and logic you can experiment in different types of platforms and damage for your character.Try your self to combine a moving platform with the damage to create other types of danger. You can also change now the Flipbook for the default character and add your own player. See what you can came up with using these basic tutorials.