Turtles – Le labo blog

Je voulais tester ce fameux BitmapData (en actionscript 3) depuis un moment. Un passage sur wonderfl pour voir quelques exemples, et ensuite le bidouillage.

Voila une petite explication du fonctionnement à destination de tout le monde sauf les devs, sous peine d’être pris pour un neuneu.

En gros il s’agit d’un bitmap, donc d’une image avec des pixels. On est dans flash qui est un environnement vectoriel à la base, donc il est important de le préciser.

On crée un bitmap (ici, bmp), un bitmapData (bmd), puis on assigne le bitmapData au bitmap. Par la suite on ne travaillera plus que sur le bitmapData.

var bmp:Bitmap = new Bitmap();
var bmd:BitmapData;
addChild(bmp);
addChild(bmd);
bmd = new BitmapData(stage.stageWidth,stage.stageHeight,true,0xFF0000);
bmp.bitmapData = bmd;

Le bitmapData fait la taille de la scène, nickel, il est transparent (true), et la dernière valeur ne sert donc à rien puisqu’il s’agit de la couleur de fond.

Maintenant pour « colorier » les pixels, il suffit de donner les coordonnées et la couleur. Par exemple :

bmd.setPixel(30,30,0xFF0000);

C’est chouette. On peut aussi faire pareil avec une zone rectangulaire avec setPixels(monRectangle, monTableaudOctets); Il y a d’autres fonctions pour créer du bruit, du bruit fractal (exactement comme Photoshop), etc.

Dans l’exemple tout en haut, je ne me suis pas amusé à colorier tous mes pixels avec setPixel(). En fait j’ai des clips animés par dessus mon bitmap, et à chaque frame (ici, 60/s) je les dessine sur mon bitmap. Mettons que j’ai monClip_mc qui bouge dans tous les sens, je peux faire en sorte qu’il soit « imprimé » sur mon bitmap en permanence en écrivant :

bmd.draw(monClip_mc);

On a pas réellement dupliqué le clip (ce qui serait assez violent niveau mémoire) mais on a dessiné ce clip sur le bitmap. Les pixels du bitmap ont pris la couleur du clip à l’emplacement du clip. C’est clair ?

Terminons sur le fade out (alpha out) de l’exemple. Les clips créent une traînée qui s’estompe rapidement. Pour ce faire, j’applique à mon bitmapData un colorTransform, et ce toujours à chaque frame. Ca permet de changer les couleurs et l’alpha en permanence, et comme au même moment je dessine les clips par dessus, ça donne cette sensation de traînée. Pour appliquer ce colorTransform, il faut lui spécifier dans quelle zone agir, et quelles valeurs de couleurs et d’alpha.

var changeColors: new ColorTransform(1, 1.05, 1.1, 0.95);
var rect:Rectangle=new Rectangle(0,0,stage.stageWidth,stage.stageHeight);
bmd.colorTransform(rect, changeColors);

Mon colorTransform a plusieurs arguments (1,1.05,1.1,0.95), ce sont des multiplicateurs. En l’occurence les 3 premiers correspondent aux canaux de couleur RVB, et le dernier est l’alpha. Pourquoi un multiplicateur ? Tout simplement parceque si je dis que le multiplicateur d’alpha fait 0.8, l’action engendrée sera : monAlphaActuel*0.8, et non pas alpha 0.8; Vous voyez la nuance ? A chaque frame, l’alpha fera 80% de l’alpha précédent. Je vous laisse calculer combien de frames il faut pour arriver à 0

En clair dans cet exemple, à chaque frame je vais augmenter mon canal vert de 5%, le bleu de 10%, et baisser l’alpha de 5%, ce qui entraîne un léger changement de teinte et va progressivement faire disparaitre les éléments.

Ce n’est qu’un aperçu du fonctionnement des bitmapData, et surtout une infime partie de ce qu’on peut en faire. Pour l’instant je constate que c’est très véloce (toujours fluide à 120frame/s) et qu’il y a moyen d’expérimenter des systèmes de particules assez facilement.