Construct 3 Basics #2: Moving boxes and floating platforms

Some of the most common elements in games are moving platforms and box-type objects that the player can manipulate to achieve their goal. In this tutorial, we will continue to develop our little side-scrolling platformer we started in the previous tutorial. This time, we will code a floating platform and a box-type object that we are going to use to reach higher places using behaviors and events. So let’s do it!

Moving platform

1 Let’s start by opening the project we created last time through Menu → Project → Open recent. Then, I’m going to select the “spriteCharacter” object and change some properties of its Platform behavior, so its movements look better. It should look like this:

2 Now let’s modify and move the platform we already have, so its properties look like this:

Then, copy that platform and place the copy here:

3 If you’ve followed the last tutorial, remember that the platforms we have so far are instances of the “spriteFloor” object, so any behaviors you add to one instance will apply to all the others. That’s why we need to make a separate object for the moving platform.

Right-click anywhere on the screen and click on Insert new object.

Then, select the Tiled Background type, name it “movingPlatform” and click on Insert.

Click anywhere on the screen to open the object editor window. Click on the folder icon to open a file, then select the “spriteFloor.png” from the previous tutorial.

Close the window, modify the object’s height and width, and move it to this position:

4 Now, with the “movingPlatform” object still selected, click on the Behaviors property and then on Add new behavior.

Select the Solid behavior and click on Add. This behavior, if you remember, allows the player to stand on the platform without falling through it.

Now, we need to add the Sine behavior, since that’s what is going to make the platform move.

Close the Behaviors windows and take a look at the Sine behavior properties. To make the platform move correctly based on its position, its properties should look like this:

There, you can control the direction of the movement (horizontal, vertical, etc), the time it takes for the platform to complete the cycle (Period), and the number of pixels the platform will move (Magnitude), among other things. These are the only properties we are going to touch on right now.

If you test your project now, it should be looking like this:

As you can see, our player object cannot reach the moving platform at this distance. So now should be a good time to make a box object to help the player reach it.

Moving box

5 To proceed to this next step, I’ve prepared a couple more assets that you can download clicking the button below ( includes an extra asset we will use in the next tutorial) .

Download “SSP Assets 2”

SSP-assets-2.zip – Downloaded 646 times – 1.27 KB

Then, go to Insert new object → Sprite and name it “spriteBox”. Once the editor window is open, click on the folder icon again and select the “spriteBox.png” file.

Close the window and position the box object here:

Now, we should add the Platform and Solid behaviors to this object. Then, go to the Platform behavior’s properties and uncheck the Default controls box, in the “spriteBox” object.

You should do that so when you press the arrow keys the box doesn’t move along with the player object.

6 Create a new Sprite-type object called “hitBox”. Let’s make it a simple black box in the editor.

Place it anywhere on the layout, but make sure its dimensions are a bit wider than the player object’s dimensions, like this:

Also, add the Pin behavior to this object.

Double-click the “hitBox” object, click on the image point icon, and place the origin point on the bottom of the object. Then, close the window.

7 Double-click the player object and go to the image point tab again. Right-click on the Image Points window, on the left side, and click on Add a new image point.

Rename the new image point as “down” and place it on the bottom of the object.

8 Now, we will be making our first event! Events are made of two parts: conditions and actions.

• Conditions: a specific situation in the game.
• Actions: something that happens when those conditions are met.

This is the coding part of Construct 3; the foundation of your game, so it’s in your best interest to keep it organized with groups, for example, but we will touch on them some other time.

To make our first condition, open the Event sheet of your layout, and click on Add event.

In the conditions window, go to System → Every tick.

Now, we need the second part of the event. Click on Add action, on the right side of the condition.

Select the “hitBox” object and go to the Set position to another object action.

Select the “spriteCharacter” object, type the number of the image point you want as reference (in this case, the “down” image point, which is the number 1), and click on Done:

This event will place the “hitBox” object over the “spriteBox” object at all times while the layout is running.

9 Beneath the action we just created, let’s create another one. Click on Add action once again, select the “hitBox” object, then click on the Pin to object action. Select the player object again and click on Done.

10 Now, let’s start to make the events that will allow the player to push and pull the box. Go to Add event → hitBox and select the action Is overlapping another object.

Then select the “spriteBox” object and click on Done.

Right-click over the condition you’ve just created, then go to Add → Add another condition.

Select “hitBox” again and choose the Compare Y action.

Set up the Comparison to > Greater than, and the Y co-ordinate to spriteBox.Y.

This condition makes sure that the collision box’s origin point is not higher on the screen than the box’s origin point, but beside it, so the player can push the box.

Let’s now right-click our event again, then go to Add → Add sub-event.

Select the “spriteCharacter” object, then click on the Compare X action.

Then set it up like this:

Let’s add another sub-event. Just copy and paste the sub-event you just created, so the event looks like this:

Click twice on the copied sub-event, and simply change > Greater than for < Less than, then click on Done. These sub-events are meant to check whether the player is on the right side of the box, or on the left side.

11 Now, before we go any further on the events, we need to do something else. Go back to the layout tab, right-click anywhere, click on Insert new object and select the Keyboard type. You don’t need to name it.

Back to the Event sheet 1, right-click the first sub-event and go to Add → Add another condition.

Then, select the Keyboard object, and after that, the Key is down action.

Select the <click to choose> box and press the Left arrow key on your keyboard, then click OK.

Now, let’s add an action to this sub-event. Add action → spriteBox → Simulate control.

Leave Left selected and click Done.

Now, we add the same Keyboard condition to the second sub-event. Except, this time, the Right arrow key has to be down. Copy and paste the Simulate control action we’ve created just now in this sub-event, but change the parameter to Right. Your event sheet should be looking like this:

12 Now, go back to the layout tab, select the “hitBox” object and uncheck the Initially visible box.

Finally, let’s test it again!

Now, your game has a nice platform and a box to help you reach it! I hope this tutorial was useful to you, and many more will come. If you still have any questions, don’t hesitate to comment below. Until the next one!