Make a slingshot game like Angry Birds

Note: this tutorial is out of date. You can combine the concepts here with this tutorial: http://gamefroot.com/knowledgebase/pow-shooting-projectiles-missiles-bullets-lasers/

Angry Birds is one of the most popular mobile games ever made. It’s easy to see why – with it’s simple interface, bright cartoon visuals, fun physics simulations, and endless replayability, it keeps the player wanting to get just one more piggy knocked out. But you don’t need to be a big game studio to create your own game just like it.

Here’s what we’re going to create.

1. Get the Assets

Start by grabbing Kenney’s Physics Game asset pack from the Marketplace.

Step 2: Set up the Game Properties

Once you’ve got these assets and added them to your game, you can set up the Game Properties. Click the Game Properties icon at the top of the sidebar on the left. Our game needs to be short and wide, so set the height to 512 and keep the width as it is. Also set the tile size to 70×70, since that’s the grid that the assets were designed for.

Step 3: Place the ground tiles

We’ve got to have a surface for everything to sit on top of, so open the Terrain tab from the sidebar, and place a row of terrain tiles at the bottom of your level. Click on the tile, and click on the stage to draw them down.

Step 4: Place the Slingshot

Next is the Slingshot. Find one of the cute looking characters in the Game Objects tab in the sidebar, and place them into your level. You can’t place them on the terrain layer, so select the layer above terrain in the Layers Panel, and then place the game object into your level.

Step 5: Slingshot Script – Events

To get our slingshot object flying around, we need to code it with the script editor. Click Script Edit mode to start scripting. Here’s what we’re going to create:

Click on these images for a closer look. This script does the following:

• When created: Starts the slingshot object so it is unaffected gravity (so it will stay in place), sets gravity (to make all objects fall down), and sets drag (to make this object gradually slow down if it starts moving).
• When the presses myself (when player clicks on this object): Sets the variable “dragged” to True. This is how we know when the player starts pulling back this object to make it fly away.
• When the stage is released (when the player stops holding down the mouse button): If dragged is true, then set the velocity of this object to the distance between the mouse and this object (so if the player drags only a little bit, then the distance will be smaller and the velocity will be lower). Then set dragged to false, and make gravity pull me down.
• Constantly: Snap camera to my position (so the object doesn’t fly off the screen).

First, let’s grab the event blocks you will need to start with (find them under Game Mechanics, and the Events tab).

Make sure to change the “When stage is pressed” block to “When stage is released” by clicking on the drop down arrow and selecting “released”.

Step 6: Slingshot Script – “When Created”

Once you’ve got all the event blocks, we need action blocks to go inside the events. We’ll start with filling in the “When created” event. All of these blocks need to come from the Arcade Physics tab.

When you’ve dragged them in place, change “velocity x” to “drag x” and set the number to 50, change “reacts to gravity” to “false”, and change “set gravity x” to “set gravity y” and set the number to 300.

Step 7: Slingshot Script – The dragged variable

Now let’s script the dragging part of the slingshot. We want to create a variable called “dragged” and we want this variable to be switched to “true” when the player starts dragging on our slingshot. Go to the Variables tab and drag out the “Set true/false item to” block. To create a new variable, click on “item” and select “New variable…”, then name the variable “dragged”.

To set this variable to “true”, go to the Logic tab and drag the “true” block into the variable block.

Step 8: Slingshot Script – Flinging the slingshot

We’ve made it so that when the player starts dragging on the slingshot, the “dragged” variable gets set to true. Now we want to make the slingshot fling away. Since we need to detect if our dragged variable has been set to true, we will need the “if, do” block from the Logic tab. Drag it into the “When the stage is released” block.

Then find the “dragged” variable block from the Variables tab, and drag it into the “if” part of the “if, do” block.

To actually make the slingshot fly away, we need to give it a velocity (speed). We also need to let gravity affect it once we fling it away. Drag in these blocks from the Arcade Physics tab. Make sure to change one of the “set velocity x” to “set velocity y”.

Velocity x and velocity y are the speeds that the object will be travelling on the x-axis (horizontal) and the y-axis (vertical). To figure out how fast the speeds should be, we will measure the distance between the mouse and this object (so if the player drags only a little bit, then the distance will be smaller and the velocity will be lower). To measure the distance between the mouse and this object, we need to get the position of the mouse and the position of this object, and then subtract them from each other. To do this, we need to grab blocks for x and y position of the mouse from the Input tab, and x and y position of myself from the Instances tab. Remember to change one of the x position blocks to a y position block.

To determine the true position of the mouse, we need to add it to the position of the camera (or else we will be getting the position of the mouse relative to the game window, which will mess up our calculations). Grab the position of the camera blocks from the Camera tab.

To add these positions together, we need to grab addition blocks from the Math tab, and then drag the position blocks into the empty slots in the addition blocks.

Now that we have the accurate position of the mouse, we need to subtract it from the position of the slingshot object. Grab another couple of addition blocks, and change them to subtraction blocks, then drag all of the position blocks into the empty slots in the subtraction blocks.

Now you’ve got two blocks that determine the difference between the position of this object and the mouse – which lets you calculate how fast the slingshot should be flung. Drag these two blocks into the “set velocity” blocks that we placed down earlier. This will replace the “0” blocks and make them pop out – you can drag them back into the sidebar or into the trash can to remove them.

The last thing to do in this step is to turn off the “dragged” variable. Open the Variables tab, and drag in the “dragged” variable block.

To set it to false, grab the “true” block from the Logic tab, and change it to false, then drag it into the empty slot.

Step 9: Slingshot Script – Camera follows me

Finally, we need to make sure the camera follows our slingshot object as it flies around. Drag the “center camera on myself” block into the “Constantly” event block.

Click Save to save this script, and then Close to return to the level editor.

Step 10: Apply the Script to the Object

Your saved script will now be accessible from the Scripts tab in the sidebar. Click on the scripts icon, select the script you just saved, and then click on the object in your game to apply the script to it.

 

Hit the Preview button in the top-right corner to preview your game so far. You should be able to click and drag on the object, and then have it shoot away when you release it.

Step 11: Add destructible and indestructible objects

Our level needs to have some objects that we can destroy by flinging our slingshot at – and it also needs some obstacles that can’t be destroyed. Go to the Game Objects tab and find all the bits and pieces you want to place in your level, and draw them on the stage. Make sure they aren’t overlapping, or else they may collapse inside each other.

I’ve placed some walls at each end of my level, as well as a bunch of small structures that are protecting little yellow characters (kind of like the pigs in Angry Birds). In the image above, you can see I’ve already attached scripts to the destructible and indestructible objects. Let’s see what those scripts are made from.

Step 12: Scripting the destructible objects

Here’s what this destructible object script does:

• When created: Become affected by gravity, set drag, set new variable “my health” to 100, and tag me as “collidable”
• Constantly: If my health is smaller than 1, then set my vertical position to 1000 (this moves the object far away, effectively destroying them).
• When I am touched by something tagged as a slingshot: change my health by -25.
• When I am touched by something tagged as collidable: change my health by -10.

You can put this script together using the following blocks:

From the Events tab:

 

From the Arcade Physics tab:

From the Instances tab:

 

From the Logic tab:

 

From the Math tab:

From the Variables tab (once you create a New Variable, you can then grab the corresponding block for it from the Variables tab):

Remember, you can duplicate blocks or stacks of blocks by right-clicking on them and selecting “Duplicate”.

With all these blocks assembled, you should have an arrangement like this:

 

Save this script and return to the level editor. Make sure to attach this destructible object script to all of your objects that you want to become destructible.

Step 13: Add a tag to the Slingshot script

Since the destructible objects are scripted to check if an object tagged “slingshot” is touching them, we need to add the “slingshot” tag to our previous slingshot script. Click Edit on the slingshot script in the sidebar to open it up in the Script Editor. From the Instances tab, drag out the “add tag tag name to myself” block and snap it inside the “When created block”. Make sure to rename the tag to “slingshot”.

 

Then Save and return to the level editor.

Step 14: Scripting indestructible objects

All the other objects in your game that you want to be indestructible will need another script – but this one is very basic. All it needs is “When created” from the Events tab, and “Set immovable true” from the Arcade Physics tab (this block starts as “set reacts to gravity true” and can be changed by clicking the arrow inside it)

 

That is all this script needs, so Save it and return to the level editor. Then apply this indestructible script to all the objects you want to be indestructible. In my level, the walls and occasional barrier have been made indestructible.

Now Preview the game again. When you fling the slingshot object around, you should be able to destroy some of these objects now. Add more destructible objects to your level if you’d like to.

Step 15: Return the slingshot to a start position

The problem with our game so far is that you can only really fling the slingshot once, then it ends up stuck on the ground. So we’re going to add blocks to make the slingshot return to a start position. Here’s what we’ll add:

 

Here are the blocks needed:

Events tab:

 

Instances tab:

 

Arcade Physics tab:

 

The numbers for x position and y position will determine the return position for the slingshot when the player presses spacebar. You can figure out what these numbers should be by returning to the level editor (don’t forget to Save this script first!) and hovering the mouse where you want the return position to be. The x and y coordinates will be displayed above the Layers panel on the right.

 

Since my numbers are pretty much x 500 and y 152, I’ll set them as 500 and 150 in my script. Here’s how the finished script should look:

 

Almost finished! Remember to Save this and return to the level editor. Now when you Preview this game, you can fling the slingshot around, and then hit spacebar to return it for another go!

Step 16: Adding and scripting a background image

The finishing touch for this game is to give it some pretty background images. There are a few for us to grab from the Game Objects tab. Before we place them down, let’s make sure we create a New Layer and move the layer below the other layers by dragging it.

 

Now we can place our background images on this lower layer so that the images won’t hide the rest of the game objects. You can use the move tool to drag the images into a better position.

Finally, the Script we will attach to the background images should look like this:

 

The “When created” block is from the Events tab, and the “set any side collisions” block can be grabbed from the Arcade Physics tab.

Congratulations! You’ve made a game!