In the previous tutorial, we learned how to make a basic enemy AI, but in this one, I want to make a more elaborate damage mechanic for when the enemy collides with the player, along with a game over screen and a victory screen for when the player reaches the end of the level we’ve been building. We are also going to talk a bit about layers. For this tutorial, we are going to use a few more assets that you can download here. Of course, as always, you can modify these mechanics to suit your needs.
If you haven’t followed the previous tutorials, don’t worry, this tutorial can still be useful to you.
Damage mechanic
1 Let’s start by opening our project through Menu → Project → Open recent → Super Shapes Platform as always, so we can begin to implement the HP bar of our player object.On the game layout, right-click anywhere and select Insert new object → Sprite, naming it “lifeBar”.
Click on Insert and click anywhere on the layout. When the object editor opens, click on the folder icon, on the top-left corner of the window, and select the “lifeBarFull.png” file in the asset folder you just downloaded. Also, rename the current animation as “full”.
Close the editor window and place the HP bar here:
Right-click anywhere on the layers window and click on Add layer at top. Then rename the new layer as “HUD”. Make sure the HUD layer is above “layer 0”.
Now, click on the HP bar again, go to its properties, and change its layer to the HUD layer.
Now there’s an identical animation beneath it, called “Animation 1”. Let’s rename it to “less5”.
Select the “less5” animation and click on the folder icon again to replace the bar’s sprite. Select the “lifeBar1.png” file.
Duplicate that animation three more times and rename them like this:
For the “less10” animation, choose the “lifeBar2.png” file.
For the “less15” animation, choose the “lifeBar3.png” file.
For the “less20” animation, choose the “lifeBar4.png” file.
Click OK and close the instance variables window.
With the player object still selected, let’s also add another behavior to it. Go to Edit Behaviors and select the Flash behavior. That’s how we’ll be able to make our character flash for a moment after getting hit by the enemy.
Now let’s head to the Event Sheet. Open the Enemy group we’ve created last time, then open the Enemy hit sub-group. We’re going to modify the single event we have in that sub-group:
Delete the Restart layout action. Right-click the event and then click on Add → Add another condition. We’re going to select the Is flashing condition.
After clicking on Next and closing the window, with the new condition still selected, press the letter “I” on your keyboard to invert the condition.
Now, we’ll add new actions to this event. Click on Add action, select the “spriteCharacter” object, and choose Flash.
Click on Next, adjust the action’s parameters like this and click on Done:
Under that action, let’s add another one, selecting the “spriteCharacter” object again and then Subtract from.
Click on Next, select the “hp” variable, set the number to be subtracted to 5, then click on Done.
The new version of this event should be looking like this:
This means that if the enemy overlaps the player while they’re not flashing, the player object will flash for 1.5 seconds and it will lose 5 points from its HP. But if you test the game now, you’ll see the HP bar still won’t be affected. Let’s change that now.
6 Let’s close the Enemy group for now. Then, right-click anywhere on the sheet and click on Add group. We’ll name this new group “Player” and click OK.
Right-click this new group and add a sub-group to it, called “Player HP”. Here, we need to add events to modify the HP bar once the player loses HP. Go to Add event to ‘Player HP’ → spriteCharacter → Compare instance variable.
Set it up like this and hit Done:
Now go to Add action → lifeBar → Set animation.
Then, write the name of the “full” animation and hit Done.
This event tells the game that, if the player’s HP is 20 (full), the HP bar has to be showing the “full” animation. Now, you can copy this event and modify it to activate the other animations. It should look like this:
If you test the game now, you’ll see the HP bar is working fine! But when it’s empty we don’t have the game over screen yet. So let’s take care of that now.
Game over screen
7 First, create another layer on top of the others, called “game over” and leave it selected before the next steps.
Change the Parallax of this layer to 0% x 0% too. Go to the game screen and add another sprite object called “gameover”. When the object editor opens, click on the folder icon and select the “gameover.png” file.
Close the window and place the object in this position (and make sure it’s in the “game over” layer):
In the same layer, let’s add another sprite object, called “pressEnter”. Choose the “restart.png” file for this one and place it here:
Now go to the “game over” layer properties again. Disable the box beside the Initially visible property, leaving it like this:
Go to Add action → System → Set time scale.
Set it to 0 and hit Done.
Now, we need to add another action, also in the System object: Set layer visible.
Write the name of the layer inside quotation marks, choose the Visibility = Visible, and hit Done.
Now, the event should be looking like this:
That means that, when the player’s HP is empty, not only is the HP bar showing that, but the time in-game stops and the “game over” layer becomes visible, showing the text in it.
9 Add another event right under the last one: Keyboard → On key pressed.
You’ll then have to choose the Enter key manually, since it can’t be detected just by pressing it.
After confirming, we need to add another condition to the event. Go to System → Layer is visible.
Then, write the name of the “game over” layer and click on Done.
Now, the actions we are going to add are all in System. First: choose the Set time scale action again, but this time set it to 1 or 1.0. Second: set the “game over” layer to invisible again. And third: restart layout. The event should be looking like this:
Let’s test it, shall we?
It seems to be working! So, now that we can lose in the game, let’s see how we can win.
Victory screen
10 Just as we’ve created a layer for the game over screen, we’ll create one for the victory screen too.
In the properties of that layer, we’ll do the same things we did for the other one: not initially visible and Parallax at 0.
The other object we’re going to add will be in “layer 0”. The type is Tiled Background and it should be named “finishLine”.
Then select the “finishLine.png” in it. Close the editor window, expand the object to this size and place it in this position:
Under that sub-group, create an event by going to spriteCharacter > On collision with another object. Select the “finishLine” object and hit Done. The actions will be very similar to the game over event: set time scale to 0 and make the “victory” layer visible. Like this:
Let’s test the game and see how it goes:
Well, then! That’s it for today. I hope this was useful to you and next time we’ll give this game a main menu, a pause menu, and a combat mechanic. Until next time!
