Basketball Demo – Part 2 (Intermediate)

In Part 1 of the Basketball demo we set the actions, variables and all other elements of our project. Now it is time to add physics. Physics allows our project to reproduce real situations, like gravity, on a bi-dimensional screen.

Setting up the environment

Although Kwik will automatically setup the physics environment for you, if you decide not to do it, it is a better idea to set it by yourself. Let’s go to the Physics toolset and select the Environment button:

When the window opens, enter the following data:

The gravity fields set the way objects will interact with the environment. The default is 9.8 (same as real gravity, meaning all bodies will fall from top to bottom).

The display mode defines how the objects will render in the Simulator. Hybrid is a good way to check if the bodies are performing correctly on collisions. Considering the simplicity of a ball, I will use the Normal option.

The Create virtual walls around the screen feature is nice to automatically create walls around the screen. Without them, if the ball travels out of the display area, chances are it will be lost in the space. For this demo, considering we have an image for the floor, let’s select only walls for the top, right and left of the screen.

Creating bodies

Every layer interacting with gravity needs to be set as a body. In our project we have several bodies to configure: floor, ball, goal (more on that later) and aro (the small image close to the basketball). Besides the ball and the goal, all of them will have the same body properties. As Kwik 2 allows you to apply properties to several layers at the same time, select layers floor and aro, then press the AddBody button:

With the body window opened, enter the following:

As the floor and the aro (couldn’t find the English word for that so, I used the Brazilian one :), which represents the edge of the basketball frame) will not interact with the gravity, set them to Static. You can leave all other options “as is”. Hit the Save button and the properties will be applied to both layers.

Select the ball and press the Add Body again. Now, set the the parameters:

The ball should be set as Dynamic because it interacts with the full environment. Density sets the mass of the body. Friction defines the the attrition between bodies. Bounce sets the object velocity after a collision. For more information on the parameters, check Corona’s API at http://docs.coronalabs.com/api/library/physics/addBody.html

Select the Shape to circle. If we had a more complex shape, it would be a better idea to create a Photoshop path (maximum 8 points) around it. For even more complex shapes, I strongly suggest the purchase of Physics Editor.

The goal is a way to “trick” our game, as we need an area to track the score. In our case, every time the ball hits the goal area, it will add points to the score. Let’s click again the Add Body, setting the following data:

As this body will not interact with gravity but needs to handle a collision, we need to set it to Is sensor, leaving the other values as default. Bodies set as sensors do not respect gravity, but are there, capturing collisions against them.

Collisions

Now it is time to add the funny part, meaning the actions that will play when the ball collides/interacts with other objects. Still in the Physics toolset, let’s click Set Collisions:

The following window will appear:

We then select the ball as main body (pick it from the list) and the aro as the collision object. For this interaction, let’s select the playAro action. In this project, we do NOT want to dispose any object after collision so, leave all the checkboxes unselected. Click Save and do the same for the other two actions.

Let’s throw the ball!

Almost everything is done but, we still need a way to throw the ball. To do so, select the ball layer and click Set force properties:

When the window opens, enter the following:

In the Impulse option, select Push (translation is “throw”). Check the Curved trajectory to allow a better movement. Set the amount of force to 10 in both axes (feel free to play with different amounts here). Click Save.

Preview the project and you will have your full game ready for prime time. You just made a fully physics game without code!