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 :

[Actionscript]
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 !) :

[Actionscript]
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) :

[Actionscript]
// 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 :

[Actionscript]
[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 :

[Actionscript]
// 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 :

[Actionscript]
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 :

[Actionscript]
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 :

[Actionscript]
// 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