Apache Adobe Flex TutorialTutoriaux Adobe Flex & AIR en Français

Starling API – 30 – Fin du fil rouge et pistes d'amélioration

Après 30 billets, c'est bien la fin du fil rouge Starling! Si vous avez loupé un épisode, vous pouvez retrouver la liste des tutoriaux sur la page qui y est consacré:

Fil rouge Starling API

Si vous avez suivi ces billets de bout en bout, vous avez appris:

• A connaitre les classes de base de l'API Starling
• De l'animation avec Tween et MovieClip
• Comment structurer votre code grâce aux Factory présentes dans plusieurs billets
• Créer un niveau complet à partir d'une description
• Utiliser Box2D pour gérer les collisions
• Ecrire quelques règles de gestion pour votre jeu

Alors bien sûr, il manque beaucoup d'éléments pour créer un jeu digne de ce nom. Voici quelques pistes:

• Ajout de son
• Ajout d'une vraie interface de jeu (score, high score, ...)
• Ajout d'un écran de choix du niveau (de nombreux niveaux sont dans les sources du projet)
• Utiliser le système de particules de Starling : https://github.com/PrimaryFeather/Starling-Extension-Particle-System
• Créer de plus beaux graphismes

Rendu final

Télécharger les sources

Télécharger les sources du tutorial Starling

Le livre officiel Starling

Pendant l'écriture de ces billets sur Starling est paru l'ouvrage final sur Starling par Thibault Imbert. Celui-ci est en anglais et aborde certains points que je n'ai pas évoqué:

http://shop.oreilly.com/product/0636920024217.do

N'hésitez pas à y jeter un oeil. Si vous avez besoin d'aide, pensez bien à utiliser le forum de Starling qui compte de nombreux utilisateurs actifs:

http://forum.starling-framework.org/

Bonus

Vous l'avez remarqué, les descriptions de niveau sont celles d'Angry Birds et les graphismes ont été légèrement remodelés pour ne pas être identiques. Mais si vous récupérez les SpriteSheet du jeu officiel (avec Firebug ou l'inspecteur de Google Chrome) depuis http://chrome.angrybirds.com/, vous aurez exactement le jeu Angry Birds, avec les vrais blocs

Merci pour avoir suivi ce travail de longue haleine !

Fabien

Starling API – 29 – Réagir à la collision entre 2 body Box2D

Pour l'instant, on peut avec notre poisson, détruire le décor composé de body Box2D associés à des MovieClip que l'on a créé dans un tutorial précédent:

Starling API - 17 - Création des éléments du décor avec BlockFactory, TerrainFactory et EnemyFactory

Nos blocs sont donc des MovieClip contenant plusieurs Texture. Les Textures sont en fait les mêmes mais avec une opacité différente. Si vous avez un graphiste, vous auriez des dessins différents pour chaque état de destruction du bloc. Pour notre test en tout cas, tout bloc qui sera touché va devenir de plus en plus transparent suivant la force qui lui sera appliquée.

Détecter une collision avec b2World::SetContactListener()

Il y a une méthode simple pour détecter les collisions qui est de placer un "ContactListener" sur le monde (objet de type b2World). Ce ContactListener est une classe qui étend b2ContactListener. Créons donc la classe BlockContactListener:

package com.fnicollet {
  import Box2D.Dynamics.b2ContactListener;

  public class BlockContactListener extends b2ContactListener {
    public function BlockContactListener() {
      super();
    }
  }
}

Dans la méthode init() de AquariumScreen, on l'associé à notre monde:

world.SetContactListener(new BlockContactListener);

Ensuite, dans BlockContactListener, il faut surcharger la méthode suivante:

function PostSolve(contact:b2Contact, impulse:b2ContactImpulse):void

Cette méthode nous donne accès à un objet b2Contact qui a des références vers les 2 objets en contact et à un objet b2ContactImpulse qui contient des informations sur la collision comme sa force. Pour récupérer la force de la collision, on va récupérer la valeur de la normale:

override public function PostSolve(contact:b2Contact, impulse:b2ContactImpulse):void {
  var firstNormalImpulse:Number = impulse.normalImpulses[0];
}

Si cette valeur est supérieure à un certain seul, on va récupérer les 2 objets en contact:

override public function PostSolve(contact:b2Contact, impulse:b2ContactImpulse):void {
  const MAX_IMPULSE:Number = 10;
  var firstNormalImpulse:Number = impulse.normalImpulses[0];
  if (firstNormalImpulse > MAX_IMPULSE) {
    var userDataA:DisplayObject = contact.GetFixtureA().GetBody().GetUserData();
    var bodyDefinitionA:b2BodyDef = contact.GetFixtureA().GetBody().GetDefinition();
    var userDataB:DisplayObject = contact.GetFixtureB().GetBody().GetUserData();
    var bodyDefinitionB:b2BodyDef = contact.GetFixtureB().GetBody().GetDefinition();
    var nameA:String = userDataA.name;
    var nameB:String = userDataB.name;
  }
}

Ensuite, on va détecter la collision entre un fish (dont les noms commencent par "bird_") et un corps Box2D dynamique (nos blocks). En même temps, on va faire pareil pour les collisions avec le sol. Le code n'est pas super mais c'est pour vous expliquer en gros:

override public function PostSolve(contact:b2Contact, impulse:b2ContactImpulse):void {
  const MAX_IMPULSE:Number = 10;
  var firstNormalImpulse:Number = impulse.normalImpulses[0];
  if (firstNormalImpulse > MAX_IMPULSE) {
    var userDataA:DisplayObject = contact.GetFixtureA().GetBody().GetUserData();
    var bodyDefinitionA:b2BodyDef = contact.GetFixtureA().GetBody().GetDefinition();
    var userDataB:DisplayObject = contact.GetFixtureB().GetBody().GetUserData();
    var bodyDefinitionB:b2BodyDef = contact.GetFixtureB().GetBody().GetDefinition();
    var nameA:String = userDataA.name;
    var nameB:String = userDataB.name;
    var densityA:Number = contact.GetFixtureA().GetDensity();
    var densityB:Number = contact.GetFixtureB().GetDensity();
    var isAFloor:Boolean = densityA == 0;
    var isBFloor:Boolean = densityB == 0;
    var isAFish:Boolean = nameA && nameA.indexOf("GUPPY_") != -1;
    var isBFish:Boolean = nameB && nameB.indexOf("GUPPY_") != -1;
    if ((isAFloor || isAFish) && bodyDefinitionB.type == b2Body.b2_dynamicBody) {
      destroyDisplayObjectBy(userDataB, firstNormalImpulse);
    }
    if ((isBFloor || isBFish) && bodyDefinitionA.type == b2Body.b2_dynamicBody) {
      destroyDisplayObjectBy(userDataA, firstNormalImpulse);
    }
  }
}

private function destroyDisplayObjectBy(dObj:DisplayObject, damage:Number):void {
  if (damage < 1) {
    return;
  }
  var mc:MovieClip = dObj as MovieClip;
  if (!mc) {
    return;
  }
  if (mc.currentFrame == mc.numFrames - 1) {
    mc.removeFromParent();
    return;
  }
  mc.currentFrame++;
}

Faire le ménage avant de partir

Si vous testez l'application comme cela, vous verrez que lorsque nos blocs ont pris beaucoup de dégâts, ils disparaissent. Mais il sont encore pris en compte dans le calcul des collisions ! En effet,  on a supprimé le MovieClip, donc l'affichage graphique. Le "body" Box2D est lui toujours présent et pris en compte dans la simulation.

On va donc rajouter le "body" à notre méthode destroyDisplayObjectBy et supprimer l'objet du monde pour de bon:

private function destroyDisplayObjectBy(dObj:DisplayObject, damage:Number, body:b2Body):void {
  if (damage < 1) {
    return;
  }
  var mc:MovieClip = dObj as MovieClip;
  if (!mc) {
    return;
  }
  if (mc.currentFrame == mc.numFrames - 1) {
    mc.removeFromParent();
    body.GetWorld().DestroyBody(body);
    return;
  }
  mc.currentFrame++;
}

Si vous essayez, vous verrez que cela ne fonctionne pas. En cherchant un peu sur le net, on s'aperçoit que la suppression d'un body pendant la simulation n'est pas la bonne solution. Il faut garder une liste des éléments à supprimer et le faire avant le prochain rendu (=Step).

On rajoute donc une variable static à BlockContactListener pour faire simple:

public static var toRemove:Array = [];

puis:

  if (mc.currentFrame == mc.numFrames - 1) {
    mc.removeFromParent();
    if (toRemove.indexOf(body) == -1){
      toRemove.push(body);
    }
    return;
  }

Et dans notre méthode updateWorld, on supprime les éléments en attente:

private function updateWorld(event:Event):void {
  var toRemove:Array = BlockContactListener.toRemove;
  for each (var bodyToRemove:b2Body in toRemove) {
    world.DestroyBody(bodyToRemove);
  }
  BlockContactListener.toRemove = [];

Voilà le rendu final:

Conclusion

Et voilà, le fil rouge des tutoriaux Starling touche à sa fin. Dans le prochain article (et le dernier), on verra les pistes d'amélioration qu'il vous reste si vous souhaitez continuer .

Télécharger les sources