Navigation

    CreatiCode Scratch Forum

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

    3D Physics - Spiderman Basketball (Difficulty: 5)

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

      • Enable Physics for 3D Scenes
      • Adding Physics Bodies for 3D Objects

       
       

      Introduction

       

      In this tutorial, you will build a fun basketball game using the physics engine:

      final.gif

      The idea is that the basketball will link to a hook in the sky with a rope, so that it will swing forward like the Spiderman. The player can decide when to add or remove this rope so that the ball will fall into the basket.

       
       

      Step 1 - An Empty Scene with Physics

       

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

      In the Main sprite, add the following blocks. They will create a 3D scene with a blue sky, display the 3D axes, and enable the physics engine with a gravity of -500.

      df9acde5-8627-414e-9849-f931cdd9bc0e-image.png

       
      This is what you should get:

       
       

      Step 2 - Make 4 New Blocks

       

      In this game, the 4 key components are the basket, the hook in the middle, the basketball and its holder. Let’s make these 4 new blocks to organize our code:

      c44f76b4-d098-40c1-bbd2-10363ff17069-image.png

       
       

      Step 3 - Add the Basket Using a Rectangle Tube

       

      To hold the ball, we can use a rectangle tube with an opening on top. The following 3 blocks will add the rectangle tube with an opening of 150 by 150 and a depth of 80. We attach a physics body to it using the “rectangle tube” shape, and we set its mass to 0 to keep it stay in the air. The restitution is set to 0 so the ball will not bounce out of it, and friction of 100% will slow down the spinning of the ball. A green grid is drawn on it with white lines.

      278af8bd-41a4-48e9-b1e4-a677b7a13f61-image.png

       
      You will get a basket like this:

      s1.gif

       
       

      Step 4 - Move and Turn the Basket

       

      Next, let’s move the basket forward along the Y-axis, so the ball has some room for swing. Also, let’s rotate the basket 45 degrees around the X-axis, so that its opening will face us.

      f12978f2-1e93-462e-92f1-513caf9a7b1c-image.png

       
      Here is the new position of the basket:

      s1.gif

       
       

      Step 5 - Add the Hook

       

      Now let’s work on the hook. We will use a torus to represent the hook. For its physics body, since there is no “torus” shape, we can simply use a “sphere” or “box” shape for it. The shape will not matter since the hook will not collide with any other object. Its mass should be 0, since it should stay where it is. The restitution and friction values are not important either. You can add a grid material with any color for it.

      b0d0d741-0fac-47e9-ab50-c3d751582ad4-image.png

       
      It should look like this:

      s1.gif

       
       

      Step 6 - Move and Turn the Hook

       

      The hook needs to be moved much higher so that it can help the ball swing a long distance. Also, it should be standing vertically. These 2 blocks will do the trick:

      676392e9-63c6-4e79-8b45-a4fe10b19ef8-image.png

       
      Now the hook looks like this:

      s1.gif

       
       

      Step 7 - Add the Ball Holder

       

      The ball holder is a small plane placed below the ball. When the game starts, the ball will bounce on the holder before the user connects the ball to the hook.

      We will place the holder at a Y position of -500, so the ball will swing forward when it connects to the hook. The holder should have 100% restitution to keep the ball rebounding.

      f282cc1c-e7fb-42d4-8c9c-7fdffced1b32-image.png

       
      The holder will look like this:

      s1.gif

       
       

      Step 8 - Add the Basketball

       

      The last component is the basketball. Note that it needs to be named, and it needs to use a z offset of 25, which is half of its height.

      It will be placed right above the ball holder. It should have a 100% restitution as well to keep it bouncing off the holder. Also, its friction needs to be 100%, so that it will stop spinning quickly when it falls into the basket.

      0a3f484d-23d7-418a-90d6-c74e47cbf2fb-image.png

       
      Now if you run the program, you should get a bouncing ball:

      s1.gif

       
       

      Step 9 - Add a Follow Camera

       
      Since the ball will be swinging forward, we need to add a follow camera that will follow the ball. We will make the camera view the ball from a horizontal angle of 45 degrees, so it is easier to judge when to connect or disconnect the ball from the hook. We will also set it to the “free” mode, so the player can adjust the camera freely.

      2d66fc80-ec00-42fc-82a9-b9fc458ee405-image.png

       
      Now the ball will stay in the center of our camera view:

      s1.gif

       
       

      Step 10 - Add a Button Widget

       
      To allow the player to connect or disconnect the ball with the hook, we can either use a key press event or a button click event. In this case, the button is a better choice, because it will allow players to play on their phones or ipads, which do not have keyboards.

      The following block will place the button at the bottom right corner of the stage. Since the first action of the player is to link the ball to the hook, we should show the word “Link” on the button.

      8a797092-04cc-4470-a85b-848aba41d832-image.png

       
      The button will have a default style like this:

      39a140f0-6d93-416b-a47e-856a74116bd3-image.png

       
       

      Step 11 - Update the Button Style

       
      To make the button look better, we can change the background and text style with these 2 blocks:

      fd2339db-5baf-4585-b726-0750f0b0d6d8-image.png

       
      The button will look like this now:

      eeed1626-bc15-4cdf-a915-808b9f31dd9a-image.png

       
       

      Step 12 - Link the Ball to the Hook

       
      Now we are ready for the most important step of this project. To make it look like the ball is linked with the hook using a rope, we need to do 2 things.

      • First, we need to add a distance constraint, which will keep the ball at the same distance from the hook. With this constraint, the ball will not fall down, but swing below the hook back and forth.
      • Second, we need to add a line between the ball and the hook to represent the “rope”. Not that we need to use a moving line, which will move with the ball.

      Note that when we add the distance constraint, we need to use “hook” as the first input, since the hook is a static object and the ball will be swinging. The “moving line” will keep moving with the ball, and we can update the line with a “Carpet” texture to make it look like a rope.

      500b7bdc-1a9f-4331-8f5c-7423b438f4c0-image.png

       
      Now if we click “Link”, the rope will appear and it looks like the ball is swinging.

      s1.gif

       
       

      Step 13 - Remove the Ball Holder

       
      When the ball swings around the hook, sometimes it might still touch the ball holder:

      s1.gif

       
      To avoid this issue, we should simply remove the ball holder when we connect the ball with the hook:

      0720b6b6-2b6f-47ec-97e1-f70a27a33f52-image.png

       
       

      Step 14 - Game Phases

       
      After the ball is linked with the hook, the next action for the player is to unlink it, which will throw the ball toward the basket. To keep the user interface simple, we can reuse the same button for this action.

      Since we are using the same button for different purposes, we need a way to keep track of the current “game phase”. In this game, there will be 3 phases:

      • Phase 1: From the game start to the moment the player links the ball with the hook;
      • Phase 2: From the moment the player links the ball to the moment the player unlinks the ball;
      • Phase 3: After the ball is unlinked from the hook.

      We can use a variable named “phase” to denote which phase we are in. Please make this new variable, and set it to 1 at the beginning of the game:

      98c2a2ee-3b8f-40ee-b5c8-053efabbf95d-image.png

       
       

      Step 15 - Handle Button Click in Phase 1

       
      Now we can run different code blocks when the button is clicked. Our existing code blocks should only be run when the “phase” variable is 1:

      ba8e8436-c818-404d-8aa0-09ca951380f8-image.png

       
       

      Step 16 - Prepare for Phase 2

       
      After phase 1 is completed, we should update the “phase” variable to 2, since we are entering phase 2. Also, we should change the button to say “Unlink”, since the player needs to unlink the rope in phase 2:

      5efb8b55-bb86-418b-bf8b-78eb756c6f91-image.png

       
      Now the button will change its text when we click on it:

      s1.gif

       
       

      Step 17 - Handle Button Click in Phase 2

       
      In phase 2, when the user clicks on the button, we should remove the distance constraint and also the rope, so that the ball will fly freely. We should also remove the button, since there is no more action to take by the player. We should also update the “phase” to 3.

      1368190c-1388-42e0-b570-b48a3aa9a3a5-image.png

       
      Now the game is ready for play! Click “Link” to add the rope, then click “Unlink” to throw the ball:

      s1.gif

       
       

      Step 18 - Check for Success

       
      In phase 3, we need to check if the ball has fallen into the basket. We can use a forever loop to do the check every second:

      47be2a6b-93b4-4067-88a5-6aae5fe95a86-image.png

       
       

      Step 19 - Check Ball Position and Speed

       
      If the ball has fallen into the basket, it should not move, and its Z position should be fairly stable. We can check for both values using the “get” block directly:

      s1.gif

       
      The Z speed should be close to 0, and the Z position should be about -131.8. We can use these 2 conditions to check for success, and show a label if so.

      9092ebfc-e662-454d-82ba-3ecf4ad36626-image.png

       
      Now we will get a success message like this:

      s1.gif

       
       

      Step 20 - Update Label Style

       
      To make the label look better, we can update its background and text style:

      2aa365ab-b3eb-415e-adc1-2ed9840166ff-image.png

       
      Now the success message looks like this:

      4f32fc43-8cea-4385-8666-1c38c568afe9-image.png

       
       

      Step 21 - Clean Up

       
      Lastly, to clean up, we should hide the 3D axis:

      33663d64-3a95-452e-bf5f-88405fd7db25-image.png

       
      Here is a final demo of the game:

      final.gif

       
       

      Creative Ideas

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

      • Change Parameters: You can move the ball, the hook and the basket to different positions. You can change the size of the ball or the basket, or change the gravity of the scene.

      • 2 Hooks: After unlinking from the first hook, you can allow the player to link to another hook in phase 3, and then unlink from it in phase 4. The second hook may be in a different direction as well. That will make the game much more challenging. Here is an example:

       

      • Obstacles: To make the game even more challenging, you can add some static objects as obstacles, so the player has to avoid them.
      1 Reply Last reply Reply Quote 1
      • Pinned by  info-creaticode info-creaticode 
      • First post
        Last post