Home » Construct 2 » How to make pokemon battle system in construct 2 – Html5 | Part 1

How to make pokemon battle system in construct 2 – Html5 | Part 1

I’ve played many pokemon games and I’m by far not the only one. I saw some posts on a forum about making a pokemon game and that a lot of people want to make one of their own. I’m not going to do that, but I do wanna see how I can make the battle system in construct 2 which is just a turn based battle system used in lots and lots of other games.

This first tutorial is about the basic, choosing between to attacks, dealing damage and an enemy that attacks back. Check the demo with particles here.

Step 1: Importing important sprites
First we need some sprites, add a player sprite and an enemy sprite and also name them. I used my awesome dinosaurs for it.


Now we need some buttons for the 2 attacks, we use one sprite for the 2 buttons. So import a sprite and give it 2 frames. I named one of them the well known “ember” and the other attack “laser”

Next we need insert a text object for displaying what is happening in the battle like “berrymon is using ember” We also need a next button. I’ve added another black sprite for behind my text to make it look cooler. You should have something like this.
Step 2: Setting up variables
We need some variables to make it all work, but first create a new family ”monsters” and add the player and enemy to the family  Then give the monsters family 2 number variables: hp & damage and a string variable “attackName.” Set the hp to 100 and leave the rest blank.
Give the attack button also a damage variable and the string variable “attackName” and give each button the appropriate name. Give each attackbutton a different damage like 10 and 7. Now go to the event sheet and also add a global variable called “turn.” Also insert touch control to the layout, you can also use mouse, but I will use touch in this tutorial.

Step 3: The event sheet
Next is the event sheet. The global variable “turn” is important to know where we are.
We start with choosing an attack, so we need to hide the next button. We can’t make it invisible because then it would still be clickable, so we just set the x to 1000. Also set the battletext to display something like “choose your attack” Make the attackbuttons clickable and give the player the variables of the attackbutton and set the turn value to 1.


In turn 1 we must set the x of the attackbuttons to 1000 and get the next button back. Also set the text to what attack is used. When you touch on the next button the hp of the enemy is subtracted by the damage of the player and you go to turn 2 where the enemy will attack.



Now the enemy must attack back. We forgot to add one variable so add the variable attackNumber to the enemy. The enemy also has 2 attacks and we will choose it random so begin by setting attackNumber to a random number floor(random(1,3)). As a sub event we must check which attackNumber was chosen and set the right damage and attackname to it, just like we did with the player. Add a blank sub event where the battle information is shown and subtract the damage from the player.hp and it is important to go to turn 3 or else it will become a loop.

pokemon7The last part of this tutorial. When the next button is touched again you will go back to turn 0, so get the attackbuttons back by setting the.x. Also check if the hp of any of the monsters is equal to or less then 0 and destroy it.

Now you have a working basic, off course you should add some cool attack animations and lots more. In a next tutorial we will add more stats which makes the battle a lot more interesting like type, defense, evasion, accuracy.

Check the demo with particles here.


Posted in Construct 2, Tutorials

4 comments on “How to make pokemon battle system in construct 2 – Html5 | Part 1

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>