3D - Prevent Avatars from Running Through Walls (Difficulty: 4)

[info-creaticode]

Introduction

When you use a predefined 3D scene such as “city” or “castle”, it is a common problem that the player avatar may run through walls of buildings or other models.

In this tutorial, you will learn how to prevent this from happening.

 
 

Step 1 - Remix the Starting Project

A starting project has been prepared for you. It loads the "city’ scene, adds an avatar, and then moves/turns the avatar based on key press events. Please open this project in the CreatiCode playground and remix it to your own copy.

https://play.creaticode.com/projects/be54a401230d6f874cbc9aaf

 
 

Step 2 - Add a Wall Sprite

To prevent the avatar from walking through an object, the easiest way is to use a simple shape (such as a box or a cylinder) to cover up that object, then set this shape to block the avatar. To get started, create a new sprite named “walls”, and add the following blocks to create a box in front of the avatar:

 
You will see this big purple wall when you click on these 3 blocks to run them alone:

 
 

Step 3 - Block the Avatar with the Walls

Now switch back to the avatar sprite, and insert these 2 blocks. They will send the “add walls” message, and also make any object created in the “walls” sprite block the avatar.

 
Now if you run the project again, you will not be able to move the avatar through the purple wall.

 
 

Step 4 - Make the Purple Wall Transparent

Now let’s switch to the “walls” sprite, and change the color of the purple box to 100% transparent:

 
Now when you restart the program, the avatar will still be blocked by that box, but we won’t see it anymore. It will look as if the avatar is blocked by the building or the road.

 
 

Step 5 - Add a Marker Box

Now you know how to prevent the avatar from running into any building, we just need to add more boxes in the “walls” sprite to cover up more buildings. Therefore, the only question left is how to find out the size and position of these wall boxes. Although we can find out by trial and error, it is much easier if we use a “marker" box.

To get started, let’s go to the “avatar” sprite, detach the blocks for adding the avatar, and add a new yellow box.

 
It should look like this:

 
 

Step 6 - Turn on Mouse Picking

Next, we want to turn on mouse picking for the city scene, so that we can click anywhere in the scene to find out its position. In addition, in the “3D Action” category, check the checkbox for these 3 reporter blocks “picked point x pos”, “picked point y pos” and “picked point z pos”, so that they are shown on the stage. As we click on different parts of the scene, we get the exact x/y/z positions of those points.

 
 

Step 7 - Move the Marker Box to the Picked Point

To make it easier to view and adjust the point we have picked, let’s move the marker box to the picked position whenever we make a new pick:

 
You can try to click on different points to move the marker box:

 
 

Step 8 - Use the Marker Box to Find the Corner Points of Buildings

Now we are ready to take some measurements. The basic idea is to place the marker box at 2 diagonal corners of a building (or a group of buildings) you need to cover up, and write down the x and y positions of them. We will use these numbers to calculate the size and position of the wall box in the next step.

For example, suppose we want to cover up the street block with 3 buildings in front of the avatar. Zoom out the camera, and shift it to look down at this street block. Then click on the bottom left corner of this street block, which gives us the x position of -1582 and y position of 417. Similarly, click on the top right corner of this street block, which gives us the x position of 2140 and the y position of 1433.

 
 

Step 9 - Calculate the Wall Box’s Size and Position

Now let’s switch to the “walls” sprite, and update the size and position of the wall box.

For its size in the x direction, we can use the difference between the 2 corner points’ x positions of -1582 and 2140, which give us 3722. Similarly, the length of the box in the y direction is the difference between 417 and 1433, which is 1016.

For the wall’s x position, it should be the average of the 2 corner points’ x positions: the average of -1582 and 2140 is 279. Similarly, for the y position, the average of 417 and 1433 is 925.

Therefore, we can put these 4 new numbers into our program. For debugging purposes, we can set the box’s transparency back to 0 temporarily.

 
Now you should get a wall box that properly covers up this street block:

 
Note that we don’t need to make the wall box too tall. So long as it is taller than the avatar’s jumping height, we know the avatar won’t pass through it.

 
 

Step 10 - Add More Wall Boxes

For the remaining work, you just need to add more boxes in the “walls” sprite using the same measurement and calculation methods. If each street block takes you 1 minute, you will be done with the entire “city” scene within 20 minutes.

After you have added all these wall boxes, make sure they are reset back to fully transparent, and remove the code blocks for the marker box and the picking event in the “avatar” sprite.

 
 

Practice

For some more practice with this technique, you can try to apply it to the “castle” scene as well. In addition, you can try to use different shapes of wall boxes, such as cylinders.