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 2, like physics, variables, dynamic text and actions. Let’s check what you are going to build first:

Setting up your project

You can install the full demo project here.

If you want to learn more about each feature used, check them in the User Guide page.

First of all, open Photoshop and the basketball.psd file (not the .kwk file, as we are going to do everything in this tutorial). With the psd file opened, create a new Kwik project:

Enter the project name, set the device to iPad and the orientation to landscape. Also, accept the current psd file as the first project page:

Creating variables

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 Add 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

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

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 theballscores 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 for everything

We need the following actions:

– hitFloor: plays the BBOUNCE_2 audio, when the ball hits the floor;

– playAro: plays the Back_Board audio, when ball hits the basketball;

– changeScore: plays the Swish_2 audio and adds 2 points to the score;

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 (originally this posting mentioned the use of name score for the action but as the variable score already exist, doing so it will generate an error) and 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).

Save the action.

For the other two actions, just do the same as the changeScore one, playing only the respective audio.

With the three actions created, it is time to set the physics! This is covered in Part 2 of the tutorial