How to Make Tappy Plane (Flappy Birds Clone)

Introduction:

Hello and welcome to the tutorial for creating your own "Flappy Birds" style game, we call this one Tappy Plane.

This tutorial is made for beginners who want to dive deeper into our behaviour system and learn about visual coding. Through out the tutorial you'll also learn your way around the hyperPad interface.

In this tutorial we'll create a simple game in the style of Flappy Bird. Gameplay will consist of the player tapping the screen to control the plane to move up and down navigating it past a series of cliffs. Each cliff passed will grant a point and with enough points, players will earn a medal. The medals increase in value the higher one's score, up to a shiny gold medal! And who doesn't like shiny thing!?

So without further ado, let's get started!

 

Part 1: Getting Started

Creating the project:

The first thing we need to do is begin a new project. Upon loading hyperPad you should see the project screen. Here you will find all the projects you've made as well as any you have downloaded. For now, we wish to start a new project. Tap on the New Project button in the top right of the screen shown below.Tappy_Plane_Tutorial_v01_html_2b8be446.png

 

Once that's done, you should see a pop up window appear. Here we will name the project and create a cloud backup if so desired. In addition, you can tap the “Get Started with a Sample Instead” button to import one of our base projects. However for now we will not be doing that. Name the project Tappy Plane and then tap the 'Next' button.

Tappy_Plane_Tutorial_v01_html_17be4f46.png

 

In this new screen, we will determine the device we're designing for and orientation. For this project, set the orientation to landscape and the device support to the iPad. Don't worry if you need to change something later. These settings can be adjusted anytime in the Global Settings menu.

Tappy_Plane_Tutorial_v01_html_m7c197769.png

 

Finally we can now choose what type of game we wish to make. Currently hyperPad supports two types of modes, top-down and side view. Top-down, or Bird's Eye View, is typically used for games such as The Legend of Zelda before it transitioned to 3D, puzzle games like Bejeweled and top down shooter games. The Side view is commonly used for platformer games such as Super Mario Bros.

Both versions work identically with one small difference, Bird's Eye View will have the gravity settings disabled (instead it relies on air resistance to simulate gravity going into the screen), so keep that in mind when creating your project. You can always change this later in the Global Properties menu.

For this tutorial, we will be using the Side View so make sure that is selected. Next, we have the Gravity settings and the PTM Ratio. By default, Gravity will be set to 0 and -25.

These are the x and y values, or more simply the horizontal and vertical of our game world. X representing the horizontal, or left and right, while Y represents the vertical, or up and down. The defaults of 0 and -25 means that there will be no gravitational forces pulling objects left and right, but they will fall down at a rate of 25 meters per second. For this tutorial, the default values are fine as they are.

The PTM Ratio stands for Points to Metres, or in simpler terms, how many pixels (points) are in 1 hyperPad metre. By default this is set to 32 pt/m or 32 pixels per metre. This is important to know when creating art assets and all art assets should follow this scale. In this tutorial we will be using free assets from the hyperPad asset library so we do not need to change the scale.

Tappy_Plane_Tutorial_v01_html_5c0dd9dd.png

 

With that done, tap the create button and we shall get started!

 

The Editor:

Now that we are in the project, you should see a screen that looks like this:

Tappy_Plane_Tutorial_v01_html_m13da2ad3.png

This is our canvas and it is where we will build our game. In the centre of the screen you should see a thin green outline of a box. This represents our screen view. Anything placed in this box will be immediately visible upon starting the game while anything outside it will not be rendered. If you like, take a moment to tap around and see what things do before we move onto the next step.

Once you are ready, tap on the drawer icon in the bottom right to open up the Asset Browser.

Tappy_Plane_Tutorial_v01_html_3650d3ed.png

 

The Asset Library:

This is where all the assets for our game will be stored. By default a new hyperPad project only includes a few starter assets. You need to import your own, or download a pack from the hyperPad Asset Shop. In this tutorial we'll focus on using assets provided from the hyperPad Asset Shop. On the left side there will be a bar with four buttons. Tap on the Get Assets button to open the Hyperpad Shop. 

Tappy_Plane_Tutorial_v01_html_6618ae6d.png

Here you will find free asset packs set up by us at Hyperpad to help get your projects started. Find and tap on the Tappy Plane Asset Pack.

Tappy_Plane_Tutorial_v01_html_b527153.png

 Now, simply tap the 'Get' button to begin the import (Note: if an error occurs, simply tap it again to restart the import). Once that is done, you will get a message saying the assets have been successfully imported. Simply tap Close in the top right of the screen to return to Hyperpad.

Tappy_Plane_Tutorial_v01_html_m7797425.png

 

And its as simple as that. You should now see a new folder in your Asset Browser called Downloads. Tapping it will reveal the Tappy Plane Pack folder and within that, our art assets.

Next we will begin assembling our game.

 

Part 2: Gameplay

If you are familiar with Flappy Bird, then you will be familiar with the gameplay style. Tap the screen to keep the bird, or in our case plane, in the air while trying not to crash into oncoming obstacles. These obstacles will spawn in random configurations so each play through is different than the last. Points are awarded for successfully avoiding obstacles and your high score is recorded.

 

Adding the Plane:

So now that you understand the basic gameplay, we can get started. First thing we need to do is get our player character on the screen. Go into your Asset Browser and open the downloads folder and navigate until you see your art assets. There should be a folder called Planes.

Tappy_Plane_Tutorial_v01_html_6618ae6d.png

 

Open that folder and choose whichever colour you like the best. Then, simply select the first plane graphic. This will close the asset library  and return you to the main editor screen where you should now see the plane in the bottom object dock. This section of the UI is known as the Object Dock. It will display the last 5 assets you have used. Now to get our plane in the play area, simply drag the plane from the dock onto the canvas. 

Tappy_Plane_Tutorial_v01_html_5141bc0f.png

 

With our plane now in the game, we need to make one quick adjustment. Tap on the plane to select it and open the properties tab on the right. What we want to do is set the plane to become a passable wall object. Simple enough, simply find the Passable switch and tap it to turn it on. We do this because we do not want the plane to fall before the player has a chance to start the game. We also set it to passable because we do not want it to have any collision for now.

Tappy_Plane_Tutorial_v01_html_5dfea855_copy.png

 

With that done, let's dive into making it playable.

 

Falling Plane:

So we need a way to start the game. To do that, we will need a button. Now we could use a simple graphic to indicate where to tap, but for our game we want to give the player to tap anywhere on the screen. How do we do this? We'll make the entire screen a button!

The first thing we need to do to accomplish this is to create a new layer. But to do that, we need to deselect our plane. To do so, simply tap anywhere there is empty space. Once deselected, the object properties will close and you should see the layers tab on the right. If not, simply swipe your finger from the right side of the screen towards the left to unhide it.

Tappy_Plane_Tutorial_v01_html_1eb2b0dc.png

As you can see, there are currently three layers by default. The Global UI, Scene UI and then Main after a separation line. A quick note that anything on the Global UI layer will appear in every scene in your game. All other layers are specific to their individual scenes. To create a new layer, simply tap the + icon at the bottom of the layers tab. This will prompt us to name the new layer. Type in Button and hit OK.

Tappy_Plane_Tutorial_v01_html_m7a4ee638.png

 

By default, the active layer will change to the newly created one. When using layers, only objects in the active layer can be selected. This is a great way to keep things organized when building your game as you won't accidentally move things you don't wish to. Always keep track of what layer you are currently working on. Also keep in mind that layers placed above another will render on top of that layer. This way you can avoid having your background cover the game area.

Now to create our button, this is very simple. Tap on Special Objects button (the beaker icon) in the bottom right of the Object Dock. This will prompt a menu to create a type of object. We want the Empty Object. Tapping it will create a small, empty square in the centre of our project. However, we want this to take up the entire screen. Tap the inside of the square to select it.

 

 Tappy_Plane_Tutorial_v01_html_m1ac89045.png

Notice that, when selected, small green dots appear around the border of the object. We can use these to manually scale our Empty Object. Simply tap and drag a corner to scale uniformly. Drag the corners until the object encompasses the canvas. The dots on the sides can be used to adjust the object for a better fit. In the end you should have something like this(Note: If you are having trouble scaling the object, you can zoom in by swiping two fingers away from each other and zoom out by pulling them together):

Tappy_Plane_Tutorial_v01_html_m51880d34.png

 

Return to the main layer by deselecting the empty object (tap any blank area on the canvas)  then tapping the Main layer and select the plane again. Tap the button that says behaviours to open the behaviour screen.

Tappy_Plane_Tutorial_v01_html_7eb1aec7.png

This is the Behaviours screen and where the magic happens. Instead of traditional code, hyperPad uses visual logic blocks of actions and events to program the interactions. If you like, take a moment to go through the categories and see what options are available. Tap on one of the behaviours in the left tab to open a window giving a brief description of the behaviour. You can also check out the hyperPad documentation for an explanation of each behaviour.

Tappy_Plane_Tutorial_v01_html_10e22766.png

 

What we want to do for now is simply start our game and turn our plane from a passable wall object to a physics object. Doing this will apply physics to our plane and thus, fall with gravity.

The first thing we want to do is use the Started Touching behaviour located under the Interaction section. Simply drag it from the menu and into the blank space. Once there it is now attached to our object. You can tap the behaviour to open its properties, but we don't need to change anything.

Tappy_Plane_Tutorial_v01_html_66bde0bb.png

 

Of course, with just this, nothing will happen as there is nothing that follows after we touch the plane. Let's fix this. Go to the Physics category and scroll down until you see a section called Modes. Now drag on the Make Physics behaviour and drag it underneath our Started Touching behaviour. Now we just need to attach it to Started Touching. At the bottom of Started Touching, you should see a small lightning bolt in a circle. Tap and drag that and you'll see a line following your finger. Drag the line over the Make Physics behaviour to attach it.

Tappy_Plane_Tutorial_v01_html_m6b86d7df.png

And it's that simple. A quick note that in hyperPad, Behaviours follow a structure of Event -> action. In this case the event is that we Started Touching the plane and the action is that the plane becomes a physics object. Let's take a moment to test this and make sure its working properly. At the top of the screen, press the play button to begin testing. When you're finished, tap the three bars in the top right to bring up the menu and select Quit.

If all is working well, the plane should fall off the screen once you tap on it.

Now we want to end our game once the plane touches the ground. While we don't have any ground at the moment, we can fill it in with an empty game object. Return to the canvas by tapping the back arrow at the top left of the screen.

Deselect the plane and tap the Special Objects icon (beaker) in the bottom right of the dock to open the window and create another Empty Object. Now let's position it along the bottom of the canvas and stretch it so it covers the entire bottom.

Tappy_Plane_Tutorial_v01_html_m4f7deff0.png

Select the plane and open the behaviours window again. Now we are going to add our "Lose" condition. Let's think back to what I said earlier, hyperPad behaviours work on an Event -> Action basis. The event in this case will be the plane colliding with the ground. Let's set that up. Go to the Object tab and under Collision Detection, drag Collided into the workspace. Once that's done, tap it to open its properties. You will see two boxes at the top, one filled with our plane and the other empty. Taping the empty box will open the canvas view. Tap the empty object at the bottom of the screen to select it, then tap the check mark at the bottom to apply.

Tappy_Plane_Tutorial_v01_html_4cf5146d.png

 

Next, we need our action. We want to load a game over screen once the plane collides with our ground object. Go to the scenes category and scroll down to the Overlay section and select Load Overlay behaviour and drag it below the Collided behaviour.

Connect the Collided behaviour to the Load Overlay. Now, tap the Load Overlay behaviour on the canvas to open its properties. On the behaviour properties tap where it says Select Overlay. A list of overlays will appear. Select Game Over, this an overlay that is automatically created by default (you can learn more about Overlays from the hyperPad documentation) If you so wish, you can also add in a transition for a bit of flair.

Tappy_Plane_Tutorial_v01_html_3c6cd552.png

When that is done, press the play button to test. When you tap the plane it should fall and the Game Over screen should come up.

 

Game Logic:

Before we go any further, I should quickly explain a good way to keep things organized with behaviours. In order to avoid clutter and make changes easier in the future, we are going to separate the game logic from the plane. Basically, we will create our own custom event and broadcast a message when the plane collides with the ground rather than loading the game over overlay.

Why do we do this? Well as mentioned this helps to keep things more organized and it makes adjusting things later much easier. Let's try to think of it this way, if the logic affects only the game object it is attached to, then keep the logic within the object. If you need to start referencing other objects or aspects of logic not directly tied to the object, then separate it. An example would be when the plane collides with an object, it would play a crash sound. This we can keep on the plane itself. But if when it collided with an object, the object then changed somehow, that should be kept separate.

To do this, we will create a mediator, a sort of go between that organizes these actions into one area that we can easily access.

Go back into the plane's behaviours and select the Load Overlay behaviour. There will be a small tab attached to the properties. Tap the trash can to delete Load Overlay behaviour. We are doing this because instead of just loading the overlay, we are going to broadcast a message that our game logic will pick up and load our game over screen instead. While this is technically creating extra steps, it will benefit us in the long run.

To broadcast a message, go to the Custom category and under Broadcast section, drag Broadcast Message and place it under our Collided behaviour (where we used to have the Load Overlay). Attach Collided to Broadcast message and open its properties. Under the Event Key, type in Did Lose. In this situation we can leave Broadcast Value blank, since we're only broadcasting a lose state. If you had a situation that needed to know if you're alive or not, then you can have a value that has the state. (eg. Did lose: Yes/No).

Now that you've added the broadcast message, you can return to the main editor.

Next we need to create something to hold our logic. We could create another empty object but we want to be able to easily find our logic and an empty object can easily be lost as we add more assets to our scene. Instead we will use a label.

Creating a label is the same as an empty object. Select the beaker and in the window, select Label. A label is simply a game object containing text. Other than that it works just like any other object. Tap to select it and in the box under properties where it says Label, Type in Game Logic. If you want, adjust the alignment, outline and shadow properties to help the logic stick out and be noticeable. Please note however, the text will restrict itself to its bounding box size.

Now move the Game Logic outside the visible screen space (green rectangle) so it won't be seen by the player. Think of the Game Logic as the backstage manager. If they do their job right, you'll never see them but everything will run smoothly.

Tappy_Plane_Tutorial_v01_html_m77abc300.png

 

Now, open up the Game Logic's behaviours. What we need now is a way to receive our message. Under Custom, find the Receive Message behaviour and drag it in. Open the properties and tap the Event Key. Type in Did Lose and be sure the spelling is exactly the same as in the Broadcast Message. Next, go to Scene and drag in Load Overlay and set it to Game Over. Connect the two.

The "Receive Message" behaviour is a "Listener" type of behaviour. It will just sit there until it receives the message it was waiting for. In this case "Did Lose". As soon as it receives that message, it will trigger the connected action.Tappy_Plane_Tutorial_v01_html_m706443af.png

Press play and test. As it did before, the game over screen should pop up as soon as the plane hits the ground. 

 

Jumping Plane:

For our game, we want our plane to remain stationary on the horizontal axis, this means it will not be moving left and right, only up and down. Instead of having the plane fly horizontally through the world, we will have the scenery move around the plane giving the effect that the plane is moving horizontally. This is to accommodate our one button play style. Tap the screen, the plane goes up, then starts to fall back down.

Go back into the plane's behaviours and under Custom the custom category add a new Behaviour Bundle. Open up its properties. Unlike other behaviours, the bundle is completely blank. We can however, change its name. At the top of the properties, tap the name Behaviour Bundle to change it. Type in Jump. Next, we want to have this bundle turned off by default. So in the little side panel attached to the properties, find where it says On and tap it to turn it off. The bundle should now turn grey.

Tappy_Plane_Tutorial_v01_html_m673169f7.png

 

A bundle is used to attach a group of behaviours together. In addition, they will be executed in order of left to right in sequence. This way we can better control how and when certain behaviours happen. We have this bundle turned off because we don't want it, and the actions we will attach to it, to activate until after the game begins.

Now we want to attach some behaviours to our bundle. First, Set Velocity which is under the Physics tab. Open its properties and set the X and Y to 0. We do this so that we can remove the force of gravity on the plane and cancel any previous jumps still in action.

Next we need to Apply Force, also under the Physics tab. Leave the X value blank but change the Y value. For now let's set it to 5. We can play around with this number later to find the best effect for our plane.

Above the behaviour bundle, add in a new Started Touching behaviour. Attach it to the Jump bundle. Now we want this Started Touching to react to our button we made earlier. To change it, open its properties and tap on the plane to go to the canvas. Change the layer to Button and tap the inside of our button.

Tappy_Plane_Tutorial_v01_html_m6d158422.png

 

Your behaviours should now look something like this:

Tappy_Plane_Tutorial_v01_html_75b19aac.png

 

There is still a few things we need to do however before we can test. First, we need to activate the bundle. So navigate to the Custom category, then add a Behaviour On and attach it to the Started Touching button. Open its properties and tap the Select Behaviour section and select the Jump behaviour bundle from the list. So now, when we first touch the button, the Jump bundle will activate and start applying force to the plane. Of course, we will run into issues with the first Started Touching behaviour we already created. Let's fix that.

Under the first Started Touching, add a Behaviour Off behaviour (under Custom) and attach it to the original Started Touching. Under its properties, select the same Started Touching as the behaviour you want to turn off. Now, it will first make the plane a physics object, then disable the ability to touch the plane. We're not done with it yet though. Next we need to add a Broadcast Message to indicate that our game has started. Add a Broadcast Message and attach it under the Make Physics behaviour. This will ensure the message will send before disabling the behaviours. Set the Event Key to Did Start.

Finally we can add the last bit of behaviours. Add a Receive Message behaviour, but don't bother attaching it to anything. We want it to do its own thing. Set its Event Key to Did Start. Next, add a Behaviour On and attach it to the Receive Message. Have it turn on the second Started Touching we made.

But wait, you may ask, that behaviour is already on! You're right! Let's turn it off. This way, we will no longer have that overlap of buttons that can cause errors. With all this said and done, your plane's behaviour's should look something like this:

Tappy_Plane_Tutorial_v01_html_m246f8feb.png

 

Let's test it out. You may notice that your plane drops like a rock even after tapping. Well that's because our Apply Force is set to 5, but gravity is working at -25. If we want our plane to fly, we'll need to overcome gravity. Open the properties for Apply Force and change the Y value to 50 and the multiplier to 5. This should give our plane just enough lift to stay airborne for just a moment. Take some time to adjust the numbers until you find something that feels right.

 

Adding Obstacles:

Moving onto the next step, we need to add the obstacles for our player to avoid. For our game there will be two main obstacles. The cliffs and the ceiling. Yes a ceiling. No we will not set this in a cave. The reason for this is quite simple, without a ceiling the player could theoretically just tap the screen like mad and have the plane not only fly off screen, but completely bypass any obstacles. That's no fun now is it?

Let's begin with the ceiling since that's pretty simple. Just like the ground we are going to use an Empty Object. Make sure you are on the Main layer and add the empty object, then create and scale it to the width of the screen and move it so it sits just above our canvas. This way, the plane will be able to fly within the screen space but will crash when going beyond those limits. In the Empty Object's properties, under the behaviours button you will notice three images. A rocket ship, a box of bricks and a landscape portrait. These buttons determine what kind of object our Empty Object will be. In order from left to right it is Physics object, Wall Object and Scenery Object.

Physics objects are objects that are affected by physics. We don't want that. Wall objects are solid and have collision, but cannot be affected by outside forces. Scenery objects have no collision and cannot interact with anything. As a rule, any objects that are just there for decoration should be set to scenery to save on memory and improve game performance.

Set the Empty Object to Wall object and underneath those buttons where it says Passable, turn the switch on. This will make it so that the box won't just fall to the ground, but the plane can still pass through it. This way the plane doesn't just stop upon touching the box but will allow it to go slightly off screen before it begins to fall.

Tappy_Plane_Tutorial_v01_html_726c79bf.png

Just for good measure, with the Ceiling object still selected, let's rename it to ceiling. At the top of the properties menu, tap where it says Empty-# and type in Ceiling. It never hurts to be organized.

Next up we are going to add a Tag to our Ceiling. Tags are a way of referencing multiple objects at once so long as they share the same tag. For example, say you had a light switch and when used, it would turn on several lights in a scene. By giving all the lights the same tag, they can be referenced all together and be turned on simultaneously. In our case, we want our plane to fall when it collides with the ceiling and cliffs so we're going to give it a tag to cause that and save us some time assembling behaviours.

With our ceiling object selected and the properties tab open, look to the bottom to see a series of five buttons. The first should be greyed out followed by a rocket ship (opened by default), four arrows, a stack of four lines and finally, sales tags. Tap on the tags to open the tags window. Here you can search for preexisting tags or create a new one. In this case we want to make a new one. Tap the + sign and enter the name Wall and hit Ok. Wall will now appear under the search bar with a green circle to the right of it. This circle indicates the tag is attached to the object. Should you wish to change tags, simply tap on the name of the tag to remove it.

Tappy_Plane_Tutorial_v01_html_m1f22e273.png

Now we want our plane to be able to collide with objects that are tagged as "Wall" and when that happens, we will disable the player's input. Thus causing the plane to fall to the ground and end the game. To do this, select the plane and go into Behaviours. Under Objects, select Collided and open the properties. Now, instead of tapping Select Object and selecting our ceiling on the canvas, we want to instead check for the tag. To do that, go to the bottom of the properties where the tag icon is and select it. This will bring up a list of tags. Currently we only have Wall. Select it, then tap the icon with three sliders on horizontal lines to go back to the main properties window. You will now see the tag icon in the Select Object box.

Tappy_Plane_Tutorial_v01_html_11db50ee.png

With that done, we can now simply add a Behaviour Off from the Custom tab and in its properties, select the Started Touching that controls our Jump bundle. This will disable our ability to fly when we touch the ceiling. Let's test this. Press play and tap on the screen until the plane flies out of bounds. You should see it then fall to the ground and the game over screen load.

By now you might be wondering “Why does the plane only go up and down? How will we fly through things if it can't go forward?”. Well, that's simple. We're going to have the world move towards our plane. If that sounds weird, don't worry, you won't notice once it's playing.

Time to add in our cliffs. Go back into the asset browser and scroll down to find our cliffs. There are multiple versions so simply choose your favourite. I'm going to stick with the basic rock for this tutorial.

Tappy_Plane_Tutorial_v01_html_6243d372.png

Drag the cliff onto our canvas, then move it over to the right so it won't be seen. Next, make it a passable wall object. Now we want to change the anchor point. The anchor point is what hyperpad will assume is the centre position of the object. So when doing calculations for position it will

reference the anchor rather than the actual physical centre.

To change it, we need to open the transformation properties. Down at the bottom of the properties window, select the four arrows to open the transformation options. Find the anchor point and unlock it. You should see a blue anchor appear on the cliff now. Tap and drag the anchor and place it as close to the top tip of the cliff as you can. Once that's done, lock the anchor again.

Tappy_Plane_Tutorial_v01_html_527bc2a6.png

Now we need our cliff to start moving towards the player. Open the cliff's behaviours and add a Set Velocity behaviour located under Physics. Set the Y velocity to 0 and the X to -2. This will cause the cliff to slowly move to the left. As a quick note, for the X axis, negative values will cause objects to move to the left while positive values to the right. The same applies to the Y axis with negative going down, positive going up.

This speed however, is far too slow and it can quickly become annoying constantly having to go back into the cliff's behaviours to adjust the value. Instead we can use something called an Attribute to make this process quicker. Let's go to our Game Logic label and open its properties. Remember the icon at the bottom with the four stacked lines? Tap it to open the Attributes window. Attributes work similarly to Tags in their creation, so let's make a new one and call it Speed.

Tappy_Plane_Tutorial_v01_html_m47696aee.png

You will notice however, that unlike Tags, there is an input box underneath our new attribute. We can use this box to input values that other objects can then reference. For now, let's set Speed to 5. Now we can return to the cliff behaviours and add a Get Attribute behaviour under the Objects tab.

Open up the Get Attributes properties and tap on the cliff icon that appears. On the canvas, select our Game Logic label and under Attribute Key Type, set to Predefined and select Speed for the input box.

Tappy_Plane_Tutorial_v01_html_63fb3c05.png

Next we need to make sure the cliff will move to the left. Remember how I said that positive values on the X axis move to the right? Well we're going to change that. Go to the Logic tab and select Multiply Values. Attach it to our Get Attribute and open its properties. You will now see two input boxes. The first box will be our value and the second is what we will multiply it by. Notice how, when Multiply Values is selected, small green circles with upward arrows appear on the corners of some behaviours? This means that we can use them in the input boxes. To do this, simply tap and drag the circle on our Get Attribute behaviour and place it in the first input box in our Multiply Values properties. (to learn more about this check out the Sharing Values documentation)Tappy_Plane_Tutorial_v01_html_2393b6fb.png

Next, in the second box, type in -1. So now we are multiplying our Speed with a value of 5 by -1 resulting in -5. This the cliff should now move 5 meters left every second. Well, it will in a moment. Go back to the Set Velocity behaviour and where we wrote in -2, replace it with the output from our Multiply Values. Leave the Y value at 0.

Test the game and see the cliff move across your screen. The cliff is now moving at a good speed, however you can always adjust it quickly by going back to the Game Logic label and going to its attributes. Much quicker than going into cliff behaviours every time, right?

Notice however, that our plane will simply pass through the cliff? That is because we set it as passable. We want to leave it this way but we can still have our plane crash into it. All we need to do is apply our Wall tag. Open the cliff's properties and go to the tags tab. Select Wall and test the game. Be sure to fly into the cliff.

Something weird happened right? The plane just started falling uncontrollably before we even touched the cliff. This is because the cliff's collision box is not properly set up. By default, an object's collision is set to the same dimensions as it's bounding box (the area that you can touch to select it). The bounding box is defined by the object's graphic maximum width and height. So regardless of the shape, the bounding box, and thus collision, will be stretched to enclose the entire object in a box.

How can we fix this? Simple.

hyperPad has a built in collision editor that allows us to easily fine tune an object's collision. To access it, open the cliff's properties and on the left of the properties you should see the familiar mini window containing 3 options. Two arrows pointing towards one another, two boxes overlapping each other, and a trash can.

We want the first option. Tap it to open the collision editor.

Tappy_Plane_Tutorial_v01_html_m54b0d812.png

Immediately you'll see a series of tools on the side bar. The first two are for navigation and moving. With the arrow selected, we can easily edit the collision of our cliff by simply scaling the box like we would the object. However, you probably notice that a box may not be the best shape if we want our collision to be as accurate as possible.

The next three tools can help with that. The first two, the sphere and square, can change the bounding box to the respective shape. The third tool, which looks like an odd polygonal shape, allows us to create custom collision boxes by simply tapping our finger and connecting the dots. Let's use this one.

Select the tool and tap on the tip of your cliff. You should see the old collision disappear and a small green dot appear. Now tap on the bottom left corner of the cliff to create a second dot connected by a black line. Do this again for the bottom right corner and finally connect back to the original dot. Its okay if you aren't perfectly accurate, we can easily fix that. Simply tap on the arrow tool and now you can drag your dots to better fit your cliff. In the end you should have something like this:

Tappy_Plane_Tutorial_v01_html_m31c24075.png

Lastly, tap the check mark to save these changes. If you've made a mistake, simply use the eraser tool, or simply tap the X to cancel all changes and try again. Once that's done, test your game again. The plane should now fall properly when hitting the cliff.

Now this is still a bit too easy. There's only one cliff and its position is always the same. We gotta spice it up a bit! So the plan is to have the cliff's position on the Y axis be randomized upon spawning and have the Game Logic control both that and its spawn rate. The movement will be controlled by the cliff itself. This is where the earlier lesson of splitting the logic will really be put to practice.

To begin, let's go back to our Game Logic's Attribute list and create a new attribute called Cliff Bottom pos.

Now, go into the Game Logic behaviours and create a new Behaviour Bundle. Call it Calculate Positions. Next we need to go to the Logic tab and grab the Random Number behaviour. Open the properties and set the variables to 4 and 14. Connect it to Calculate Positions bundle.

Tappy_Plane_Tutorial_v01_html_89650a9.png

Now you're probably wondering where I got those numbers from. Well, to find out, let's return to our Asset Browser and find our cliff again. Tap and hold your finger on the cliff for a moment to open up an options window. Tap preview and it will open the Frame Preview. Here we can see the size of our cliff is 8 meters by 16 meters.

Tappy_Plane_Tutorial_v01_html_5df0076b.png

We set the values of 4 and 14 because when we spawn the cliff, its position will be randomly adjusted between 4 and 14 meters on the Y axis, or up and down. We also set these limits so that the cliff won't spawn too high or too low on the screen.

Back in our Game Logic behaviours, go to the Objects tab and grab the Set Attribute behaviour. Connect it to our Random Number behaviour. Open the Set Attribute Properties and set the Attribute Keys to Predefined and Cliff Bottom pos. For the Attribute Value, take the output in the top right corner of the Random Number behaviour and place it in the Attribute Value input box.

Tappy_Plane_Tutorial_v01_html_m526df47a.png

We're done here for now, next we need to go back to our cliff's behaviours.

On the Cliffs behaviours, place a new Get Attribute behaviour from Objects tab. Change the target to Game Logic by opening the properties and tapping on the cliff image. Then, once you're back on the canvas, simply tap Game Logic and tap the check mark. Set Attribute Keys to Predefined and Cliff Bottom pos.

Now let's set the start location for our cliff. Under Transform behaviour category, we will need to open the Advanced tab. At the bottom of the behaviours you will see two options, Basic and Advanced. Tap Advanced to reveal all the behaviours. Scroll to Position and select Move to Point. Attach it to our new Get Attribute. Open Move to Point's properties. We'll leave the Transition and Position Type the same. For the X value, we're going to set it to something off-screen. For now, let's input 40. For the Y, we will assign it the Get Attribute for Cliff Bottom pos. Lastly, change the Duration time to 0.

Tappy_Plane_Tutorial_v01_html_79b59649.png

Do a test.

Most likely the cliff's position hasn't changed. This is because the calculation was made after it spawned. So let's spawn in more cliffs to see our randomizer in action! To do that, we need to return to our Game Logic behaviours.

Let's grab a new Random Number behaviour (under Logic) and set the numbers to 1.5 and 3. These values are going to become our spawn timers so a new cliff will spawn sometime between every 1.5 to 3 seconds. So the shorter the time between spawns, the closer the cliffs will be together and vice versa. Now, let's grab a Wait behaviour under the Custom tab. In its properties, set the time to our new Random Number.Tappy_Plane_Tutorial_v01_html_m2f0c1110.png

Next we need to grab a Behaviour On and assign it our Calculate Positions bundle. This way, we will have a new position calculated for each cliff that spawns. Now we need to spawn the cliffs.

Go to the Objects category, open the Advanced tab and find Spawn on Area. Drag it under our Behaviour On and attach it. Open the properties tab and you should see your Game Logic graphic. Tap that and select the cliff. Now we will spawn cliffs instead of more Game Logic. Next, at the bottom of the properties, turn the Recycle switch on and set # Alive Objects to 5. By setting Recycle to on, we make it so that older objects will be remove automatically once the maximum number of cliffs has been reached, in this case 5.

If you ever get confused as to what certain properties do, remember that you can always tap the i icon at the bottom to bring up the quick reference for that behaviour.

Tappy_Plane_Tutorial_v01_html_76f131db.png

Next up, we need to get this looping so our cliffs will constantly spawn in. Add a new Behaviour On and set it to our Random Number for our timer.

Tappy_Plane_Tutorial_v01_html_11c9dd5.png

Now upon completing the spawn, our Random Number will begin again, thus creating an infinite loop of cliffs trying to murder the player! Yay! Let's put it to the test.

We should now see the cliffs moving towards us randomly. However there are still some issues so let's clean this up a bit.

Create a new Behaviour Bundle (Custom category) and rename it by opening the properties and tapping the name. Call it Initial Cleanup. Now, go to the Objects tab and get the Destroy Object behaviour. In the properties, set the target to our cliff. There is also the issue that the cliffs will start moving before the player has even touched the screen.

To remedy this, first turn the Random Number controlling our spawning off by default. To do this, tap to open the properties window. In the mini-window, find the word On and tap it. To turn it on, we simply need to tell the spawner that our game has started.

Open the Custom tab and find Receive Message. For the Event Key, we already have a message broadcasting for what we need (back when we set up the plane). Type in Did Start. Now, simply grab a new Behaviour On and assign it our Random Number.

Tappy_Plane_Tutorial_v01_html_27c66b0f.png

Press the Play button. Things should be working properly now... Although its still not that hard is it? Let's bump up the difficulty.

Back on the main editor, select the Game Logic and open the Attributes tab (four stacked lines at the bottom of properties). Create a new attribute and call it Cliff Top pos. Next let's go to the Logic tab and grab the Add Values behaviour. We are going to add this into our Calculate Positions bundle. Tap on the line connecting our Random Number (4-14) and the Set Attribute. This will break the two apart and allow us to squeeze our Add Values behaviour in. Connect the Add Value to the Random Number and the Set Attribute to the Add Value. Open the Add Value properties and take the output from the Random Number (top right corner of the behaviour) and place it in the first input box. In the second box, enter the number 8.

What we want to do is spawn a second, inverted cliff above the one we already have. Doing this will allow us to set the cliff to always spawn 8 meters above our other cliff, giving our plane space to fly between the cliffs. Next, go to the Objects tab and grab another Set Attribute behaviour. Connect it to the Add Values and open the properties. Set the Attribute Key to Cliff Top pos and the Attribute Value to the Add Value output (top right corner of the behaviour).

Tappy_Plane_Tutorial_v01_html_m5a387714.png

Still, with this we won't see any difference. First we need to go back to the editor and select our cliff. With the properties open, look to the object menu (on the Object properties) and the second icon (two boxes or papers on top of one another). This is the duplicate button. Tap it and we now have two cliffs.

Open the behaviours on the new cliff. As you can see, even the behaviours have been copied which will make things easier. Open the properties for our second Get Attribute (the one attached to Move to Point) and change the Attribute Key to Cliff Top pos.

Go back to the editor and with the cliff still selected, you should notice a curved arrow with two points in a circle to the top right. This is the rotate tool. We want to rotate the cliff 180 degrees so it points downwards. However if we just use it as is, it'll be near impossible to get a perfect 180. What we need to do is set the snapping on.

The snapping automatically turns on whenever the grid is activated. The grid tool is in the tool bar on the left, underneath the screen resolution. Tap it then rotate the cliff until it's upside down. (additionally you could rotate the object from the Transform tab in the Object Properties)

Tappy_Plane_Tutorial_v01_html_m469b58b3.png

Almost done here. Go back to the Game Logic and to our Initial Cleanup bundle. Open the Objects category, grab a second Destroy Object behaviour, attach it to our bundle and target the new cliff.

Lastly, we need a second Spawn on Area to get this cliff working. To save some time, simply duplicate our existing one, attach it to the Behaviour On (Calculate Positions) and set the target to our new cliff.Tappy_Plane_Tutorial_v01_html_9a49e4.png

Hit Play to test.

There's a chance that your plane may be too big to fit safely between the cliffs. If that's the case, like it is mine, let's fix that real quick. Go to the editor and select the plane. At the bottom of the properties, tap the four pointed arrow to open the Transform properties. In the Scale section, tap the broken chain link. This will lock uniform scaling so changing one value will also change the other.

While we could scale manually by dragging the corners of the object, this will be more accurate and simpler from the Transform Properties. With the uniform scaling locked, tab the input box for the X axis and type in 50. This will reduce our plane's size by half. Press play and test again. The plane should fit safely between the cliffs.

Tappy_Plane_Tutorial_v01_html_m4110860f.png

We now have a playable game! However, just flying through cliffs isn't quite exciting enough on its own. To give the player some incentive, we will next add points to our game.

 

Adding Points:

Why do we need to add points? Well, it's one of the oldest and most effective incentives for players in gaming. Points give the player a reason to keep coming back to your game again and again. Who doesn't want to try to best the high score? We'll be adding more incentives like medals based on the points earned, but that's for later.

So how are we going to calculate points in our game? Well, we're simply going to create a sensor that will read when we have successfully passed through a cliff and then add a point to our score. This will be done in a similar way that we made the top cliff. We are going to create an empty object (we don't want our players to see it, we just need the game to read that the plane has passed through the sensor) and add to our existing behaviours so the sensor spawns with our cliffs and always in the same relative position to them.

To get started, on the editor screen, select Game Logic and open the Attributes tab in the Object Properties (four stacked lines). Create a new attribute and name it Cliff Score pos. Now, go into the behaviours and back to our Calculate Positions bundle.

We will be adding a Subtract Values now as we will be calculating our sensor's position relative to our top cliff. First, detach our Set Attributes from our Add Values behaviour by pressing and holding the line connecting them.

Tappy_Plane_Tutorial_v01_html_1c2050f3.png

Then open the Logic category and drag in Subtract Values behaviour. Attach it to our Add Values and then attach the Set Attributes to the Subtract Values. Now, take the output from Add Values and place it in the first input box of Subtract Values and in the second box, type in 4. Next, go to the Objects tab and grab a new Set Attribute. Attach it to Subtract Values, then set the Attribute Key to Cliff Score pos and the Value to the output of Subtract Values.

Tappy_Plane_Tutorial_v01_html_2938f7af.png

Now we can return to the main editor and create our sensor object. Tap on the beaker and select Empty Object. Then, in its properties, open the Transform tab (four arrows) and set the scale to 50x and 350y.

Tappy_Plane_Tutorial_v01_html_566d1a8f.png

Now open our sensor's behaviours and we will be doing something very similar to our cliffs (they need to spawn and move together) so if you wish to look to them for reference, go right ahead.

First, grab the Get Attribute behaviour from the Objects category and in the behaviour properties set the target object to game logic and the Attribute Key to Speed. Go to Logic tab and get the Multiply Values behaviour and attach attach it to our Get Attribute. In the properties, set the first Input box to the output of Get Attribute (top right corner) and multiply it by -1.

Then go to the Physics tab and get Set Velocity, attach to Multiply Values. In the properties, set the X to the result of our Multiply Values (again the top right corner) and the Y to 0.

Tappy_Plane_Tutorial_v01_html_6c5b0b02.png

Now let's get a second Get Attribute from the Object category, once again select Game Logic as the target object in the properties and change the Attribute Key to Cliff Score pos. Then, under the Transform category, open the Advanced tab and grab Move to Point. Set the X position to 41 and the Y position to the Get Attribute output (Cliff Score pos). Doing this will ensure it always comes in after the gap in the cliffs and set the duration to 0.

Tappy_Plane_Tutorial_v01_html_m35947283.png

Again, if you feel unsure, simply go back to your cliffs and double-check the behaviours. They are practically identical here.

Go back into your Game Logic behaviours and find the spawner behaviours. We need to create a new Spawn on Area for our sensor. Select one of the existing Spawn on Areas and duplicate it by opening the behaviour properties and from the side menu, tapping the overlapping boxes. Then, change the target object (Object A) from the cliff to our empty object.

Lastly, let's add to our Initial Cleanup bundle. Same as before, go to Destroy Object and attach it to the bundle. Open it's properties and set it to our Empty Object.

Tappy_Plane_Tutorial_v01_html_4d67d1b1.png

With that done, the next step is to create an event for when our plane has scored. Which means we need to create a behaviour that reads when the plane passes through our sensor and then increase our score counter.

To start, go back to our sensor object and open the behaviours. Open the Objects category and add the Collided behaviour. Set the collision Object B to our plane. We do it this way as otherwise, we would be required to use tags and that can get a bit too complex if we're using tags for everything. Then, go to the Custom category and get the Broadcast Message, attach to the Collided behaviour. Set the Event Key for the message to Did Score.

Tappy_Plane_Tutorial_v01_html_77cd186a.png

Now we need a way to see our score. For that we need to create a Label.

Go back to the main editor and change to Scene UI layer, then tap the beaker in the dock. Select Label and move it to the top middle of the game area. Set the size to 120 pts (you may need to adjust the alignment to see the text) with a 4 point black outline (be sure to increase the opacity to max). Then change the colour by tapping on the three coloured intersecting circles. At the top of this new drop down window, you will see the colour code, enter 9B8766FF.

Next, we need to change the font type. We want to use Futura Condensed Extra Bold. To get this font, we'll need to do a quick import. With the Score properties open, tap the box with the large Helvetica text to open the Asset Browser and on the left where it says Import, tap it to open a new window. Then, tap on System Fonts. Scroll down or tap the F on the right side and find Futura- Condensed Extra Bold. Tap it then tap Done in the top right. The font should now appear in your browser. To apply it, simply tap on it. Lastly, let's change the text that will appear in game. In the text box, remove Label and simply type in 0.

Open the behaviours for our new label and go to Custom category. Add Receive Message and set the Event Key to Did Score. Then, go to the UI category, get the Add to Score behaviour and attach it to Receive Message.

Tappy_Plane_Tutorial_v01_html_m59242a68.png

Press play and see how many points you can get!

 

High Scores:

Now we should probably save the high score, since as it is right now, the score is lost upon closing the game. High Scores also add an extra level of replay value. Players are more likely to return to your game and play it more trying to beat their previous score.

Let's go back to Game Logic and open the behaviours (don't forget to change back to Main layer or whatever layer you stored it on). Open the Custom category and add a new Receive Message, set the Event Key to Did Start. Next, scroll down to the Permanent Storage section and grab Load from File, attach to the Receive Message.

Open the properties for Load from File and set the Default Value to 0. Ignore the Key Type for now, we don't need to worry about that just yet.

Next, we need another Receive Message behaviour. Set the Event Key to Did Lose. This way, it will update our saves upon ending a session of gameplay. Open the UI category and grab a Get Label behaviour, attach it to the Did Lose Receive Message. Set the object to our score label (you may need to change layers when selecting). Next, go to the Logic category and grab the If behaviour, attach it to our Get Label. Now, take the output from our Get Label and place it in the first input box of the If behaviour. Take the output from Load from File and place it in the second input box. Then, change the centre text from Is Equal to to Is Greater Than ( the '>' symbol).

We do this because we only want to save our score if it's higher than our previous saved score. So now we need to actually save the value. Under the Custom category, scroll down to the Permanent Storage section and grab Save to File, attach it to our If behaviour. In the properties, set the Key Type to Existing. Then, tap where it says Select Key, in the new window press the + sign and type in Highest Score. We have now created a new Key that we can reference with our Load from File. Next, set the Value to Save to the output of the Get Label behaviour.

Go back to the Load from File, open the properties and set Key Type to Existing and Select Key to Highest Score.

We also should save the current score so we can call on it later.

Under the Get Label, add a new Save to file. Open the properties and set the Key Type to Existing. Tap Select Key and press the + icon. Type in Previous Score and set the Value to Save to the Output of Get Label.

Tappy_Plane_Tutorial_v01_html_m4bd5d59.png

Next up, we will make adjustments to our game over screen to show off our scores, medals and more.

 

Game Over Screen:

At this point, our game is pretty much done, the only big thing left to do is to set up a proper Game Over screen, everything beyond that will simply be polish. In this case, we want to add in the player's current score, their best score, a little achievement indicator for when they achieve a good score and finally a restart button.

The good news? We don't need to create the Game Over screen from scratch since we are already using the default overlay created by hyperPad. We do however, want to fix it up a bit as it's too plain and boring at the moment.

To access Overlays, we need to open the Scene Menu. To do that, when on the main editor, simply tap the three stacked lines in the top left. This will open a list of all the scenes currently in our game (at the moment we only have the one). At the bottom you will see a tab that says Overlays. Tap it to open and there we will find two default overlays created by hyperPad, Pause Menu and Game Over. Tap Game Over to change scenes and load it.

Tappy_Plane_Tutorial_v01_html_m424d95e.png

 

Once loaded, you should see a pretty plain scene with some text over a black background.

Tappy_Plane_Tutorial_v01_html_9b0e3d3.png

To start, let's turn on the grid so we can be sure everything will be properly aligned. To do that,

simply tap on the four squares aligned in a box in the toolbar located underneath the screen resolution button. You should now see the grid lines over your project.

Quick note, the snapping for the grid is determined by the zoom level. If you're having trouble moving an object into the correct position with snapping, try zooming in a bit to get a more precise snap.

First things first, let's change the text up a bit. Tap the Game Over text and we're going to change the font. In the properties you'll see the large Helvetica text, tapping it will open the Asset Browser. Find the Futura-Condensed Extra Bold font we imported earlier on in this tutorial. Tap it to apply to the Game Over text.

Next up, set the size to 120 pts and manually adjust the alignment by scaling the sides so it fills the screen, this will ensure it doesn't get cut off. If your text disappears, just adjust the vertical alignment until it reappears. Once that's done, move it towards the top of the screen.

We now want to change the colour. Beside the box where we changed the font in properties, tap the three coloured intersecting circles to bring up the colour picker. At the top of the picker is the colour code. Tap it and type in #F4D345FF, then under Outline, set the points to 4 and for the colour, type in #CEA900FF. Be sure to move the opacity slider completely to the right.

Tappy_Plane_Tutorial_v01_html_456c8a18.png

Lastly, let's lock it so we don't accidentally move it or something else. Open the transform tab in the object properties (four pointed arrow) and tap the lock icon for the Position, Scale and Rotation (should the anchor point be unlocked, lock it too, just to be sure).

Delete the Restart and Main Menu buttons.
With that done, open the Asset Browser and open the Tappy Plane asset pack. Find the object called Container and tap it to add it to our Quick Select.Tappy_Plane_Tutorial_v01_html_m7a65fcf.png

Notice how, underneath each asset is a descriptor of what type of object it is. In this case, our container is a 9-Slice object. This means when you scale the object, only the middle scales outwards and the corners stay the same size.  I highly recommend reading the documentation on 9-Slice objects here: https://hyperpad.zendesk.com/hc/en-us/articles/212707663-9-Slice-Objects.

When you're ready, drag the container to the centre of the screen. Tap it and using the grid, scale it so it is about 12 meters wide and 8 meters tall. Assuming the settings are default for the ptm (32) and the zoom is at the default level, every solid grid line should be 4x4 meters.

Tappy_Plane_Tutorial_v01_html_762e94f.png

Once the container is properly scaled, lock the Position, Rotation and Scale.

Create a new Label and drag it onto our container. Set the font to Futura-Condensed Extra Bold. Change the text to Score, set the colour to white. Open the Alignment tab in the properties. Beside the Width size input box you will see three sets of lines in different configurations. These are the alignment options. By default it is set to Centred, change it to Flush Right. Underneath, select the centre option to place it in the centre right of the alignment box.

Now, drag it to the upper right corner of the container, but leave some space around the top and sides.

Tappy_Plane_Tutorial_v01_html_617b98d8.png

Once it is in place, open the Outline tab, change the Outline to 2 points and the colour to #9B8766FF, don't forget to increase the opacity if needed.

With that complete, duplicate the text by tapping the two stacked papers icon in the mini- window with the properties open.

Select the new text and change the text from Score to Best. Move it underneath the Score text with some generous space between them. Basically it should be placed a little under the halfway point of the container.

Now, duplicate this text as well and change it to Medal. Open the Alignment tab and set the alignment from Flush Right to Centred. Then, move the text to the upper left of the container.

Tappy_Plane_Tutorial_v01_html_41776cdc.png

Now you may have noticed that it is very easy to accidentally move the wrong label as their bounding boxes are much larger than the text themselves. Let's fix that. In the tool bar, select the dotted lined box under the Hand tool. This is our drag select and is used to select multiple objects at once. Tap and drag over the container and everything inside. We are now going to lock these objects so we can't move them accidentally anymore.

Tap the four pointed arrow and lock the position, rotation and scale. Since we used the drag select too, it will apply to all selected objects. Afterwards, tap the Arrow tool once more and tap on some blank space to deselect everything.

Tappy_Plane_Tutorial_v01_html_m5586d49e.png

Create a new Label, set the text to 0, the font to Futura-Condensed Extra Bold, colour to white and the outline to 2 points, colour #9B8766FF. Set the alignment to Flush Right. Finally, set the size to 24 pts and duplicate it. Set one underneath Score and the other Best.

Tappy_Plane_Tutorial_v01_html_27d973ee.png

If you wish, lock them so you won't move them around.

Now we just need a placeholder for our medals. Open the Asset Browser and find the Silver Medal asset. Tap it and drag it into the container. Place it underneath the Medal text and open the colour picker. Turn the opacity down until the medal is just barely visible.

Tappy_Plane_Tutorial_v01_html_278d2359.png

Time to set up the behaviours.

Tap on the medal and open the behaviours. Go to the Custom category and grab the Load from File behaviour. Set the Key Type to Existing and select Previous Score. Set the Default Value to 0. Next, open the Logic category and grab an If behaviour. Set the first input box to Load From File output and the condition being Is Greater Than Or Equal To. In the second box, put 10.

Tappy_Plane_Tutorial_v01_html_m2aa56543.png

Now open the Transform category and first, select the Set Colour behaviour and attach it to the If behaviour. Open it, set the colour to full white and the duration to 0. Why do we need to set it to pure white? Well, the medal itself currently is transparent. Doing this will reset the opacity to 100% so when we load the medal we want, it will be a solid colour.

Speaking of, let's load the bronze medal. Still in the Transform category, select the Set Graphic and open the properties. Tap the New Graphic box and find the Bronze Medal asset in the Browser. Attach it to the If behaviour.

Now we just need a couple more If behaviours. Select the existing If and duplicate it twice, attach both to Load from File. Most of the work is done already, so just go into the If behaviours and change 10 to 20 and 30 respectively.

Attach Set Colour to the new If behaviours. Then, duplicate the Set Graphic behaviour twice and attach one to each of the new If behaviours. Then, change the graphics to Silver and Gold medals.

 Tappy_Plane_Tutorial_v01_html_1199f554.png

 

Next up, we need to set the logic for our scores.  Exit the behaviours and go back to the main editor. Tap on the 0 underneath the Score text, open the behaviours. Go to the Custom category and add Load from File. Set the Key Type to Existing and Select Previous Score. Default Value of 0. Then, go to the UI tab and grab Set Label, set the Text to the output from Load from File.

Do the same thing for the 0 under Best, but instead of Previous Score, select Highest Score.

Finally, let's make a very quick retry button. Duplicate the Medal text and change the text to Retry? Unlock the position and move it to the bottom of the container. Open behaviours, under Interaction select Started Touching. Then go to the Scene tab, open the Advanced options and drag in Load Scene. Attach it to Started Touching and open the properties. Select Scene 1 and add a transition if you wish.

Now, back on the editor, tap the icon in the top left to open the Scenes menu and Tap Scene 1 to return to our game scene. Hit play to test.

With that, our game should be done. There are a few things missing however, so in the next part, we will work on polishing up our game and making nice and shiny.

 

Part 3: Polish 

Start Screen:

To start our polish, we will make a Start Screen! Our Start Menu is going to be very simple, not

much more than a prompt for the player to start tapping.

We'll start by hiding our score screen as we don't want the player to see it until the game is started. To do this, just tap the eye icon on our Scene UI layer. Now, if we test our game, the score will not appear. Don't worry though, we'll bring it back.

Tappy_Plane_Tutorial_v01_html_83103ed.png

 

Next, create a new layer by tapping the + icon in the bottom right of the Layers window. Call it Start Screen.

Once the layer is created (make sure it is above the layers with your game objects) go into your Asset Browser and find the Tap Left, Tap Right and handTap assets. Tap them to add them to the Object Dock. Drag them onto the canvas and line them up appropriately. Use the Box Select tool and select all three, change their scaling to 75% on the X and Y.

Select the handTap object and open the behaviours. Open the FX category and grab the Play Animation behaviour. Open the  behaviour properties and tap Select Animation. This will highlight the Quick Select bar at the bottom. Now, I do need to explain what will happen next. We are going to create our own animation by converting a couple of our art assets into frames. Don't worry, it is a simple, if tedious, process. First, with the Select Animation tapped and the Quick Select bar highlighted open the Asset Browser.

Go to the Tappy Plane asset pack and find the hand graphic (note it is simply named hand. Not hand-Big or handTap). Tap it to add it to the bar. Next, tap and hold on the hand in the Quick Select bar, this will open a window where you can duplicate the frame. Do this twice so you have 3 frames of the hand. Next, open the Asset Browser again and this time, select the handTap graphic. Duplicate it twice as well so we now have a total of 6 frames.

 Tappy_Plane_Tutorial_v01_html_66c56668.png

Now, the animation will play a live preview in the Select Animation box. Right now it is likely too fast. You can fix this simply adjusting the Frames Per Second. I find 10 to be a good number.

With this done, return to the canvas and open your Game Logic behaviours (remember to change to the proper layer). Find the Receive Message behaviour listening for Did Start we are going to add two more behaviours, Hide Layer and Show Layer. Both located under the Scene category.

Attach them to the Receive Message and open Hide Layer properties, set the Select Layer to Start Screen. For Show Layer, set to Scene UI.

Tappy_Plane_Tutorial_v01_html_m128fd2b7.png

With that, we have our start menu. Next we will work on adding in a parallax background.

What is a parallax background? Well, it's a term used for a background made from several layers, each scrolling at a different speed. It is a nice way to add in depth of field to a 2D project. The key to parallax backgrounds are that objects further in the background will move more slowly than those closer to the screen. If this description is a bit confusing, don't worry. You'll see the effects soon enough.

To get this effect, we are going to “shuffle” the background objects as they move across the screen. By that, basically I mean we will basically build two sets of identical backgrounds. The first will be on the screen while the second just off-screen. As the objects move left off-screen, they will move behind the second object, creating an infinite background loop.

To begin, let's start with the objects that will be furthest in the distance, the clouds. Create a new layer and place it underneath our Main Layer, this way they won't overlap our plane. Call it clouds.

Go into the Asset Browser again and in the Tappy Plane asset pack and this time, open the Parallax Background folder and select Clouds. Next, with the grid on, drag the clouds into the game area. So long as the layer is underneath the Main layer, the clouds will drop in behind our plane and cliffs. Then scale the width slightly on the right so it stretches just past the game area.

Tappy_Plane_Tutorial_v01_html_m7cb1dab7.png

Open the behaviours for the clouds and under the Objects category, select the Get Attribute behaviour. Set the target to Game Logic (you'll need to change layers when selecting it) and the Key Type to Predefined and Speed.

Open the Logic category and select the Subtract Values behaviour, attach it to Get Attribute. Put the output of Get Attribute into the first input field and put 4 into the second input field to subtract it by 4 . Next, drag on two Move to Object behaviours and attach them to the Subtract Values. For now, just leave their properties blank as we have yet to create the objects we will use as our targets. Lastly, add a Behaviour On and set it to Get Attribute.

Continuing on, let's create a new layer below clouds, call it MountainsRef. Open your Asset Browser and return to the Parallax Folder. Select the Mountains and add them to the game space. Be sure to set them to a Scenery Object. Next, let's stretch out the mountains as we did the clouds, use the grid to make sure it's about the same length as the clouds. Move it off to the side and match it with the duplicate clouds we made.

Tappy_Plane_Tutorial_v01_html_3b527f62.png

Now, duplicate these mountains and drag the duplicate to the left side of the game area making sure it is not within it. As the layer name suggests, these mountains will act as references for both our actual mountains and our clouds. Because of this, we do not need to add any behaviours to them.

Go back into the clouds behaviours (don't forget to change layers) and we're going to finish it off. Open the first Move to Object properties and set the target to the left mountain reference. Change the Transition from Duration to Speed and set the value to the output of Subtract Values.

Tappy_Plane_Tutorial_v01_html_m779db61c.png

For our second Move To Object, set it to our right-most mountain on the MountainRef layer. Set the Duration to 0.

Now you can either repeat this process for our second cloud, or simply delete it and duplicate the first again. We created it originally to save as a reference point for placements that could be used later.

Once that's done, press play and test the game. The clouds should now be moving in the proper direction.

Now for our actual mountains. Create a new layer above Clouds and call it Mountains.

Drag a new mountain asset from our Quick Select bar and scale it to the same width as the others, set it to a Scenery Object. For the behaviours, simply do the same as you did for the clouds, but for the Subtract Values, instead of subtracting 4, subtract 2. This way the mountains will move at a different speed than the clouds behind them. Once the behaviours are added, duplicate the mountain.

Press play to test.

Next up is the ground. This will work pretty much the same as the clouds and mountains.

First, we need a new reference layer. Let's create GroundRef and place it at the bottom of our layer stack. Then, let's open the Asset Browser and got to the Tappy Plane asset pack, we don't need the Parallax Background folder this time. There are several ground assets so choose the one that works best with your current assets. Place the ground to the left side of the play area, duplicate it and move the second to the right side.

With this done, create a new layer above the Main Layer and call it Ground. Drag in a new

ground asset and set it to a Scenery Object. Open the behaviours and create the same behaviour set up. This time however, we do not need the Subtract Values and for the Move to Objects, target the left and right ground references rather than the mountains.

Test.


Go back to the main editor and duplicate the ground.

When testing, did you notice how everything keeps moving when the plane crashes? Let's adjust that. First we'll need to go back to our Plane behaviours. Find the Collided behaviour for when the plane hits the ground and ends the game. Then, under the Custom category, grab the Broadcast Message behaviour and attach it. Set the Event Key to Stop.

Now we are going to have our clouds, background mountains and ground receive this message and when that happens, we will disable our Move To behaviours. The process is the same for all of them so simply repeat this next step for each piece (including the duplicates).

Open the object's behaviours and go to the Custom category to get the Receive Message behaviour. Set the Event Key to Stop and then grab 3 Behaviour Off. Set each one to one of the Move to Object or Move to Point.

Next up, let's add in some screen shakes that will give some real impact to the plane crashing. Adding screen shaking is very simple as hyperPad comes with a screen shake behaviour out of the box. To start, open the plane's behaviours and find both your Collided tags. We will attach a Shake Screen behaviour to both which is located underneath the Screen tab. Attach one to each Collided tab and set the duration to 0.1. Once that is done, do a quick test and crash. Go back into the behaviours and adjust the Shake Strength to your liking, although I wouldn't suggest changing the duration.

Tappy_Plane_Tutorial_v01_html_519309ba.png

 

Why don't we add in our background now? This is very simple. With the main editor open, tap the painting-looking icon at the top (Scene Properties). You will be presented with two options, tap background to open the background edit window. Tap the large box to open the Asset Browser. Navigate to the Parallax Backgrounds folder and select the graphic simply titled Back. It should fill the box but if needed, scroll through the options at the bottom. When you're done, close the window and we now have a nice sky blue background.

There is more we can do to to our plane to spice it up a bit, let's get the animation playing so our plane doesn't just hover stoically through the game. To do this, we will use the same method as with the handTap animation. Add a Play Animation behaviour (under FX), select the behaviour to open the properties and tap Select Animation. Navigate to the appropriate plane folder in the Asset Browser and tap the first graphic. Let's duplicate the frame by tapping and holding on it to bring up the Frame Menu. Do this for the other two graphics and have a total of 6 frames. Adjust the Frames per Second until you have something you like.

Tappy_Plane_Tutorial_v01_html_4b875334.png

There is a lot more we can still do with our plane, so let's continue on. Next up we're going to look at hyperPads Particle System.

To start, let's create our particle. Go into the Asset Browser and on the left you'll notice a button called Create Effects. Tap it and you will have the choice between making a Sound and a Particle. Choose Particle to open the Particle Editor.

Tappy_Plane_Tutorial_v01_html_78bcec7d.png

From the start this can seem overwhelming, but it is quite simple once you've tinkered with it a bit. Speaking of, for now just mess around and see what kind of effects you can make. If you like, you can save them for later use/reference.

Once you're ready, we'll make a quick smoke trail for our plane. First, go to the bottom right and tap on the tab called Graphics. We're going to use a custom graphic for our particles. At the top you will see the section called Particle with a very plain graphic within it. Tap it to open the Asset Browser. Go to the Tappy Plane asset pack and find the graphic called puff. Once that's selected, go down to the End Colour option. Turn the colour to pure white and the opacity to 0. Next, return to the settings tab and set the particle type to smoke. At this point, it really comes down to what you think looks cool so mess with the knobs until you get something you like.

In my case, I chose a low number of particles to spawn and set the start and end size relatively small. In addition, I added a slight Start spin with a touch of variation. In the end I had something like this:

Tappy_Plane_Tutorial_v01_html_66c99e5f.png

When you're done, hit the save button at the bottom and give it the name smokeTrail. With this done, hyperPad will have created a new folder titled Particles, all particle effects you make will automatically be saved here.

Once your particle is finished, select it to add it to the Object Dock and drag it onto your scene. Place it somewhere underneath your game area as we don't want this to be seen. Select it to get a preview of the particle and rotate it 90 degrees left (use the grid to get exact numbers). Then, in our plane behaviours, find our Started Touching behaviour. Open the Object tab and go to the Advanced options. Find Spawn on object and attach it to our Started Touching. Then, tap the empty box in the properties and select our particle (the symbol looks like a small explosion) Set the Number of Alive instances to 1 and turn on the Recycle switch. Now your particles will restart every time you tap the screen (You may need to adjust your particles to fit this style).

Let's add some more particles, this time as a sort of loss animation. Open up the particle editor and select the comet preset. You can fiddle around if you wish but the default works well enough. Go to the plane behaviours and find the Collided with walls tag behaviour. Open the FX category and select the Start Particles behaviour, attach it to Collided. Select the new particle we created and then tap on the plane icon to set the anchor point manually. Set the anchor to the back end of the plane and tap the check mark.

Next up, look at the large circle with a smaller circle at its edge. This controls the direction the particles emit from. You can move the small circle around the edge to adjust it manually or tap the large circle to input a number directly. Simply make an adjustment and test the game until you get something that looks good.

Tappy_Plane_Tutorial_v01_html_16ca95d0.png

Now we'll just turn off our animation when we collide with the walls. Simply open the FX category and select Stop Animation then attach it to the Collided tab.

 

Sounds:

Time to tackle sounds, the last major bit of polish our game really needs. In hyperPad, we have two real methods for adding sounds to our game. Importing previously made sounds and the Sound Editor. We'll start by doing the importing.

Importing sound is quite easy, it works the same way as importing other asset types. For reference on what types of files are compatible with hyperPad, refer to the documentation here: https://hyperpad.zendesk.com/hc/en-us/articles/201727799-Supported-Asset-Types

hyperPad does have several asset packs for a variety of sounds which we shall import now. Open your Asset Browser and tap the Get Assets button. The first pack we will import is the Digital Sound FX pack. Remember, if you get an error during the import, just tap the Get button again and it should work fine. Once that pack is imported, go back to the hyperPad shop and grab the UI Sound Pack.

Close the shop window and in your Downloads folder you will see your new asset packs. Open up the DigitalFX pack. You can preview the sounds by tapping and holding the asset for a moment to bring up the asset menu. The first option will play a quick preview of said sound. Look through this folder as well as the UI sounds for any that you might like to add to your project.

First, we will be adding a sound to indicate our score has increased. Find an appropriate sound, but don't worry about getting the best, we will go over an alternate method later. Go to the editor and find the empty object that is acting as our score sensor. Open the behaviours.

Open the FX category and grab the Play Sound behaviour. Attach it to the Collided behaviour and open the properties. Tap the sound box and find the sound you like. Personally I like Powerup2 under the DigitalFX folder. Press play to test.

That is the basics for adding sounds to our game! Try adding a different sound for when the plane crashes and when you tap the screen to keep it flying.

Also, if you happen to have your own sound files, feel free to import them into the project, so long as they're the appropriate file type (see link above), you can add them in instead.

If you want to add in background music that will play on a loop, the easiest way is to simply add an empty object to the scene (tap the flask in the bottom right) and in the behaviours, add in the Play Music behaviour from the Scene category, then go to the behaviour properties and enable the loop toggle.

Let's get into the final step here, the Sound Editor. To access it, open the Asset Browser and tap Create Effects, select Sounds. There's not much to look at at first, so let's open the Advanced tab by tapping the small + sign to the right.

Tappy_Plane_Tutorial_v01_html_5e967e00.png

At the top of the screen are some semi-presets. Tapping one several times will generate a slightly different sound. If you find a sound you like, you can press the play button on the right to hear it again and the save button to, well, save it.

At this point, I could go over each and every knob describing what they do but in all honesty, the best way to learn this is to simply play around with it yourself. So if you wish, go ahead and make a sound for the plane scoring, crashing and when you tap the screen to keep it airborne.

 

What's Next?:

So now we have a full game. What is there to really do next you may ask? Well, getting your game out to as many people as possible. If you haven't noticed, we've only been working with a single screen resolution so far but there are many types of Apple devices. This next (bonus) part will be devoted to tweaking our game to work properly on other devices.

hyperPad makes this is an extremely simple task.

I'll demonstrate the method using our plane. Select it and open the Transform tab. By default, the position of every object in the game is calculated by meters. However, if we want our objects to stay in their relative positions when changing between screen resolutions we need to change how it defines the position.

To do that, in the Transform tab, look to the Position section at the top and simply tap the % icon. For reference, 50% is considered to be the exact centre of the screen. You can quickly test this out by, just setting the percent position on our plane, switching between the resolutions and watching the plane stay in its position on the screen while the other objects get cut off. To switch resolutions, simply tap the Screen Resolution button in the left toolbar bar.

Tappy_Plane_Tutorial_v01_html_40bc9916.jpg 

To get a better idea of what it will look like on other devices, press the play button and open the hyperPad Menu (three bars top left of the screen). There you can change the aspect ratio and the screen will adjust itself to that aspect. In addition, it will even create the border overlay of phones when using the iPhone resolutions.

Tappy_Plane_Tutorial_v01_html_64151ed2.png

Simply change all the game object positions to a percent (you may have to find a % that works for the position of the object) and you can play it on any device.

Some objects like backgrounds are ok staying as an absolute position (meter). The artwork is simply clipped off the screen. Typically when designing your project assets, backgrounds should be designed to fit the largest screen aspect ratio, and be created in a way where if they are clipped to a smaller device, it will still look ok.

Take a look at the example below to see how the background stays in place while other assets are repositioned:

Canvas.gif

 

Final Words:

You've come to the end of the tutorial. By this point you've experienced a lot of the different areas of hyperPad. You've imported assets, created an interactive scene,  created complex game play elements and scoring systems with our visual programming. Now take what you've learned and start creating the next big hit. 

We can't wait to see what you create, so don't forget to share your creations to the hyperPad Hub, so the entire community can enjoy your creativity.

And don't forget. If you're ever stuck or need extra help, the forum is full of helpful people who are always there to answer your questions and help you along the way.

 

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.