In this tutorial, we are going to create a game using physics and timer. The video shows how to play the game: after clicking the PLAY button, you will have 5 seconds to drag the platform and, if necessary, rotate it (all you need to do is to click it), making the ball to hit the balloon.

In this first part we are going setup the stage for the physics and actions (which will be created in Part 2).

Creating a new project

After unzipping the file, open the game.psd file in Photoshop. Then, in Kwik 2, create a new project, using the info below:

Creating a variable

Taking advantage of being already in the Toolset Project and Properties, select the Create Variable option, as we will need one to display the timer. The following window will appear:

Enter the above info. We are setting the variable name to seconds, it will be local (only exists in this page), being created before the layer content render.

Reducing file sizes

As the background and the floor layers are simple rectangles filled just with one color, we don’t need to export them as images. Select the background layer, then go to Toolset Layer and Replacements and select Vector Replacement. The following window will appear:

Accept the data Kwik auto fills. Do the same for the layer floor.

Setting the Timer display

As we are already in the Toolset Layers and Replacements, select layer secCount, then click Dynamic Text Replacement button. The following window will appear:

In our game, the content of the variable seconds will save the time, in seconds, available to the player move the ramp. In this example, we are going to use the native system font from the device. Disabling this option means you want to use the same font of your Photoshop file (Kwik will ask you to select the font to be copied to the project folder before export).

Randomizing the position of the balloons

Every time we play the game, the balloons layer will show up in a different position. In order to enable this, select the layer and click Layer Properties:

Check the X between option and set it to 0 and 1024 (meaning the balloon will appear in the X axis between coordinates 0 and 1024.

Creating an animation for the thrower

Select the thrower layer, then go to Toolset Animations and select Linear animation. Enter the following info (basically you are just resizing the layer to simulate the passage of the ball inside the tubes) – you can use the auto-created name for your animation or enter your own:

After entering all the correct parameters, click Create.

Dragging the Ramp

The ramp layer will receive two interactions. Go to Toolset Interactions, then select Drag option. When the window opens, enter the following data:

In this case, we are just limiting the dragging area in axis X to the boundaries of the screen (just to avoid the user to drag the ramp out of the window).

After creating the Drag, click Add Button:

For this interaction, we are going to select External Code, from the Code Interaction. Enter the following when the External Code window opens:

The code we created check if the rotation of the layer ramp is less than 360 degrees, if so, it rotates the ramp again, decreasing 15 degrees.

In Part 2, we are going to set the physics and create the actions and buttons.