With Part 4 completed, you should now have a level and a playable character to run and jump around.
Now we need to give our player a purpose. For this part of the tutorial, we'll add collectable coins and a score to keep track of them.
Coins hiding in blocks are one of Mario's most iconic features. Let's start this tutorial off by creating that feature.
We'll make our first brick in a way where we can quickly modify it to hold as many coins as we need. Once the brick is complete, you can duplicate it and place it anywhere you want.
This tutorial builds off Part 4, and assumes you've branched the Part 4 project from the hub.
Start by selecting one of the bricks that will hold coins. From the object properties tap the "Behaviors" button to open the behavior editor.
From the Object category, add the Collided behavior. The Collided behavior will trigger an event every time 2 specified objects touch each other.
Tap the Collided behavior you added to view its properties. You can see it has 2 boxes for selectable objects (Referred as Object A, and Object B). The first one (Object A) is selected for you, and it's the one you're applying the behaviors to. You can tap to change this if you want, but we'll leave it alone.
The empty box is for your second object (Object B), which the collided behaviour will check against. Tap the empty box, and select your player character that you added in Part 4 of the guide.
With your objects selected, you can now change which part of Object B will trigger the collided event. Turn off all the toggles, except the "On Top" option. Now the Collided behavior will only work when the top of the player character touches the brick.
Now that the brick checks if the players head touches it, lets make it bounce up and down. To do this we'll use the Move By behaviors to move it up, and then back down.
From the Transform category, add the Move By behavor and connect it to the Collided behavior you previously added.
Tap the Move By behavior, and view its properties. Since we want to move the brick up when the player hits it, we'll change the Y Value. Set this to a small number as we only want to give it a small bounce effect. I used 0.20 Meters.
You will also need to change the Duration. The duration is the time it takes for the move to complete. By default, the duration is set to 1, but this means the brick will move 0.2 meters over 1 second. This is far too slow for our needs. Change the duration to 0.10 Seconds.
Note: Setting a duration of zero, will cause your object to move instantly to the new position. It will not smoothly animate. Also, notice the box with the text "Linear". This is the motion tween effect that is applied to your move. If your behavior has a duration, it will move based on this effect.
Now to make the brick bounce back, add another Move By behavior, and connect it to the previous one.
Once again, change the properties. This time, we want the brick to move back down. To move it down, change the Y Value to a negative number. Since we want the brick to move back to it's original position, we'll move it by -0.20 Meters. You will also need to change the duration to 0.10 Seconds.
By this point, if you press play your player can hit the brick from the bottom and the brick will bounce up and down. However there are a few issues we need to address.
1) There is a small bug with our logic. If the player keeps jumping really fast with out letting the box return to the original position it will keep moving up.
2) The brick bounces for ever. What if you only want a few coins, then it stops when empty?
3) It doesn't give any coins yet.
Let's start by addressing issue 1. This is actually a simple bug to fix. All we have to do is turn off the collision behaviour as soon as the player hits it, then turn it on again when it's done moving.
To do this, switch to the Custom category, and add "Behavior Off", then connect this to the Collided behavior.
Next, from the Behavior Off properties, tap the empty box labeled "Select Behavior". From the list, locate the correct Collided behavior. Note that the list shows all behaviors, from all the objects. The list is sorted based on object name.
Now you need to turn the collided behavior back on when it's done the bounce. To do this, simply add a Behavior On from the Custom category and connect it to the second Move By behavior. From the behavior properties, make sure you select the Collided behavior to turn it back on.
For issue 2, we'll use a box container to set the amount of coins each brick holds. Doing this allows us to easily change specific bricks to have more, or less coins.
The first thing you should do is add a box container from the Custom category, you can place this anywhere on the screen as it does not connect with anything else. You can also rename this box container to "Coins" so it's easier to find later (to remember how to rename behaviors, check out Part 4).
From the behavior properties of the Coins box container, change the "Default Value" property to 3. This will be how many coins the brick holds.
Now from the Logic category add a Add Values behavior and connect it to the second Move By we added earlier. We'll be using this Add Values behavior to keep track of each time the player hits the brick.
Once the "Add Values" behavior is connected, tap on it to view the behavior properties. The properties show 2 input fields, and the "Add Values" behavior will output the sum of the values entered.
In our case, since we're using the add value to keep track of each hit, well enter 1 in the top field, and for the bottom field, we'll output the sum of the Add Value" behavior back into the second input field.
What this does is increment the sum each time the behaviour is run. The first time the behaviour runs it will be 1+0 since there is no sum. The second time it runs it will be 1+1, since the sum from the previous time is stored.
Next, you need to check if the sum from the add values is the same as the Coins box container you previously added.
To do this, add an IF behavior from the Logic category and connect it to the Add Values from the previous step.
With the IF connected, tap on it to view the behavior properties. The IF behavior, will check if a specific condition is met (based on the 2 input fields, and the selected condition).
In this case, we'll output (share) the sum of the Add value behavior, and place it into the first field of the IF.
Then output the contents of the box container to the second if.
With these values entered the next behavior connected will only be executed IF the sum of add value is equal to the value stored in the coins box container.
Now what you will need to do is turn the collided behavior off, and change the graphic so you can't get any more coins. To do this, add a new Behavior Off behavior from the Custom category, and connect it to the IF. Like before, select the Collided behaviour as the one you want to turn off.
To show the player there are no more coins left, you can add the Change Graphic behavior from the Transform category, and connect it to the IF.
Once it's connected select a new graphic from the Change Graphic behavior properties. Tap the second box in the behavior properties, and select a new graphic.
Now if you press play, you can jump up and hit the brick 3 times before it stops.
The next thing that's left is to actually get points, and collect coins when hitting the brick!
The first thing we'll do is add a counter in the corner of the screen to tell the player how many points they have.
So, get back to the main editor by pressing back from the behavior editor. Then you need to bring up the Layers bar by tapping the 3 dots on the right hand side of the screen (you can also swipe from the edge of the screen).
Select the Global UI layer. The UI layers exist on top of the other layers in the scene and are typically used for buttons, joysticks, and labels. They are also fixed in the same spot on the screen, and appear to move with the rest of the content in your scene.
Note: Objects placed on the Global UI layer will exist in every scene in your project. If you want something to only exist in one scene, use the Scene UI layer.
With the Global UI layer selected, tap the Special Objects beaker icon on the dock, or drag it into the scene.
From the popup select Label, and a label will be placed into your scene.
Tap the newly added label to open the object properties. From the label properties you can change the text color, font, text to display, and more.
Tap the large text box and change the text to say "Points:".
Next, tap "Alignment" to expand the alignment properties. Set the Width to 110 and Height to 64.
Note: Setting these to 0, removes the the text area, and allows your text to grow horizontally indefinitely.
With the label properties all set up, you can use the Move/Transform tool to position your new label to the corner of the screen and make sure not to obstruct the players view.
Once your label is position, add another label to the scene, we'll use this label to display your points. This time set the text to be 0, since your player starts with zero points. Unlike before, we'll set a specified width and height. Set the Width to 500pt, and the height to 64pt. This gives a specified area, where the text can appear. If you have too much text to fit in this area it will be cut off.
Also, set the horizontal alignment to be left aligned (Flush Left).
When you're done with the label properties, position it beside the "Points" title.
Now we need to increase your points each time you get a coin. Switch back to your main layer, and go back to the behaviors for the brick with the coins so we can add the necessary behaviors.
From the UI category, drag on the "Add To Score" behavior, and connect it to the second Move By behavior added earlier in this guide.
Next, tap the Add To Score behavior, and turn on the Infinite Score toggle. If this toggle was off, the next behavior would trigger when the specified score is met. Also make sure that the "0" label is selected as correct object, as the Add To Score behavior will automatically select a random label in your scene.
If you press play now, you will earn 1 point for each time the player hits the brick.
Now, you can duplicate this brick (as you learned in part 3), and place it through out your level.
Sometimes you may want to just add coins through out your level without hiding them inside bricks. This is relatively simple, and we'll go over that now.
Start by adding your coin graphic into your scene, then tap on it to view the object properties.
From the bottom of the object properties, make sure the physics tab is selected.
While in the physics tab, make the coin passable. Doing this allows our player to continue to run through it with out being stopped or slowed down.
Next we'll adjust the collision boundaries of the coin. The collision boundaries define the physical shape of the object. The collision boundaries may be a different size, or shape than the objects visual appearance. To adjust the collision boundaries, tap the Collisions icon.
From the Collision Editor you can use the tool palette on the left to modify and create unique collision shapes.
For this guide, we'll select the "Circle" option to create a circle collision boundary.
Next, drag the green dot on the circle to resize the collision boundary. Make the collision boundary the same size as the coin. Note, that if the collision boundary is larger than your object, then your player can interact with it even before it physically touches the coin graphic in the middle.
When you're done creating the collision boundary, tap the check mark icon in the tool palette to accept and save the new shape.
Once again, tap the coin to view the Object Properties. This time open the behavior editor for the coin.
From the Object category, add the "Collided" behavior onto the screen. Just like before, open the collided behavior properties, and select the Green Spaceman player for Object B.
Next from the UI category, drag on the Add to Score behavior, and connect it to the collided. Again, from the behavior properties, turn on the toggle for Infinite Score, and make sure the correct score label is selected.
Finally, from the Object category, add the Destroy Object behavior,and connect it to the collided behavior. This will completely remove the coin as soon as the player runs into it.
If you press play, you can now run into the coin, and it will disappear.
Thats it! Now your platform game has collectable coins. At this point, all you need to do is duplicate your coins and place them through out your level. Try to be creative when placing your coins!
You can download the finished version of Part 5 from the Hub and see it all in action.
In Part 6, we'll start adding a bit of difficulty to the game by introducing enemies.
Often times you want to create a game where it remembers certain details about the previous time it was played.
What you want to save depends heavily on the game or app you're creating. Whether you want to save a score, the position, or the overall progress, you need to plan how and what you want to save.
In this tutorial we'll cover saving a players score, and creating a simply high score or "Best Previous" score system.
For this tutorial, we'll assume you have created a simple game where the player picks up coins (Part 5 of Creating a Platform Game), and the number of coins is displayed with a label on the screen.
When it comes to saving, there are two important questions you want to ask your self. What do you want to save, and when should you save? In hyperPad, the Save Behavior can only save a single value at a time. So you really need to think about what you're saving.
In this tutorial, we'll save the score (number of coins collected) that is displayed using a label on the screen.
Now that we know we're saving the score from the label, the next thing to figure out is when to save.
There are many options here, and they depend on your gameplay or overall design. You can have it save every time the player picks up the coin, save when the player loses, save when the player beats the level, save when the player presses a button, or what ever else you think is needed for your situation.
For this tutorial, we'll set up a button that saves the score when the player presses the save button. This same behavior logic can be applied if you want to save when the player loses or finishes the level. You just need to trigger these behaviors when you win or lose.
Select your Save Button object, and open the behaviors.
From the Interaction category of the behavior editor add a "Stopped Touching" behavior.
Now from the UI category add a "Get Label" behavior, and connect it to the "Stopped Touching" behavior from the previous step.
Tap the "Get Label" behavior to view the behavior properties. From the behavior properties, tap the area that represents the current object, then select the label in your scene that represents your score.
Next from the Custom category add a "Save to File" behavior and connect it to the "Stopped Touching".
Select the "Save to File" behavior your just added to view the behavior properties. Note the "Key Type" is set to existing. Existing keys are predefined things you want to save.
First you need to add the title or description of something you want to save. This is called a "Key". Tap the "Select or Create Key" button to bring out the list of keys.
Enter a descriptive title at the top, then press the + button to add your first key. Since we want to save the score, enter "Score" as the key.
Next you need to actually save the score from the label. To do this, output the value from the corner of the "Get Label" behavior into the input field of the "Save to File" properties.
That's it! At this point, your game should be saving your score right when you press the save button. But you haven't actually done anything with the saved value. The next thing you need to do is Load the score and actually use it in your scene.
With your score saved, you now need to load it and use it in your scene. When it comes to loading, there is one important question you need to answer. When do you want to load?
Like saving, the answer depends heavily on your project. You can load as soon as your scene starts, when the player presses a button, or when ever some other event is triggered. It really depends on what you're trying to achieve.
For this tutorial, we'll load right when the scene starts and show the previous saved score.
To start, add a label into your scene. We'll use this label to show your saved score.
Next we need to add the actual load logic. For this tutorial, we'll add the logic to the Save Button from the previous steps. However depending on your game, you may need to put your logic elsewhere. Select the save button and open the behavior editor from the object properties.
From the Custom category add the "Load from File" behavior and do not connect it to anything. Since it's not connected to any other behavior, the load behavior will execute right when the scene starts (when the button exists in the scene). If you wanted to load based on a certain even, or other trigger then you would connect it to other behaviors.
Now select the "Load from File" behavior to view the behavior properties. Once again, make sure "Existing" is selected for the key type.
Next tap the "Select Key" button to open the list of saved keys. From the list choose the "Score" key you added earlier.
At this point, you have technically loaded the score. But you're not doing anything with it yet. Lets put that loaded value to use.
From the UI category, add a "Set Label" behavior and connect it to the Load behavior your added previously.
Next select the "Set Label" behavior to view it's properties and remember to choose the new label you just added that represents the loaded score. Once you selected the correct label to change, drag the output value from the corner of the "Load from File" behavior into the input field of the Set Label behavior.
That's all you have to do! Your progress will save and be loaded into a label the next time you play.
One thing you may have noticed is that your score is saved every time you press the button and overwrites your previous score. Sometimes this is fine, but usually you only want to save when the player reaches a score greater then their previous one.
To implement this "High Score" system we only need to slightly modify our saving logic.
Start by going back to where the saving behaviors are placed (the save button).
First you need to disconnect the "Save to File" behavior from your Stopped Touching behavior. Tap the line connecting the two behaviors to disconnect them.
Next from the Logic category ad an IF behavior. The IF behavior will check when a certain condition is met before executing. In this case we only want to save IF the score is greater than the previous (loaded) score.
Connect the IF behavior to the "Stop Touching" behavior.
Next you need to tap the IF behavior to open the behavior properties and set up the condition.
Drag the output value from "Get Label" into the first input field of the IF behavior.
Then drag the output value from the "Load from File" behavior into the second input field of the IF behavior.
Now you need to change the condition. Tap the "Is Equal To" button, and select the Grater than or Equal to (≥) option.
Finally, connect your old save behavior to the IF. Now your IF behavior will only execute the connected save, IF the value from the label is greater than (or equal) to the loaded value.
That's all you need to do. You should now have a working saving and loading system that will save the players score only if they beat their previous attempt.
This tutorial covered saving a score. But sometimes you wan't to save other things, like a players position, or the current level etc.
The concepts you learned in this tutorial still apply. You just need to change when you're saving, and what you're saving.
Take saving the players position for example. An objects position is given in 2 numbers. The X, and the Y. For this, you would simply use 2 save behaviors. One to save the X position, and the other to save the Y position. Then when it comes to loading, you would use 2 load behaviors. Then instead of setting a label, you would simply move the player object to the loaded X and Y positions.
Making a plan of what you're trying to save, and when you need to save, you can create a system that works for almost any situation. Unlock endless game and app creation with hyperPad for a one-time payment. Turn your Procreate designs or digital art into interactive comics, games, and more, then publish directly to the App Store from your iPad. Start your game dev journey with hyperPad today and bring your ideas to life!
Be the first to hear about new blogs, updates and fun events!
