Box2DFlashAS3 est un portage AS3 d’un __moteur physique__ développé en C++ par Erin Catto’s Box2D ).

Les exemples sont impressionnants !!!

Autres articles sur le même sujet

• Les frameworks AS3 qui vont bien !
• APE : mise en pratique
• Alternativa3D : un petit nouveau dans le monde de la 3D Flash
• MdaME, ma résolution 2011 de génération de code AS3

Cela fait longtemps qu’un petit test d’APE, le moteur physique AS3, traîne sur mon ordi : c’est le moment d’en faire un petit tuto. Depuis le temps que Erick me le demande !

Récupération du framework et création du projet

• Dans un premier temps, récupérez le framework APE. A cette adresse vous pouvez le télécharger en version archive.

Attention : le code source donné via le repository, et la doc associée ne correspondent pas. Le SVN sert uniquement de dépôt pour les futures versions. A récupérer via le SVN si vous êtes vraiment un foufou des frameworks !

• Créez un nouveau projet ActionScript, nommé APE.
• Clic droit sur le projet, et dans les propriétés, allez dans « ActionScript Build Path », et ajoutez le chemin vers APE (pointez sur le répertoire « source »). APE est maintenant disponible.

Un peu de code !

• Import des classes

Nous allons donc commencer par importer les classes nécessaires. Nous aurons besoin de APE dans son ensemble, ainsi que la classe Event et KeyboardEvent :

package
{
     import org.cove.ape.*;
     import flash.display.Sprite;
     import flash.events.Event;
     import flash.events.KeyboardEvent;

     [SWF(width="1000", height="1000")]
     public class APE extends Sprite
     {
          public function APE()
         {
         }
     }
}

• Implémentation du moteur

Placez vous dans le constructeur et déclarez le moteur comme suit (tout est dans le commentaire !) :

public function APE()
{
     // On boust un brin le framerate de l'appli
     stage.frameRate = 60;
     // le paramètre donne la vitesse d'execution du moteur.
     //    La classe APEngine préconise 1/3 ou 1/4...
     //    fesons ce qu'on nous dis !
     APEngine.init(1/4);
     // Définition du conteneur du moteur : ici this
     APEngine.container = this;
     // Ajout du vecteur de gravité global au moteur.
     //    ici : force de 3 vers le bas.
     //    Vous pouvez aussi essayer d'autre valeur de vecteur
     APEngine.addMasslessForce(new Vector(0,3));
}

• Création du monde

Maintenant nous allons créer un « monde physique ». Toujours dans le constructeur, nous allons créer 3 objets avec des composantes d’élasticité, et 5 objets standards (toujours dans le constructeur) :

// Création du groupe référencant les particules et contrraintes
//    le paramètre true indique que ce groupe contient des particules et contraintes
//    dépendantes les une des autres
//    (en gros que les plaques seront le sol de la bébête)
var g:Group = new Group(true); 

// -OBJET ELASTIQUE ------------------------------------------
// Création de la plaque Elastique 1
//     les paramètres donnent la position x et y,
//     la taille width et height,
//     la rotation de l'élément,
//     et si l'objet est fixe ou non
var plElastic1:RectangleParticle = new RectangleParticle(720, 400, 50, 5, 0,true);
// Elasticité de la plaque
plElastic1.elasticity = 2;
// Style de la plaque
plElastic1.setStyle(0, 0x6699aa, 1, 0x996633);
// Ajout de la plaque dans le groupe
g.addParticle(plElastic1); 

// idem pour la plaque 2
var plElastic2:RectangleParticle = new RectangleParticle(745, 300, 5, 200, 0,true);
plElastic2.elasticity = 1;
plElastic2.setStyle(0, 0x6699aa, 1, 0x996633);
g.addParticle(plElastic2); 

// idem pour la plaque 3
var plElastic3:RectangleParticle = new RectangleParticle(80, 360, 100, 5, 45,true);
plElastic3.elasticity = 2;
plElastic3.setStyle(0, 0x6699aa, 1, 0x996633);
g.addParticle(plElastic3); 

// -OBJET STANDARD ------------------------------------------
// idem que précédent sans propriété particulière
var plStd1:RectangleParticle = new RectangleParticle(400, 400, 600, 5, 0,true);
g.addParticle(plStd1); 

var plStd2:RectangleParticle = new RectangleParticle(55, 220, 5, 200, 0,true);
g.addParticle(plStd2); 

var plStd3:RectangleParticle = new RectangleParticle(350, 200, 300, 5, 0,true);
g.addParticle(plStd3); 

var plStd4:RectangleParticle = new RectangleParticle(450, 300, 350, 5, 0,true);
g.addParticle(plStd4); 

var plStd5:RectangleParticle = new RectangleParticle(550, 100, 350, 5, 0,true);
g.addParticle(plStd5);

Vous pouvez jouer avec plein d’autres propriétés pour ces objets : mass, friction, … A vous de tester tout ça !

• Création de la bébête

Bon le plus marrant ! La bébête à roulette. Alors là on peut se lâcher complet ! … bon pas trop quand même pour le tuto, je vous laisse le soin de vous amuser. On va créer une bestiole à 4 roues.

Dans un premier temps, on va déclarer les « roues » au niveau de la classe : elle devront être accessibles à l’ensemble des méthodes pour la suite du tuto :

[SWF(width="1000", height="1000")]
public class APE extends Sprite
{
     private var wheelParticleA:WheelParticle;
     private var wheelParticleB:WheelParticle;
     private var wheelParticleC:WheelParticle;
     private var wheelParticleD:WheelParticle;
     public function APE()
     {
          // …

La création en elle-même :

// Création de la particule Roue A
//     les paramètres donnent la position x et y,
//     le rayon,
//     et si l'objet est fixe ou non,
//     et on peu lui ajouter des propriétés (ici une masse = 2)
wheelParticleA = new WheelParticle(140,10,14,false, 2);
g.addParticle(wheelParticleA); 

// idem pour la roue B
wheelParticleB = new WheelParticle(180,10,14,false, 2);
g.addParticle(wheelParticleB); 

// idem pour la roue C
wheelParticleC = new WheelParticle(180,50,14,false, 2);
g.addParticle(wheelParticleC); 

// idem pour la roue D
wheelParticleD = new WheelParticle(140,50,14,false, 2);
g.addParticle(wheelParticleD); 

// création des connecteurs entre les roues
//     les paramètres : les 2 objets à connecter,
//     le dureté de la connection,
//     et si l'objet est coller ou non,
//     la taille de la connection
var wheelConnector1:SpringConstraint = new SpringConstraint(wheelParticleA,
     wheelParticleB, 0.5, true, 8);
var wheelConnector2:SpringConstraint = new SpringConstraint(wheelParticleB,
     wheelParticleC, 0.5, true, 8);
var wheelConnector3:SpringConstraint = new SpringConstraint(wheelParticleC,
     wheelParticleD, 0.5, true, 8);
var wheelConnector4:SpringConstraint = new SpringConstraint(wheelParticleD,
     wheelParticleA, 0.5, true, 8); 

// Ajout des connecteurs au groupe
g.addConstraint(wheelConnector1);
g.addConstraint(wheelConnector2);
g.addConstraint(wheelConnector3);
g.addConstraint(wheelConnector4); 

// Ajout du groupe au moteur de rendu
APEngine.addGroup(g);

Voila pour la bébête !

• La routine RUN

Nous allons maintenant créer la routine EnterFrame qui va mettre à jour tout ça dans le temps :

private function run(evt:Event):void {
// on demande au moteur de faire son boulot ...
APEngine.step();
// ... et on affiche le résultat
APEngine.paint();
}

Il faut aussi ajouter dans le constructeur le lancement de l’évènement EnterFrame :

addEventListener(Event.ENTER_FRAME, run);

• Ajout de la couche d’interactivité

Plus qu’à faire bouger le biniou ! Pour cela, on ajoute 2 évènements Clavier KEY_DOWN et KEY_UP avec leurs méthodes associées :

stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDownHandler);
stage.addEventListener(KeyboardEvent.KEY_UP, keyUpHandler);

Et les méthodes :

 // Quand l'utilisateur presse une touche ...
private function keyDownHandler(keyEvt:KeyboardEvent):void {
     var keySpeed:Number = 0.4;
     // Quand l'utilisateur presse la touche gauche : on change la vitesse angulaire des roues
     if (keyEvt.keyCode == 37) {
          wheelParticleA.angularVelocity = -keySpeed;
          wheelParticleB.angularVelocity = -keySpeed;
          wheelParticleC.angularVelocity = -keySpeed;
          wheelParticleD.angularVelocity = -keySpeed;
     }
     // idem pour la touche droite
     else if (keyEvt.keyCode == 39) {
          wheelParticleA.angularVelocity = keySpeed;
          wheelParticleB.angularVelocity = keySpeed;
          wheelParticleC.angularVelocity = keySpeed;
          wheelParticleD.angularVelocity = keySpeed;
     }
} 

// Quand l'utilisateur relâche une touche ...
private function keyUpHandler(keyEvt:KeyboardEvent):void {
     // On remet les vitesse angulaire des roue a 0
     wheelParticleA.angularVelocity = 0;
     wheelParticleB.angularVelocity = 0;
     wheelParticleC.angularVelocity = 0;
     wheelParticleD.angularVelocity = 0;
}

Et voilà !!!!

Code source final

Aperçu

Ressources

• Site web APE (à voir les démos et exemples)
• Documentation de l’API
• repository SVN pour les anciens !

Autres articles sur le même sujet

• API de dessin en AS3
• Les frameworks AS3 qui vont bien !
• Moteur physique : Box2DFlashAS3 , de la concurrence pour APE…
• Flex 4 et les layouts – Faire une ViewStack « pure » Spark