Tutoriel : Comment créer un jeu comme Angry Birds en Flash – Partie 3 – Création de l’oiseau le personnage

Introduction

Voici le troisième tutoriel pour apprendre à créer un jeu Flash comme Angry Birds avec un moteur physique.

Vous pouvez télécharger gratuitement les sources du tutoriel : https://benoitfreslon.com/wp-content/uploads/2013/04/How_to_create_a_game_like_angry_birds_part3.zip

Si vous avez raté le début du tutoriel c’est ici : https://benoitfreslon.com/fr/tutorial-how-to-create-a-game-like-angry-birds-with-box2d-world-construction-kit-flash-part-1

Introduction

Dans ce tutoriel nous allons créer le personnage : L’oiseau. Nous allons ajouter quelques interactions simples : Le tir et la réapparition de l’oiseau.

[swf:https://benoitfreslon.com/wp-content/uploads/2013/04/main1.swf 800 400]

Modifications

J’ai modifié un peu les paramètres du monde pour avoir des mouvements plus lents et plus fluides.

Cliquer sur le Clip de World sur la scène et modifier ces propriétés depuis le panneau de propriétés :

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

Création de l’oiseau

1. Insertion > Nouveau Symboler > Type : Clip
2. Nom : Bird
3. Cocher : Exporter pour ActionScript
4. Classe : Bird
5. Ok
6. Dessiner une cercle rouge au centre du clip.
7. Régler les dimensions via le panneau propriétés en 30×30.
8. Dessiner les ailles et le visage de l’oiseau comme ceci :

Ou télécharger ce sprite :

Super maintenant ajouter une instance de Bird dans le clip World :

1. Double cliquer sur le clip World dans la bibliothèque.
2. Faire glisser une instance de Bird dans le clip World.

Maintenant créer la classe ActionScript Bird :

1. Fichier > Nouveau > ActionScript 3.0 > Nom de classe : Bird > OK
2. Fichier > Enregistrer > Enregistrer le fichier dans le même dossier que le fichier main.fla

Enfin remplacer le code par celui-ci :

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;
		}
	}
}