☰
Navigation :

Breakout Game

Breakout Game

This is another great sample made by Greg Pugh.

As you probably already know, Kwik 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.

https://youtu.be/aHF404Rz1ws

You can download the sample project here.

Artwork

.psd is 640 x 960. You can create a project with iPhone

pages

Adding pages

Open page2.psd and click add new page icon

Open page3.psd and click add new page icon

Page 1 - Title

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.

Disable page swip

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 panel, go to Project and Pages > Project Properties and uncheck Enable page swipe.

Page 2 - Game

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.

First thing is first, you’ll need some physics. In the Kwik panel, click Physics > Environment properties. Set the gravity at 0 for both x and y, scale of 30, normal and create walls around the screen.

Enabling physics does not mean anything unless you assign physics to the objects. You need to assign physics to the player, bullet, and the target layers(moon, star, cloud, diamond)

For the targets, you can save some time by selecting the layers together Then in the Kwik panel, go to Physics > Set body properties and apply the following settings:

Interactions To Bullet & Player

Next you’ll want to add force to the bullet. With the bullet layer selected, in the Kwik panel, go to Physics > Set force properties and apply the following settings:

Now with the player layer selected, go to Interactions > Drag Object and apply the following settings to the player, which will be called playerDrag.

Collision between the bullet and the targets

You’ll need an action to hide the each target when they are struck by the bullet. In the Kwik 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 for moon, cloud and diamond layer. You can use copy&paste

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

Collision between bullet and player

Now that your actions are set up for bullet and targets collisions, it’s time to set up what will happen when the bullet hits the player paddle. In the Kwik 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 targets. Now back in the Kwik panel, go to Physics > Set collisions and create the following collision between the bullet and the player:

Play button & Timer

You’ve done a lot so far, so let’s recap. Physics have been enabled for the targets, player paddle and bullet. When the bullet hits a target, the target 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.

Timer

In the Kwik 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:

Page 3 - Repeating the game again

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.