3D - A Maze Game (Difficulty: 3)

CreatiCode

Prerequisite

Introduction

In this tutorial, we’ll build a simple 3D maze game, with an avatar running through a maze you design. Here is a preview:

Step 1 - Initialize A “Grass Land” Scene

Please create a new project, and remove the dog sprite. In the “Empty1” sprite, add the green-flag block and the “initialize 3D scene” block. Note that you need to click the input box and choose the “Grass Land” scene. This is a lightweight scene with a large grassland and a blue sky.

Step 2 - Add Some Rectangle Frames in the Costume Editor

Now let’s design our maze. Please add a new empty sprite, and call it “Maze”. In the costume editor tab, draw a rectangle. Change it to have no fill color, and pick a color for the outline, so we get a rectangle frame. Add some more rectangle frames like that. These will be converted into the walls of our 3D maze.

Step 3 - Add Some Openings in the Walls

Now we need to cut some openings in the walls. We can use the eraser tool to erase some portions of the walls:

Step 4 - Extrude the Costume from 2D to 3D

Now let’s convert this 2D maze into a 3D maze, using a technique called “Extrusion”.

In the first sprite, send a message to “add maze”:

In the “Maze” sprite, when it receives the “add maze” message, run the “extrude” block:

You will see the maze in the 3D scene now:

Step 5 - Rotate and Scale the Maze

The 3D maze has some issues. It is vertical, and also too small. To make it horizontal, we rotate it around the X-axis for 270 (or -90) degrees, since the X-axis points to the right.

We can also scale it up to 2000% (20 times larger) in all 3 dimensions. Here is the updated code for the Maze sprite.

Now we get a good-looking 3D maze:

Step 6 - Update Wall Texture

To make our walls more realistic, we can update their texture by adding the block below in the Maze sprite. Feel free to try different textures.

You should get much better walls like this:

Step 7 - Add an Avatar

Next, let’s go back to the first sprite, and add an avatar using this block:

The avatar will be standing in the center by default:

Step 8 - Add a “Follow” Camera

To make sure the player can always see what’s in front of the avatar, let’s add a “follow” camera behind the avatar, with a direction lock of “target”. That means the camera direction is always the same as the avatar.

Now the new camera will follow the avatar as it moves, and we can no longer use the pointer to rotate the camera.

Step 9 - Press “W” to Move Forward

To make the avatar move, let’s make a new block named “handle keys” to handle key events. In the definition of this new block, we can start with the “w” key, which will make the avatar move forward. Note that we need a short waiting time in the forever loop, otherwise the avatar will be moving too fast.

Now if we press the “w” key, the avatar will be moving forward, and the camera will keep following the avatar:

Step 10 - Turn Left and Turn Right

Next, let’s add 2 more keys: press “a” to turn left, and press “d” to turn right. Note that this new logic is unrelated to the “w” key, so we can move and turn at the same time.

Now the avatar can navigate through the 3D maze:

Step 11 - Add Running Animations

To make our avatar run, we need to make 2 changes.

First, we need to add the “Run” animation to the avatar. It is like teaching the avatar how to run:

Second, we need to start the “Run” or “Idle” animation based on whether the “w” key is pressed. Note that we do not need to add the “Idle” animation earlier, as it is already added by default when the avatar is loaded into the scene.

After this step, the avatar will show a good running animation:

Step 12 - Collide with the walls

For our last step, let’s make the avatar collide with the walls, so the player has to find the way out of the maze.

To do that, we first need to turn on the collision between the avatar’s sprite and the “Maze” sprite. The “Z offset” need to be set to half of the height of the avatar, which is 50 in this example. More information about this block can be found here.

Next, we need to change how we move the avatar. Instead of the “move” block, we need to use the “set speed” block to make the avatar run or stop.

Here is the final result we get:

Creative Ideas

There are many ways you can enhance this basic maze game. Here are some ideas for your inspiration:

Different Scenes: the same idea can be used for a turtle swimming through an underwater maze, or an airplane flying through a maze in the air.
Path Marks: when the maze gets too complicated, the player might need some way to mark which way he has already explored.
Reward Items: we can place gems in the maze for the player to pick up, and they can enable the player to run faster or even jump over some walls.
Multiple Levels: you can check the avatar’s position to see if it has gotten out of the maze successfully. After that, you can show some “level completion” information, and then a button for the player to jump to the next level.