Tutorial: How to create a game like Angry Birds in Flash – Part 4 – Create the pigs and the collision detection

Sunday April 28th, 2013Monday September 5th, 2016 by Benoit Freslon

Part 4 – Create the pigs and the collision detection

Introduction

Here the 4th tutorial to learn how to create a physic based game like Angry Birds in Flash.

You can download the complete sources here: How_to_create_a_game_like_angry_birds_part4.zip

If you missed the first tutorial you can find it here: http://www.benoitfreslon.com/fr/tutorial-how-to-create-a-game-like-angry-birds-with-box2d-world-construction-kit-flash-part-1

In this tutorial we will create the the ennemies: the Pigs. We will detect the collision to destroy it.

Create the Pig character

Create the Pig MovieClip:

Insert > New Symbol
Name: Pig
Type: MovieClip
Check export for ActionScript
Class: Pig
OK

Draw a beautiful green pig like this with this dimensions: 30×30

Or get my sprite:

The Pig class

Create the Pig class.

New > File > ActionSript 3.0 class
Class name: Pig

Copy and paste this code:

package {
	import flash.events.Event;
	import flash.utils.*;
	import flash.geom.*;
	import Box2DAS.*;
	import Box2DAS.Collision.*;
	import Box2DAS.Collision.Shapes.*;
	import Box2DAS.Common.*;
	import Box2DAS.Dynamics.*;
	import Box2DAS.Dynamics.Contacts.*;
	import Box2DAS.Dynamics.Joints.*;
	import cmodule.Box2D.*;
	import wck.*;
	import shapes.*;
	import misc.*;
	import extras.*;
	public class Pig extends Circle {

		/** Constructor method, called when the bird instance is created */
		public function Pig() {
			// constructor code
			super();
		}

		/** Called when the pig is added to stage by box2d */
		override public function create():void {
			trace("pig created");
			// Physic properties
			density = 10;
			friction = 1;
			type = "Dynamic";
			reportBeginContact = true;
			reportEndContact = true;
			reportPostSolve = true;
			reportPreSolve = true;
			allowDragging = false;
			super.create();

			// Start the collision detection in 1000ms.
			// Sometimes the collision is detected at start so I delayed the collection detection
			setTimeout(initCollision, 1000);
		}
		private function initCollision():void {
			// Init the collision handler
			listenWhileVisible(this, ContactEvent.POST_SOLVE, postSolveContactHandler, false, 0, true);
		}
		/** Set the physic shapes and the size */
		override public function shapes():void {
			// 15 px of raduis
			circle(15);
		}
		/** Method called when this physic object collides */
		private function postSolveContactHandler(e:ContactEvent):void 
		{
			// Get the impulse the contact
			var impulse:b2ContactImpulse = e.impulses
			// Get the normal lenght of the contact
			var normalLength:Number = Math.sqrt((impulse.normalImpulse1 * impulse.normalImpulse1) + (impulse.normalImpulse2 * impulse.normalImpulse2));
			trace("normalLength", normalLength);
			// Check if the contact is strong
			if (normalLength &gt; 1) {
				// Remove the pig
				remove();
				return;
			}
		}
	}
}

package {

import flash.events.Event;

import flash.utils.*;

import flash.geom.*;

import Box2DAS.*;

import Box2DAS.Collision.*;

import Box2DAS.Collision.Shapes.*;

import Box2DAS.Common.*;

import Box2DAS.Dynamics.*;

import Box2DAS.Dynamics.Contacts.*;

import Box2DAS.Dynamics.Joints.*;

import cmodule.Box2D.*;

import wck.*;

import shapes.*;

import misc.*;

import extras.*;

public class Pig extends Circle {

/** Constructor method, called when the bird instance is created */

public function Pig() {

// constructor code

super();

}

/** Called when the pig is added to stage by box2d */

override public function create():void {

trace("pig created");

// Physic properties

density = 10;

friction = 1;

type = "Dynamic";

reportBeginContact = true;

reportEndContact = true;

reportPostSolve = true;

reportPreSolve = true;

allowDragging = false;

super.create();

// Start the collision detection in 1000ms.

// Sometimes the collision is detected at start so I delayed the collection detection

setTimeout(initCollision, 1000);

}

private function initCollision():void {

// Init the collision handler

listenWhileVisible(this, ContactEvent.POST_SOLVE, postSolveContactHandler, false, 0, true);

}

/** Set the physic shapes and the size */

override public function shapes():void {

// 15 px of raduis

circle(15);

}

/** Method called when this physic object collides */

private function postSolveContactHandler(e:ContactEvent):void

{

// Get the impulse the contact

var impulse:b2ContactImpulse = e.impulses

// Get the normal lenght of the contact

var normalLength:Number = Math.sqrt((impulse.normalImpulse1 * impulse.normalImpulse1) + (impulse.normalImpulse2 * impulse.normalImpulse2));

trace("normalLength", normalLength);

// Check if the contact is strong

if (normalLength > 1) {

// Remove the pig

remove();

return;

}

Finally add pigs in the World MovieClip like this:

And test your level.

The tutorial is over. If you want more features and more tutorials about the Angry birds engine please post a comment :).

Have fun !

Tutorial: How to create a game like Angry Birds in Flash – Part 3 – Create the angry bird character

Monday April 22nd, 2013Monday September 5th, 2016 by Benoit Freslon

Part 3 – Create the angry bird character

Introduction

Here the third tutorial to learn how to create a physic based game like Angry Birds in Flash.

You can download the complete sources here: http://www.benoitfreslon.com/wp-content/uploads/2013/04/How_to_create_a_game_like_angry_birds_part3.zip

If you missed the first tutorial you can find it here: http://www.benoitfreslon.com/fr/tutorial-how-to-create-a-game-like-angry-birds-with-box2d-world-construction-kit-flash-part-1

In this tutorial we will create the Bird character. We will add some very simple interactions like: shooting, repositioning.

Modifications

I modified the world settings in order to have a smooth moving.

Click on the World MovieClip in the stage and set this properties:

gravityY = 2
timeStep = 0,04

Bird creation

Create a new symbol:

Insert > New Symbol > Type: MovieClip
Name: Bird
Check: Export for ActionScript
Class: Bird
Ok
Draw a red circle in the center of the MovieClip
Set the size to 30×30 from the properties panel.
Draw the bird face and the wings like this

You also can download my sprite:

Great now add an instance of Bird in the World:

Double click in the World MovieClip in the library
Drag and drop the Bird instance in the World MovieClip

Now create the Bird class file:

File > New > ActionScript 3.0 Class > Class name: Bird > OK
File > Save as > Save the file in the same folder of the main.fla file

Finally replace the code in the class by this one:

package {
	import flash.events.Event;
	import flash.utils.*;
	import flash.geom.*;
	import Box2DAS.*;
	import Box2DAS.Collision.*;
	import Box2DAS.Collision.Shapes.*;
	import Box2DAS.Common.*;
	import Box2DAS.Dynamics.*;
	import Box2DAS.Dynamics.Contacts.*;
	import Box2DAS.Dynamics.Joints.*;
	import cmodule.Box2D.*;
	import wck.*;
	import shapes.*;
	import misc.*;
	import extras.*;
	public class Bird extends Circle {
		/** State of the bird. preparing, shooting */
		public var state:String;
		/** Check if the player press the button to shoot */
		private var willShoot:Boolean = false;
		/** Check if the player press the button to reset the bird position */
		private var willReset:Boolean = false;
		/** Power of the shoot */
		private var power:Number = 0;
		/** Get the angle in radians between the mouse cursor and the bird */
		private var angleRadian:Number = 0;
		/** Init x position of the bird */
		private var initX:Number = 0;
		/** Init t position of the bird */
		private var initY:Number = 0;

		/** Constructor method, called when the bird instance is created */
		public function Bird() {
			// constructor code

		}
		/** Called when the bird is added to stage by box2d */
		override public function create():void {

			// Init position
			initX = x;
			initY = y;

			trace("create");

			// Physic properties
			density = 10;
			friction = 1;
			reportBeginContact = true;
			reportEndContact = true;
			reportPostSolve = true;
			reportPreSolve = true;
			allowDragging = false;
			super.create();

			// Reset the bird at the begining
			reset();

			// Add a loop, called 30 times per second
			listenWhileVisible(world,StepEvent.STEP, step,false, 0);
			trace("create end");
		}
		/** Set the physic shapes and the size */
		override public function shapes():void {
			// 15 px of raduis
			circle(15);
		}
		/** Reset the bird */
		private function reset():void {
			trace("reset");
			// In order to move the body physic shapes we have to set the type to Animated
			type = "Animated";
			// Set the init position
			x = initX;
			y = initY;
			rotation = 0;
			// State when the bird is ready to be shooted
			state = "preparing";
			// Reset booleans
			willReset = false;
			willShoot = false;
		}
		/** Loop method */
		public function step(e:Event):void {
			// If the bird is ready to be shooted and the player press the mouse button
			if (state == "preparing" &amp;&amp; Input.mouseIsDown) {
				// Mouse down
				trace("mouse is down");
				prepareShoot();

			} else if (state == "preparing" &amp;&amp; !Input.mouseIsDown &amp;&amp; willShoot) {
				// If the player release the button when the bird is ready to be shooted
				shoot();
			} else if (Input.mouseIsDown &amp;&amp; state == "shooting") {
				// If the bird is shooted and the player press the mouse button
				willReset = true;
			} else if (!Input.mouseIsDown &amp;&amp; willReset) {
				// If the bird is shooted and the player release the mouse button
				reset();
			}
		}
		/** Prepare to shoort method */
		private function shoot():void {
			trace("shoot power:", power);
			// The bird will be moved by the physic engine with type: Dynamic
			type = "Dynamic";
			// Get the impulse force
			var powerX:Number =  - power * Math.cos(angleRadian);
			var powerY:Number =  - power * Math.sin(angleRadian);
			// Aplly the impulse force
			b2body.ApplyImpulse(new V2(powerX, powerY), b2body.GetWorldCenter());
			// Switch state to shooting
			state = "shooting";
		}
		/** Prepare to shoot method */
		private function prepareShoot():void {
			// Get the mouse position in the world MovieClip
			var mouse:Point = Input.mousePositionIn(world);
			// Get the distance between the mouse and the bird
			var distanceMouse:Number = Point.distance(mouse,new Point(x,y));
			// Limit the distance to 150px in order to limit the impulse force
			if (distanceMouse &gt; 150) {
				distanceMouse = 150;
			}
			// Set the boolean willShoot to true
			willShoot = true;

			// Convert distanceMouse to impulse force
			power = distanceMouse / 13;

			// Get the radians angle between the mouse and the bird
			angleRadian = Math.atan2(mouse.y - y,mouse.x - x);
			// Orient the sprite to the shoot direction
			rotation = angleRadian * 180 / Math.PI + 180;
		}
	}
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

package {

import flash.events.Event;

import flash.utils.*;

import flash.geom.*;

import Box2DAS.*;

import Box2DAS.Collision.*;

import Box2DAS.Collision.Shapes.*;

import Box2DAS.Common.*;

import Box2DAS.Dynamics.*;

import Box2DAS.Dynamics.Contacts.*;

import Box2DAS.Dynamics.Joints.*;

import cmodule.Box2D.*;

import wck.*;

import shapes.*;

import misc.*;

import extras.*;

public class Bird extends Circle {

/** State of the bird. preparing, shooting */

public var state:String;

/** Check if the player press the button to shoot */

private var willShoot:Boolean = false;

/** Check if the player press the button to reset the bird position */

private var willReset:Boolean = false;

/** Power of the shoot */

private var power:Number = 0;

/** Get the angle in radians between the mouse cursor and the bird */

private var angleRadian:Number = 0;

/** Init x position of the bird */

private var initX:Number = 0;

/** Init t position of the bird */

private var initY:Number = 0;

/** Constructor method, called when the bird instance is created */

public function Bird() {

// constructor code

}

/** Called when the bird is added to stage by box2d */

override public function create():void {

// Init position

initX = x;

initY = y;

trace("create");

// Physic properties

density = 10;

friction = 1;

reportBeginContact = true;

reportEndContact = true;

reportPostSolve = true;

reportPreSolve = true;

allowDragging = false;

super.create();

// Reset the bird at the begining

reset();

// Add a loop, called 30 times per second

listenWhileVisible(world,StepEvent.STEP, step,false, 0);

trace("create end");

}

/** Set the physic shapes and the size */

override public function shapes():void {

// 15 px of raduis

circle(15);

}

/** Reset the bird */

private function reset():void {

trace("reset");

// In order to move the body physic shapes we have to set the type to Animated

type = "Animated";

// Set the init position

x = initX;

y = initY;

rotation = 0;

// State when the bird is ready to be shooted

state = "preparing";

// Reset booleans

willReset = false;

willShoot = false;

}

/** Loop method */

public function step(e:Event):void {

// If the bird is ready to be shooted and the player press the mouse button

if (state == "preparing" && Input.mouseIsDown) {

// Mouse down

trace("mouse is down");

prepareShoot();

} else if (state == "preparing" && !Input.mouseIsDown && willShoot) {

// If the player release the button when the bird is ready to be shooted

shoot();

} else if (Input.mouseIsDown && state == "shooting") {

// If the bird is shooted and the player press the mouse button

willReset = true;

} else if (!Input.mouseIsDown && willReset) {

// If the bird is shooted and the player release the mouse button

reset();

}

/** Prepare to shoort method */

private function shoot():void {

trace("shoot power:", power);

// The bird will be moved by the physic engine with type: Dynamic

type = "Dynamic";

// Get the impulse force

var powerX:Number = - power * Math.cos(angleRadian);

var powerY:Number = - power * Math.sin(angleRadian);

// Aplly the impulse force

b2body.ApplyImpulse(new V2(powerX, powerY), b2body.GetWorldCenter());

// Switch state to shooting

state = "shooting";

}

/** Prepare to shoot method */

private function prepareShoot():void {

// Get the mouse position in the world MovieClip

var mouse:Point = Input.mousePositionIn(world);

// Get the distance between the mouse and the bird

var distanceMouse:Number = Point.distance(mouse,new Point(x,y));

// Limit the distance to 150px in order to limit the impulse force

if (distanceMouse > 150) {

distanceMouse = 150;

}

// Set the boolean willShoot to true

willShoot = true;

// Convert distanceMouse to impulse force

power = distanceMouse / 13;

// Get the radians angle between the mouse and the bird

angleRadian = Math.atan2(mouse.y - y,mouse.x - x);

// Orient the sprite to the shoot direction

rotation = angleRadian * 180 / Math.PI + 180;

}

Tutorial: How to create a game like Angry Birds in Flash with Box2d- Part 2 – Create the world

Monday April 1st, 2013Monday September 5th, 2016 by Benoit Freslon

Part 2 – Create the world with Box2D

Instroduction

Here the second tutorial to learn how to create a physic based game like Angry Birds in Flash.

You can download the complete sources here: How_to_create_a_game_like_angry_birds_part2.zip

If you missed the first tutorial you can find it here: http://www.benoitfreslon.com/fr/tutorial-how-to-create-a-game-like-angry-birds-with-box2d-world-construction-kit-flash-part-1

In this tutorial I will show you how to create an object like an indestructible metal board.
We will use this object in a simple level with a simple structure.

Stage modification

From the Properties pannel, modify the width of the stage to 800px.

Floor creation

Let’s start to create the floor MovieClip.

Insert > New Symbol > Name: Floor > Type: MovieClip > Export for ActionScript > Class: Floor > Base Class: shapes.Box > OK

Now draw a simple green square.

NB: The World Construction Kit engine always uses the center of the object as a gravity center.

Always center the shape with the Align pannel:

Now click on the “Scene 1” to go back on the main stage then double click on the World MovieClip to get inside.

You must construct your level into the World MoieClip only.

From your library drag and drop an instance of Floor in the stage:

Then scale the floor box to make a beautiful floor with the Free tool transform from the toolbar on the left.

Delete the old grey floor and use the new one. Place the floor in the bottom like this:

To set all physic parameters you have 2 solutions. By using ActionScript code (later) or using the Flash component properties.

Let’s define a Flash component on the Floor object.

From the library > Select the Floor MovieClip > Right click > Define component

Class: wck.BodyShape > OK.

Now you can see the component properties if you click on the Floor instance in the stage. Look at the component parameters in the properties pannel.

Use this settings:

Create a dynamic board

We will create an iron board.

Insert > New Symbol > Name: IronPlate > Type: MovieClip > Export for ActionScript > Class: IronPlate > Base class: shapes.Box > OK

Draw a grey board: width:200px and height: 10px. Then center the shape like this:

We will set the same settings to all boards in the game with only one class.

We this method you can win a lot of time and you don’t have to set one by one. Otherwise it’s pain in the ass.

That’s why we have to create the IronPlate class.

File > New > AcitonScript 3.0 Class > Class name: IronPlate > OK

Then > File > Save as > IronPlate.as (in the same folder as the .fla folder).

Copy and paste this code in the IronPlate.as file to define a generic behavior for all metal boards.

package  {

	import shapes.Box

	public class IronPlate extends Box {

		public function IronPlate() {
			// constructor code
		}
		override public function create():void {
			super.create();
			//trace("iron plate created");
			this.type = "Dynamic";
			this.friction = 0.2;
			this.density = 1;
			this.restitution = 0;
			this.isGround = true;
			this.allowDragging = false;
			this.reportBeginContact = true;
			this.reportEndContact = true;
			this.reportPostSolve = true;
			this.reportPreSolve = true;

		}
	}

}

package {

import shapes.Box

public class IronPlate extends Box {

public function IronPlate() {

// constructor code

}

override public function create():void {

super.create();

//trace("iron plate created");

this.type = "Dynamic";

this.friction = 0.2;

this.density = 1;

this.restitution = 0;

this.isGround = true;

this.allowDragging = false;

this.reportBeginContact = true;

this.reportEndContact = true;

this.reportPostSolve = true;

this.reportPreSolve = true;

}

Finally add several IronPlate instances into the World MovieClip on the stage.

Build a simple structure like this to test the game. I reuse the grey box to destroy my test structure.

Test the animation > CTRL + Enter

If you have several mistakes or if the boards are static check if IronPlates MovieClip are in the Wolrd MovieClip.

Scene > World > IronPlates

See you !

Tutorial: How to create a game like Angry Birds with box2D, World Construction Kit and Flash – Part 1

Friday March 15th, 2013Wednesday November 16th, 2016 by Benoit Freslon

Part1 – Box2D installation with WCK installation in Flash

I decided to write a tutorial every friday. :)

Introduction

Today I will show you how to make a game like Angry Birds with a physics engine with Flash.

The famous Physics engine is named Box2D. 95% of 2D games with physic use this engine. (Angry Birds, Limbo, Bad piggies, etc.).
The original engine is written in C++ language. Look at the Box2D C++ website. But this engine was ported in ActionScript 3.0 his codename is box2DFlash.

Box2DFlash

Box2DFlash is a powerful engine but it’s very difficult to use if you are not a good programmer or if you don’t have a level editor to create your levels with a WYSIWYG layout.
That’s why I suggest to use the World Construction Kit framework.

World Construction Kit

See the Wolrd Construction Kit Framework website: http://www.sideroller.com/wck/

Summary: World Construction Kit is is a toolset / framework for rapidly developing physics based games / websites within the Flash IDE. WCK allows you to layout your 2d worlds / game levels entirely within Flash and have them hook into the physics simulation without writing any code

Installation

Downloads and install: Adobe Flash Pro
Download the WCK from github: https://github.com/jesses/wck (Download the Zip if you don’t have a git client)

Extract the WCK zip content in a folder.
Open the BlankProject/main.fla from the folder you just extract.
The Box2D engine and the WCK framework are ready to use!
Test the animation hit CTRL+Enter or CMD+Enter with OS X.
You should see this

In the next tutorial I will show you how to construct a basic level with box2D Flash and WCK.