How to make an "Angry Birds" style game in 9 events

Index

Stats

5,166 visits, 12,208 views

Translations

This tutorial hasn't been translated.

Tools

Hi everybody!

Welcome to my Beginner's tutorial, "How to make and 'Angry Birds' style game in 11 events"!

I did a little experimenting and found the best way to get a "bird" into the air, Angry Birds style.

Tip: Save your work regularly. :)

First, if you want to follow along exactly, you might want to save these pictures as files on your computer.

Block:

Bird:

Box:

Background:

The box is 32x32, the sandstone-like block is 16x16, the "bird" is 33x19, and the background is 544x544.

Setting up the layout

Start with a new empty project with the default settings.

Go to the Project settings and change the Window Size to 1000, 500.

Then change the Layout Size to the same size as the window.

Go to the Layers window, and make a 2 new layers, adding onto the default one. Rename them as follows:

Make the "Background" layer the active one by going to the Layout Properties, and changing the "Active Layer" to "Background".

Adding the Background

Let's add a background. Right-click somewhere on the canvas and select "Insert new object". Click Tiled Background, and in the "Name when inserted" box, type "Background". Click Insert.

Set the Position to 0, 0, and then set the size equal to the layout size, or 1000x500.

Double-click it and in the Image Editor, select "Load an image from a file". Insert the "bluesky" picture. Close the image editor.

Go to the "Layers" tab, and click the lock next to the Background layer. This will lock the layer so you will not accidentally select it when trying to select something else, which will save us from a lot of headaches later on... :)

Adding the ground

Let's add some ground to our game.

Make the "Main" layer the active layer.

Double-click somewhere on the canvas, and it will bring up the "Insert new object" dialogue.

Select "Tiled Background" and, in the "Name when inserted" area, type "Ground". Click Insert, then click anywhere on the canvas.

In the Image Editor, click "Load an image from a file". We'll use the "Block" image. Check the image size by clicking the "resize" button, and if it isn't 32x32, change it to that. Close the Image Editor.

In the "View" tab on the ribbon, check the "Snap to grid" box, and change the Grid Size to 8x8. If you want to, check the "Show grid" box, too.

Position the Ground in the lower left corner, it doesn't matter if it overlaps with the edge of the layout.

Change the length of it to 1000.

Add another one to put on the right side of the layout, and make it's length 72 and it's height 448.

It should now look like this:

Next, right-click Ground in the Objects tab and select Behaviors. Add a Physics behavior to it. In the Properties window, change "Immovable" to Yes.

Adding the slingshot

To add the slingshot, go to the Objects tab and right-click Ground and select Clone. In the projects tab you should now see an object called "Ground" and another object called "Ground2". Change the name of "Ground2" to "SlingshotBlock". Right-click it, select Behaviors, and remove the Physics behavior. Also, double-click it, and in the image editor, resize it to 16x16.

Close the Image Editor. and click and drag one into your layout from the projects tab.

Place and size it like so:

Ok. Now make a new sprite and name it "Slingshot". In the image editor, load the "block" file as the picture. Place it on top of the SlingshotBlocks.

You should now have a layout looking something like this:

Good. Everything is going exactly as planned. :)

Adding the Bird

The slingshot doesn't do much without anything to shoot out of it, so let's add the bird.

Add a new sprite, name it "Bird", load the file "bird" in the image editor, resize it to 66x38, add the Physics behavior, change the Physics Elasticity to 0.4 and the Physics Density to 0.5 in the Properties window, and place it so it is overlapping the Slingshot. Whew!

Your layout should now look like this:

Adding the tower

Let's add a tower to shoot our bird at.

Create a tiled background, name it box, and in the image editor, load the "box" image from the file, and resize it to 32x32. Add the Physics behavior to it, and change the Physics Density (in the properties window) to 0.5.

Make a tower of your choice. You'll want to make it sort of unstable...

There. Now let's add some events.

Game Events

Our game doesn't have any interactive parts without events. So let's add some.

In the Event Sheet, right-click anywhere, and select Add Global Variable. Name it "AimingBoolean", set the Type to Number, and the Initial Value to 1. This variable will be a boolean, so when you are aiming the bird, it will be 1 and when the bird is flying, it will be 0.

Make the following event:

On startup we need to increase the quality of the physics processing from 8 & 3 iterations to 12 & 8, otherwise sometimes the towers fall down by themselves. This can make the game run slower, but is necessary for it to be stable.

Oh. Another thing, we need to add another object. Go back to the layout, double-click on the canvas, and select "Touch".

Make these next events:

The second action for "Touch >> Is in touch" is "Bird >> Move at Angle".

What we are doing here is making it so that while you are aiming the bird with your mouse or with touch, it sets its angle to where your touch is relative to the Slingshot, but makes it so it is always touching the Slingshot with the end of the beak.

How do you make a sub-event? Right click to the left of the little gear of the "System", hover over "Add", and click "Add Sub-Event".

Ok. Next, make another sub-event of the "System >> AimingBoolean = 1" block.

Make it like so:

We're all done with this part! In the next tutorial, we will add a "Speedy Bird"... :D

  • 0 Comments

  • Order by
Want to leave a comment? Login or Register an account!