3D Physics - Spiderman Basketball (Difficulty: 5)

CreatiCode

Key Topics Covered

Introduction

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

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.

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:

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.

You will get a basket like this:

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.

Here is the new position of the basket:

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.

It should look like this:

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:

Now the hook looks like this:

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.

The holder will look like this:

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.

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

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.

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

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.

The button will have a default style like this:

Step 11 - Update the Button Style

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

The button will look like this now:

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.

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

Step 13 - Remove the Ball Holder

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

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

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:

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:

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:

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

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.

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

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:

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:

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.

Now we will get a success message like this:

Step 20 - Update Label Style

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

Now the success message looks like this:

Step 21 - Clean Up

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

Here is a final demo of the game:

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.