2D Physics - Geometry Bounce Game (Difficulty: 4)

CreatiCode

Introduction

Geometry Dash is a fun and popular game. The Scratch version of this game created by griffpatch has over 100 million views. However, that game is built with thousands of blocks and hundreds of costumes, which is a big challenge for most Scratch learners.

In this tutorial, you will learn to build a similar game with only about 100 blocks on the CreatiCode playground. The player box will be gliding in both directions, jumping to avoid obstacles in the same way as Geometry Dash.

You can easily design the game map and change the game mechanics yourself afterward. There are two key reasons why it is much easier:

We will use a much larger canvas, allowing you to design the entire level using one costume manually.
We will use the 2D physics engine, which makes it much easier to handle the movement and collision of objects.

Step 1 - Remix the Project Template

First, please open this link and remix it as your own project.

https://play.creaticode.com/projects/6571e0dead3b29181d637adb

Step 2 - Review the Project Template

The project template is prepared in these two steps:

Different Stage and Canvas Size

You can click the “Edit” menu and observe that the viewport window (the stage) is 720 wide and 360 tall. This makes it easier for the player to view the upcoming obstacles and traps. The canvas size is much larger (2000 by 2000), which allows us to design the entire level map in it.

Player Box

The Box sprite contains a yellow square costume. It will be controlled by the player. Feel free to replace the costume with your own.

Initial Map

In the Platforms sprite, if you open the costume editor, you will see an initial map with some teal boxes. You will need to zoom out to view the entire map:

These rectangular boxes will serve as the platforms for the player’s box to glide on. There is nothing special about these boxes. You can duplicate them or add new ones yourself after you finish the tutorial. However, to make sure you can follow this tutorial, you should not change them for now.

A Special Note on Changing Costumes

Since the project uses the 2D physics engine, we will generate a hidden physics body for each shape in the costume. If you change the costume in any way, you need to make sure no object is selected in the costume, and click the “Center” button to shift the center of all objects to the center of the canvas. This is crucial to ensure the physics bodies of these shapes are aligned with the shapes themselves.

Step 3 - Add a Dark Backdrop

Next, switch to the Stage, and open the Backdrop editor. We will need a dark background, and as the player box moves across the background, it should show some color changes. One simple solution is to add a big rectangle and then use a gradient color pattern to fill it.

Step 4 - Initialize 2D Physics

Now we are ready to start coding. First of all, since we will be using the 2D physics engine, we should initialize it. The best place to do it is in the Stage, since the engine is used by all sprites:

We set the gravity at -1200, so the player box will fall vertically. This number can be adjusted. If you want the box to fall faster, use a stronger gravity like -1500.

We are also setting the 4 world borders around the map (2000 by 2000 canvas) to have 100% friction and 100% restitution. That’ll ensure the player box rebounds from these borders without losing any momentum.

Step 5 - Broadcast and Receive the “start” Message

After the physics engine is initialized, we should broadcast a new message “start”, and receive that message in every sprite. This is a very commonly used pattern, which makes sure the sprites only use the physics engine after it has been initialized.

Add to Stage:

Add to Both Box and Platforms Sprites:

Step 6 - Initialize the Platforms

In the Platforms sprite, we can use the “behave as” block to create a (hidden) physics body for every shape in the costume.

A few notes on this block:

We need to use the “behave as compound shape” block because the costume contains multiple rectangles. Each rectangle will have its own physics body of the same size/shape/position.
All these physics objects are “fixed”, which means they will never move.
The “object” type is selected to ensure these physics bodies will collide with the player box. If the “sensor” type is selected, then they will only report touching events but will not actually collide with other objects.
Since all the shapes are simple with straight edges, we can use a relatively large value for the curve tolerance and point distance.

Lastly, to confirm the physics objects are created properly, you can temporarily set the “debug” option to “yes” so that the physics bodies will be drawn with a red outline.

If these outlines are not aligned with the platform shapes (see below), then you need to center the costume using the “Center” button as described above.

Step 7 - Configure Platforms

Next, we need to configure the physics properties of these platforms:

The density doesn’t matter since these platforms are fixed. The friction is 0%, so the player box will smoothly glide over these platforms. The restitution is set to -100%, which guarantees the player box will not rebound when it lands on the platforms. We need to use a negative number because even when it is 0%, we still see the player box rebound a bit.

Step 8 - Initial Position of the Player Box

For the player box, we would like it to start at the top left corner of the map. To find a good position, we can switch to the Platforms sprite, open the costume editor, and move the mouse pointer to where we want the player box to start. The x and y positions of the mouse pointer will be shown at the bottom:

In the Box sprite, we can use x of -960 and y of 326 as a starting point:

Note that we won’t see the box yet when we run the program. That’s because the box’s position is already outside the stage window’s range, which is 720 by 360.

Step 9 - Lock the Viewport at the Player Box

To always show the player box on the stage, we need to lock the viewport to the Box sprite. That way, the viewport will always try to center at the player box. Whenever the canvas size is larger than the viewport (stage) size, you almost always need to lock the viewport to the sprite that the player controls.

Now if you run the program again, you will see the player box appearing in the top left corner, right above the top platform. Note that since this is already at the left edge of the canvas, the player box is not at the center of the viewport (the viewport can not move left further).

Step 10 - Attach a Physics Body to the Player Box

Similar to the platforms, we need to attach a physics body to the player box. That hidden body will be managed by the physics engine to run simulations, and the sprite will be moved accordingly.

Here are some notes on these 2 blocks:

The box will have a “dynamic” body, which means it can be moved by forces like gravity
The box’s type is “object” (as opposed to the “sensor”), so it will collide with other objects
The friction is 0, so the box will glide smoothly on the platforms without friction
The restitution is 100%, so when the box hits the border walls, it will bounce back at the same speed.

Now, the box will fall due to gravity and land on the platform:

Step 12 - Make the Box Move

The player box will be constantly moving left or right. It changes direction when it hits the 2 side walls. At the start, we will set its x speed to 200, so it glides to the right:

Now, our box is moving around and landing on the platforms, and the viewport is always following the box as well:

Step 13 - Press To Jump

To make the box jump, we simply need to give it an initial upward speed in the y direction, then it will gradually slow down and fall due to gravity. To check for key press or mouse click, we can use a forever loop like this:

Now, we can make the box jump:

Step 14 - Avoid Jump In Air

Our program has a logical issue, the box can make a jump even when it is still in the air. We need to check if it is touching the platform before setting its y speed:

However, after adding this check, the box can no longer jump when we press the SPACE key. It is as if the box is not touching the platform, though it is gliding on it. Can you think about how to fix this problem?

Step 15 - Fix Touching Platform Issue

To fix the issue, we first need to understand why it is happening. As shown, when the box is standing on the platform, the “touching [Platforms]” block returns false.

That is because the physics engine is doing a really good job. Though the box is falling due to gravity, the physics engine ensures the box is always above the platform, and there is no overlap between them.

To fix this issue, there is a very simple solution. We can make the box costume slightly larger than its physics body. The physics body ensures the box doesn’t fall into the platform, and the costume image is used to check if the box is touching the platform costume.

Here is how to do it in the Box sprite. We set its size to 100% before adding its physics body so that its physics body is at 100% size. Then after, we enlarge the box’s costume to 130%, so the bottom part of the box will overlap with the platform:

To verify the physics body is indeed smaller, we can set “debug” to “Yes” temporarily for the box, and we will see the red outline of the body is smaller than the box:

After this change, the box can only jump when it is touching the platform.

Step 16 - Fix Slow Down Issue

There is another issue we need to fix. When the box collides with the border, it tends to slow down, even though we have set their restitution to 100%.

Since we want the box to stay at the same horizontal speed of 200 all the time, we can simply update its speed repeatedly. Note that the box may be moving left or right, so we have to check its current direction before resetting the speed.

Note that if the speed is too small (between -10 and 10), then most likely the box has been stopped by some obstacle, so we should count that as a failure, and send a “retry” message to restart the game. We will handle that message later.

With this change, the box will keep moving at a speed of 200 in both directions.

Step 17 - Add a Red Triangle

Now let’s add a red triangle obstacle. When the player box touches it, the game will restart. You can directly edit the costume of the Platforms sprite. Select color of 0, saturation of 100, and brightness of 100. Note that you should set the outline to none to make sure the player box touches the red color:

Now the box will be bounced back by the red triangle.

Step 18 - Retry if Touching Red

If the box touches any red obstacle, we should count that as a failure, and send the “retry” message. You need to set the color to be the same as the obstacle (color = 0, saturation = 100, brightness = 100).

Step 19 - Retry Logic

When the Box sprite receives the “retry” message, we need to move the box back to its start point, and make it move right from there:

This way, the game will repeatedly restart by itself upon any failure:

Step 20 - Add More Red Obstacles

At this point, you can add more red obstacles to the map any way you like. For example, let’s add 2 triangles and a rectangle in the Platforms sprite:

Step 21 - Green Jumping Board

We can also introduce objects of other colors for different effects. For example, we can add a green box to represent a jumping board:

And then in the Box sprite, we can add logic to make the box jump higher when it touches this green color:

Now our game is already playable!

Step 22 - Rotate the Box

When the box jumps up, it would be much more fun to make it rotate as well. Let’s define a new block “add rotation” for that purpose. Depending on whether the box is jumping to the right or left, we need to set the rotation in different directions:

We can use this block wherever we are setting the y speed:

Now it looks like this when the box jumps:

Step 23 - Add a Goal Sprite

We still haven’t defined how the player can win this game. Let’s add a new empty sprite named “Goal”. Edit its costume to add a green bar that represents a destination area. You can use some gradient and transparency to make it look cool:

Step 24 - Place the Goal Sprite

To find out where we should place the Goal sprite, switch to the Platforms sprite and look at its costume. Move the mouse pointer over the map to find the x and y positions you need. For example, suppose we want to place the Goal at the end of the first row, we will get its position (x = 985, y = 321) this way:

We can use the control panel to set this position for the Goal sprite:

Step 25 - Player Success

When the player box touches the Goal sprite, the player has won, and we should broadcast a “success” message:

Step 26 - Make the Box Spin at the End

When the player box touches the Goal, it should no longer move due to the physics engine. Therefore, we should remove its physics. Instead, to make it fun, we can make the box spin forever:

This is what it looks like:

Step 27 - End Game Message

When the player has succeeded, we should also show a message like “You won” to indicate that’s the end of the game. We can also add a new sound from the library to play at the end. This can be done in the Stage when we receive the “success” message:

Step 28 - Falling Off the Platform

If the player box falls too low, we can also count that as a failure and make the player start from the beginning. In this example, the goal is at the top level, so if the player box falls off the top level, its y position will be less than 200. So we can add that as an additional failure condition in the Box sprite:

We can test it like this:

By now the game is complete. Although it is very simple, it includes all important logic components:

Enhancements

Congratulations on completing a fairly complex game. Next, it’s your turn to make a different version of this game. Here are some ideas for you to consider:

Design different level maps: You can edit the costume of the Platforms sprite to change the platforms and the red/green objects. Make sure you test-play your game before publishing it.
Add additional color types. You can use other colors to trigger interesting actions. For example, when the box touches a yellow shape, its size doubles, or when it touches a blue shape, its moving speed changes from 200 to 400. The possibilities are endless.
Add a background music
Create an automated demo: you can write a little script that makes the box jump at the right time so that it completes the game automatically. This can serve as a demo for the players if they don’t know how to pass a level.