Hay guys this will be my first tutorial for construct 2, we are going to implement a reload system for weapons. This will work with any kind of weapon and with any type of game you are making( the example in the tutorial will be for a top down game). We are going to use sound and animation for the reload, and for the shoots. I am going to make the tutorial step by step, but you will need to have at least basic construct 2 knowledge.
Not convinced of the quality of the tutorial? No problem you can try my test example here. When we finish with the tutorial the game will have the same features as showed in the link.
All of files I am going to use will be included in the example capx where you can take a look at the events yourself and mess around with them. Lets get started.
If you are only interested in the reload and shoot events skip to step 6.
First we are going to set up a basic things that we need for a top down game, a tiled background, a player sprite and its animations, and the bullets we are going to shot.
Step 1: We are going to add two more layers and rename the first one. The layers are background, main and HUD (I've also set HUD layer parallax to 0,0 because we are going to use this layer in the ammo display and we don't want it to scroll). In the background layer we are going to add an tiled background called Grass_background and we are going to strech it on the whole layout (this will be our background image). Next we gonna add the player sprite and the bullet sprite on the main layer.
Step 2: In the HUD layer I am going to place a text field, here the current magazine size and total ammo will be displayed (This will be changeable if you have more than 1 weapon). The blue font color is optional, but it make's the text more visible because we have a green background.
Step 3: Now we are going to add the animation, in order to do that we are going to create a new sprite called animation, and on start we are going to place it outside the playing screen in the layer main.
We are going to double click the animation sprite which is empty at the moment, when the image editor opens on the right side of it there should be an animation tab with a default animation called default.
We are going to add new animations to our sprite by right clicking in the animation tab and selecting add animation. I am going to add 3 new animations called: reload, shoot, move.
Next we fill the animations with our sprites images , the default animation will be when our player is idle, the reload one will be of course when the player reloads etc. Select the default animation, in the animation frames window right click then select import frames -> from files.
This will open a new window where we need to find our sprite images in our computer. I grouped the images in 4 folders idle, reload, shoot and movement we are going to open the idle folder and select all the images in there and click open. This will load all the idle images in the default animation. Next if you noticed there is one empty frame called 0 delete that one.
Repeat the same procedure until all the images are loaded, for the reload, shoot and move animation don't forget to delete the 0 frame in each animation.
If you click the animations on the left side a properties window shows up, I am going to change the values here to what I think is best for the current example, in your project you can set them to whatever you want.
Default animation speed:10, Loop yes, repeat count 1, repeat to 0, ping pong no.
Reload animation speed:6, Loop no, repeat count 1, repeat to 0, ping pong no.
Shoot animation speed:5, Loop no, repeat count 1, repeat to 0, ping pong no.
Move animation speed:10, Loop yes, repeat count 1, repeat to 0, ping pong no.
In the end they should look like this:
Now we close the image editor, we select the animation sprite on the layout and we set its size to 70,57.
The last thing to do is to erase the sprite image from the player sprite without deleting it. Before we do that I am going to add an image point next to the weapon barrel so the bullet spawns from the gun, you can add image point by double clicking the sprite and on the image editor you select set origin and image point. We do this so the animation can plays correctly, but don't forget where you put your player sprite on the layout, we gonna need him further in the tutorial. Double click the player sprite on the layout or from the project bar. This will open the image editor again. Click the eraser tool on the left, and use it to erase the image.
When the image is erased it should look empty. Click the collision polygons to make sure those did not change, if they do set them to look something like this.
That should be it for the animation, now moving on the next step.
Step 4: We are going to add some behaviors to our object, the bullet object will use bullet and destroy outside layout behavior. Also we are going to set bullet speed to 800.
The player sprite( not the animation) is going to use bound to layout, scroll to and 8-direction movement behaviors. In the 8 direction movement we are going to set Default controls to no, so we can move player with wasd.
The animation sprite is going to use the pin behavior.
Step 5: Now we are going to create the movement for the player, but first we need to pin the animation to the player sprite so its always following the player movement.
In the eventsheet we are going to add a new event
System -> on start of layout
animation -> set position -> player.x,player.y
animation -> pin to object -> pin to player with position and angle.
This will pin the animation to the player sprite, and if we move the player the animation will move with him.
Now we are going to make the player move with WASD and play the move animation. When player stops moving the animation will switch back to default. First we need to add the keyboard and mouse object into the game.
Now we are going to the movement events
Keyboard -> key is down -> w -> player -> simulate control -> pressing up
Keyboard -> key is down -> s -> player -> simulate control -> pressing down
Keyboard -> key is down -> a -> player -> simulate control -> pressing left
Keyboard -> key is down -> d -> player -> simulate control -> pressing right
Now we can move the player with wads, but we want to aim using the mouse, to do that we are going to add the next event
System -> every tick -> player -> set angle toward position-> mouse.x , mouse.y
Now the player will face the mouse all the time.
Next we are going to set up the animation for the movement, we are going to do that with the fallowing events
Player -> is moving -> animation -> set animation -> move
Now the animation will change to move, you may not notice it, but the player sways to left and right a bit when moving, but when we stop moving the animation does not change so we need to add another event to stop that.
Player -> is moving(inverted) -> animation -> set animation -> Default
Now when the player stops moving the animation resets back to default, we may need to add extra conditions here when we implement the fire and reload system. But for now this is complete.
step 6: Now we are going to add a weapon sprite(background layer, name weapon_1), we are going to use it to hold the variables that we need for the reload system and shooting, the sprite can also be used for pickup or to give ammo to the player. We are going to place the weapon outside the screen, we need to make sure we have at least one copy of the weapon on the layout so it does not mess up the variable values. We are going to set the values of the instances as fallows:
Now we are going to set our global variables: gun_ammo, is_attacking, is_reloading we are going to set them to 0 on start (except gun ammo which will be 200 for testing purposes).
Next we import our shooting and reloading sounds. In the project bar right click the sound folder and click import sound, select where your sounds are and click import. Also we need to add the audio plugin(object) to our project.
Now we are going to make our shooting event.
Condition 1
Mouse -> on mouse button down -> on left
System -> compare variable -> gun ammo > 0
Player -> is on screen
Weapon_1 -> Compare instance variable -> magazine size >0
System -> compare variable -> is attacking == 0
Animation -> set animation -> shoot
System -> set value -> is attacking -> 1
Player -> spawn another object -> bullet, layer 1, image point 1
Weapon_1 -> subtract from -> magazine_size 1
Weapon_1 -> add to -> HUD_display 1
Weapon_1 -> add to -> Shots_fired 1
Audio -> play -> Assault-rifle-loop
System -> wait -> Weapon_1.Rate_of_fire
System -> set value -> is attacking -> 0
Next is the reload event
Condition 1
Keyboard -> on key pressed -> r
Player -> is on screen
System -> compare variable -> gun ammo -> 0
System -> compare variable -> is reloading -> 0
Audio -> play -> assault-rifle-reload
system -> set value -> is reloading -> 1
Animation -> set animation -> reload
System -> subtract from -> gun ammo Weapon_1.Shots_fired
Weapon_1 -> set value -> HUD display -> 0
Weapon_1 -> set value -> Shots fired -> 0
Weapon_1 -> set value -> Magazine size -> 0
Now we gonna add a sub event
Condition 1 sub event 1
System -> compare variable -> gun ammo => 32
32 is the magazine size, you can replace it with a fixed variable if you want
Action 1 sub event 1
System -> wait -> 3 seconds (reload time, can be variable)
Weapon_1 set value -> magazine size -> 32
Weapon_1 set value -> HUD display -> 32
System -> set value -> is reloading -> 0
Now we add another sub event
Condition 1 sub event 2
System -> compare variable -> gun ammo < 32
System -> wait -> 3 seconds (reload time, can be variable)
Weapon_1 set value -> magazine size -> gun ammo
system -> subtract from -> gun ammo Weapon_1.Magazine_size
System -> set value -> is reloading -> 0
Now we have the shooting and reloading working, but we need to tweak some events so the animation is played properly and the HUD to display the ammo on screen.
First, we make the text to display the ammo on the screen
Every 0.1 second -> ammo display -> set text -> "Ammo: " & Weapon_1.Magazine_size & "/" & Gun_ammo - Weapon_1.HUD_display
Second we need to reset shot fired to 0 when weapon ammo is 0, so the HUD display works properly when weapon runs out of ammo.
System -> compare variable -> gun ammo == 0 -> weapon_1 -> set value -> shots_fired 0
Third, we need to change the movement event so the animation plays correctly. We gonna do that by adding the fallowing conditions into the movement event
is reloading == 0
is shooting == 0
It should look like this in the end.
And that's the end of the tutorial, I tried to make it as simple as possible and I hope you learned how to make the player reload with sound and animation. There will be attached CAP file where you can see an example of what we made, also I will upload all the images used in the tutorial so you can make it on your own.
If this tutorial helped you learn, construct 2 and get better at it, please consider supporting me by following me on Facebook, twitter and check out my game which I published on Kongregate.
Fallow me on facebook
Fallow me on twitter
Check my game Confusion