Let’s start your serious game with Construct 2. No programming knowledge required. Let’s dig in your first great experience with Platforming game with HTML 5 based.
Tutorial Information
- Difficulty: Beginner
- Platform used: Construct 2 (version r114)
- Estimated completion time: 3 hours
- Advanced requirement: Patience
Build platforming game from scratch Series
- Part 1: Creating player and tiled platform
- Part 2: Creating token and game HUD
- Part 3: Parallax BG and Enemy AI
Part 1 Demo
Installation and Basic Interface
I have written a tutorial about Construct 2 installation and basic interface. Please reference to it for basic control.
Assets Download
Graphic Assets
Notes:
- I am the author of these graphic. Please contact me if you want to use this in any other project.
- If you have demand for graphic, I am open for commission. Contact me for more info.
Step 1:
Go to File/New.
Click New empty project/Open.
In the left Properties Panel, change the Layout Size to 1280, 480.
Double-click on the Scene, the Insert New Object panel will appear.
Click on the Sprite icon, click Insert.
Double-click on the just-created Sprite object, 3 new panels will appear.
Click the open icon, browse to the first image of the Slime animation: slime_default1.png
Right-click the space in the Animation Frames, click Add frame.
Then we have a new frame. We repeat the process and add 7 more animation frames to the Sprite, until we finish the Default animation. (8 frames in total).
After that, right-click in the Animations Panel in add new animation and name it “Jumping”.
Load slime_jumping.png into this animation.
Add a new animation called “Falling”, and load slime_falling.png into this animation.
Click the Default animation in the Animations panel.
In the left-hand side Properties panel, change the Speed to 16, Loop to Yes
No changing required for Jumping and Falling animations.
Now, we can Click Run on the top toolbar to see our slime, urr…, exercising.
Step 2:
Now let’s create the level.
Double-click on the Scene, the Insert New Object panel will appear.
Click on the Sprite icon, click Insert.
Double-click on the just-created Sprite object.
Click the open icon, browse to image: ground.png.
Do the same thing to create another Sprite. This time we load trunk.png.
In the end, our scene should have 3 sprite as below:
Now, we resize the slime respectively to the ground cell. when you are resizing, hold shift to keep image ratio constrain. the final slime size should be something like:
Now, we need to add a new sprite which represent the player – an empty cell. You may wonder why we need it, since we already had the slime in the scene. Technically, it’s ok to use the slime as player, but it may create a lot of problem when comes to game physics later. Therefore, it’s better to create 2 sprites: 1 handles the animation (the one that we have made so far), another one will handle the physics. Let’s do it.
Double-click on the Scene, the Insert New Object panel will appear.
Click on the Sprite icon, click Insert.
Since it empty, we do not need to input graphic to it.
Resize that empty sprite to fit the size and place it on the top of the slime animation sprite.
Now, we need to organize our project. In the Projects panel, right-click on each sprite and click Rename.
Name them as Ground, Player, SlimeAnm, Trunk respectively.
Go to View tab on the top (next to Home tab).
Check Snap to grid.
Change both value of grid width and grid height to 71.
Now we move the ground sprite and the trunk sprite to the bottom of the layout. Copy and paste it (Ctrl + Alt + drag object) to create the terrain as below.
Note:
- When you move the slime, remember to select both SlimeAnm and the Player together. They two have to be overlay to each other.
Step 3:
Let’s set up basic physics to the scene.
Click the Ground sprite in Projects panel.
Now do 3 steps to add a Behaviors (what type or function group of object the sprite belongs to).
- Click Behaviors in the Properties panel.
- Click Add Behavior (plus icon) in the first pop-up window.
- Click Solid Attributes in the second pop-up window, then click add.
Do the same think with Trunk sprite, add Solid behavior to it.
For Player Sprite (not SlimeAnm), also works the same, but we don’t use Solid attribute. We scroll down and find the Platform behavior (in the Movements section).
For the SlimeAnm, we add Pin behavior to it.
Now let’s test our game.
Click Play on the top toolbar.
Surprise, nothing happen.However, there is nothing wrong. We have add the Pin attribute to the SlimeAnm but we haven’t set which sprite the SlimeAnm will pin to.
Ok, let’s do it.
Click the Event sheet 1 scene tab.
Here is the main game system control area.
When we want to set SlimeAnm to start pinning the Player sprite. Should be from the start of game, right?
Click Add event in the Event sheet 1.
Click System in the first pop-up window.
Click On start of layout in the next pop-up window, then Done.
Now we can see there appears a event in the Even sheet 1.
Click Add action next to event cell.
We want SlimeAnm to be pinned to Player.
Click SlimeAnm, then Next.
Find Pin to object, then Next.
Click <click to choose>, click Player, then OK.
Now the Event sheet 1 should look like below:
Now test again. The SlimeAnm should fall down to the ground this time.
You can play with the character with Left Right arrows for moving and Up arrow for jumping.
However, the scene is not following the Player. Therefore, this time we add one more behavior to Player sprite.
Click Player sprite in Projects panel. Click Behaviors in the add/edit row of Properties panel.
This time we add ScrollTo behavior.
Now the camera should follow the Player sprite.
Let’s fix the last layout error. We don’t want the SlimeAnm to be in the back of the ground and we want the Player sprite to be in the back of the Slime Anm.
Right-click the Player sprite in the scene. Go to Z Order/ Send to bottom of layer.
Right-click the SlimeAnm sprite in the scene. Go to Z Order/ Send to top of layer.
Now, if you did make a bit offset between the Player sprite and the SlimeAnm, the gameplay should appear like this:
Step 4:
Modify animation rules.
This step is divided into 3 sections. Feel free to Play testing anytime you want to in order to understand the logic faster.
1. Left and Right, let’s turn around
First let’s add Keyboard object to scene.
In the Layout 1 scene tab, double-click on the Scene, the Insert New Object panel will appear.
Click on the Keyboard icon, click Insert.
Go to Event sheet 1 scene tab, click Add Event.
Click Keyboard in the first pop-up window.
Click Key is down in the next pop-up window.
Press Left arrow key in the third pop-up window, then OK.
then Done.
We want when we press Left arrow, the SlimeAnm will be flipped or mirrored to the normal direction.
- Click Add action next to the Left arrow is down event.
- Pick SlimeAnm then next.
- Find Set mirrored action, then Next.
- Pick Mirrored for State, then Done.
Now repeat these step for the Right arrow.
- click Add Event.
- Click Keyboard in the first pop-up window.
- Click Key is down in the next pop-up window.
- Press Right arrow key in the third pop-up window, then OK.
- then Done.
- Click Add action next to the Right arrow is down event.
- Pick SlimeAnm then next.
- Find Set mirrored action, then Next.
- Pick Not Mirrored for State, then Done.
At the moment, our Event sheet 1 should look like this:
If we test now, our slime should be able to turn backward.
2. Jumping and Falling
Now we need to switch the animation to “Jumping” and “Falling” respond to the Player state.
First let’s do the Jumping state first.
Event Condition:
- click Add Event.
- Click Player in the first pop-up window.
- Click Is jumping in the next pop-up window.
- then Done.
Action Perform:
- Click Add action next to the Platform is jumping event.
- Pick SlimeAnm then next.
- Find Set animation action, then Next.
- Fill “Jumping” to the Animation row, then Done.
Then we do the “Falling” state:
Event Condition:
- click Add Event.
- Click Player in the first pop-up window.
- Click Is falling in the next pop-up window.
- then Done.
Action Perform:
- Click Add action next to the Platform is falling event.
- Pick SlimeAnm then next.
- Find Set animation action, then Next.
- Fill “Falling” to the Animation row, then Done.
After the Player lands on the ground, we have change the animation back to default:
Event Condition:
- click Add Event.
- Click Player in the first pop-up window.
- Click On landed in the next pop-up window.
- then Done.
Action Perform:
- Click Add action next to the Platform On landed event.
- Pick SlimeAnm then next.
- Find Set animation action, then Next.
- Fill “Default” to the Animation row, then Done.
Wow~ that’s nearly everything, let’s check whether the Event sheet 1 is same as below:
3. Outside of Layout
Now, everything should work perfectly, except from if you fall out of the ground, our slime will continue to fall forever until either we close the browser or the computer hangs. Let’s make it like this. When the slime falls out, it will be spawned back at the beginning position.
Event Condition:
- click Add Event.
- Click Player in the first pop-up window.
- Click Is outside layout in the next pop-up window.
- then Done.
Action Perform:
- Click Add action next to the Is outside layout event.
- Pick Player then next.
- Find Set position action, then Next.
- Fill both X and Y with 150 as value, then Done.
If run the game now for testing, luckily, we will find out that there is a bug where if you jump higher then the layout, the slime would still be spawned back to beginning position. So we need to fix that.
We want when Player is outside layout and Player Y-coordinate is lower than the ground, only then the action will perform.
We have an “and” here, it means both conditions must be fulfilled before the action run.
Add Multi-Event Condition:
- We right-click the Player Is outside layout event cell, and click Add another condition.
- Click Player in the first pop-up window.
- Click Compare Y in the next pop-up window.
- Pick >Greater than in Comparison row, type 550 (actually 480 but I add some safety margin) in Y co-ordinate row.
- Then Done.
Event sheet 1 final:
Step 5:
Add background!!!
Now you can relax. Nothing is complicated anymore.
Double-click on the Scene, the Insert New Object panel will appear.
Click on the Sprite icon, click Insert.
Double-click on the just-created Sprite object.
Click the open icon, browse to image: BG.png.
This time please don’t close this window now.
Click Set origin and image point, then modify its value by filling in X and Y of the second top toolbar with 0 and 0.
Now close it.
Rename this sprite to BG.
Still with BG sprite selected, set it’s position in Properties to 0,0. With this, our image with align correctly with the scene.
Last changing, move the BG to the back. We did this before with the Player sprite.
Right-click the BG sprite in the scene. Go to Z Order/ Send to bottom of layer.
Yay! now we finish part 1.
Download Final Files
Part 2 Teaser:
- Add game token
- Add game HUD
