Navigation

    CreatiCode Scratch Forum

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

    3D - A Jumping Game (Difficulty: 5)

    Tutorials
    1
    1
    1472
    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

      Introduction

      In this tutorial, you will build an exciting jumping game:

      m1.gif

       

      The player will jump through the platforms to reach the goal area, and a leaderboard of the fastest players will be displayed at the end.

       
       

      Step 1 - A Grass Land Scene

      To get started, please create a new project on the CreatiCode playground, remove the Sprite1 with the dog, and rename the “Empty1” sprite as “Player”.

      In the Player sprite, add the following blocks. They will create a 3D scene with a grassland and show the 3D axes.

      cba437ea-4183-4530-8f7d-c41ca4a4c762-image.png

       
      This is what you should get:

       
       

      Step 2 - Add 3 Empty Sprites

      The Player sprite will contain all the code for controlling the running player. There are 3 other key components of this game:

      • Platform: All the jumping boards
      • Goal: The goal area
      • Controller: The game control logic

      Therefore, please add 3 empty sprites, and name them “Platform”, “Goal” and “Controller”.

      6d7a30d1-daa0-473c-b69b-7df53ed11852-image.png

       
       

      Step 3 - Broadcast 3 Messages

      Before we add code to create the player avatar, let’s first set up the game in the other 3 sprites. We can do that by sending out 3 messages and waiting until they are all handled completely.

      081ce22a-98af-4db6-b902-afcfa8f3ac2e-image.png

       
       

      Step 4 - Add the First Board

      Now let’s add the first board in the “Platform” sprite. It will be a large square box that is 400 by 400, with a thickness of 10. You can pick any texture for it, such as “Wood 07”.

      c78fe8ba-bd29-42a8-93b2-1782a001008d-image.png

       
      It should look like this:

      g4.gif

       
       

      Step 5 - The “Z Start” Variable

      The boards will be floating in the air, so if the player avatar drops off the boards, it will lose the game. However, at this point, we are not sure yet how high these boards should be. Therefore, we can use a new variable called “Z Start”, and use this variable to set the z position of our boards. We will set this variable to 100 for now, which makes testing easier, and we can change this variable to a larger number later.

      a3768b3e-3447-48f4-ac42-e9fc4069b7e6-image.png

       
      Now the board is floating at Z of 100:

      g5.gif

       
       

      Step 6 - Copy to a Second Board

      To add the second board, instead of adding a new box, we will make a copy of the first board. This will not only be faster, but also save some storage space.

      After copying the second board, we can still change its shape using the “update size” block. For example, we can make it 200 wide in the X direction and 800 long in the Y direction.

      5980a479-0a59-4c87-886c-2dc9ab9b2f6f-image.png

       
      Now the new board will overlap mostly with the first board:

      g6.gif

       
       

      Step 7 - Move the Second Board

      Now let’s decide where to move the second board. If you are not sure what’s its new coordinates, you can use the position tool to drag the board first. In the example below, we drag the second board forward, then add the "move to“ block, which will have the position values filled in automatically. We can still change the numbers, such as rounding up the Y position to 800. To keep it at the same level as the first board, we will still use “Z Start” for its Z position.

      g7.gif

       
       

      Step 8 - The “Add Board” Block

      Whenever we add a new board, we use the same set of blocks: copy, update size and move. Therefore, it will make our program much shorter if we define a new block for these steps. We can still use a few input parameters to allow us to customize the size and position of each board.

      Please make a new block named “add board” with 5 inputs like this:

      377d79fe-fe31-40c8-b08e-91a525406db4-image.png

       
      Then move the 3 blocks into the new block’s definition stack, and plug in the 5 input blocks.

      g1.gif

       
      Now we can reproduce the second board using this new block:

      5bd1b069-4db0-4977-88bf-94ac7732449d-image.png

       
       

      Step 9 - Add 4 More Boards

      Now you can freely add a few more boards using the new block “add board”. Here are some examples. Note that you can set the Z position above or below the starting board by adding a positive or negative number to “Z Start”.

      9f358011-97d6-4dd7-a310-0c83a4db36b3-image.png

       
      They will look like this:

      g4.gif

       
       

      Step 10 - Add the Player’s Avatar

      Now the platform is ready, we can switch back to work on the “Player” sprite.

      First, let’s add a new avatar. You can pick any avatar provided by the system. Add 3 animations to it: “Jump in Air”, “Run” and “Victory”. Move it to Z position of 200, which is above the first board.

      Also, let’s add a follow-camera to track the avatar. Its “z offset” should be 50, which is half the height of the avatar. This makes sure the camera will target at the waist of the avatar instead of its feet.

      ecdbeee8-38a5-4cd0-a86c-048aa1548783-image.png

       
      The avatar will look like this now:

      g5.gif

       
       

      Step 11 - Gravity and Collision

      To make the avatar fall down, we need to assign gravity to it. We can start with a value of 800. If you use a larger number, the avatar will fall faster.

      To make the avatar stand on the jumping boards (instead of falling through them), we need to turn on the “collision” between the avatar and all the other sprites, which includes the platform and the goal. Note that for avatars and models, we need to set the “z offset” to half of the object’s height.

      f218679f-a3e8-4e6f-8d63-fc279fa4b6b1-image.png

       
      Now the avatar will fall onto the board and stay there:

      g6.gif

       
       

      Step 12 - Main Loop for Player Control

      Now we are ready to add the main forever loop for controlling the player avatar using keyboard events (in the Player sprite). Since the avatar may be running on the board or jumping in the air, it is easier if we define 2 separate blocks to handle these 2 scenarios: “in air” and “landed”.

      To tell whether the avatar is touching the jumping board. we can use the “sprite object blocked below” block, which will report a value of 1 if the avatar is blocked by any obstacle below it.

      209d04f2-cd1f-4d13-9b59-dabf36232231-image.png

       
       

      Step 13 - Create the “set direction” Block

      In the “landed” block’s definition (still in the Player sprite), we will first need to set the direction of the avatar, then set its speed. We can make a new block “set direction” that’s dedicated to setting the direction, which will make our program easier to read and change.

      bd1d5ab7-9459-46c6-96d6-5ecdfa6fe750-image.png

       
       

      Step 14 - Set the Forward Direction When “w” Is Pressed

      Now let’s define the “set direction” block. When the “w” key is pressed down, we would want the avatar to face the same direction as the camera. This way, the player can rotate the camera to control which way the avatar will move forward.

      We can read out the direction of the camera using its “H-Angle” property (horizontal angle), and then make the avatar point in that direction.

      0d18fecb-22f2-42a5-84d0-d99564b931b9-image.png

       
      Now if we run the project again, we can drag the left mouse button to rotate the camera, then press “w” to point the avatar in the same direction. In fact, if we keep pressing down the “w” key, the avatar will stay in the same direction as the camera when we rotate the camera.

      g9b.gif

       
       

      Step 15 - Handle the Other 3 Directions

      The logic for the other 3 directions is very similar. “s” key will make the avatar face the camera, which is the opposite of the camera’s direction. “a” and “d” keys will make the avatar face the left or right sideways.

      43d2cc63-654d-4adc-8014-b02f2f2f3122-image.png

       
      Now the avatar can turn in these 4 directions based on the current camera direction:

      g10b.gif

       
       

      Step 16 - Handle the 4 Diagonal Directions

      To give the player more control over the avatar, let’s add the 4 diagonal directions. For example, when the player presses down both “w” and “a” at the same time, we can turn the avatar towards the left forward direction, which will be the camera’s direction plus 315 degrees.

      Note that we need to check for these 2-key combinations before checking single key presses. For example, we should check if “w” and “a” are both pressed, and only when that’s not true, then we can check if only “w” is pressed. If we check for “w” by itself first, then we would turn the avatar forward, and fail to handle the “w+a” combination.

      d1.gif

       
      Here is the result when we press 2 keys together:

      d2b.gif

       
       

      Step 17 - Set the Player’s Speed

      Now we can control the avatar’s direction, we should make it move whenever any of the 4 keys are pressed. If none of them are pressed, we should make the avatar stop.

      Note that the “forward speed” will make the avatar move in the direction it is currently facing.

      06af4473-73e6-493f-b84f-cab6067679f0-image.png

       
      Now our avatar can move around when we press the keys:

      d5.gif

       
       

      Step 18 - Add Running Animation

      When the player is running, we should also set its animation to “Run”. And when no key is pressed, we should switch back to the “Idle” animation.

      1638dbc0-1c53-4e08-8b03-46c8bf064760-image.png

       
      Now we get a running avatar:

      d6.gif

       
       

      Step 18 - Make the Avatar Jump

      When the SPACE key is pressed, we will make the avatar jump up. We can set the “rising speed” for this purpose.

      5780e926-e14e-4990-a273-773e40edcb9b-image.png
       
      Recall that in step 11, we have already set the avatar’s “gravity”. Here is how gravity and rising speed work together:

      1. When we press SPACE, the rising speed becomes 300, which will make the avatar go up.
      2. Over time, gravity will reduce the rising speed gradually, so the rising speed will become smaller and smaller. As a result, we will see that the avatar will still be rising, but it is slowing down.
      3. When the avatar’s rising speed becomes 0, it has reached the highest point for this jump, and it will begin to fall.
      4. The gravity will continue to reduce the rising speed, which makes the avatar fall faster and faster.
      5. When the avatar reaches an obstacle or the Z position of 0, it will stop falling, and its rising speed is reset to 0.

       
      Here is what the jump looks like:

      d7.gif

       
       

      Step 19 - Jumping Animation

      When the avatar is in the air, we need to change its animation to “Jump in Air”. We can do it in the “in air” block’s definition:

      906c5d89-2b90-46bd-8c07-96c3871f7218-image.png

       
      Now the jumping animation is displayed. However, you will notice a small issue: the avatar’s body is shifted to the right a little bit when it jumps.

      d8.gif

       
      This is most likely caused by an error in the avatar’s animation data. To fix it, we can add an offset of -7 in the x direction, which will shift the avatar to the left by 7 units:

      ff5bff45-718d-4e17-b5a7-9d234cb6d7bf-image.png

       
      Here is the corrected jump animation:

      d9.gif

       
       

      Step 19 - Change Direction in the Air

      When the avatar is in the air, should we allow the player to change its facing direction? If we want to keep the game close to reality, then we should not allow it, since no one can change the body’s moving direction halfway through the jump. However, if we allow this, it will make the game much more fun to play, since the player will have more control on the avatar.

      In this game, let’s allow it. This can be simply done by reusing the “set direction” block:

      5ed29016-09ab-43dd-99ca-06e4465caff3-image.png

       

      Now after the avatar has jumped up, we can still change its flying direction using the w/s/a/d keys:

      d10.gif

       
       

      Step 20 - Enable Moving Mid-Air

      Now we need to answer a similar question: if the avatar jumps straight up (with a forward speed of 0), should we allow the player to add a forward speed to the avatar mid-air? Again, to make the game more fun, let’s enable this control. We can just duplicate these blocks from the “landed” block:

      f537e389-1ee8-466e-a2b2-ef15623343d2-image.png

       
      Note that we don’t need to change the animation, since the avatar will stay in the “Jump in Air” animation when it is in the air. Now we can press SPACE to make the avatar jump straight up, then press one of the w/s/a/d keys to make it move:

      d11.gif

       
       

      Step 21 - The “player speed” Variable

      Currently, the avatar always moves at a speed of 300 units per second. To make the game more fun, we can allow the player to run faster if the “w” key is pressed down continuously. It will feel like the avatar gains some “momentum” when it keeps running forward.

      To make the running speed changeable, we need to use a new variable “player speed” to represent it. This variable should be set to 300 initially, which will be the default speed of the avatar. It is a good idea to place all variable initialization code at the very beginning, so it is easy to find these blocks.

      9e7a0863-5a0a-49a8-9e1f-ec6f5c1e2590-image.png

       
      Next, we should use the “player speed” variable when we set the avatar’s forward speed and rising speed. If the player’s speed is larger, then the avatar will run faster and jump higher. We need to do it in both “landed” and “in air”.

      3b29df9b-4ffb-4487-a93d-b1dbb14e93f2-image.png

      41a5bd9e-f42b-4ab9-80e0-324a491a0083-image.png

       
       

      Step 22 - Speed Up the Avatar

      Now let’s speed up the avatar by changing the "player speed“ variable. We can simply check if the “w” key is pressed in the “landed” block’s definition.

      • If it is pressed, we increase the “player speed” variable by 5, unless it is already at 900 or higher.
      • If it is not pressed, we reset “player speed” to 300.

      a7a40f92-6085-4300-b4dd-f42efe853e7e-image.png

       
      Now we can clearly observe the speed up of the avatar. Note that if we press “w + a” or “w + d”, the “w” key is still pressed down, so the avatar will also speed up.

      d13.gif

       
       

      Step 23 - Animation Speed

      When the player is running faster, its animation still remains at the same speed. We can make the running animation run faster as well, which will make it easier for the player to observe the speed up.

      Please create a new variable named “animation speed”, and use it as the speed ratio for the “Run” animation. We can calculate its value using the “player speed”. For example, when the player’s speed is 300, the animation should play at 100% speed ratio. When the player’s speed is 900, the animation should play at 300% speed ratio. Therefore, the animation speed equals 100 times the ratio of player speed over 300.

      1bbcd6e0-10ea-4587-adc1-979c6fa4e34a-image.png

       
      You can now observe that the animation also speeds up when the avatar runs faster:

      d14.gif

       
       

      Step 24 - Add the Light Source for Shadows

      Now let’s make the avatar cast a shadow onto the jumping board. This will not only make the game look more realistic, but also give the player some hint on where the avatar will land when it jumps up in the air.

      To use shadows, we need to do 3 things: add a light source, make the avatar cast shadow, and make the jumping board receive the shadow.

      The light source should be added at the very beginning, before we add any new object. Since the “grass land” scene already contain some fairly bright lights, we need to remove them first.

      To cast the shadow, we should add a directional light to simulate the sunlight. We can call it “light1”. The direction of the light is x = -0.1, y = 0, z = -1: it will be from top to bottom, but slightly skewed to the left (negative x direction), so we can see some shadow even when the avatar is standing still.

      6c8783ad-3e96-4ebe-a7a5-685662f54dc3-image.png

       
      After adding these 2 blocks, the avatar becomes pretty dark:

      s5.gif

       
      To lighten it up, let’s add another ambient light source. Its intensity should be low, such as 50, otherwise, it will make the shadow hard to see later.

      6b1ed8e8-a86b-4e1d-9ce9-f6f037d8aca1-image.png

       
      Now the avatar looks pretty clear:

      s6.gif

       
       

      Step 25 - Cast and Receive Shadows

      To make the avatar cast shadows, we should do it right after we add the avatar:

      8af74d08-d3ba-47ca-8de6-d960aa54cf21-image.png

       
      To make the jumping board receive and display the shadow, we need to change each board right after it is added. This has to be done in 2 places in the Platform sprite:

      d854667e-9c85-49bd-b2bb-22707295afc5-image.png

       
      Now you should get a nice shadow like this:

      s7.gif

       
       

      Step 26 - Add the Goal Area

      Now we are ready with the avatar and the platform, the next step is to handle game completion. First, we need to add a goal area at the end of the platform.

      In the Goal sprite, when we receive the “Add Goal” message, we can add a cylinder with a rainbow texture behind the last jumping board. It should be given the name of “goal”, and it should receive and display shadows as well. Here are some example blocks:

      3b22d48c-eab3-48b3-a09c-4e89d044ce75-image.png

       
      This goal area will look like this:

      g21.gif

       
       

      Step 27 - The Main Loop

      Before we add more code, it’s time to clean up our code a little bit, since the main stack of blocks in the Player sprite is getting too long.

      Let’s define a new block named “main loop”, and move the forever loop there:

      main.gif

       
       

      Step 28 - Check for Victory

      To win the game, the avatar has to be standing on the goal. In the main loop, whenever the avatar has landed on some obstacle, we should check if that obstacle is the goal.

      If that obstacle’s name is “goal”, then we know the player has completed the challenge. We should broadcast a “Victory” message, and then exit the forever loop using a “break” block.

      6383562f-7ab1-4638-9738-45e0197b8358-image.png

       
      Note that these new blocks are all added under the condition that the avatar is blocked below. Also, after the “break” block, the forever loop will stop repeating, so the player will no longer be able to use the keyboard to control the avatar.

       
       

      Step 29 - Celebration Animation

      After the player has completed the challenge, we should show some celebration animations. We need to stop the avatar by setting its speed to 0, then start the “Victory” animation. We should also turn the avatar towards the camera so we can see the front face of the avatar. Lastly, we should zoom in the camera to show a close-up view of the avatar.

      ccbcb3a8-0e06-47a4-87cf-65ec7b2fcfe9-image.png

       
      Here is the celebration scene:

      v1.gif

       
       

      Step 30 - The Start Button

      Since the game is about who can complete the entire run in the shortest time, we need to use a timer to count how many seconds the player has used.

      We need to show a “Start” button at the beginning of the game, so the player can start the timer when he or she is ready.

      We should add this button in the “Controller” sprite, using a button widget. Note that you need to run the “add button” block first to add it to the stage, then when you add the 2 bocks below it, you will see the button in their dropdowns.

      bc7a54ac-2855-4023-88c6-9460bbe04641-image.png

       

      The button will look like this:

      a35cce77-f1de-4470-9cf8-069b0716e3b2-image.png

       
       

      Step 31 - 3 Game Stages

      Before the “Start” button is clicked, the player should not be able to control the avatar. After the player clicks the “Start” button, the player gains control of the avatar, and we should start the timer.

      To make sure we control the different stages of the game correctly, we can make a new variable “game stage”. It will be set to “waiting to start” at the very beginning. After the “Start” button is clicked, we change the game stage variable to “started”. Later, when the player arrives at the goal area, we would receive the “Victory” message, and that’s when we will move the game to the next stage, which is “finished”.

      719f6618-831a-4277-a36e-c077a7000486-image.png

       
       

      Step 32 - Limit Player Control Before the Game Starts

      Before the game starts, the player should not be able to control the avatar, since we have not started the timer yet. In the “Player” sprite, we will wait until the game stage is changed to “started” (triggered by the button click) before we enter the forever loop.

      ac67a1bb-5497-4857-998e-deccf7f49135-image.png

       
       

      Step 33 - Timer Display

      When the “Start” button is clicked, we should remove that button, and add a label at the bottom to show the timer value.

      ee8d9d0a-4f2c-4af0-b769-29ea16325b28-image.png

       
      It will look like this when we click the “Start” button:

      v2.gif

       
       

      Step 34 - Display the Current Game Time

      After we add the timer label, we can reset the timer to 0, and start showing the current time using the timer label. We can repeatedly update the timer every 0.1 seconds. We will keep doing this until the game stage changes to “finished”.

      8e280281-1dd8-45b5-8d6b-4603825201eb-image.png

       
      Here is a test run for the timer. You will see that the timer starts after the “Start” button is clicked, and stops when the avatar lands on the goal board.

      e2ddd.gif

       
       

      Step 35 - Record Game Time

      After a player finishes the game, we need to record the game time as his/her “score", which will be used to rank that player on the leaderboard.

      To do that, we can use the “record player score” block from the “Game” category, which is one of the extensions.

      After that, we should add another button to allow the player to look at the leaderboard.

      15b9bf43-cad1-4052-97ba-43668c56cd08-image.png

       
      Here is what the button would look like:

      3e7a40bb-9618-4815-88f5-42bdf268a1bd-image.png

       
       

      Step 36 - Display the Leaderboard

      When the new button is clicked, we should display the leaderboard. We would want to show the top players who have used the least amount of time to arrive at the goal area. Since each player’s “score” is just the game time, we should show the players with the “lowest” scores.

      Note that if a player runs the game multiple times, all game times will be recorded, but the leaderboard will only show the best record for each player.

      b2601a49-ef3e-4cf5-9685-054685422bc2-image.png

       
      The leaderboard will look like this, which shows the ranking, the player name, the best game time for that player, and the date when this record is created.

      81c5356a-1c16-4bbd-85bb-6e0f664c5184-image.png

       
      The player can close this leaderboard by clicking the “x” on the top right.

       
       

      Step 37 - Raise the Height

      Now our game is complete. For the last step, let’s move all platforms and the avatar higher to a z position of 5000. We can also hide the 3D axis now.

      Player Sprite:

      5380f041-35b7-41c7-bd3f-ff04fc478d74-image.png

       
      Platform Sprite:

      b3906ada-5fca-4f32-94e2-d1f906bfdba3-image.png

       
      Goal Sprite:
      5b6c6b33-acf6-4bd0-9a51-c7228ac0b9f6-image.png

       
      And here is the final demo of the game:

      m1.gif

       
       

      Creative Ideas

      You can extend this game in many ways. Here are some example ideas:

      • Platform Shape, Size and Position: You can add platforms in different shapes, such as cylinders and spheres. They can be in different sizes and they do not have to be center aligned.

      • Rotated Platforms: You can rotate the platforms so that the avatar will be running up-slope or down-slope.

      • Models: Instead of using simple shapes for the platforms, you can also use models, such as sofa beds or hamburgers.

      • Rewards: You can add additional objects on the platforms, so they will provide additional help to the player when the avatar reaches them. For example, one such type of reward item can be a bottle of power drink, which would double the avatar’s speed for 10 seconds.

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