Home » Construct 2 » How to create a pokemon battle system in construct 2 – HTML5 | part 2

How to create a pokemon battle system in construct 2 – HTML5 | part 2

Part 2 of this tutorial is here. If you have missed part 1, check it out here. In this small tutorial we will be adding a health bar to the player and the enemy and give them both strength and defense stats.


Step 1: Importing sprites
First import a sprite, just a simple red block and set it’s width to 200. Name it healthbar_player. Dupiclate the sprite and name this one healthbar_enemy, also set the width to 200. Place them above the monsters.

Step 2: Let the healthbar work
Healthbars are used in more games and if you want to display it and have it the right width you always need this formula: healthbar = object.hp/100 * healthbar.width


So let’s add this formula to our event sheet. In the first tutorial we’ve set up all the turns to get the flow of the battle. We could just import the formula in turn 1 when you have touched the next button, but we want it just like in pokemon. We will add another turn called 1.5. Check if healthbar_enemy.width is bigger then the formula I showed before. In our game it will be: “Width > Enemy.hp/100*200” 200 is the width of our healthbars.
If the healthbar is bigger subtract 1 width from it by setting the width of the healthbar_enemy to “healthbar_enemy.Width-1.
Next check if the healthbar is equal or less than the enemy.hp and go to the next turn. Test it out and you have the same effect as in the pokemon games.

pokemon10Copy the actions and do the same for the player and call it turn 2.5 and replace all the right objects.

Step 3: Getting better battle flow
The flow of the battle isn’t as smooth as with pokemon. When the enemy attacks you, the hp immediatly drops down. See if you can make a better and more relaxed flow yourself. In the next tutorial my .capx can be downloaded so it’s no problem if you can’t get it to work.

Step 4: Adding strength and defense stats

Add 2 new variables to the monster familly and name them strength and defense. I gave the player 5 strength and 3 defense and the Enemy 4 strength and 4 defense.



In turn 0 where we set the damage of the player to the damage of the attack add the following:”+Player.strength”



In turn 1 where we subtract the player damage from the Enemy add the following :”-enemy.defense”



For the Enemy it is a bit different, because there are 2 places where the damage is set. Add another action where you set the damage of the Enemy to: “Enemy.damge+Enemy.strength” and place it on top before subtracting the Enemy.damage from the player.
Just like we did with the Enemy add the following line to the action in which we subtract the Enemy.damage from the Player: “Enemy.damage-Player.defense”


If you have done it all right you get something like below. Next tutorial the .capx can be downloaded and we will add some more fancy stuff. Hope you enjoyed it.

Posted in Construct 2, Tutorials

3 comments on “How to create a pokemon battle system in construct 2 – HTML5 | part 2

  • Hey these are great. Looking forward to the final part if you’re still planning on doing it :)

    • Thanks, Biscuit!

      I’m still planning on making the final part, but I’m very busy atm with work so it will take some time :)

  • Thank you..this is what I was looking for. Not sure why this is such a niche genre, as the combatants could be from any setting.

    Also wondering about a simple trading card battle system.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>