Afficher une image, une animation ou un bouton avec Starling

La gestion des images  nous est simplifiée avec Starling, et créer de petites animations devient très facile 😉

Je vous propose un tour d’horizon de tout celà !

 

Afficher une simple image:

La classe dans laquelle on référence les images.
img-starling-1B

 

Le code pour charger l’image (embarquée).
var bitmapBg : Bitmap = Bitmap(new AssetEmbeds.TextureMenu()); var textureBg : Texture = Texture.fromBitmap(bitmapBg); var imageBg : Image = new Image(textureBg); imageBg.x = 0; imageBg.y = 0; this.addChild(imageBg);

 

Un extrait d’image :

var bitmapDataBtn1 : BitmapData = new BitmapData(160, 55); bitmapDataBtn1.copyPixels(bitmapBtn1.bitmapData, new Rectangle(120, 0, 160, 55), new Point); var textureBtn1 : Texture = Texture.fromBitmapData(bitmapDataBtn1); var imageBtn1 : Image = new Image(textureBtn1); imageBtn1.x = 120; imageBtn1.y = 200; this.addChild(imageBtn1);

 

Créer une animation avec un extrait d’image :

Tout d’abord on crée un fichier XML on Json (ici je choisi le xml) pour créer un atlas du fichier image.

anime_blanka

Chaque répétition du personnage fait 100px /100 px.

anime-starling-1A

Puis je l’appel de quasiment la même façon que pour afficher un extrait :

var movieClip:MovieClip = new MovieClip(textures);movieClip.x = 760;movieClip.y = 100;this.addChild(movieClip);Starling.juggler.add(movieClip);

anime_blanka

La méthode « getTextures » de la classe TextureAtlas et donc très pratique car il suffit de lui passer le préfixe du nom de la sous-texture 😀

Pour que l’animation se joue il faudra impérativement l’ajouter au juggler de starling.core.Starling !

 

Afficher un bouton :

c’est tout aussi simple et les effets de click sont déjà inclus !

button-starling-1A

IL ne vous reste plus qu’a définir la logique a appliquer lors d’un click et voilà 😉

Vous aimez mes articles ? Offrez-moi un café !

Laisser un commentaire