Starting this month, Greg Pugh, author of several storybooks and tutorials, will be writing, from time to time, some of our tutorials. Greg’s passion for Kwik and his ability to teach from his tutorials have helped several Kwik users. So, if like me, you are happy with this addition, show some love in the comments below! Welcome Greg!

As you probably already know, Kwik 2 is a very powerful tool. Not only is it fantastic for book applications, but it can also create games. Today, you’ll create a very basic Breakout-style game called “Kwik Out” without writing a single line of code.

In case you’re not aware, Breakout was an old Atari game which consisted of a player-controlled paddle that would break blocks with a bullet. The game you’ll make today will consist of a player-controlled paddle, a Kwik logo bullet and Kwik “K”s as the bricks. You’ll have 10 seconds to clear the screen of all the Ks before being prompted to play again.

I’ve prepared some artwork for you so you can focus on the process instead of having to create the images from scratch. You can download the .psd files here.

First, open each .psd file in Photoshop.

If you are using Kwik for the first time or haven’t set the basics, click the Settings button in the Kwik 2 window to bring up the settings window.

Click Browse next to Project Folder and create a new folder on your Desktop or desired folder named Kwik Out.

Make sure your settings allow for exporting images and sample icons.

With page1.psd open, click New Project in the Kwik 2 window. Name the project Kwik Out for iPhone, Landscape orientation and use page1.psd.

Select the startBtn layer and in the Kwik 2 panel, go click Interactions > Add Button. Name your button startButton, and under Interactions choose Common > Go to Page. In the Go to Page properties, choose Cross fade, 0 seconds, and Go to Next (auto).

Now that you have your Start Button take the user to a different page, you’ll need to set up the two other pages. Select the page2.psd tab and in the Kwik 2 panel click Project and Pages > Add New Page. Title the page page2 and check Use page2.psd.

Now do the same for page3.psd.

Since the game will need the player to move the paddle side-to-side, you’ll want to disable page swiping, so when the user plays, they won’t be turning pages. In the Kwik 2 panel, go to Project and Pages > Project Properties and uncheck Enable page swipe.

Feel free to click the Publish button in the Kwik panel and open the main.lua file in the Corona SDK Simulator. You will that your title screen appears, and then when you click the Start Button, it will take you to the game screen.

Now that you’ve done all of the initial setup, it’s time to get into the gameplay. Let’s make a checklist of what you want to happen.

1. User presses the Play button to start the game and timer.
2. The timer counts down from 10 seconds and then changes to Page 3.
3. The ball bounces off of the walls and paddle to hit the Ks.
4. The user can control the paddle by moving it side-to-side.
5. When a K is hit by the ball, it disappears from the screen and from system memory.

You just assigned properties to the bullet to make it move, and you constrained the movement of the player paddle to the X axis.

Enabling physics doesn’t mean anything unless you assign physics to the objects. You’ll need to assign physics to the player, bullet, and the Ks, which are named zombies.

With the player layer still selected go to Physics > Set body properties and apply the following settings:

Now select the bullet layer, go to Physics > Set body properties and apply the following settings:

For the zombie Ks, you can save some time by selecting every zombie layer.

Then in the Kwik panel, go to Physics > Set body properties and apply the following settings:

And Kwik will create the same physics bodies settings for each zombie layer. Pretty cool, huh?

You’ll need an action to hide the zombie layers when they are struck by the bullet. In the Kwik 2 panel, go to Project and Pages > Actions. Name your action killK and under Common, choose Show/Hide. Use the following settings:

Now repeat the steps, naming your new actions killK2, killK3, etc. and hiding each zombie layer accordingly (i.e. killK2 hides zombie2 layer, killK3 hides zombie3 layer, etc.)

Your Kwik panel should now show all of your killK actions.

Now you need to set up your game so when the bullet collides with the zombie Ks, it removes them from the screen and from memory resources. Go to Physics > Set collisions and create the following:

Now repeat that step for the rest of the zombieKs:

Now that your actions are set up for bullet and zombie collisions, it’s time to set up what will happen when the bullet hits the player paddle. In the Kwik 2 panel, navigate to Project and Pages > Actions and create a new action called playerBullet with the following settings under Physics > Apply Force:

This will enable the bullet to bounce off the player paddle and back towards the zombie Ks. Now back in the Kwik 2 panel, go to Physics > Set collisions and create the following collision between the bullet and the player:

Now your Kwik panel should be filling up quite nicely.

You’ve done a lot so far, so let’s recap. Physics have been enabled for your zombie Ks, player paddle and bullet. When the bullet hits a zombie K, the K will disappear, but when it hits the paddle, it will bounce off of it. There are virtual walls around the screen to keep the ball from flying off the screen and the ball is ready to be put into motion. You just need to do two more things, start the timer and make the bullet move when the Play button is pressed.

In the Kwik 2 panel, go to Project and Pages > Actions and create a new action called overAction. Use the following settings under Common > Go to Page:

Now you have an action that goes to page 3. You’ll call this action when the timer has reached 0. Highlight the timeNum layer and navigate to Layers and Replacements > Countdown replacement and use the following settings:

Now everything is ready to go, it’s just waiting on one action to start everything. Highlight the playBtn layer and go to Interactions > Add Button. Name your button playButton and use the following series of actions:

Physics > Apply Force

Common > Show/Hide

Countdown > Play Countdown

Now you’re game is ready to be played…but wait a second, there’s no way to replay the game once it goes to page3. No problem, just select page3.psd, select the retryBtn layer, go to Interactions > Add Button and use the following settings under Common > Go to Page:

And there you have it, a fully functioning Breakout-style game made without any code!

Where to go from here?

This is just a basic example of a breakout-style game. You can add a scoring system, multiple levels, animated enemies instead of static images, it’s up to you and how much you’re willing to experiment with the power of Kwik 2.