Navigation

    CreatiCode Scratch Forum

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

    3D Physics - Smashing Boxes with a Car (Difficulty: 3)

    Tutorials
    4
    8
    3029
    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 a simple game that’s based on physics simulation. The player will drive a car to smash into a stack of boxes, and try to knock away as many boxes as possible.

       
       

      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 an empty 3D scene, display the 3D axes, and enable the physics engine with a gravity of -1000.

      d2c29e5f-9016-48ef-a2a2-cf14b6deddde-image.png

       
      This is what you should get:

       
       

      Step 2 - Add a Large Ground

      Next, let’s add a large ground using a plane. It will be 4000 units wide and 15000 units long, and you can apply a grid material on it with your favorite colors:

      e80d37fb-6241-4ca2-a8be-555a6dac76b0-image.png

       
      Here is what it would look like:

       
       

      Step 3 - Enable Physics for the Ground

      The ground would not move, so its mass should be set to 0. Its restitution and friction are not important for this game. Here is the block for enabling physics for it:

      93574c72-4dbd-44a6-994c-2f5892872c19-image.png

       
       

      Step 4 - Add A Ramp

      Next, let’s add a ramp for our car. It will be a smaller plane that’s 600 units wide and 1000 units long. Apply any grid material you like. Rotate it by a small angle like 15 degrees around the X-axis, and move it forward so our car will have some room to speed up.

      dd18bdff-e712-40bc-9550-3e52f6efbffa-image.png

       
      Here is what it should look like:

       
       

      Step 5 - Enable Physics for the Ramp

      You can use the same physics settings for the ramp as the ground:

      93574c72-4dbd-44a6-994c-2f5892872c19-image.png

       
       

      Step 6 - Broadcast 2 Messages

      By now we have completed building the platform. Next, we’ll need to add the target boxes and the player’s car. To do that, broadcast these 2 messages in the “Main” sprite:

      792b76e9-60bd-4cd6-9b5f-31313693ea20-image.png

       
       

      Step 7 - The “Targets” Sprite

      To add the target boxes, it’s better to do it in a new sprite. Please add an empty sprite and rename it “Targets”, then receive the “add targets” event in that sprite:

      ef1368c6-57de-4dcf-ae21-267b674d75b4-image.png

       
       

      Step 8 - Add the Target Boxes

      To add the target boxes in the “Targets” sprite, we can use 2 new variables “x” and “z”, and use 2 nested for-loops to control these 2 variables. The target boxes should be 100 in size. They should go from x position of -200 to 200, and z position of 50 to 450. They should all be at the same y position of about 5500. Here are the blocks to add these boxes:

      22a1f6ba-fd8d-40cd-b386-6009efdbeb0c-image.png

       
      They would look like this:

      t4.gif

       
       

      Step 9 - Add Different Colors

      To make these boxes look different, we can apply a grid material to each of them with a random color:

      t5.gif

       
      Now they look like this:

      t6.gif

       
       

      Step 10 - Enable Physics for Target Boxes

      Lastly, we need to enable physics for each box, so that our car will collide with them. Use a relatively high friction value so that the boxes do not easily slip off:

      989b35ae-62bb-48b8-a981-98426643c2a8-image.png

       
       

      Step 11 - The “Car” Sprite

      Now we are ready to add the car. Again, let’s do it in a new sprite named “Car”, and handle the “add car” message there:

      5fded4da-2b43-4103-a30c-45828da549e4-image.png

       
       

      Step 12 - Add a Car Model

      First, let’s add a car using the “Race Car” model with a height of 50.

      0e648f1b-7d62-494e-a38f-85d8054fa86f-image.png

       
      It will look like this:

      t7.gif

       
       

      Step 13 - Enable Car Simulation

      Next, for the most important step of this tutorial, enable car simulation using this block:

      96f978ca-7576-46a9-8cdc-e5078a3dc2fa-image.png

       
      Its mass will be 10 times the mass of each box. A high restitution value will bounce the box away when they are hit by the car. A tire friction of 10% will allow the tire to be a little bit slippery, so when the front wheels are turned, the car body will spin a bit.

       
       

      Step 14 - Add a Follow Camera

      Now let’s add a camera to follow the car as it runs around. We can use a “Free” direction lock so the player can zoom or turn the camera any time he/she wants to.

      70a19c72-9f3e-42f5-9ee8-c75fd580e757-image.png

       
      Here is the new view from the follow camera:

       
       

      Step 15 - “D” and “A” Keys to Steer the Wheels

      Now we need to allow the player to drive the car using the keyboard. We will use a forever loop to check for key presses.

      First, let’s handle the steering angle of the front wheels. When the “D” key is pressed, we should steer the wheels 15 degrees to the right; when the “A” key is pressed, we steer -15 degrees; if neither key is pressed, we set the wheels straight.

      455f6bde-eaf1-4198-b720-ed05db23c351-image.png

       
      You can clearly view the front wheels from the bottom of the car:

       
       

      Step 16 - “W” Key to Drive Forward

      Next, we should handle the engine force and braking level, which should be independent of the steering angle.

      When the “W” key is pressed, we should set a large positive engine force and zero braking:

      ad61ea86-9577-4205-b638-ab6f5bd126ac-image.png

       
       

      Step 17 - “S” Key to Drive Backward

      Similarly, if the “W” key is not pressed, but the “S” key is, then we should set a negative engine force to make the car go backward:

      603e455a-9f70-4518-afed-2ab89adb8e17-image.png

       
       

      Step 18 - “SPACE” Key to Apply Brake

      When neither “W” or “S” keys are pressed, and the SPACE key is pressed, we should set a zero engine force, and a braking level of 10%. This way, the car will slow down by 10% repeatedly. If the SPACE key is not pressed either, then we simply set both engine force and braking level to 0.

      1dcad26a-890b-4c8a-a45c-db0e995ed900-image.png

       
       

      Step 19 - A Starry Sky

      Lastly, to make our scene look better, we can set a starry sky in the “Main” sprite, and also hide the 3D axis:

      418ab269-e061-4a55-8571-00eae0dfa100-image.png

       
      Here is a final demo of the game:

       
       

      Creative Ideas

      Here are some suggestions for you to build more interesting games based off this tutorial:

      • Different Targets: you can change the position, shape and count of the targets, and they do not have to be all stacked together.
      • Different Ramps: you can design the ramp differently, or provide multiple ramps.
      • Different Goals: you can make the player try to knock all targets off the platform to complete the game
      1 Reply Last reply Reply Quote 0
      • Pinned by  info-creaticode info-creaticode 
      • T
        wyatt johnson last edited by

        this does not work. one of the boxes follow the car and I have not yet found a way to get rid of it.

        info-creaticode aiden.bedo-45dbf929 2 Replies Last reply Reply Quote 0
        • info-creaticode
          CreatiCode @ttvwyattt.boom-gmail last edited by info-creaticode

          @ttvwyattt-boom-gmail

          Hi there, please share your project and post the URL here so that we can help review what’s the issue.

          CreatiCode

          T 1 Reply Last reply Reply Quote 0
          • T
            wyatt johnson @info-creaticode last edited by

            @info-creaticode https://play.creaticode.com/projects/ba803d2ef1090b658877379e

            info-creaticode 1 Reply Last reply Reply Quote 0
            • info-creaticode
              CreatiCode @ttvwyattt.boom-gmail last edited by

              @ttvwyattt-boom-gmail

              Thanks for sharing. There are 2 small adjustments you need to make:

              1. The box that sometimes shows up around your car is the last box added to the targets. It happens sometimes that when you add the car, the box has not been moved to its own position in time. To solve this issue, the best solution is to move the code for the targets and the car into 2 new sprites, as suggested in the tutorial steps 7 and 11 above

              2. The plane can not be too big. The size given in the tutorial has y of 15000, and your project has 150000, which is 10 times larger. Although this seems to be a small difference, the physics engine can not find a solution when you try to drive the car. So try 15000 or some other smaller value. If you do need to have a larger map, you can add more planes, but keep each of them relatively small.

              Hope that helps!

              1 Reply Last reply Reply Quote 0
              • aiden.bedo-45dbf929
                Shredderhead18 @ttvwyattt.boom-gmail last edited by

                @ttvwyattt-boom-gmail I had this issue also, but I realized that I went ahead too fast and didn’t create a SEPERATE SPRITE for the car and target sprites. Have you done this?

                1 Reply Last reply Reply Quote 0
                • W
                  S M Abdullahil Wasee last edited by

                  my car won’t steer right

                  info-creaticode 1 Reply Last reply Reply Quote 0
                  • info-creaticode
                    CreatiCode @waseesmabdullahil-0d79d542 last edited by

                    @waseesmabdullahil-0d79d542

                    Can you check out this demo project and compare with your code?

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

                    1 Reply Last reply Reply Quote 1
                    • First post
                      Last post