Part 5: Adding coins and points


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.


Hiding Coins in Bricks

Hitting the Brick

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.



Getting Points

Setting up the UI

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.


Getting Points

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.



Individual Coins

Your first coin

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. 



Article is closed for comments.