< All Topics
Print

Unit 6 – Movements Within Boundaries


Items In This Unit

 

  • Movements within Boundaries Tutorial

The Movements within Boundaries Tutorial

In this tutorial, we will demonstrate one way of controlling player movements within specific boundaries.

Step

Instructions

1

Open GDevelop on your computer.

2

Click on Create a new game

3

Choose Empty game

4

Create a new scene as before calling it “Level 1”.

5

Create and draw a player sprite that looks like the following screen.

6

Go to the event sheet tab. Create a few empty events as shown in the following screenshot.

7

Click on “Add condition” for the first event (first row).

8

Click on the “Other Conditions” tab

9

Click on the “Keyboard” option

10

Click on the “Key pressed” option. You should see the following

11

Select “Left” for the Key then press OK as shown below.

12

You should now see the following…

Click on “Add action” on the same top row as the “Left key is pressed” condition.

13

Click on Player sprite under the objects tab.

14

Choose “X Position of an object” and enter values as shown below.

Click on the OK button. What you entered above basically says on every frame move the player 1 pixel to the left.

15

You should now see the following in your event sheet.

Select the first row by clicking on the empty space towards the right part of the row. You should see a line below the row as shown above.

16

Copy the row by holding down <Control> key then pressing <C> key

17

Paste the row by holding down the <Control> key then pressing <C> key 3 times


Your event sheet should look like the following.

18

Modify the bottom 3 rows so that they become as shown below. Simply double-click on each condition and action and make the changes to support all of the arrow keys on the keyboard.

19

Click on the Preview button (or press the spacebar to see the game preview)

20

Use your arrow keys to move the sprite around. See if you can get past the edges of the screen.

21

As you can see, the player sprite is able to pass the edges of the screen. Let’s stop it from passing the edges of the screen next.

Go to the event sheet tab.

24

For the left key handling. Click on the sub-condition as indicated below.

25

Click on the player sprite under the objects tab.

26

Choose “Compare X position of an object” as shown below.

Also, fill out the values on the right side of the dialogue box.

27

Click on game Preview and try to scroll beyond the left edge of the screen.

28

Repeat the same steps for the 3 other edges. Your event should look like the following.

29

Click on game Preview and try to scroll beyond the screen edges.

30

It seems to be working but it is not perfect. Before we can improve the solution, we need to talk a bit about the sprite origin points.

Sprite Origin point

The sprite origin point is the anchor point in the sprite that corresponds to its position within the game design area. When you drag and drop a sprite at x/y coordinates, the origin of the sprite is placed precisely there.

The default sprite origin point is the top left corner of the sprite. Sometimes, it is often more convenient to use the center, or other locations depending on your game needs.

When you preview the game in the last section, you will notice that you can essentially go beyond the right edge of the screen! The reason for that is the sprite origin point, which in this case is the top left most point of the player sprite. You can see this by the crosshair on the image below.

How do we account for this in our game so that the sprite stays within the visible game area? Follow the next steps in the following table.

Step

Instructions

1

To continue where we left off, first double-click on the player sprite to see its current properties.

You should see the following. In our case, we will not change the sprite origin point. We will account for it another way. Nonetheless, you should know how to do it.   

2

If you had to change the sprite origin point, you would click on “Edit Points”.

Click on it. You should see the following screen.

As indicated by the blue arrow, you would simply move (click & drag) the origin point crosshairs from the top left to your desired location. As mentioned, this case will deal with the right edge issue another way by using the length of the sprite function. 

3

Press the <Esc> key a couple of times, then go to the event sheet.

4

Make the change as indicated by the arrow below…

In the change above, we are basically setting the X coordinate boundary to 800 (which is the maximum X coordinate) minus the width of the player sprite.

5

Click on the Preview button and try to go beyond the right edge of the game area. This time around you should not get past the point as indicated below.

6

Moving on, if you scroll down, you will notice you can go beyond the game viewable area. We have a similar problem! The fix will also be similar by accounting for the height of the sprite.

Go back to your event sheet and make the modification as indicated below.

7

Click on the Preview button. You should not be able to get beyond the bottom edge of the screen as shown below.

Well done so far! There is a bit more work left. If you have a look at the positions around the screen closest to the screen edges, you should notice a few pixels of empty space between the player and the screen’s edges. We will remove those issues next.

8

Go to your event sheet. Modify your event sheet so it looks like the one below.

9

Click on the Preview and see what happens now. Notice we have also changed the actions by making the action move faster (e.g. “add 1” to “add 2”)

Now can you think of an easier way to accomplish the same thing? We leave that as an exercise for you to think about and implement. Go for it!  

 

Congrats! You have learned the following in this lecture:

  • How to set play boundaries
  • What the default sprite origin point is
  • How to modify the sprite origin point is
  • How to handle viewable game screen boundaries

Next, we will learn how to create and destroy sprites. Let’s go!


Game Files/Resources

You can download the files from the link below. 

Download link

 

Previous Unit 5 – Platform and Player Behavior
Next Unit 7- Spawning & Destroying Objects

Table of Contents