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 !

04:05 PM 04:05 PM04:05 PM
 

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:

  1. gravityY = 2
  2. timeStep = 0,04

Bird creation

Create a new symbol:

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

Capture d’écran 2013-04-22 à 11.45.57

You also can download my sprite:

bird

Great now add an instance of Bird in the World:

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

Capture d’écran 2013-04-22 à 11.47.47

Now create the Bird class file:

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

Capture d’écran 2013-04-17 à 11.48.31

Finally replace the code in the class by this one:

07:41 PM 07:41 PM07:41 PM
 

Requierements

See the previous tutorial about how to install the TweenMax libraries in Flash IDE.

Usage

Tweens

We will try to test some tweens and easing  only with TweenMax to make this animation:

Click on Insert > New symbol

  1. Type: MovieClip
  2. Enter the name: Apple
  3. Check: Export for ActionScript
  4. Enter the classname: Apple
  5. Then click OK

new_symbol

Enter in the Apple symbol from your library:

library

Then draw an beautiful apple :).

Let’s the origin in the center of this image

apple

Click on the “Stage” from the navigator on the top.

stage

Now you are in an empty main stage.

Hit the right click from the frame on the timeline and select : Actions to open the Actions pannel.

timeline

Then just add this line in the Actions pannel.

If the library is correctly added in your Flash animation. Flash will autocomplete the package like this:

import

The TweenMax.to method can interpolate a tween with any properties.

For example this line can move an object to x and y coordinates.

Now add this lines of code:

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 !

12:21 PM 12:21 PM12:21 PM
 

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)

Capture d’écran 2013-03-15 à 00.09.05

  • 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.

02:46 PM 02:46 PM02:46 PM
 

I will show you how to hide the mouse cursor and how to replace it by another image.

It’s really simple but you need one at least one MovieClip.

You also can download the source file: Hide_mouse_cursor_and_custom_cursor.fla.

  • Create a new ActionScript 3 file.
  • Insert > New Symbol > MovieClip > name: CustomCursor > Ok.
  • Customize your cursor and set the origin on the top of the cursor.
  • Back to your main stage.
  • Add a CustomCursor MovieClip in the stage.
  • Set the instance name in the MovieClip property: Click on the CustomCursor instance > Properties pannel > Set instance name: cursor
  • Open the Actions pannel and start to code.

That’s all :).

11:29 AM 11:29 AM11:29 AM
 

In this tip I will show you how to move an object with keyboard with absolute controls.

See also how to move an object with keyboard relative-camera control.

What is the absolute controls?

The direction of your object will be calculated depending the object orientation. (Biohazard, Micro Machines, Gears of War). This code is very usefull if you design a car game.

How to make an absolute control in Flash?

  • Get the arrow key status (key is up/key is down);
  • Move or rotate the object on enter frame with the new velocity (Left and Right keys: rotate, Up key: forward, Down key: backward);

Download source: www.benoitfreslon.com_Move_an_object_with_keyboard_with_absolute_controls

05:06 PM 05:06 PM05:06 PM
 

In my first tutorial I will show you how to make a flash game like Jetman.

A simple very famous casual game on facebook and very addictive.

Play Jetman

1. First of all you have to download the Adobe Flash IDE: Adobe Flash CS3 or Adobe Flash CS4

We will code the game with ActionScript 3.0 (the programming language of Flash) so you need Adobe Flash CS3 at least.
You can download the free trial version of Adobe Flash here (Mac or Windows) : https://www.adobe.com/cfusion/tdrc/index.cfm?loc=en&product=flash

2. Create your document

  • Open Flash.
  • Create a new ActionScript 3.0 document.
  • On the properties set the framerate to 25fps.
  • And set the background color to black.

3. Create Jetman MovieClip

Flash uses graphic objects called MovieClip. So we have to create the Jetman’s MovieClip.

  • Click on the Rectangle tool on the tools bar. (on the left)

create_box

  • Then drag and drop on the stage to create a rectangle about width:50px and height:15px (you can modify your shape dimentions later).
  • Select all your shape including the border. You can also use a double click.
  • Do a right click on your selected shape and click on Convert to Symbol.
  • Write this symbol’s name : Jetman (not jetman or JETMAN).
  • Then click OK.

Now you can see your Symbol Jetman into your Library  (on the right). If you don’t see the Library Press F11 key.
You have 1 instance of the Jetman symbol on your stage. Good. We just created a MovieClip.

In order to interact with the jetman MovieClip with ActionScript, we have the rename the instance’s name on the stage.

  • Click on the Jetman’s instance on the stage.

instance

  • Then go to the properties on the bottom and set the instance’s name to jetman (not Jetman or JETMAN) it’s very important.

instance_name

It’s done! Now we can move the instance with ActionScript.

4. Starting to code

You have differents ways to code with ActionScript. We will use the easier. (Coding into layers)

  • Create a new layer on the timeline (Click on the button on the left bottom corner).
  • Put the layer on the top: drag and drop the layer.
  • You can rename the layer with a double click or Right Click then rename.
  • Then select the first frame (here in black).

layer

  • Finally go to the windows menu > Actions or press the F9 key.

A new windows is opening : The Actions window. We will to write all our code here.

  • Copy and paste this Actionscript 3 code (After codinf into your layer you should see a little a into this frame):

  • Finally test your game. (hit CTRL+ENTER)

You should see that:

Download the source file here:

[www.thisisgameplay.com]_Jetman_step1.fla

Download the compiled file here:

[www.thisisgameplay.com]_Jetman_step1.swf

Next step the level design… ;)

http://photos-g.ak.fbcdn.net/photos-ak-sf2p/v43/106/4243149646/app_1_4243149646_252.gif