Navigation

    CreatiCode Scratch Forum

    • Register
    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • CreatiCode

    3D - A Bridge Runner (Difficulty: 4)

    Tutorials
    1
    1
    1121
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • info-creaticode
      CreatiCode last edited by admin

       

      Key Topics Covered

      • Avatar Animations
      • Copy by matrix
      • Updating color
      • The button widget
      • Add fog to a scene

       
       

      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”.

      r1.gif

       
       

      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:

      ebc754ca-7ab1-4462-b494-a428d588d957-image.png

       
       

      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.

      52fb8e56-3cb1-435c-8517-faf3307ac855-image.png

       
       

      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.

      7f0a6810-962e-4e26-992d-fdcdcf381f5f-image.png

       
      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:

      89f4ab2b-937c-470b-8c51-4ba57698f6f9-image.png

       
      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:

      1d576b4c-b797-47db-bc21-00a49de94083-image.png

       

      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:

      0c864b77-d9f5-4ccd-a52c-bdc2ee026705-image.png

       
       

      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:

      dec64669-72b8-4140-a2ac-3dc33e668dcd-image.png

       
      This is the result after adding the fog:

      fog3.gif

       
       

      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.

      6225aab8-435b-46bf-a5ff-e2e57c032951-image.png

       
      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”.

      dab5d282-aa3e-4083-b3b7-cdb0c370d54b-image.png

       
       

      Step 11 - Add Gravity

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

      c1b99c65-58eb-4cab-b874-ca9e2a06260f-image.png

       
       

      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.

      3e052028-ca6b-42b0-b93c-9c042f57c7ea-image.png

       
      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.

      49e15ddf-e244-4fb4-bd7f-6996fb8413c4-image.png

       
       

      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.

      108e4add-420f-4c44-bbc4-0e49651692e6-image.png

       
      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:

      95647ff7-ac00-4d5d-a778-007368c8cf2e-image.png

       

      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.

      eebebc9f-22bb-4b0b-81fd-64859f51a7f0-image.png

       
      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.

      b3c031fb-3e67-4058-aa0f-937417a37d20-image.png

       
      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.

      4f53ce9f-931a-45d4-a532-15a82d65b63a-image.png

       
      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.

      ee19e6a6-3d7b-44e8-b4b8-d52ee07a4f22-image.png

       
      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”:

      90fcc925-f95e-4604-ad83-acb6c1d2565d-image.png

       
       

      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.

      f5d6ed6d-32d0-4cb2-b2a0-267a3b6bac07-image.png

       
      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.

      b3c57bb9-9d14-4f75-9cdc-c55365c09fec-image.png

       
      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.

      1 Reply Last reply Reply Quote 0
      • Pinned by  info-creaticode info-creaticode 
      • First post
        Last post