In this tutorial I’ll be showing you how to make an easy coin flip game where you have to choose which side the coin would land on and if you call it correctly you’ll get a point.
Start off by downloading the following sprite textures. Click on the link and right click the image and choose Save Picture As (It would be best if you put all of these into one single folder):
dl.dropbox.com/u/56331944/Head.png
dl.dropbox.com/u/56331944/Tail.png
dl.dropbox.com/u/56331944/Almosthead.png
dl.dropbox.com/u/56331944/Almosttail.png
dl.dropbox.com/u/56331944/SemiHead.png
dl.dropbox.com/u/56331944/Semitail.png
dl.dropbox.com/u/56331944/RedButton.png
dl.dropbox.com/u/56331944/GreenButton.png
dl.dropbox.com/u/56331944/PurpleButton.png
Placing Coin and Setup Animation:
Go ahead and create a new project. Now on our layout we’re going to add our coin. Choose the sprite to be anywhere within the dotted lines. Now load the Head file you downloaded.
Under Animation frames right click anywhere in the box and choose “Add Frame.” Frames are the pictures that make up your animation.
Now load AlmostHead file unto this frame. Again add a new frame by following the step before.
Repeat the previous steps by loading the PNG’s in the following order: Semi-Head, Semi-Tail, Almost-Tail, Tail, AlmostHead, Semi-Head, Semi-Tail and last but not least Almost-Tail. In the end you should have 10 frames, but the first frame is counted as 0 so it says you have 9 frames.
Go over the “Animations” box, change the name of the current animation from Default to Flip by right clicking Default and click Rename. This is just the name that we’ll call our animation.
Under the Animation Flip Properties change the speed to 10 and the loop to yes.
Flip, Head & Tail Buttons:
The next thing to do is to add our buttons to make the coin flip and to choose either heads or tails.
Insert all three buttons as three different sprites.
Resize the three buttons to more manageable and equal sizes such as how it looks below.
The other thing on our list that needs to be done is to label the buttons using the Text object. Change the text of the red button to say Push to Flip under the RedButton. We can change the text by going to the properties bar and under Properties there should be Text so delete that and type in Push to Flip.
Add two more text objects having them say Head and Tail. Put the Head text under the GreenButton and Tail text under the PurpleButton.
To see how many points you are receiving we need to have our Score text on the layout somewhere. No need to change the text because we shall do that in the event sheet. You can put this text anywhere you want.
Rename the objects on the current layout to something that you are comfortable with. Here are what I renamed them as:
Sprite = Coin
Sprite2 = FlipButton
Sprite 3 or 4 = HeadButton or TailButton (depends on which one you loaded first)
Text = FlipText
Text2 or 3 = HeadText or TailText (depends on which one you inserted first)
Text4 = Scoretext
Getting our coin to flip on cue:
To set up our Score we need to add a global variable called Score and set the number to be 0. In our event sheet we want to set up so that whenever we score a point it’ll show it so we need to set it up as:
System: Every tick -> Scoretext: Set text to “Score:” & Score
If we were to play our coin flip app at the moment you’ll see the coin will automatically start flipping. We want to stop the animation on the start of the layout.
System: On start of layout -> Coin: Stop Animation
We need to now make it so that when we push the flip button it would make our Coin start animating which would make it look like it’s flipping. We’ll need a new event, but first go back to the layout and we need to add a Mouse object. Now go back to the Event Sheet and add:
Mouse: On Left button Clicked on FlipButton -> Coin: Set Animation “Flip” (playing from beginning)
Let’s make the FlipButton and FlipText disappear after the coin starts flipping, so the player won’t be able to click on it again. You can do this by destroying the FlipButton and FlipText with these two commands:
FlipButton: Destroy
FlipText: Destroy
Choosing a side:
Our next thing to do is to make it so that we could choose one of the two coin sides. We must create two global variables which shall be called Head and Tail. They should both be numbers and starts at 0.
Let’s start with the head button first. Create a new event and follow have this:
Mouse: On Left Button Clicked on HeadButton -> System: Add 1 to Head
HeadButton: Destroy
HeadText: Destroy
TailButton: Destroy
TailText: Destroy
The following event has it so that when we click on the HeadButton we set a value to one of the two global variables we just created. The event also makes all the buttons disappear so that the player won’t be able to click on them again. Because there’s a value for Head our game knows that we chose head instead of tail.
The coin is still spinning even though we have already selected our side!? Well we need to add some more actions. If we stop the animation right away the person could time when to stop for their chosen side. Let’s make our system wait for 2 seconds and then stop the animation. Here’s the code:
System: Wait 2 Seconds
Coin: Stop Animation
Repeat this huge event, but replace the HeadButton in the event with TailButton and make the system add to 1 to Tail. This way the game will know that we have chosen the tail side instead of head.
Landing the Coin:
There’s a high chance that when we stop this animation here it would not land on a head or tail side so we want to make it so if the animation it stops on is closer to a certain side it would automatically spawn the complete side that our animation is closest to. First we need to put to insert 2 more sprites. One of the sprites will load the Head file again and the other will load the Tail file. Move these sprites outside of the dotted box. You should rename them to Head2 and Tail2 in objects bar.
In the event sheet we are going to make a sub event under the previous event. To do so you’ll need to right click the green arrow to the left of Mouse event and choose Add -> Sub-Event. Sub-events are events that require the higher event to be fulfilled to have the sub-event’s condition to occur.
Remember those 10 frames we had in the beginning? Well we could put those numbers to use now. In this sub-event we’ll want to make our coin create a head if the frame the coin stopped animated on is closer to the head side.
Coin: Animation ≤ 4 -> Coin: Spawn Head2 on layer 0 (image point 0)
Now we only have our Head only spawning we also want to set our other animation range so that it would spawn our Tail. Here’s the code for the new sub-event:
Coin: Animations ≥ 5 -> Coin: Spawn Tail2 on layer 0 (image point 0)
Copy this event with its action for the TailButton choice. Replace HeadButton with TailButton and HeadText with TailText. Here’s what they should both look like.
Scoring:
Seems we have our side spawning correctly now. We just need to make it so that when we get the right side we get a point. When we pushed down either the green or purple button remember how we made so that it adds 1 to either Head or Tail global variable? Now we can put it to use. When our coin has landed on a side it creates either a head coin or a tail coin. Let’s make an event for scoring to happen when Head2 is created. Here it is:
Head2: On created
We’ll need to make 2 sub-events because there are two sides we could have choose. Within each sub-event you would want one to give you a score because you called on the head side. If you called on the tail side however, you wouldn’t get a score. Here’s one sub-event to give us 1 point if our coin landed on Head2 and we chose the HeadButton. This sub-event also makes it so that your Head goes back to 0 so you could choose Head again to score more and the restart the layout to get all the buttons back:
System: Head = 1 -> Add 1 to Score
System: Set Head to 0
System: Wait 2 seconds
System: Restart layout
However if we chose the TailButton and it landed on Head2 we wouldn’t get any points. We want the global variables to reset and have our game start over because our player has chosen the wrong side. Here’s the sub-event for this:
System: Tail = 1 -> System: Reset global variables to default
System: Wait 1 seconds
System: Restart layout
*I like to include wait actions in these sub-events so that I can have my player watch what the coin flip to react to it instead of having the game suddenly flash and you don’t see the side that it landed on.
Here’s what the Head2: On created event should look like:
Repeat this event with the Tail2 on creation and have the two sub-event switch actions in order to get your score for the tail side if that was chosen. With both it should look something like this:
Tada, now your basic coin flipping game is complete! Have fun with your group of addicted players! Leave a comment if you have ANY sort of feedback on this tutorial.