Nicolas Valois - Actionscript 3 Lab & Blog

Création : le Factory Method Pattern

Nicolas — Fri, 29 Jul 2011 13:28:31 +0000

Le rôle d'une Factory est d'instancier des objets de différents types sans spécifier la classe de l'objet qui sera créer. Son avantage est d'éviter la redondance entre ces classes.
Les Factory Method sont en général implémenter par un Singleton.

package
{
    public class ProductFactory
    {
        public function ProductFactory()
        {
            throw new Error("Utilisez ProductFactory.getProduct(...) pour accéder à cette classe.");
        }
 
        public static function getProduct(product:String):IProduct
        {
            if (product == "p1")
            {
                return new Product1();
            }else if (product == "p2"){
                return new Product2();
            }else{
                throw new Error("Aucun type ne correspond à ce produit");
            }
        }
    }
}

Explications :
On remarque que la classe ressemble étrangement à un Singleton, sans être instancié; getProduct remplaçant getInstance.

public static function getProduct(product:String):IProduct

En fonction d'un paramètre, la Factory Method va retourner le type correspondant. Tous les types retournés auront des paramètres en commun que l'on regroupe dans l'interface IProduct.

Pour appeler cette classe, on fera ainsi :

var product:IProduct = ProductFactory.getProduct(productID);

Création : le Singleton Pattern

Nicolas — Wed, 27 Jul 2011 10:26:56 +0000

Le Singleton est utilisé un peu partout, comme par exemple pour les classes mx.managers (DragManager, CursorManager, …). On l'utilise par exemple pour enregistrer des données persistantes (ex: score d'un jeu). Son intérêt est de posséder une et une seule instance de la classe. Elle est accessible de partout et doit donc avoir un seul point d'accès global.

package
{
    public class Singleton
    {
        private static var _instance:Singleton;
 
        public function Singleton()
        {
            if( _instance ) 
                throw new Error( "Utilisez Singleton.getInstance() pour accéder à cette classe." ); 
        }
 
        public static function getInstance():Singleton
        {
            if(_instance == null)
                _instance = new Singleton();
 
            return _instance;
        }
    }
}

Explications :

private static var _instance:Singleton;

On passe l'instance en private pour empêcher un accès depuis l'extérieur de la classe. L'attribut static autorise un accès depuis à la variable depuis une méthode statique (implicitement Singleton._instance).

public static function getInstance():Singleton

Donne un accès depuis l'extérieur à l'instance. _instance est instancié, une et une seule fois, au premier appel. On peux également directement l'instancier dans la déclaration.

Ensuite on peux ajouter ses méthodes et getter/setter que l'on appellera de la façon suivante :

Singleton.getInstance().score

Différence entre currentTarget et target

Nicolas — Fri, 03 Jun 2011 11:16:24 +0000

Lorsque l'on ajoute un écouteur sur un objet, un objet Event est transmis comme paramètre quand un évènement se produit.

this.addEventListener(MouseEvent.CLICK, clickHandler);
 
private function clickHandler(event:Event):void 
{
     trace("Click");
}

L'objet Event possède deux propriétés importantes : event.currentTarget et event.target.
currentTarget renvoie l'objet qui traite l’évènement tandis que target renvoie l'objet l'enfant (le noeud cible) qui a déclenché l’évènement.

Pour mieux comprendre, prenons un exemple simple :
Imaginons le cas ou nous avons un objet carré qui contient un objet rond. On ajoute un écouteur au click sur le carré (donc le conteneur). Si l'on click sur le rond, l'event.target renverra le rond tandis que l'event.currentTarget renverra toujours le carré.

Sauf cas particulier, il faut donc veiller à bien utiliser currentTarget et non simplement target, qui peut référer à un sous-contenant non désiré.

Attention à l’évènement ROLL_OVER qui ne fera pas cette différence :
Différence entre ROLL_OVER et MOUSE_OVER

Exemple d'utilisation de QuickB2

Nicolas — Thu, 26 May 2011 10:20:19 +0000

Comme présenté ici QuickB2 est une version simplifié de Box2D. Vous pouvez bien sur consulter les exemples avec sources sur leur site internet ou dans le moteur (QuickB2_0_6\QuickB2\examples\qb2DemoReel\).
Sinon vous pouvez télécharger l'exemple que je vous ai préparé. J'ai simplement repris et allégé la classe CarDriving.as, ça pourrait en aider certains si vous avez du mal à l'installer ou à faire fonctionner les exemples. Voici ce que l'on obtiens :

Et voici ma classe:

package 
{
	import As3Math.geo2d.*;
	import As3Math.consts.*;
	import flash.display.*;
	import QuickB2.events.qb2ContainerEvent;
	import QuickB2.objects.tangibles.*;
	import QuickB2.stock.*;
	import TopDown.ai.brains.tdControllerBrain;
	import TopDown.ai.controllers.tdKeyboardCarController;
	import TopDown.carparts.tdEngine;
	import TopDown.carparts.tdTire;
	import TopDown.carparts.tdTorqueCurve;
	import TopDown.carparts.tdTransmission;
	import TopDown.objects.tdCarBody;
	import TopDown.objects.tdMap;
	import TopDown.objects.tdTerrain;
 
	public class Main extends Sprite 
	{
		private var playerCar:tdCarBody = new tdCarBody();
		private var world:qb2World = new qb2World();
		private var map:tdMap = new tdMap();
		private var saveGravity:amVector2d = new amVector2d();
		private var fence:qb2Group = new qb2Group();
		private var center:amPoint2d;
 
		public function Main():void 
		{
			center = new amPoint2d(stage.stageWidth/2, stage.stageHeight/2);
 
			// World
			initWorld();
			world.addObject(map);
 
			// Gravité
			saveGravity.copy(this.world.gravity);
			this.world.gravity.set(0, 0);
			this.world.gravityZ = 9.8;
 
			// Terrain
			var defaultTerrain:tdTerrain = new tdTerrain(true);
			defaultTerrain.frictionZMultiplier = 1.5;
			map.addObject(defaultTerrain);
 
			// Voiture
			initCar();
			map.addObject(playerCar);
 
			initObjects();
			map.addObject(fence);
		}
 
		protected function initWorld():void
		{
			//world.debugDragSource = this;
			world.actor = addChild(new Sprite());
			world.debugDrawContext = (addChild(new Sprite()) as Sprite).graphics;
			world.realtimeUpdate = true;
			world.maximumRealtimeStep = 1.0 / 10.0;
			world.gravity.y = 10;
			world.defaultPositionIterations = 10;
			world.defaultVelocityIterations = 10;
			world.start();
		}
 
		protected function initCar():void
		{
			// Géométrie et poids de la voiture
			var carWidth:Number = 60;
			var carHeight:Number = 90;
			playerCar.addObject( qb2Stock.newRectShape(new amPoint2d(0, 0), carWidth, carHeight) );
			playerCar.mass = 1000; //1000kg
			playerCar.position.copy(center);
 
			// Création des roues
			var tireFriction:Number = 2.0;
			var tireRollingFriction:Number = 1;
			var tireWidth:Number = 7;
			var tireRadius:Number = 10;
			playerCar.addObject
			(
				new tdTire(new amPoint2d(-carWidth/2, -carHeight/3), tireWidth, tireRadius, true /*driven*/,  true /*turns*/, false /*brakes*/, tireFriction, tireRollingFriction),
				new tdTire(new amPoint2d( carWidth/2, -carHeight/3), tireWidth, tireRadius, true,  true, false, tireFriction, tireRollingFriction),
				new tdTire(new amPoint2d( carWidth/2,  carHeight/3), tireWidth, tireRadius, false, false, true, tireFriction, tireRollingFriction),
				new tdTire(new amPoint2d(-carWidth/2,  carHeight/3), tireWidth, tireRadius, false, false, true, tireFriction, tireRollingFriction)
			);
 
			// Controle au clavier
			var playerBrain:tdControllerBrain = new tdControllerBrain();
			playerBrain.addController(new tdKeyboardCarController(stage));
			playerCar.addObject(playerBrain);
 
			// Moteur et transmission de la voiture
			playerCar.addObject(new tdEngine(), new tdTransmission());
 
			// Gear ratios (transmission)
			playerCar.tranny.gearRatios = Vector.<Number>([3.5, 3.5, 3, 2.5, 2, 1.5, 1]);
 
			//Courbe de régime du moteur, correspondance entre RPM et NM
			var curve:tdTorqueCurve = playerCar.engine.torqueCurve;
			curve.addEntry(1000, 300); // à 1000 RPM, 300 Nm max
			curve.addEntry(2000, 310);
			curve.addEntry(3000, 320);
			curve.addEntry(4000, 325);
			curve.addEntry(5000, 330);
			curve.addEntry(6000, 325);
			curve.addEntry(7000, 320);
		}
 
		protected function initObjects():void
		{
			//Création d'objets en cercle
			fence.frictionZ = 1.0;
			var angleInc:Number = RAD_10;
			var rotPoint:amPoint2d = center.clone().incY( -200);
			var limit:int = AM_PI * 2 / angleInc;
			for (var i:int = 0; i < limit; i++) 
			{
				fence.addObject(qb2Stock.newRectBody(rotPoint.rotatedBy(i * angleInc, center), 20, 20, 200, i * angleInc));
			}
		}
	}
}

Pour tester l'exemple complet, avec .fla, moteur et dépendances : c'est ici

Présentation de QuickB2

Nicolas — Thu, 19 May 2011 15:17:42 +0000

QuickB2 ou Quick Box2D est la version simplifié (pas en fonctionnalités mais en complexité) de Box2D, un moteur physique 2D, et qui permet de faire tout ce qui était possible avec, mais beaucoup plus facilement (et rapidement). En effet, beaucoup trouvent Box2D très complexe à prendre en main, donc si c'est votre cas, QuickB2 va vous ravir!

Quelques fonctionnalités intéressantes :
- Soft-bodies (corps souples)
- Moteur physique pour véhicules (même la gestion des traces de pneus, etc…)
- Physique diverse
- Outils de debug
- Edition d'environnement WYSIWYG pour Flash CS5

Un petit aperçu des possibilités :

Ou à voir ici.

Pour télécharger QuickB2 : http://code.google.com/p/quickb2/downloads/list
Box2D : http://sourceforge.net/projects/box2dflash/

Si vous avez des erreurs du genre « import cmodule.Box2D.*; » vous pouvez utilisez le .fla dans QuickB2\fla qui possède simplement les accès aux classes et aux dépendances : ../src, ../dependencies/src/As3Math, ../extensions/TopDown auquel vous pouvez associé votre classe.

A suivre prochainements quelques exemples avec sources!

Away3D : Panorama 360°, les différentes solutions

Nicolas — Mon, 16 May 2011 07:23:00 +0000

Il y a deux principales solution pour faire un panorama à 360° libre (c'est à dire pas seulement horizontal) : utiliser un cube ou une sphère.

La Sphere
Pour réaliser le 360°, nous allons placer une HoverCamera3D à l'intérieur d'une sphère. La sphère n'étant mappé que de l'extérieur, il va falloir également inversé les faces comme ceci :

sphere.invertFaces();

Vous pouvez aussi simplement utiliser la propriété scaleX :

sphere.scaleX = -1;

La texture sera alors uniquement visible de l'intérieur. Pour avoir le moins de déformation possible, il faut aussi donner un très grand radius à la sphère (1500px donne de bons résultats). Pour appliquer cette texture, vous allez devoir renseigner la propriété 'material' de la sphère avec un jpg comme ceci:

[Embed(source="texture.jpg")]
private var texture:Class;
var sphere:Sphere = new Sphere({radius:1500, material:texture, segmentsW:15, segmentsH:30});

Pour gérer la caméra, j'ai fait une navigation à la souris. A l'évènement MOUSE_DOWN, on va utiliser un enterFrame et mettre à jour les propriétés panAngle et tiltAngle de la caméra.

Comme vous pouvez le constater il y a une assez grosse déformation, mais suivant le style que l'on veut lui donner, la sphère peut être la meilleure solution.

Le Cube
Il y a 2 Objets qui sont spécialement destinés à cela dans Away3d : Skybox et Skybox6. Ce sont des cubes avec des tailles indéfinies, d'ou le nom. En utilisant cette objet, la déformation sera moindre par contre suivant l'environnement, il est possible de voir les arrêtes du cube. Un exemple sera plus parlant :

Pour implémenter une skybox, voici comment cela se déroule :

var cube:Skybox = new Skybox(materialFace, materialGauche, materialDos, materialDroite, materialHaut, materialBas);
view.scene.addChild(cube);

Il faut bien sur définir chaque material avant. C'est un peu fastidieux, mais c'est utile si plusieurs faces se répètent (ex une texture mur, une texture sol), on gagnera du temps de chargement.

Pour une skybox6, c'est plus simple :

var cube:Skybox6 = new Skybox6(material);
cube.quarterFaces();

En revanche, l'image doit comporter les 6 faces, dans le même ordre que la création d'une skybox. Voici l'exemple que j'ai utilisé :

Voici les sources pour la sphère (ajoutez le dossier Away3D dans /classes/away3D):
Télécharger

Différence entre ROLL_OVER et MOUSE_OVER

Nicolas — Tue, 10 May 2011 23:16:00 +0000

Il y a deux évènements bien distinct pour le survol : MouseEvent.ROLL_OVER et MouseEvent.MOUSE_OVER. Beaucoup ont tendance à utiliser MOUSE_OVER car le nom est plus parlant (aussi car on le trouve en premier dans l'auto-complétion…), mais qu'en est il vraiment ?

Ces 2 évènements se comporte en fait différemment, ce qui peut parfois expliqué des bugs inexpliqués si on ne les utilisent pas comme il le faut.

La documentation officielle d'Adobe indique que MOUSE_OVER est déclenché lorsque la souris pénètre dans la zone d'un objet enfant du conteneur d'objet d'affichage (même si la souris survolait déjà un autre objet enfant du conteneur d'objet d'affichage).
ROLL_OVER déclenche l’évènement lorsque la souris pénètre dans la zone d'un objet d'affichage ou de l'un de ses enfants à partir d'un objet qui ne fait pas partie de ses enfants

Pour illustrer, voici un exemple plus concret. Ici le carré jaune est contenu dans un clip gris. Survolez ces 2 carrés pour déclencher les évènements :

Si vous souhaitez utiliser MOUSE_OVER en ne déclenchant pas l’évènement s'il fait parti de ses enfants, donnez au clip la propriété mouseChildren = false.

Installer Kinect sur Windows Vista

Nicolas — Mon, 09 May 2011 23:12:59 +0000

Avant de vous présenter des tutoriaux et des expérimentations avec Kinect et Flash, commençons d'abord par l'installation de Kinect sur Windows.
L'installation est possible sur Windows XP, Vista, 7 mais je parlerais de Windows Vista ici comme c'est mon système.

Avant de commencer il va falloir télécharger OpenNi, Nite et SenSorKinect. Vous pouvez les télécharger ici, mais il y aura peut être des versions plus récentes lorsque vous lirez ce tuto.

Après l'extraction des fichiers, lancez OpenNI-Win32-v1.0.0.25.exe :

Cliquez sur Install.

Pendant la progression ce message peut s'afficher. Cliquez sur Install.

Ensuite installez SensorKinect-Win32-5.0.0.exe :

Cliquez toujours sur Next jusqu’à une alerte de sécurité Windows. Acceptez pour continuer l'installation en cliquant sur « Install this driver software anyway » :

A partir de la Kinect doit être reconnu, mais il reste à installer Nite pour l'exploiter. Lancer .exe

Il va demander une clé, entrez : 0KOIk2JeIBYClPWVnMoRKn5cdY4=

Voila, c'est fini! Maintenant l'heure de la vérité avec le branchement de Kinect. Branchez Kinect au secteur puis dans une prise USB (pas en façade si vous avez une tour). Laissez Windows configurer tout seul Kinect.
Redémarrez Windows pour qu'il fasse les mises a jour.

Au redémarrage, la LED verte devrait être allumée et clignoter. Vous pouvez tester Kinect avec les exemples dans C:\Program Files\OpenNI\Samples\Bin\Release.

Détection de mouvements a la webcam

Nicolas — Sun, 08 May 2011 15:54:30 +0000

J'ai essayé plusieurs méthodes plus ou moins concluantes pour la détection de mouvement à la webcam. Les deux principaux problèmes que j'ai rencontré sont la dépendance du résultat par rapport à la qualité de la webcam (rafraîchissement, définition, bruit/nuisances) et de la zone d'action (peu performant au centre de l'écran du aux moments du corps qui font parasite).
Une des méthodes qui fonctionne le mieux est de comparer deux images capturées successives, et de faire la différences. Avec quelques traitement supplémentaires sur l'image on arrive avec un plutôt bon résultat, mais toujours avec les défauts/problèmes cités ci-dessus.
Si l'on ne recherche pas un effet de tracking, j'utilise une autre méthode qui consiste à comparer les couleurs d'une zone. Je m'explique : imaginons que l'on veuille faire une action de clic sur un bouton (ou une zone) avec la main par webcam, on calcule la couleur moyenne de cette zone avec un refresh fréquent (enterFrame ou Timer). Au survol de cette zone avec la main, la couleur moyenne va donc être différente, et on peux donc actionner le click.

Sur cette démo il y a plusieurs zones clickables assez grandes. Il faut donc trouver un bon compromis dans la tolérance des différence de couleurs pour ne pas avoir une zone trop sensible aux mouvements parasites mais assez pour percevoir les mouvements volontaires :

Ici le résultat est plutôt bon car les zones sont en dehors des zones de mouvements (genre au milieu c'est plus compliqué car il y a plus de mouvements parasitaires du corps, visage, etc..).

A terme, cette méthode doit me permettre d'avoir une navigation kinect-like, comme le menu de la console avec les vignettes. Suite au prochain épisode…

Si vous utilisez une méthode encore différente, n'hésitez pas à m'en faire part!

Away3D : Primitives, les principaux objets dont vous aurez besoin

Nicolas — Fri, 06 May 2011 15:55:19 +0000

Nous allons voir ici les objets que l'on se sert le plus : Cube, Plane, Sphere, Triangle.

Triangle
Ce n'est pas la forme que l'on utilise couramment, mais il est utile de la voir car c'est la forme de base. En effet chaque objet est composé d'un nombre plus ou moins important de Triangles. Par exemple, Plane est composé par défaut de 2 triangles. Il peut être toutefois utilisé quand on doit représenter un très grand nombre d'objets, par exemple des particules, afin d'avoir un rendu très fluide.
La création d'un Triangle est défini par 3 points a, b et c.

var triangle:Triangle = new Triangle();
triangle.a = new Vertex(0, 0, 0);
triangle.b = new Vertex(10, 0, 0);
triangle.c = new Vertex(5, 10, 0);

Vous pouvez passez ces valeurs en paramètres dans le constructeur.

Plane
Plane est donc composé de 2 triangle par défaut (donc la deuxième forme la plus légère), mais vous pouvez augmenter la complexité avec les propriétés segmentsH et segmentsW (pour Height et Width). Pour la création d'un Plane, vous spécifiez la largeur et la hauteur (avec les propriété Width et Height). La création se fait comme ceci :

var plane:Plane = new Plane();
plane.width = 200;
plane.height = 100;
plane.segmentsH = 5;
plane.segmentsW = 5;

Vous pouvez passez ces valeurs en paramètres dans le constructeur.

Cube
C'est en fait un Plane plus complexe, auquel on rajoute la propriété depth (et du coup segmentsD). Il a besoin de minimum 12 triangles pour être créer (1 Plane par face, avec 6 faces). Donc à la création on a ceci :

var cube:Cube = new Cube({width:200,height:100,depth:50,segmentsH:5, segmentsW:5, segmentsD:5});

Par défaut, le Cube et la Sphere ne sont mappé que de l'extérieur.

Sphere
Plus complexe qu'un cube, la sphère a besoin de plus de triangle pour être créer (36 par défaut) et beaucoup plus pour avoir un joli rendu. Pour augmenter la complexité on utilise les propriétés segmentsW et segmentsH. La création d'une sphère se fait cette fois plus avec width et height mais avec la propriété radius :

var sphere:Sphere = new Sphere({radius:20,segmentsW:5,segmentsH:5});

Pour continuer avec Away3D:
Tutorial 1 : Installation et première animation
Tutorial 2 : Caméra et mouvements de caméra
Tutorial 4 : Materials (à venir)
Tutorial 5 : Lights, les différents éclairages (à venir)