Continue the last Construct 2 platform game, we will learn how to create game token and basic game HUD.

Tutorial Information

• Difficulty: Beginner
• Platform used: Construct 2 (version r114)
  
• Estimated completion time: 1.5 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 2 Demo

Assets Download

Graphic Assets

Project Base

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:

Create Token.

Download the source project as well as the graphic assets in Assets Download.

You can use the project left from Part 1 of this series, but I have change the background and add more solid sprite to make it look better. So I would recommend using the new one for tutorial reference purpose.

After unzip the project file, open it.

There are 2 layers in Layers panel, where I have separated the background into Layer 0 and the other components to Layer 1.

To prevent accidentally clicking on the background, we lock Layer 0.

To do it, we click the lock icon next to Layer 0.

Now, we click Layer 1 to work on it.

Creating the game token with animation is similar to creating the slime animation in part 1.

• Double-click on the space of the scene.
• Pick Sprite/Insert.
• Double-click the sprite we just created.
• Right-click in the Animation Frames window and pick Import Frames….
• Select all the Coin Frames/ Open
• Delete the first empty frame by right click it and click delete.
• Modify the Default Animation Properties in the Properties Panel to 12 Speed and Yes for Loop.
• Close Edit Image window.
• In Projects Panel, edit its name from Sprite to Coin.

Go to View tab on the top (next to Home tab).

Check Snap to grid.

Change value of grid width to 71 and grid height to 35.5.

Now we layout the coins into the levels. Copy and paste it (Ctrl + Alt + drag object) to create more coins as below.

Step 2:

Create HUD which will record coin collected.

First we need a global variable to store the number of coin collected.

• Go to Event Sheet, right-click in the empty space below the event list.
• Click Add global variable.
• Name it totalCoin.
• Click OK.

Now the totalCoin should be on the top of the event list.

Now go back to Layout 1 Tab. We need a Text to display the totalCoin value.

But before that, we need to create a HUD Layer.

In the Layers panel, Click the Add (+) icon, a new layer with name Layer 2 will be added.

We now rename Layer 0, Layer 1 and Layer 2 to BG, GameOjbects and HUD respectively.

After that, click HUD Layer in order to work on it. So we can add Text display now.

Step 3:

To add Text display, we do the following steps:

• Double-click in the empty area.
• Pick Text (not Text box)/Insert.
• In the Project panel, rename it to CoinText.
• In the Properties panel, edit it font, size and color to suit the game layout. (For me, I used Ravie(22), 0,0,102)

Beside it, within the HUD layer, we can create a new sprite with name CoinIcon, import only the first image of coin animation, and position it next to the text to tell that this number is CoinTotal number.

\

To make the HUD Layer follow the Player:

• Click HUD Layer.
• In Properties panel, modify Parallax value to 0,0, Parallax in editor to Yes.

To update the Coin Text, let’s go back to Event Sheet 1 Tab.

Add 2 new events and its actions as below:

Update Collision:

Event Condition:

• click Add Event.
• Click Player in the first pop-up window.
• Click On collision with another object in the next pop-up window.
• Click <click to choose> and click Coin sprite.
• then Done.

 2 Actions Perform:

• Click Add action next to the  On collision with Coin event.
• Pick Coin then next.
• Find Destroy action, then Done.

• Click Add action next to the  On collision with Coin event.
• Pick System then Next.
• Find Add to action, then Next.
• Variable: totalCoin and Value: 1
• Done

Update Cointext:

Event Condition:

• click Add Event.
• Click System in the first pop-up window.
• Click Every tick  in the next pop-up window.
• then Done.

 Action Perform:

• Click Add action next to the Every tick event.
• Pick CoinText then next.
• Find Set text action, then Next.
• Fill totalCoin to the Animation row, then Done. (totalCoin without “”)

Now, it should work well. Click Play on the top to test:

Download Final Files

Part 3 Teaser:

• Creating enemies with basic AI as Platformed behavior.