2D Physics - Marble Maze (Difficulty: 3)

[info-creaticode]

Introduction

In this tutorial, you will learn to use the 2D physics engine to build a marble maze. The player needs to rotate the maze left and right to move the marble to the goal area.

 
 

Step 1 - Create a New Project

Please create a new project on the CreatiCode platform, and remove the sprite with the dog. Rename the empty sprite to “Maze”, then add the “ball” sprite from the library. We will only need these 2 sprites in this project.

 
 

Step 2 - Draw a Simple Maze

In the Maze sprite, switch to the costume editor, and draw a maze using shapes (not lines). Here is how to draw a maze using 6 boxes. Of course, feel free to draw a more complex maze.

 
Note that it is very important that you select all shapes at the end, and align them to the center of the costume. It will make sure the maze is correctly handled by the 2D physics engine.

 
 

Step 3 - Initialize the 2D Physics World

To use the physics engine, we first need to initialize the physics world in the Maze sprite.

 
The gravity is set to -1000 along the Y direction, which will make the marble fall toward the bottom of the screen pretty quickly.

 
 

Step 4 - Add the Maze to the Physics World

At this time the physics engine does not know about the maze yet. To add the maze to the physics world, we first reset its position and direction, then tell the physics engine to create a physics body for it.

Since the maze is a fairly complex shape, we will need to represent it as a compound shape. The maze will be rotating, so we can not set it to be “fixed”; also, the maze will not fall due to gravity, so we should not set it to “dynamic” either. Therefore, it is set to be a “movable” object.

 
You can toggle the “debug” option to “Yes” to see that the physics engine will be using 6 6 boxes to represent this maze:

 
 

Step 5 - The “add ball” message

Now we are ready to add the marble ball. In the Maze sprite, broadcast a new message named “add ball”:

 
Then in the Ball sprite, when it receives this message, we will move the ball to a starting position, such as x = 50 and y = 50:

 
 

Step 6 - Enable Physics for the Ball

Next, we need to tell the physics engine about the ball, so the engine will manage the ball’s movement for us. Since the ball would just behave like a real marble, we can set it as a “dynamic” object.

 
Now if we run the project, the ball should fall onto the maze:

 
 

Step 7 - Press Keys to Rotate the Maze

Next, in the Maze sprite, we will use a “forever” loop to check for key presses repeatedly. If the “a” key is pressed, we will rotate the maze left, and if “d” is pressed, we will rotate the maze right. If neither key is pressed, we set the rotation speed to 0, so the maze stops rotating.

 
Now we can already play with the maze like this:

 
 

Step 8 - Add a New Costume with the Goal Area

Now we are going to add a goal area for the ball. Name the existing maze costume as “maze”, then duplicate it into a new costume named “maze with goal”. In this new costume, add a new blue square to serve as the goal area.

 
 

Step 9 - Switch Costume

This next step is a bit unusual. We are going to switch to the “maze” costume, add it to the physics world, then switch to the “maze with goal” costume. Basically, you need to insert 2 “switch costume” blocks like this:

 
Here is the reason for doing this. When the physics world creates a body for the maze, we do not want it to use the goal area (the new blue square), because we do not want the ball to collide with this blue square. After the maze has been added to the physics world, we want to switch back to showing the blue square, so that when the ball touches it, we will know the game is over.

If you toggle “Debug” to “Yes” temporarily, you will see that the blue square is not used as part of the compound body of the maze. Therefore, the ball won’t collide with it.

 
We can verify that the ball won’t collide with the blue square:

 
 

Step 10 - Wait Until Touching the Blue Color

Now we can easily tell if the game is over by checking if the ball is touching the blue color.

In the Ball sprite, we will wait until the ball is touching the blue color, then show a label to declare the player has won the game:

 
This is the final demo of the game:

 
 

Creative Ideas

There are many ways you can enhance this game. Here are some example ideas:

• A More Complex Map: clearly the current map is too simple. You can design any map you like using all the shapes in the costume editor (not lines). Don’t forget to align the costume to the center when you are done.

• Teleporting: you can easily add additional areas with different colors to trigger some special movement. For example, add a green circle (similar to how the blue square is added), and if the ball touches this green color, teleport it to a different part of the maze.

• Reward Items: you can also add other items in the maze, and when the ball picks up that item, it gains some specify power, such as becoming really bouncy.