Don’t forget to connect the return value with the target. The owning player is going to be the player controller, and we want to add this to the viewport. There, in the Event Graph, from the event BeginPlay, drag the node and type Create widget and from the class options select the health that you have just created Open the menu from the tool bar in the top of your screen above the viewport and select Open Level Blueprint This blueprint opens different to the other ones. The last thing that we have to do is to give the instruction of displaying this health bar in our screen and we will do this in the level blueprint. This will send you straight away to the graph of the widget blueprint.īreak the link between the nodes and from the first one lets bring our character: cast to 2d side scroller.Īnd we also need a reference to the health that we will pull from the node of our character. To program the bar open the tab beside the percentage and select Create Bind. There are many settings that we can toggle in this details panel, but it would take another complete new tutorial.
2d side scroller unreal engine 4 full#
This should change the colour of your bar to blue because now the progress bar is full (we have all our health). In the details Panel, in the Progress section, change the percent to 1. We are not going to focus in this tutorial on designing the HUD, just this simple health bar to test our Health System. Drag a progress bar to the canvas viewport and scale it. You can call it just for this tutorial Health Bar. In your UI folder (if you don’t have one, just create it) right click to open the menu and chose the last option from the unfolded menu and, from the new set of options, select again the last option Widget Blueprint. We can create a very basic Health bar just for the purpose of testing our health system. In the way that it is right now the spider is causing damage to our character, but we will never know because we have nothing to display this on our screen. And, also, connect the target to the character.įinally type the damage in the input that we want our enemy to cause to the character. It should look like this.įrom the exec node of the 2DSide Scroller we call the Health Sys that we created earlier. We select Cast to 2DSide scroller Character and we also connect the object to the Other Actor node. Then, first we drag from the exec node of our event and search for our character. We want to instruct our enemy to withdraw certain amount of health every time that overlaps our character. This will send you straight ahead to your Event graph. There select "On Component Begin Overlap” Open the enemy blueprint and with the flipbook selected in your components scroll your details panel until you can see the green tabs for the events. Finally open your flipbook double click on it and make sure the collision there is also set to Each frame CollisionĪll set.The collision in the details panel of our spider is set to OverlapAll (scroll down if you don’t see it in the panel).Our enemy is in the value 0 in the location Y axis.First thing is first, we are going to make sure all our collision is set as it should because it is one of the most common mistakes that we can overlook: Now we need to tell our enemy how much damage to cause every time they overlap each other. We will use this system every time that we want something in the game to cause damage to our character. In the details panel of your variable health, make sure the default value is 1.0 Connect the out node to the Set Health node and the Damage to the remaining node. Form the health variable Get drag and type Float-Float. Now drag again the health and this time choose get. It makes sense? Ok, drag your variable Health to the graph and select the option set health Connect this to the Event. Our health minus the damage will set the new health. Now we will apply simple maths to this event. This is the way your event should look now. Call it Damage and make sure it is a Float type
![2d side scroller unreal engine 4 2d side scroller unreal engine 4](https://cdn1.epicgames.com/ue/product/Screenshot/Screenshot1-1920x1080-09568adaefcd41cda6ba54a26e7b89a9.png)
In the details panel of this custom event Add a new input pressing the + symbol.