Physics Game
Part 1
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.
You can download the Photoshop file here.
http://www.kwiksher.com/tutorials/Game/game.zip
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.
In Part 1 of the tutorial, we set the environment for our game. Now it is time to set the physics, the timer and the interactions.
Setting the physics environment
Go to Toolset Physics and click Physics Environment. Accept the following data:
http://kwiksher.com/wp-content/uploads/2012/09/Screen-shot-2012-09-09-at-4.35.47-PM.png
Creating bodies
We need to set bodies to the following layers: ball, balloons, floor, thrower and ramp. As the last 3 ones have the same characteristics, select all 3 of them and click Set body properties:
Enter the above info. All 3 layers are Static bodies, with rectangular shapes. Clicking Save creates the 3 bodies.
Select the balloons layer and click Set body properties:
Do the same for layer ball:
Creating actions
We need 3 main actions in our project:
act_addSec: this action reduces the content of the timer in one second; act_hitBalloon: called when the ball hits the balloon. It will reset the game; act_upSeconds: starts the timer, when user clicks the PLAY button Back in the Toolset Project and Pages, click the Actions button. When it opens, name it act_addSec, select option Code, Edit Variable. Enter the following:
Save the action.
Click the Actions button again. Now, create the act_upSeconds. Select option Timers, then Start Timer. Enter the following:
What it will do is to play the action act_addSec for 5 times (this way, the timer counter will count backwards, from 5 to 0). Save the action.
Click the Actions button again. Now, create the act_hitBalloon. Select option Code, then External Code. Enter the following code, when the window opens:
local function delayBalloons() — creates a function called delayBalloons balloons.bodyType = “dynamic” — set the body of layer balloons to dynamic physics.setGravity(0,-9.8) — invert gravity to -9,8 (objects will float, instead of fall) end — ends the function
timer.performWithDelay(10,delayBalloons) — start the function delayBalloons after 0.01 seconds timerStash.timer_134 = timer.performWithDelay(5000,restartScreen, 1) –re-start the timer for the next play
Setting the collision between the ball and the balloon
The next step is to check when the ball hits the balloon. Back to the Toolset Physics, click Set Collisions:
In this case, we are triggering the action act_hitBallon when the ball hits the balloons. Save it.
Creating the Play button
The Play button re-start everything and allows the player to reset the ramp in 5 seconds, before the ball falls again from the thrower. Select the layer button. Back in the Toolset Interactions, click Add Button. This button will have four actions:
- Code->External Code: restart positions of the ball and the balloon. Copy and paste the following code: local function restartScreen() physics.setGravity(0, 9.8) — returns the gravity to 0,9.8 (objects will fall now) ball.bodyType = “static” — ball becomes static ball.y = -130; ball.x = 512 — and returns to its original position at 512,-130
balloons.bodyType = “static” — balloon becomes static balloons.rotation = 0 — with no rotation (original shape) balloons.x = math.random( 0, 1024); balloons.y = 635 — being positioned randomly in the X axis, but fixed at Y axis at 635 (height of the floor layer)
local function delayBall() ball.bodyType = “dynamic” — makes the ball a dynamic object again end timer.performWithDelay(5000,delayBall) — waits 5 seconds, then start function delayBall end
timer.performWithDelay( 10, restartScreen ) — after 0.01 seconds, calls the restartScreen function above
- Code->Edit Variable: “zeroes” the seconds variable to 5 (time in seconds for the player to play with the ramp)
- Common->Play Action: re-start the act_upSeconds action (which controls the display of the timer)
- Animation->Play Animation: plays animation simulating the thrower being expanded while the ball passes thru it
Previewing your project
Make sure you have the Export images icon highlighted in the Status bar, then press the Publish button. Kwik will create all images and code necessary for previewing your project. When it finishes, the Simulator starts.
As you can see, there are great benefits integrating external code into Kwik. Enjoy!