Sauvegarde des données

var mySo:SharedObject = SharedObject.getLocal("myApplication");
var dataToSave : Array = [2, 5, 4];
var somme : int = 0;
for each(var data : int in dataToSave)
{
    somme += Math.pow(2, data);
}
mySo.data.savedValue = somme;

Récupération des données

var intValue : int = mySo.data.savedValue;
var currentIndex : int; // identifiant du niveau à tester
if( ( Math.pow(2, currentIndex) & intValue) > 0 )
{
    // L'entier est bien présent dans la liste
}

Le rêve de tout développeur est en train de se réaliser : developper une application, et la publier sur toutes les plates formes ! C'est enfin possible grâce à haXe et NME.

Quelques précisions :

Avant d'aller plus loin, voyons un peu de quoi il s'agit. Si vous êtes familié avec haXe, vous ne l'êtes peut etre pas avec NME.

NME (pour Neko Media Engine) est un framework open source permettant de publier une application vers tout type de plate forme (windows, linux, android, ios, et j'en passe). Ce framework s'appui sur le langage haXe, ce qui permet d'avoir une syntaxe proche de l'Actionscript. NME s'occupe ensuite de mapper tout ca, et de publier pour la plate forme voulue.

Nous ne nous interresserons pour le moment, qu'à la plate forme android.

Voici un schéma permettant de comprendre le fonctionnement :

Fonctionnement :

L'effet de bordure n'est visible que pour un zoom d'au moins x3.
Il faut avoir la place de rajouter un pixel de bordure de chaque coté du pixel de l'image source.

public function truncate(val:Number, precision:uint=0):Number
{
	var multiplier : Number = Math.pow(10, precision);
	return Math.round(val * multiplier) / multiplier;
}

truncate(10.2653, 2); //-> va retourner 10.26

Il existe une autre manière de le faire, mais nettement moins propre. Il s'agit de convertir le nombre en chaine de caractère, tronquer cette chaine, puis refaire la convertion ...

La manière la plus simple à mettre en place est de passer par un Shape sur lequel on utilise l'API de dessin.

Cependant, si nous commencons à avoir plusieurs courbes à afficher en meme temps sur une grosse application, cela peut nous reduire de maniere importante les performances.

Une manière moins couteuse de dessiner un graphe est donc de passer par un BitmapData sur lequel on remplit les pixels nécessaires avec la bonne couleur.

Par exemple, admettons que nous avons les valeurs stockées sous la forme d'un vecteur:

var fpsValues : Vector.< Int >;

Nous partons du principe que nous remplissons le vecteur en ayant toujours un nombre maximal d'entrée inférieurs ou égal à la taille max du graphe, pour éviter d'avoir trop de données inutiles.

Attention: comme nous parlons en pixel, nous ne pouvons pas avoir de réels, seulement des entiers.

In my last Flixel project (My Hero Factory), i needed a vertical health bar. So i decided to use Photon Storm's flixel power tools, which has a health bar quickly usable. But there is only an horizontal one.

So here is my quick update to his FlxHealthBar class :

First we need more possibilities :

public static const FILL_LEFT_TO_RIGHT        :int = 1;
public static const FILL_RIGHT_TO_LEFT        :int = 2;
public static const FILL_INSIDE_OUT           :int = 3;
public static const FILL_TOP_TO_BOTTOM        :int = 4;
public static const FILL_BOTTOM_TO_TOP        :int = 5;

The setup function :

J'ai donc entreprit de coder une application AIR qui, à l'aide d'un simple drag and drop sur la fenetre, permettrait d'ajouter des éléments à la librairie qui sera ensuite compilée directement en utilisant swfmill.

Il est également possible d'importer un fichier xml pour pouvoir récupérer et éditer celle-ci depuis l'interface.

Les sons et les images sont pré-visualisable juste via un click sur l'élément.

Voici en image ce que ca rend :

L'écouteur doit donc être ajouté sur la grille :

grid.addEventListener(MouseEvent.CLICK, gridMouseHandler);

private function gridMouseHandler(pEvt:ProxyEvent):void
{
    var evt:MouseEvent = MouseEvent(pEvt.targetEvent);
    var pt:Pt = new Pt(evt.localX, evt.localY);
    IsoMath.screenToIso(pt);
    
    monElement.moveTo( Math.floor(pt.x/CELL_SIZE) * CELL_SIZE, Math.floor(pt.y/CELL_SIZE) * CELL_SIZE, 0 );
}

Quelques informations complémentaires :

• eDpLib.events.ProxyEvent hérite de la classe flash.events.Event et permet en plus à un proxy de redistribuer les informations de l'évènement au nom de l'IEventDispatcher qui n'est pas accessible directement depuis la liste d'affichage.
  Pour faire simple, ne vous posez pas la question et utilisez systématiquement cette classe sur la gestion d'évènement :)
• as3isolib.geom.Pt est l'équivalent d'un Point avec une coordonnée Z supplémentaire.
• La fonction statique screenToIso() permet de convertir les coordonnées dans l'espace 3D isométrique de la grille.

Pour faire quelque chose de plus joli, nous pourrions utiliser TweenLite (ou une quelconque librairie d'animation). Nous aurions donc :

TweenLite.to( monElement, 1, {x:Math.floor(pt.x/CELL_SIZE)*CELL_SIZE,
                              y:Math.floor(pt.y/CELL_SIZE)*CELL_SIZE});

Cette librairie est très simple d'utilisation, et ne nécessite pas un temps d'apprentissage enorme.

Nous allons voir ici les bases de l'affichage.

Tout d'abords, commencons par créer un nouveau projet AS3, que nous allons appeler IsoDemo.

Il nous faut bien évidemment les sources de la librairie : télécharger la v1.

Ici nous allons nous baser sur les sources pour le flash player 10, du coup il faut bien faire attention de spécifier la version minimale du player dans les paramètres.

Dans un premier temps, nous n'aurons besoin d'utiliser que les 3 classes principales de la librairie, qui sont :

• IsoGrid : qui correspond à la grille de l'environnement
• IsoScene : la scène en elle meme, sur laquelle nous allons placer nos élements d'affichages
• IsoView : la vue, c'est a dire ce que l'utilisateur va voir a l'affichage.

Ces trois classes se trouvent dans le package as3isolib.display.

Nous allons commencer par initialiser la grille :

_grid = new IsoGrid();
// Nous definissons une grille de 8*8 cases et 1 case en hauteur
_grid.setGridSize(8, 8, 1);
// Puis nous définissons la taille d'une seul case
_grid.cellSize = 50;

Maintenant, passons à la scène, qui correspond à l'élement d'affichage :

_scene = new IsoScene();
_scene.addChild( _grid );

Et pour terminer, nous devons définir notre vue :

_view = new IsoView();
_view.setSize(800, 600);
// Pour pouvoir afficher entièrement la scène,
// nous définissons un point sur lequel nous allons centrer la vue
_view.centerOnPt(new Pt(200, 200, 0));
_view.addScene(_scene);

Voici ce que nous obtenons :

Voici le schéma de description à utiliser pour les versions antérieurs ou égal à la version 2 de AIR :

< ?xml version="1.0" encoding="utf-8"?>
    < update xmlns="http://ns.adobe.com/air/framework/update/description/1.0">
        < version>1.0.1< /version>
        < url>http://www.example.com/updates/application_1.0.1.air< /url>
        < description>This is the latest version of the Sample application.< /description>
    < /update>

Pour continuer les mises à jours, il faut tout simplement modifier ce fichier xml en mettant à jour le numéro de version, et la mise a jour se declenchera.

Cependant, si au cours d'une mise a jour vous passer sur une version AIR 2.5 (packaging en utilisant le namespace : http://ns.adobe.com/air/application/2.5), la prochaine mise à jour ne se fera plus. Pour la simple et bonne raison que le schéma de descriptif des applications n'est pas le même et encore moins rétro-compatible.

Deux gros changements sont à noter dans ce nouveau schéma :

Cependant, la gestion du clavier est un peu plus longue à mettre en place, par rapport à celle de la souris, car en règle générale, la souris ne possède que deux boutons (ou du moins, seuls ces deux boutons sont utilisés).

Pour ce faire, nous n'avons besoin que d'un seul écouteur sur l'élèment stage.

La classe KeyboardEvent nous permet de gérer l'évènement KEY_DOWN et KEY_UP. Dans notre cas, nous allons simplement gérer l'appui sur les touches.

stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDownHandler);

Maintenant que nous avons notre écouteur, nous pouvons simplement gérer les keyCode de l'évènement dispatché.

private function keyDownHandler(pEvt:KeyboardEvent):void
{
    trace(pEvt.keyCode);
}

La classe flash.ui.Keyboard liste la majeure partie des touches disponible sur le clavier.

Par exemple, la touche ENTER est accessible par Keyboard.ENTER.

Maintenant, si vous souhaitez gérer l'appui sur les touches ctrl, shift et alt, l'évènement dispose d'attribut permettant de nous l'indiquer :

trace("ctrlKey: " + pEvt.ctrlKey);
trace("shiftKey: " + pEvt.shiftKey);
trace("altKey: " + pEvt.altKey);

Dans un cas un peu plus pratique, admettons que vous vouliez développer une calculatrice, sans pour autant utiliser TextInput (Flex) ou l'attribut type de la classe TextField (AS3).

Il vous faudrait alors gérer les différentes touches permettant d'écrire un 1.

if(pEvt.shiftKey && pEvt.keyCode == Keyboard.NUMBER_1 || pEvt.keyCode == Keyboard.NUMPAD_1)
{
    trace('touche 1');
}

Ce qui permet de gérer à la fois le pavé numérique, et les touches du clavier accessible par la touche shift.

Dans un précédent article, nous avions vu comment gérer les écrans d'affichage de manière simple et complètement indépendante du reste.

Maintenant nous allons voir comment mettre en pratique cette technique de manière à avoir un moteur de jeu relativement simple et basé sur les Sprite.

1- Le moteur

Notre moteur est le pilier, les classes principales de nos jeux devront hériter de celle-ci.

Chose importante, nous avons besoin d'attendre que notre classe soit ajoutée à la liste d'affichage avant d'aller plus loin, sinon nous ne pourrions avoir accès à l'élément stage.

Voici le code commenté :

Toute fois, en flash, à moins de passer par du JavaScript, c'est toujours difficile. Il existe cependant des projets permettant de profiter de la puissance de Google Analytics.

Aujourd'hui nous allons voir l'utilisation de la librairie Google Analytics Tracking For Adobe Flash qui se trouve être développée par Adobe Systems, Inc. (pour les intimes).

Deux pré-requis avant d'aller plus loin. Tout d'abord, il vous faudra télécharger le swc puis l'importer dans votre projet (page de téléchargement).

Maintenant que tout est en place, deux méthodes s'offrent à vous.

Dans le cas présent, l'objet sur lequel je veux ajouter une trainée hérite de la classe Shape. Nous allons donc nous baser la dessus.

Dans le cas ou nous voudrions ajouter une trainée à plusieurs éléments, nous allons laisser la classe principale s'occuper d'ajouter et de supprimer les différents éléments composant la trainée. Ce qui nous permettrait également de supprimer un élement d'affichage, sans pour autant supprimer la trainée. Quand à la disparition de celle-ci, c'est à dire la diminution d'opacité, c'est elle même qui va s'en occuper, et dispatcher un évènement quand elle a besoin d'entre retirée de la liste d'affichage.

Bien entendu, nous n'allons ajouter la trainée seulement si notre élément est en mouvement :

if(parent!=null && isMoving)
{
    var sh : Trail = new Trail( x, y, rotation, trailTimer, trailTimerCount);
    sh.graphics.copyFrom(graphics);
                
    var evt : GameEvent = new GameEvent(GameEvent.ON_NEW_TRAIL);
    evt.data = sh;
                
    dispatchEvent(evt);
}

Il était également plus intéressant de faire un effet d'accélération pour les déplacements, sans rendre cet effet trop important pour ne pas gêner le joueur.

Tout d'abords, nous avons besoin de quelques variables :

private var _currentSpeed   :Float = 0; // La valeur de la vitesse du vaisseau (à l'instant t)
private var _speedMax       :Float = .1; // La vitesse maximale
private var _acceleration   :Float = .01; // l'accélération

Dans notre boucle principale, nous avons simplement besoin de rafraichir les déplacements du vaisseaux en appellant la fonction update() du notre classe Ship.

addEventListener(Event.ENTER_FRAME, loop);
private function loop(pEvt:Event):Void
{
    _ship.update();
}

Cependant, ce n'est pas extrèmement plus compliqué. En effet, il suffit de définir le dégradé, comme pour un élément graphique, mais au lieu de laisser cet élément seul, nous allons lui appliquer un masque. Et ce masque sera notre élément TextField.

Du coup, notre dégradé ce verra au travers de notre texte.

Voici un exemple avec une police compilée, pour bien montrer que le principe reste le même :

Voici une implementation relativement simple, avec possibilité de faire communiquer les vues (ou ecran) entre elles.

Tout d'abord, nous avons besoin de notre classe Screen, qui sera la classe parente de tous nos ecrans.

package com.afischer.ui
{
    import flash.display.Sprite;
	
    public class Screen extends Sprite
    {
        protected var params : Object;
		
        public function Screen(pParams:Object = null):void
        {
            params = pParams;
        }
    }
}

Nous avons donc une variable params qui nous permettra de faire communiquer les données entre les vues.

Tout ce dont nous avons besoin est présent dans le sdk de Flex (dossier bin)

Le fichier de configuration

Le plus simple et le plus propre pour compiler, c'est de créer un fichier de configuration (réutilisable).

Voici un xml très simple, que nous allons appeller config.xml

< flex-config xmlns="http://www.adobe.com/2006/flex-config">
	< target-player>10.1.0< /target-player>
	< output>bin-debug/appli.swf< /output>
	< default-size>
	    < width>230
	    < height>800
	< /default-size>
	< compiler>
		< optimize>true< /optimize>
		< strict>true< /strict>
		< source-path append="true">
			< path-element>src< /path-element>
		< /source-path>
	< /compiler>
	< file-specs>
		< path-element>src/Application.mxml< /path-element>
	< /file-specs>
< /flex-config>

Pour avoir la liste des paramètres possible :

~/sdks/flex_sdk_4.1.0.16076/bin/mxmlc -help list advanced

Première chose à faire, détecter le type d'icone supporté.

Il existe deux types : l'icone dans la zone de notification (type Windows / Linux) ou l'icone dans la zone du dock (Mac) :

import flash.desktop.NativeApplication;

if (NativeApplication.supportsSystemTrayIcon) 
{ 
    // zone de notification
}
else if (NativeApplication.supportsDockIcon) 
{
    // dock
}

Il nous faut maintenant charger l'icone que nous voulons afficher via la classe flash.display.Loader.

var icon : Loader = new Loader();
icon.contentLoaderInfo.addEventListener(Event.COMPLETE, iconLoadComplete); 
icon.load(new URLRequest('icon_048.png'));

En ce qui concerne la taille, 48x48 pour la zone de notification, 128x128 pour le dock sont les tailles les plus adaptées.

Voilà pour ce qui est de l'icone.