10:14 PM 10:14 PM10:14 PM
 

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:

  1. Insert > New Symbol
  2. Name: Pig
  3. Type: MovieClip
  4. Check export for ActionScript
  5. Class: Pig
  6. OK

Capture d’écran 2013-04-28 à 22.25.04

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

Capture d’écran 2013-04-28 à 22.25.21

Or get my sprite:

pig

The Pig class

Create the Pig class.

  1. New > File > ActionSript 3.0 class
  2. Class name: Pig

Copy and paste this code:

Finally add pigs in the World MovieClip like this:

Capture d’écran 2013-04-28 à 23.32.12

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 !

11:59 PM 11:59 PM11:59 PM
 

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.

Capture d’écran 2013-04-01 à 20.27.19

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

Capture d’écran 2013-04-01 à 21.12.18

Now draw a simple green square.

Capture d’écran 2013-04-01 à 20.31.51

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:

Capture d’écran 2013-04-01 à 20.32.03

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:

Capture d’écran 2013-04-01 à 20.33.33

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:

Capture d’écran 2013-04-01 à 20.34.35

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

Capture d’écran 2013-04-01 à 20.39.14

Class: wck.BodyShape > OK.

Capture d’écran 2013-04-01 à 20.41.06

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:

Capture d’écran 2013-04-01 à 20.44.23

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

Capture d’écran 2013-04-01 à 20.45.08

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

Capture d’écran 2013-04-01 à 20.45.41

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

Capture d’écran 2013-04-01 à 20.46.39

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

Capture d’écran 2013-04-01 à 20.47.05

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

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.

Capture d’écran 2013-04-01 à 20.54.20

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 !

02:48 PM 02:48 PM02:48 PM
 

Hello everyone!

I’m working on a new Flash based game with physic engine and original gameplay.
The game is still under development but you are welcome to playtest the beta version.

To play the game click here and type the password: beta

Post your comments and report bugs with the google form at the bottom of the page.
I hope you will enjoy this “new approach”!

Have fun ! ;).

02:21 PM 02:21 PM02:21 PM
 

In this little tutorial you will learn how to create a gravity like a Mario platformer.

Let’s start!

Get files

  • Save these 2 sprites (Right click > Save as)

  • Open Flash and create a new ActionScript 3.0 document.
  • Document properties: 24 fps, 550×400 by default.

Create the Hero MovieClip

  • Create a new Symbol: Insert > New symbol > MovieClip
  • Symbol name: Hero
  • Check Export for ActionScript
  • And Click OK

  • Now you are in you Hero symbol! Perfect!
  • Import the first sprite: mario_stand.png on the first frame:
  • File > Import > Import to stage > mario_stand.png
  • Set the sprite just on the top of the little black cross (pivot point)
  • Now create an empty keyframe on the timeline:
  • Timeline > 2nd frame on the timeline > Right Click > Create empty Keyframe
  • Import the second sprite: mario_jump.jpg on the second keyframe
  • Then create a new layer on the top and set 2 labels names
  • Insert > Timeline > New layer
  • And add 2 labels names:
  • On the timeline click on the first key frame with the mario_stand.png sprite and go to the Properties pannel > Label > Name > stand
  • On the timeline click on the second key frame with the mario_jump.png sprite and go to the Properties pannel > Label > Name > jump

Add the jump script

  • Back to the main scene: Click on the Scene 1
  • Add a new layer named “Actions”: Insert > Timeline > New layer
  • And open the Actions pannel: Timeline > Actions Layer > Keyframe > Right click > Actions
  • Finally copy and paste this code:

Download sources: www.benoitfreslon.com_Create_gravity_like_a_mario_plateformer