Votre application HTML5 avec Haxe: Canvas

Outre la capacité de résoudre un combat entre deux IA, le player se distingue par le rendu de celui-ci.
En effet, il nous offre un jolie visuel et des animations pour le représenter.

C’est donc l’occasion d’essayer le fameux Canvas de HTML5 et de voir ce qu’il a dans le ventre.


Canvas

Le moins que l’on puisse dire, c’est que c’est brut de pomme. Faut voir Canvas comme une page blanche, une suite de pixel, où l’on va pouvoir dessiner des choses. Quand on est habitué à utiliser d’autres technologies qui offrent cette fonctionnalité depuis longtemps, ça surprend. Au moins ça nous rappel de bon vieux souvenir.

Manque de bol, l’API de dessin est elle aussi assez sommaire. Elle ne prévoit rien pour animer un Sprite à par tout effacer et tout redessiner à chaque frames.
On peut bien sur optimiser ça en ne redessinant que la zone qui a changé, mais il faut garder une copie Bitmap de la zone avant dessin, effacer notre portion d’écran, redessiner notre sprite, etc…

CreateJS

Heureusement il y a createJS pour ça. Cette librairie permet de gérer des Sprites, des Containers, des Bitmaps, des Texts, dans quelque chose qui finit par ressembler à la DisplayList de l’AS3.

Elle a été réalisée par Grant Skinner, quelqu’un dont je respect beaucoup le travail, et propulsée par Microsoft et Adobe.

Et elle est bien sur utilisable en Haxe.

Rendu

Pour commencer, on va récupèrer la référence de notre canvas. fraichement intégré dans notre page html comme ceci :

<canvas id="applicationCanvas" style="width:100%; height:100%"/>
inline public static var APPLICATION_CANVAS:String = "applicationCanvas";
var applicationCanvas:HTMLCanvasElement = cast Lib.document.getElementById( UIElementId.APPLICATION_CANVAS );

Ensuite on va pouvoir créer notre Stage, élément le plus haut dans la DisplayList.
Stage est un Container, il sera donc possible de lui ajouter des enfants.

inline public static var APPLICATION_CANVAS:String = "applicationCanvas";
_stage = new Stage(applicationCanvas);

Maintenant nous sommes prêt à rendre notre scène.
D’accord elle est un peu vide, mais nous ajouterons des choses dedans un peu plus tard.
Nous allons mettre en place le mécanisme de mise à jour automatique, qui consiste à redessiner toute la scene suivant un bitrate exprimé en fps.
Pour ça il y a dans createJS, Ticker. Il se comporte comme un timer qui va invoqué un handler à intervalle régulière.


private function init():Void {
	Ticker.useRAF = true;
        Ticker.setFPS(30);
        Ticker.addListener(tickerHandler);
}

private function tickerHandler():Void {
	_stage.update();
}

Sprite

Maintenant que notre scène est prête, il est temps de lui faire dessiner quelque chose.
Il y a deux types d’éléments graphiques.
- Les Container, pouvant contenir d’autres éléments. Ils sont basiquement structurés avec un Pattern Composite.
- Les DisplayObject, objets d’affichage comme Sprite, Shape, Text, Bitmap, et bien sur Container.

Je vous ai dit que Stage était un container, nous allons donc lui ajouter un élément à dessiner.


_backgroundBitmap = new Bitmap("images/background.jpg");
_stage.addChild(_backgroundBitmap);

Et voilà, ma scène dessine maintenant une jolie image.

Animation

On positionne un DisplayObject en modifiant son x et son y, comme un peu partout d’ailleurs. Attention cependant, ses coordonnées sont relatives au parent.
Du coup si je veux animer mon image, il me suffit juste de changer sa position à chaque rendu de la scene par exemple.

private function tickerHandler():Void {
       _backgroundBitmap.x++;
	_stage.update();
}

Mais pour faire de belles animations, vous pouvez utiliser les Tween, qui vont se charger de calculer des deplacements fluides et dynamiques.
Une petite demo ici : http://www.createjs.com/#!/TweenJS/demos/tweenSample

A suivre



Laisser un commentaire