février 10th, 2009 by Tony

Savez-vous ce qu’est un torque ?

hum ?

Selon David M. Bourg dans “Physics for Game Developers” (et sous réserve d’une traduction correcte de ma part) si une force peut être considérée comme ce qui est susceptible de causer une accélération linéaire, un torque est ce qui est susceptible de causer une accélération rotationnelle.

Dans l’exemple ci-dessous, si vous appliquez une force linéaire à l’objet (en le saisissant et en le tirant) un torque est généré au point où vous appliquez la force.

En travaillant sur un projet, j’ai été amené à considérer les possibilités offertes par l’intégration physique en terme d’esthétisme du mouvement.
Je trouvais le comportement intéressant, et je me suis dit que j’avais là un bon candidat pour créer un composant.

S’il y a bien un sujet qui soit peu couvert dans l’univers du développement ActionScript, c’est bien la création de composants.
En AS2, il existe un ouvrage des éditions FriendsOfdEd qui y est consacré, mais en AS3 c’est assez pauvre ; quelques articles difficile à repérer sur divers blogs et un tutoriel sur adobe.com : “Creating ActionScript 3.0 components in Flash”.

Dans cet article, je propose juste un retour d’expérience sur la création d’un composant pour flash CS3.
Ce composant est relativement simple.Il n’héritera pas de fl.core.UIComponent mais simplement de flash.display.MovieClip.

Du point de vue conception, on va utiliser un pattern connu sous le nom de Décorateur. Sans trop entrer dans les détails, l’idée c’est d’ajouter des fonctionnalités à un objet (ici, une instance de MovieClip) non pas en étendant la classe MovieClip mais en enveloppant l’instance de MovieClip dans un autre objet (le décorateur).

Les fonctionnalités que l’on va ajouter sont celles qui sont visibles dans l’exemple ci-dessus : drag-and-throw, rotation, définition dynamique du point d”ancrage, comportement de rebond ou de traversement des limites de l’écran.

Le code du décorateur sera compilé dans le composant. Nous n’étudierons pas les détails d’implémentation de ce décorateur car cela relève plus de l’intégration physique que de la création de composants.

Création de la classe de base de notre composant

Ce qu’il nous faut, c’est un constructeur en bonne et due forme et une méthode draw(). Il faudra également définir des propriétés publiques munies de balises Inspectable auxquelles ont pourra affecter une valeur via le panneau paramètres ou l’inspecteur du composant dans Flash.

On utilisera également la nouvelle propriété componentInspectorSetting pour tester que les paramètres ont bien reçus une valeur.

La classe de base se présente comme ceci ;

package
{
 
import flash.display.*;
 
public class TorqueEngine extends flash.display.MovieClip {
 
/**
* le nom d'occurence de l'instance sur la scène
* à laquelle doit être ajoutée les fonctionnalités
**/
[Inspectable( defaultValue = "", name="Target MovieClip :", description = "instance name of the targeted MovieClip" , type = "string")]
public var target:String = ""; 
 
[Inspectable( defaultValue = "little", name= "Relative weight :", enumeration="little,big", description = "relative weight of the targeted MovieClip" , type = "string")]
public var weight:String = "little";
 
/**
* Le type de comportement lorsque le clip décoré se trouve aux extrémités de l'écran : rebond ou traversement de l'écran
**/
[Inspectable( defaultValue = "bound", name= "Comportement :", enumeration="bound,wrap", description = "specifies whether the target MovieClip bounces against the screen or through it" , type = "string")]
public var screen_behavior:String = Card.SCREEN_BOUND;
 
/**
* Un clip présent sur la scène (la cible, l'objet décoré)
**/
private var _pTargetClip:MovieClip;
 
/**
* Une instance du décorateur Card qui ajoute les fonctionnalités décrites
* ci-dessus au clip _pTargetClip
**/
private var _pCard:Card;
 
public function TorqueEngine(){
 
trace ( "[TorqueEngine Component 0.1]" );
 
draw();
 
}  
 
/**
* En AS3, les paramètres dont accessibles après le constructeur et non plus avant (AS2)
* ainsi lorsque le draw() est appelé depuis le constructeur, les paramètres sont à leurs
* valeurs par défaut.
* Pour redéclencher le draw() lorsque les valeurs des paramètres ont été définies,
* on utilise cette propriété. Le booléen qui est passé permet de savoir si tous les
* paramètres ont reçus une valeur.
**/
public function set componentInspectorSetting ( b : Boolean ) : void {
 
if ( !b ) draw();
}
 
/**
* Cette méthode est appelée plusieurs fois à l'exécution
* Si un clip cible a été spécifié, nous allons lui ajouter des
* fonctionnalités par décoration (pattern Decorateur).
*/
protected function draw(){
 
// Comme cette méthode peut être appelée plusieurs fois, on teste si
// le paramètre obligatoire (target) est défini
if ( target == "" ) return;
 
// le composant TorqueEngine nécessite pour fonctionner correctement d'être ajouté à conteneur (DisplayObjectContainer)
// d'une certaine dimension (la zone sur laquelle le clip cible pourra se déplacer).
// Pour créer cette zone, on va créer un rectangle de la taille maximale visible,
// c'est-à-dire, les dimensions du stage
var x:Number = this.parent.stage.stageWidth / 2 ;
var y:Number = this.parent.stage.stageHeight / 2 ;
 
try
{
 
// Si ce conteneur (nous l'appelerons viewport) existe, inutile de le recréer
 
var viewport:MovieClip = MovieClip( this.parent.getChildByName( "TorqueEngineViewport" ));
 
if ( viewport == null )
{
 
viewport = new MovieClip();
viewport.name = "TorqueEngineViewport";
 
// Dessine un rectangle transparent de la taille du stage
// dans le viewport, ce qui a pour effet de lui donner les dimensions du stage
 
viewport.graphics.beginFill( 0xFFFFFF, 0 );
 
viewport.graphics.drawRect( -x, -y, 2 * x, 2 * y );
 
// Ajoute le viewport à la scène
this.parent.addChild( viewport );
 
viewport.x = x ;
viewport.y = y ;
 
}
 
}catch ( e:Error ){
      trace ( e.message );
}	 
 
// Si on a bien un viewport et que le paramètre target du composant à été renseigné
if ( parent != null && viewport != null && target != "")
{
 
_pTargetClip = this.parent[ target ] ;
 
// Si la cible existe, on initialise
if (_pTargetClip != null){
 
// Les fonctionnalités sont ajoutés par 'Décoration' plutôt que par héritage
_pCard = new Card( _pTargetClip, viewport, weight, screen_behavior );
 
}
 
// Enfin, on supprime le clip cible de son conteneur originel
// pour le replacer dans le viewport
 
viewport.addChild( _pTargetClip );
 
}
 
} // Fin de draw()  
 
} // fin de classe
}

Revenons sur les balises Inspectable.

Elles permettent  d’afficher des champs dans l’onglet Paramètres du composant :

1. target : spécifie le clip cible (ou objet décoré)
2. weight: son poids relatifs (”little”, “big”) en fonction de ses dimensions. Ce paramètre est nécessaire pour ajuster un facteur faisant varier la grandeur du torque pour des MovieClips de dimensions plus importantes. C’est un paramètre à ajuster en testant le rendu dans le player.
3. screen_behaviour: spécifie le comportement du clip aux limites de l’écran : rebond ou traversement et réapparition à l’autre extrémité. Dans l’exemple, ci-dessus, c’est SCREEN_BOUND. Dans un autre exemple, plus bas dans l’article, j’ai paramétré le comportement SCREEN_WRAP.

Création d’un symbole pour notre composant

Cela se fait dans FlashCS3 comme pour n’importe quel symbole qui étendrait flash.display.MovieClip en liant le symbole à la classe de base du composant soit TorqueEngine.

Ensuite, comme pour les composants, il faut en passer par le panneau Définition du composant.

Voici une capture d’écran des réglages pour ce composant :

Vous ne devez pas renseigner les champs paramètres.

Ils vont être détectés automatiquement à partir des balises Inspectable définies dans notre classe de base lorsque vous cliquerez sur OK.

Enfin, et dans le but de partager le composant, il est tout à fait possible de l’exporter  dans une archive swc en faisant un clic droit sur le composant et en choisissant la commande Exporter le fichier SWC…

Vous pourrez également, créer un fichier .mxi et ainsi générer un package de distribution .mxp de votre composant avec Adobe Extension Manager.

On a donc ici un canevas de base pour réaliser des composants qui vont ajouter des fonctionnalités à l’exécution par décoration (pour plus d’informations sur le motif de conception décorateur, voir http://fr.wikipedia.org/wiki/Décorateur_(patron_de_conception) )

Dans les articles à venir, je parlerais de la création de composants basés sur l’architecture des composants CS3 / extension de UIComponent.

En attendant, voici un autre exemple d’utilisation de ce composant TorqueEngine, paramétré avec le comportement SCREEN_WRAP.