☰
Navigation :

Basketball

Basketball

In this tutorial I will teach you how to create the Basketball demo. This is a nice demo showing several new features available in Kwik, like physics, variables, dynamic text and actions. Let’s check what you are going to build first:

the project file is here

Setting up your project

.psd file is 768 x 1024. You can create a project with iPad Mini

Creating variables - score

Variables are used to store information. In our project, it will keep track of the score. Let’s create a new one. In the Project and Pages toolset, select Create Variable:

Set the variable name to score. This will be a local variable (it will be used only in this page) and the content will be a number. You may add some comments to remember what the variable is for but, considering it is a simple game, with just one variable, I will not add one.

Dynamic Text - score

Select the scoretxt layer and go to Layers and Replacements toolset. There, select the Dynamic Text. Dynamic text replacement is used to store content that changes frequently. A text layer set with this replacement will be rendered as pure text, not image.

In the opened window, set the content of the layer to variable score.

Adding sound effects

Our project needs a few audio files. They will be used to reproduce the sound of the ball hitting the floor, hitting the basketball and scoring points. The steps are the same for every audio so, let’s learn how to create the first one, then you will be ready to do the same for the last two files.

Back in the Project and Pages toolset, select the Add Audio tool:

When the window opens, locate the audio file Swish_2.wav (the other ones you will use are BBOUNCE_2.wav and Back_Board.wav) and enable only the checkbox Short file. In the controls, set the Loop to 1. If you want a different audio channel for audio, enter the correct number, otherwise accept the channel number offered by Kwik:

Saving memory with Vector Replacements - goal

Sometimes you have elements in the design that could be replaced by a vector, instead of being an image. Vector saves memory because they are drawn thru a mathematical formula. In our project, the goal layer (will be transparent) is a good candidate for that. The purpose of the goal layer is to track when the ball scores points.

Select the goal layer and, under the Layers and Replacements toolset click Vector Replacement:

Accept the default information captured from the selected layer, then click Create.

Now that the layer is set to vector, Kwik will not render it as image, meaning less time to export and less memory used.

The next step is to hide the layer. Back in the Project and Pages toolset, click Hide layer, group or page:

With the window opened, pick the Hide Layer option and click Create:

Actions - hitFloor, playAro and changeScore

We need the following actions:

Let’s create the action changeScore together (the other two ones can be created by you, as they are pretty similar to the one we are creating). Still in the Project and Pages toolset, select the Add Action tool:

Name it changeScore select the action Play Audio, then select the Swish_2 audio in the list. Then, add an Edit Variable action. Select the variable score and enter the following formula: score + 2 (meaning the content will be the current content of the variable score, adding 2 points more).

changeScore

hitFloor

playAro

Physics

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:

You’ll notice we set the mode to Hybrid. We’ll change it to Normal at the end, I just want you to see how the physics bodies are being added.

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 allows you to apply properties to several layers at the same time, select layers floor and aro, then press the Add Body button:

With the body window opened, enter the following:

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

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:

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:

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:

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!

Enjoy!