3D - A Bridge Runner (Difficulty: 4)

CreatiCode

Key Topics Covered

Introduction

In this tutorial, you will create an animation with an avatar running on a long bridge. It can be used as a template for many interesting games.

Step 1 - A New Project with 3 Sprites

Please create a new project in the CreatiCode playground. Remove the “Sprite1” sprite, and rename the “Empty1” sprite to “Main”.

Please also add 2 new sprites named “Bridge” and “Runner”.

Step 2 - The “Blue Sky” Scene

Now let’s set up a 3D scene with a blue sky. Also, to help you determine the X/Y/Z directions, you can show the 3D axis during development.

Here are the new blocks you need to add to the “Main” sprite:

Step 3 - Broadcast 2 Messages

Next, we’ll broadcast 2 messages to tell the other 2 sprites: “add bridge” and “add runner”. We’ll use the “broadcast and wait” block instead of “broadcast”, so that we wait until those sprites complete their initialization work before we continue.

Step 4 - Add the Bridge

In the “Bridge” sprite, when it receives the “add bridge” message, it will add the “Rail Bridge 1” model to the scene, with a height of 910.

Note that the bridge model’s origin point is not at its bottom, but at the level of the deck on the bridge. This way, when we add avatars or objects to the scene, they will show up on the deck instead of below the bridge.

Step 5 - Update Colors

You can update the bridge with your favorite colors. The “main” area of the bridge model refers to the red pylons, and the “second” area refers to the white cables connecting the pylons and the deck of the bridge. For example, this is how to make the pylons blue and the cables green:

Now the bridge looks like this:

Step 6 - Copy the Bridge 30 Times

Obviously, the bridge is too short for our runner. We need to make more copies of the bridge and add them down the road. There is a very convenient way for making copies and placing them at certain distances: “copy by matrix”. You just need to specify how many rows/columns/layers to copy the object, and the distance between them.

In this program, we need to make 30 copies of the bridge along the Y axis, and the distance between any 2 copies should be around 2400. Therefore, we need to use the “copy by matrix” block like this:

Now we get 30 bridges instantly. They are all sharing the same geometry and material data, so this process is very fast, and they all look the same.

Step 7 - Add a Road

Since we want to have an avatar running on the bridge, we need to cover up the rails on the deck with a road. The road can be a very long plane colored in grey, which will hide the rails below it. Here is what happens when we add the road plane:

Here is the new block:

Step 8 - Add Some Fog

For the last step of the bridge, we are going to add some fog. Objects far away will be hidden behind the fog, which motivates the player to explore the scene.

We will use a “linear” fog in this project. This makes sure the player can clearly see the objects close to the camera, and also completely hide the objects far away. Feel free to add a bit of color to the fog as well, such as blue color for the sky:

This is the result after adding the fog:

Step 9 - Add the Runner Avatar

Now let’s switch to the “Runner” sprite, and start working on the runner avatar. First, when this sprite receives the “add runner” message, it should add an avatar to the scene. Feel free to pick any avatar you like. Please name it “runner”, so we can refer to this avatar object later.

The avatar will be standing on the bridge deck facing forward:

Step 10 - Add Animations

A common mistake for beginners is forgetting to add animations. It’s recommended that you add animations right after adding an avatar. Please add these 5 commonly used animations: “Victory”, “Defeat”, “Jump in Air”, “Slide Down” and “Run”.

Step 11 - Add Gravity

Similar to animations, you should always set gravity at the beginning, since gravity usually does not change throughout a game.

Step 12 - Add a Follow Camera

Since the runner will be running forward, we need to use a follow camera to follow the runner. To view further, we can use a “z-offset” of 100 (the same as the avatar’s height), so that the camera will look at the head of the avatar instead of its feet. Also, we will lock the camera to the same direction as the target (the avatar), so if the avatar is turning, the camera will also turn to that direction.

This is the new camera view we get:

Step 13 - A Start Button

Although we can make the runner start to run right away, it’s better to let the player trigger the start when he or she is ready. To do that, go back to the “Main” sprite, add the “Widget” extension, then and add a Start button after the 2 messages. Feel free to customize the button’s size and colors.

For a very useful tip, you should run the “add button block” so that the button is added to the stage first, then add the other 2 blocks to update the text and background. This way, those 2 blocks will have the button selected by default.

Step 14 - The Start Message

When the “Start” button is clicked, we should hide this button, then broadcast the “Start” message to all other sprites.

Step 15 - Start Running

Now let’s switch to the “Runner” sprite. When it receives the “Start” message, it should make the runner avatar run forward by setting its “forward speed”. You also need to make the avatar start the “Run” animation in a looping mode.

Now we have a true runner on the bridge!

Step 16 - Run Toward the Right Front

We need to allow the player to shift the runner left or right. When the right arrow key is pressed, we can make the runner face the right front direction (60 degrees), so that the runner will be running in that direction:

Here is what happens when we press down the right arrow key:

Step 17 - Run Toward the Left Front

When the right arrow is not pressed, we can check if the left arrow is pressed. If it is, we make the avatar run toward the left front; otherwise, we will resume the forward direction.

Now our avatar can run in all 3 directions, as controlled by the 2 arrow keys.

Step 18 - Jumping

When the user presses the up arrow key, we can make the runner jump up by setting its “rising speed” to 250. Also, we can start the “Jump in Air” animation.

Here is the result:

Step 19 - Resume the Run Animation

When the avatar lands back on the deck, it should switch back to the “Run” animation. We can wait until the z position of the avatar is a very small number.

Now the animation is fixed:

Step 20 - Sliding Animation

When the down arrow is pressed, we can make the avatar slide on the deck. This animation only needs to be played once, so we should set “looping” to “No”. Also, we should set it to be “Blocking”, so it will run through to the end. After the animation is completed, we can simply return to the “Run” animation.

Here is the sliding animation:

Step 21 - A New Target for the Camera

There is one more issue we need to address. Currently, when the avatar turns or jumps, the camera moves with it, so it looks like the bridge is moving. This can be disorienting for the player. A much better way is to keep the camera moving forward, and the runner will be moving around.

To do that, we first need to add a new target object for the camera, so the camera does not need to follow the runner any more. We can use a transform node named “t”:

Step 22 - Make the New Target “Run”

When the runner starts to run, we need to make the object “t” also move forward at the same speed, so it stays at the same distance from the avatar. After that, we select the runner object to make it run.

Now if the runner jumps, the object “t” is not jumping, so the camera would not jump up.

Step 23 - Run Faster When Turning

When the runner is running diagonally, it will be slower than the camera, so it will disappear from the camera view:

To fix this problem, we need to make the avatar moves faster when it runs diagonally. It turns out that if we double the runner’s forward speed to 400, its speed in the Y direction will remain at 200. If the runner is running along the Y axis again, then we should reset its speed to 200.

Here is the final demo of the runner:

Creative Ideas

Now you know how to set up the basic animation of a runner, there are many ways to customize or improve it. Here are some example ideas:

Keep the Runner Within the Deck: you can use different positions for the cue ball and target ball.
Add Sound Effect: when the runner jumps or slides, you can add some fun sound effects.
Other Animations: you can try to make the runner do more things, such as flying or running faster.