Pablo Prieto - Blog - actionscript

3D isométrique et pathfinding

Pab. — Mon, 27 Oct 2008 10:09:00 +0100

Voici quelques temps que je voulais me mettre au développement de jeux en Flash, je me suis donc confronté récemment à la réalisation d'un moteur 3D isométrique. Je me suis notamment intéressé à la génération et au positionnement des "tiles" et des différents objets de la carte, ainsi qu'à la gestion du pathfinding, c'est à dire le déplacement des objets sur la carte en tenant compte des obstacles.

Le code est très largement inspiré de cet excellent tutorial, que j'ai réadaptée et réécrit en Actionscript 3.

La principale différence concerne la gestion du Z-Sorting. En effet en Actionscript 3 plus question de placer un symbole sur un niveau au choix avec un swapDepths()... Pour y remédier, la méthode render() de la class Map se charge donc de réorganiser la profondeur de tous les objets de la carte lorsque l'un d'entre eux se déplace.

Je suis donc arrivé à un petit moteur très basique que vous pouvez télécharger librement, le code étant sous licence Creative Commons

Et voici la démo, cliquez sur un des "personnages" puis sur n'importe quel endroit de la carte pour qu'il s'y déplace :

Enjoy :)

Chargement dynamique de polices avec Flash et Actionscript 3

Pab. — Fri, 22 Feb 2008 11:07:00 +0100

Ayant eu récemment besoin de faire ce genre de choses sur un projet, voici un tutoriel sur le chargement dynamique de polices de caractères en Actionscript 3. Ceci peut être particulièrement utile dans le cas par exemple de sites multilingues comportant des langues asiatiques, les polices de caractères chinoises ou japonaises pouvant être particulièrement lourdes à charger...

Le principe sera le suivant :

La police de caractère est contenue dans un fichier SWF externe.
Dans ce SWF, la police est exportée et est disponible sous la forme d'une classe héritant de la classe Font.
Le SWF principal charge ce SWF avec un objet Loader, puis enregistre la classe de police dans la liste des polices disponibles.
La police est ensuite utilisable dans l'application principale, dans un objet TextFormat ou pour un style CSS avec l'objet StyleSheet, comme vous voulez.

Création du SWF contenant la police

Pour générer le fichier de police, vous pouvez utiliser au choix Flex ou Flash. Le résultat est similaire, en revanche Flex permet de choisir une plage limitée de caractères à exporter (par exemple uniquement les minuscules, uniquement les caractères cyrilliques, etc...). Ceci permet donc d'optimiser au mieux le poids de votre SWF en fonction de vos besoins. Avec Flash en revanche, vous êtes contraint d'embarquer tous les caractères de la police dans le SWF final, c'est tout ou rien :)

Je vais détailler les deux méthodes, en commençant par Flex :

Avec Flex

Nous allons ici utiliser le SDK de Flex pour générer ce fichier. Voici ce à quoi va ressembler notre classe pour générer le fichier SWF contenant la police. j'ai au préalable placé le fichier de police Futura.ttf dans un dossier "assets".

package{
	
	import flash.display.Sprite;
	
	[SWF(backgroundColor='0xFFFFFF', width='100', height='100')]

	public class Futura extends Sprite {
		
		[Embed(source = "assets/Futura.ttf", fontName = "Futura")]
		
		public static var Futura:Class;
		
	}
	
}

Compilez et vous obtenez un magnifique SWF vide, mais contenant bien la police embarquée.

En bonus, choisir la plage de caractères :

Pour limiter l'exportation à une plage prédéfinie de caractères, la première chose à faire est d'éditer le fichier flex-config.xml présent dans le dossier "frameworks", à l'intérieur du dossier d'installation du SDK Flex. Ouvrez également le fichier flash-unicode-table.xml qui se trouve dans le même dossier.

Dans flex-config.xml, rendez-vous dans la balise <fonts>, c'est ici que vous allez pouvoir créer des plages de caractères personnalisées, de cette manière :

 <fonts>
 	[...]
	<languages>
		<language-range>
			<lang>Uppercase</lang>
			<range>U+0020,U+0041-U+005A</range>
		</language-range>
	</languages>
 	[...]
</font>

Comme vous le voyez, il suffit de créer un noeud <language-range> avec à l'intérieur une balise <lang> pour donner un nom à votre plage, et une balise <range> pour spécifier les plages de caractères unicodes. Bien bien, mais comment connaitre ces plages ? C'est le moment d'ouvrir le fichier flash-unicode-table.xml qui se trouve juste à coté :) Vous y trouverez plein de plages prédéfinies (majuscules uniquement, Kanji japonais, etc...) que vous pouvez copier-coller dans votre flex-config.xml.

Revenez ensuite à votre classe, et modifiez le metatag Embed comme ceci :

[Embed(source = "assets/Futura.ttf", fontName = "Futura", unicodeRange="Uppercase")]

Compilez et c'est prêt !

Avec Flash CS3

Si vous optez pour Flash, voici la procédure :

Créer un nouveau document
Créez un nouveau symbole de police dans la librairie (clic droit -> "Nouvelle police...")
Dans le champ Nom, donnez lui... un nom (de préférence le même que le nom original de la police, ça évitera les confusions...)
Vous pouvez choisir les version gras, italique, ou gras italique en cochant les cases appropriées, puis cliquez sur OK. Attention il s'agit d'un choix exclusif, si vous voulez que la police soit disponible en version normale et gras par exemple, vous devrez avoir 2 symboles de police dans votre bibliothèque, comme deux polices distinctes.
Faites ensuite un clic droit sur le symbole de police, puis cliquez sur "Liaison..."
Choisissez un nom de classe pour votre police, puis cliquez sur OK.

Voilà, votre police est désormais exportée pour Actionscript et sera donc exportée et utilisable lors de la compilation du SWF. Cette police sera disponible sous la forme d'une classe héritant de la classe Font.

Compilez et votre fichier SWF de police est prêt.

Création de l'animation principale

L'application principale sera composée d'un simple champ texte auquel on va appliquer un objet TextFormat avec notre police chargée dynamiquement.

Créez un nouveau document FLA
Placez un champ texte dynamique sur la scène, et donnez lui "message_txt" comme nom d'occurrence.

Voici ensuite le code à placer sur la première frame de l'application (vous pouvez bien sûr créer une classe d'application à la place, je vous laisse adapter le code en fonction)

Première étape, charger le fichier SWF contenant la police, avec la classe Loader :

var loader:Loader;

function init(){	
	loader = new Loader();
	loader.contentLoaderInfo.addEventListener(Event.COMPLETE, fontCompleteHandler);
	loader.load(new URLRequest("Futura.swf"));
}

Lorsque le chargement est fini, nous allons enregistrer la classe correspondant au symbole de police dans la liste des polices disponibles :

function fontCompleteHandler(event:Event){	
	var domain:ApplicationDomain = loader.contentLoaderInfo.applicationDomain;
	var font:Class = domain.getDefinition("Futura") as Class;
	Font.registerFont(font);
	
	initStyles();
}

Petite subtilité ici, la classe Futura n'est pas directement disponible dans le contexte de l'application principale. En effet, chaque SWF contient son propre "domaine d'application, c'est à dire que chaque classe est "rangée" dans un domaine distinct pour chaque SWF chargé, ceci pour éviter par exemple des conflits entre classes.

Ici on récupère donc la classe en allant chercher le domaine d'application du SWF chargé, puis avec la méthode getDefinition(). Le paramètre à passer ici est le nom de la classe tel que vous l'avez renseigné dans la boite de dialogue Liaison.

Enfin il nous reste à créer l'objet TextFormat, et à remplir et styler notre champ texte :

function initStyles(){	
	var tf:TextFormat = new TextFormat("Futura",16,0xFF0000);
	
	message_txt.embedFonts = true;
	message_txt.antiAliasType = AntiAliasType.ADVANCED;
	message_txt.text = "Lorem ipsum dolor sit amet";
	message_txt.setTextFormat(tf);
}

Attention ici, le nom de la police à utiliser pour l'objet TextFormat est le nom que vous avez défini dans la boite de dialogue "Propriétés".

Voici donc le code complet de l'application :

var loader:Loader;

init();

function init(){	
	loader = new Loader();
	loader.contentLoaderInfo.addEventListener(Event.COMPLETE, fontCompleteHandler);
	loader.load(new URLRequest("Futura.swf"));
}

function fontCompleteHandler(event:Event){	
	var domain:ApplicationDomain = loader.contentLoaderInfo.applicationDomain;
	var font:Class = domain.getDefinition("Futura") as Class;
	Font.registerFont(font);
	
	initStyles();
}

function initStyles(){	
	var tf:TextFormat = new TextFormat("Futura",16,0xFF0000);
	
	message_txt.embedFonts = true;
	message_txt.antiAliasType = AntiAliasType.ADVANCED;
	message_txt.text = "Hello Futura !";
	message_txt.setTextFormat(tf);
}

TextMate et Actionscript 3

Pab. — Mon, 07 Jan 2008 11:47:00 +0100

je débarque un peu sur ce coup là, vu que ça fait quelque temps que j'ai pas développé sur Mac (PC au boulot oblige) mais un bundle Actionscript 3 est disponible pour TextMate depuis quelques mois...

Ce bundle est disponible via Subversion (déjà présent dans Leopard, sinon installez-le). Il faut pour cela ouvrir le terminal (dans Applications/Utilitaires) et ~~recopier~~ copier/coller les commandes suivantes :

mkdir -p /Library/Application\ Support/TextMate/Bundles
cd /Library/Application\ Support/TextMate/Bundles
export LC_CTYPE=en_US.UTF-8
echo “… update Flex bundle”
svn co http://macromates.com/svn/Bundles/trunk/Review/Bundles/Flex.tmbundle
echo “… update As3 bundle”
svn co http://macromates.com/svn/Bundles/trunk/Review/Bundles/ActionScript\ 3.tmbundle
osascript -e ‘tell app “TextMate” to reload bundles’

Voilà, vous avez maintenant un nouveau sous-menu "Actionscript 3" dans le menu Bundles, avec plein de commandes prêtes à l'emploi. Des templates de classe, interface, etc... sont également disponibles.

Une classe pour manipuler une base de données dans AIR

Pab. — Thu, 04 Oct 2007 14:32:00 +0200

Je viens d'écrire une petite classe assez simple pour faciliter la manipulation d'une base de données SQLLite dans une application AIR. Cette classe fonctionne comme une couche d'abstraction entre l'application et la base de données.

La classe peut être téléchargée ici, sous licence Creative Commons.

Par défaut la méthode "select" retourne un tableau d'objets mais il est possible d'indiquer une classe personnalisée à utiliser à la place. En effet, grâce à la propriété itemClass de la classe SQLStatement il est possible de faire correspondre facilement une classe Actionscript à une table de la base, les propriétés publiques de la classe sont alors remplies automatiquement avec les valeurs des colonnes de la table portant le même nom, super pratique :)

Voici un exemple d'utilisation :

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="init()">

	<mx:Script>
		<![CDATA[
			import net.burnyourbrowser.data.SQLiteManager;
			import User;
			
			[Bindable]
			private var db:SQLiteManager;
			
			private function init():void{		
				this.db = new SQLiteManager("app-resource:/base.db");
				this.db.select("SELECT * FROM users", User);
			}
			
			private function removeSelectedItem():void{
				var id:int = resultDataGrid.selectedItem.id;
				this.db.remove("DELETE FROM profiles WHERE id="+id);
			}
			
		]]>
	</mx:Script>
	
	<mx:DataGrid id="resultDataGrid" dataProvider="{db.result}">
		<mx:columns>
			<mx:DataGridColumn headerText="id" dataField="id"/>
			<mx:DataGridColumn headerText="name" dataField="firstname"/>
			<mx:DataGridColumn headerText="url" dataField="lastname"/>
		</mx:columns>
	</mx:DataGrid>
	
	<mx:Button label="Supprimer" click="removeSelectedItem()"/>
	
</mx:WindowedApplication>

Pour la création initiale de la base, je vous conseille SQLite Administrator, gratuit et qui fonctionne plutôt bien.

Je vous file le code sous licence Creative Commons, vous pouvez donc en faire ce que bon vous semble :)

Invoquer le webservice XML/RPC de Dotclear avec Flex

Pab. — Mon, 24 Sep 2007 14:08:00 +0200

Voici un petit tutorial rapide pour apprendre à communiquer avec un webservice XML/RPC en Actionscript 3.

XML/RPC est un protocole utilisé notamment par les principales plate-formes de blog pour permettre d'administrer ceux-ci sans devoir se connecter à l'interface d'administration. Nous allons justement dans l'exemple suivant nous connecter au webservice fourni par Dotclear pour afficher la liste des derniers billets.

Dotclear implémente les principales API de blog, à savoir blogger, Movable Type et MetaWeblog. Nous allons donc pouvoir invoquer les méthodes fournies par ces 3 API. Pour info ce même exemple peut servir pour les autres plate-formes de blog comme Wordpress, qui implémente également ces API. J'ai choisi Dotclear uniquement parce que c'est ce que j'utilise :)

Avant de commencer, pensez à activer l'interface XML/RPC de votre blog dans l'interface d'administration. Pour Dotclear cela se situe dans les paramètres du blog.

Création du projet

Coté client, la librairie qui va nous simplifier le travail s'appelle As3 RPC lib, disponible sur Google Code.

Après avoir crée un nouveau projet Flex, téléchargez la librairie as3 RPC lib et copiez le fichier as3-rpclib.swc dans votre dossier projet. Allez ensuite dans les propriétés du projet puis dans "Flex Build Path", onglet "Library Path", et importez le fichier SWC en cliquant sur "Add SWC...".

Utilisation de l'objet XMLRPCObject

Cette librairie nous permet de créer un objet XMLRPCObject qui appelera les fonctions du webservice avec la méthode "call()". L'url du webservice est précisée avec les propriétés endpoint et destination :

<ak33m:XMLRPCObject id="blogapi" endpoint="http://www.burnyourbrowser.net/" destination="index.php/xmlrpc/default" />

Après invocation de la méthode "call()", l'évenement ResultEvent permet de réceptionner les données directement sous forme d'objet.

Voici le code final de l'application, composée pour l'affichage d'un DataGrid et d'un texte destiné à recevoir les eventuels messages d'erreur.

L'objet XMLRPCObject est ici instancié en MXML, mais vous pouvez évidemment le faire en actionscript.

Enfin les résultats retournés sont stockés dans un ArrayCollection "bindable", ce qui nous permet de mettre à jour automatiquement le DataGrid :

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
	xmlns:mx="http://www.adobe.com/2006/mxml" 
	xmlns:ak33m="http://ak33m.com/mxml" 
	layout="vertical" 
	horizontalAlign="left" 
	creationComplete="init()">
	
	<mx:Script>
		<![CDATA[
			import mx.rpc.events.FaultEvent;
			import mx.rpc.events.ResultEvent;
			import mx.collections.ArrayCollection;
		
			private var login:String = "******";
			private var password:String = "******";
			
			[Bindable]
			private var recentPosts:ArrayCollection;
			
			private function init():void{				
				blogapi.call("mt.getRecentPostTitles","1",login,password,10);
				blogapi.addEventListener(ResultEvent.RESULT, showRecentPosts);
				blogapi.addEventListener(FaultEvent.FAULT, faultHandler);
			}
			
			private function showRecentPosts(e:ResultEvent):void{
				recentPosts = new ArrayCollection(e.result as Array);
			}
			
			private function faultHandler(e:FaultEvent):void{
				errorMessage.text = e.fault.faultCode+": "+e.fault.faultString;
			}
			
		]]>
	</mx:Script>
	
	<ak33m:XMLRPCObject id="blogapi" endpoint="http://www.burnyourbrowser.net/" destination="index.php/xmlrpc/default" />
	
	<mx:DataGrid dataProvider="{recentPosts}" width="100%">
		<mx:columns>
			<mx:DataGridColumn headerText="ID" dataField="postid" width="30"/>
			<mx:DataGridColumn headerText="Title" dataField="title"/>
			<mx:DataGridColumn headerText="Date" dataField="dateCreated"/>
		</mx:columns>
	</mx:DataGrid>
	
	<mx:Text id="errorMessage"/>
	
</mx:Application>

Et voilà le résultat :

Je vous laisse continuer, en vous aidant de la documentation des API, pour vous créer votre propre interface de gestion de blog en Flex :)

Classe principale en Actionscript 2

Pab. — Thu, 09 Aug 2007 11:24:00 +0200

La possibilité dans Flash CS3 de pouvoir spécifier une classe principale pour son application, ça donne envie de pouvoir faire la même chose en Actionscript 2/Flash 8 .

Pas de souci, voici le code de la classe :

class Application extends MovieClip{
	
	public function Application(){
		//...
	}
	
	public static function main(target:MovieClip):Void {
		target.__proto__ = Application.prototype;
		Function(Application).apply(target, null);
	}
	
}

Oui alors bon il reste quand même une ligne de code à placer sur la première frame dans le FLA:

Application.main(this);

Voilà, c'est tout. La méthode main permet dans un premier temps, de spécifier le niveau 0 du swf comme une instance de la classe Application (this dans notre classe fera donc bien référence à _root). La deuxième ligne permet ensuite d'appeler le constructeur.

Astuce trouvée via Danny Patterson et BIT-101

Actionscript : délégation et passage d'arguments

Pab. — Mon, 05 Mar 2007 10:40:00 +0100

Le principe de la délégation en Actionscript : à quoi ça sert, comment bien l'utiliser, contourner le problème du passage de paramètres et enfin ce qui va changer en AS 3.

La délégation : à quoi ça sert

Un cas très courant nécessitant la délégation se présente dans l'exemple suivant : un objet graphique (héritant de MovieClip) possède un bouton qui exécute une fonction de l'objet lorsque on lui clique dessus :

Class MonObjet extends MovieClip{

	private var monBouton:MovieClip;

	public function MonObjet(){	
		monBouton.onRelease = this.faitUnTruc;
	}
	
	public function faitUnTruc(){
		trace(this);
	}

}

Explication : je passe la fonction faitUnTruc en référence à monBouton.onRelease. Ainsi, lorsque je vais cliquer sur monBouton, la fonction faitUnTruc sera exécutée. Enfin dans la fonction faitUnTruc, je fais un trace de l'objet courant (this).

Et bien dans cette situation, this fera référence non pas à l'occurrence de MonObjet, mais à celle du bouton ! La faute au passage par référence de la fonction faitUnTruc à monBouton.onRelease : la fonction faitUnTruc s'exécute bien, mais dans le "scope" du bouton, c'est à dire comme une fonction du bouton, et non de l'objet.

Mise en place de la délégation avec la classe Delegate

C'est à ce moment précis qu'arrive la classe Delegate pour contourner ce problème de manière simple et élégante. Cette classe, écrite par Mike Chambers, est disponible depuis Flash MX 2004. Voici la modification à apporter à notre exemple de départ :

import mx.utils.Delegate;

Class MonObjet extends MovieClip{

	private var monBouton:MovieClip;

	public function MonObjet(){	
		monBouton.onRelease = Delegate.create(this, faitUnTruc);
	}
	
	public function faitUnTruc(){
		trace(this);
	}

}

On commence par importer la classe qui se trouve dans le package mx.utils. Ensuite, au lieu de faire référence directement à la fonction faitUnTruc, on fait référence à la méthode statique Delegate.create avec deux arguments : le premier est le scope, c'est à dire l'objet quoi doit garder la référence, et le deuxième est la fonction à exécuter. Cette fois bingo, this dans la fonction faitUnTruc désigne bien l'objet.

Pour résumer, lorsque j'écris :

Delegate.create(UnObjet, faitUnTruc);

Cela peut se traduire par :

"Exécute la fonction faitUnTruc comme étant une fonction de l'objet UnObjet"

Passer des arguments

Passée l'euphorie (si si...), on tombe assez vite sur le prochain problème (ah flûte...) : Delegate ne permet pas de passer de paramètres à la fonction appelée. Imaginons que la méthode faitUnTruc doit pouvoir recevoir un ou plusieurs paramètres pour s'exécuter correctement, on ne peut pas les spécifier au moment de la délégation.

Il existe heureusement plusieurs techniques pour pouvoir le faire quand même :

Rajouter des propriétés à la méthode appelante

Ne jamais oublier LE truc chouette en Actionscript : (presque) tout est objet, donc une fonction est un objet. Et comme n'importe quel objet je peux donc lui rajouter des propriétés... c'est le principe de cette première solution :

import mx.utils.Delegate;

Class MonObjet extends MovieClip{

	private var monBouton:MovieClip;

	public function MonObjet(){
		var d = Delegate.create(this, faitUnTruc);
		d.p1 = "toto";
		d.p2 = 42;
		monBouton.onRelease = d;
	}
	
	public function faitUnTruc(){
		trace(arguments.caller.p1+","+arguments.caller.p2);
	}

}

Je passe en référence à monBouton.onRelease une fonction qui est elle-même une référence à Delegate.create(this, faitUnTruc), à laquelle j'ai rajouté au préalable deux propriétés p1 et p2. Celle-ci est ensuite disponible dans la fonction faitUnTruc grâce à arguments.caller. C'est une solution simple et rapide, mais pas très propre car elle nécessite de connaître le nom des propriétés dans la fonction appelée.

Relegate

Tekool nous propose sur son site une méthode plus élégante et moins verbeuse sous la forme d'une fonction Relegate qui ressemble en tous points à Delegate, excepté qu'elle accepte des paramètres supplémentaires qui seront transmis à la fonction appelée. Voici comment l'utiliser dans notre exemple :

import Relegate;

Class MonObjet extends MovieClip{

	private var monBouton:MovieClip;

	public function MonObjet(){
		monBouton.onRelease = Relegate.create(this, faitUnTruc, "toto", 42);
	}
	
	public function faitUnTruc(p1,p2){
		trace(p1+","+p2);
	}

}

La délégation et ActionScript 3

Attention car avec ActionScript 3 tout ceci va changer ! Oui en gros tout ce que j'ai écrit juste au dessus sera bientôt obsolète (et l'est déjà pour les gens qui développent sous Flex 2) !

Le tout nouveau modèle événementiel, basé sur celui du DOM Level 3, permet donc que le scope soit conservé lors du passe d'une fonction par référence ! Ainsi en reprenant l'exemple inital en AS3 :

package{

	Class MonObjet extends MovieClip{

		private var monBouton:MovieClip;

		public function MonObjet(){
			monBouton.onRelease = this.faitUnTruc;
		}
	
		public function faitUnTruc(){
			trace(this);
		}

	}

}

le this à l'intérieur de la fonction faitUnTruc désignera bien l'occurrence de MonObjet, et non plus le bouton, ce qui est quand même plus simple ;)

Flash 8 : XML.idMap

Pab. — Fri, 18 Aug 2006 14:49:00 +0200

Apparue avec Flash 8, XML.idMap permet de créer un objet contenant les noeuds XML possédants un attribut "id". Chaque noeud XML possédant un tel attribut devient une proprieté de l'objet idMap, en prenant comme nom la valeur de l'attribut.

Voici un exemple en pratique :

<?xml version="1.0" encoding="UTF-8"?>
<produits>
	<produit id="56">Carrotes</produit>
	<produit id="73">Chou-fleur</produit>
	<produit id="18">Petits pois</produit>
</produits>

Et le code actionscript :

var doc = new XML();
doc.ignoreWhite = true;
doc.onLoad = traitement;
doc.load("test.xml");

function traitement(){
	for(var i in this.idMap){
		trace(i+" -> "+this.idMap[i]);
	}
}

La fenêtre de sortie affichera la chose suivante :

18 -> <produit id="18">Petits pois</produit>
73 -> <produit id="73">Chou-fleur</produit>
56 -> <produit id="56">Carrotes</produit>

L'objet doc.idMap contient bien dans cet exemple 3 propriétés que l'on peut appeler directement comme ceci :

doc.idMap["18"]

Attention tout de même, il y a un petit bug si vous tentez un typage fort votre objet XML. Ainsi le même code avec la déclaration suivante :

var doc:XML = new XML();

générera une erreur à la compilation :

Il n'existe aucune propriété nommée 'idMap'