Utiliser Starling Framework et profiter du GPU dans vos jeux en 2D

4 questions

Écrit le 11 octobre par Matthieu
Publié dans le(s) sujet(s) Flash 2D

Mots clés : , , , , , , , , ,

Comme vous le savez surement, le Player Flash version 11 est sortie. Il apporte un gain considérable de performances avec la nouvelle API Stage 3D.

Par défaut, vos applications Flash (en 2D) ne bénéficie pas de cette nouvelle technologie…

Jusqu’à l’arrivée du Framework Starling qui permet, grâce à des classes proches de celles natives de Flash, d’utiliser la puissance du GPU dans vos applications Flash classiques en 2D.

Le thème de ce Cours ActionScript 3 concerne l’utilisation de l’API Starling pour créer des applications et jeux Flash performants 😉

L’API Starling offrant une multitude de fonctionnalités, plusieurs cours ActionScript sont entièrement consacrés à Starling Framework.

Dans ce Cours AS3, nous allons démarrer tranquillement avec la création de logos animés à partir d’images (jpg, png).

Voici ce que vous allez apprendre dans ce Cours ActionScript :

  • Les nouveautés principales du Player Flash 11.
  • Une présentation de Starling Framework en détail.
  • Comment améliorer significativement la performance de vos jeux flash 2D avec Starling.
  • Comment mettre en œuvre l’utilisation du GPU (carte graphique) dans vos applications flash classiques.
  • La découverte d’une partie des classes Starling proches de celles natives en Flash (Sprite, MovieClip…).
  • Et comment implémenter les classes Starling dans votre code ActionScript.
  • Le code complet pour créer vos premières applications Starling à partir d’une image chargée depuis votre swf.
  • Un parcours de l’API Starling avec la découverte de plusieurs classes et fonctionnalités associées.

Cette formation vous permettra de découvrir l’API Starling et de commencer à vous amuser avec le Flash Player 11.

Animations d’images avec Starling Framework

[spoiler]

Bonjour et bienvenu sur actionscript-facile.com

 

Aujourd’hui, nous allons parler du nouveaux Framework Starling développé par Thibault Imbert.

 

c’est-à-dire comment utiliser la puissance du GPU avec Starling dans une application flash AS3 classique.

 

Tout d’abord, quelles sont les nouveautés apportées par Flash Player 11 ?

 

comme vous le savez Adobe Flash Player 11 est sorti il y a quelque jours.

Il apporte des nouveautés très intéressantes et notamment la nouvelle api stage3D qui permet aux développeurs d’utiliser la puissance des GPU.

C’est-à-dire la puissance de calcul des cartes graphiques qui sont dans vos PC.

Du coup avec adobe flash, il est possible de créer des jeux en 3D très complexe qui s’exécute directement dans le navigateur ou sur un Smartphone.

 

Par contre il faut savoir que, par défaut, vos applications 2D donc toutes celles que vous avez fait classiquement ne bénéficie pas de cette nouvelle technologie.

En effet l’accélération liée au GPU est associée uniquement à la nouvelle utilisation de l’api stage 3D.

 

Du coup, c’est là que le Framework Starling entre en jeu.

Alors qu’est ce que c’est que le Framework Starling ?

 

C’est une librairie développée en pure AS3.

Starling reproduit l’architecture flash.

C’est-à-dire la notion de display list, Sprite, bitmap, movieclip etc…

 

Par contre, tout le contenu est calculé directement par le GPU.

Votre site flash, votre boutique en flash etc. qui avant le Player 11 était calculée par votre processeur, grâce à la librairie Starling tout ce rendu sera calculé directement par votre carte graphique le GPU.

 

Finalement, cela permet d’avoir des performances de rendu incomparables par rapport aux anciennes versions du Player Flash.

 

Évidemment l’api de Starling est familière. cela vous permet un apprentissage rapide.

C’est à dire qu’il vous suffit d’échanger les classes natives de flash avec leur équivalent Starling.

 

Comme le logo Starling framework le montre, c’est la puissance du GPU appliqué à l’api flash 3D.

 

Quelles sont les fonctionnalités principales de Starling ?

 

La gestion des polices bitmap les SpriteSheet. Nous verront plusieurs exemples et les effets de particules qui représentent une extension du framework Starling.

 

 

Comme d’habitude, dans ce cours, nous allons effectuer plusieurs exemples pratiques. Étant donné que le Framework Starling contient une multitude de fonctionnalités, les cours suivants, les prochains cours des prochaines semaines seront consacrés à ce Framework.

 

Tout ce que je vous explique, je ne l’invente pas, Thibault Imbert a écrit un livre en anglais sur Starling que vous trouverez bien évidemment en téléchargement à la fin de cet article.

 

Donc pour ceux qui préfèrent, qui connaissent l’anglais pourront directement mettre en pratique les enseignements du livre de Thibault Imbert.

Pour les autres, je vais reprendre les exemples ce que j’ai appris dans ce livre et vous l’expliquer à travers des codes source commentés.

 

 

Nous allons voir des exemples d’animations de personnages, la gestion du clavier pour vos jeux en 2D, des utilisations de police embarquées, des polices bitmap, l’utilisation des Sprite des images, des textures du Framework Starling.

 

 

Passons tout de suite à la pratique.

Comme d’habitude, nous partons de notre classe main qui étend Sprite.

 

Mais là c’est le Sprite de flash : flash.display.sprite et nous passerons par la classe Starling.

C’est elle qui va nous permette d’utiliser la nouvelle api stage3D.

 

Si on la regarde, elle est ici et tout est expliqué en anglais.

Donc j’ai regarder le principal pour pouvoir vous expliquer en français comment ça fonctionne.

 

Revenons sur notre main. Là, c’est pour afficher les performances de notre SWF.

 

Dans le cours précédent, je vous ai expliqué comment ajouter un compteur de FPS d’utilisation mémoire à toutes vos applications flash très simplement, pour surveiller les performances de votre SWF.

 

Là, on fait un petit alignement notre Sprite pour le redimensionnement.

Et c’est là où entre en jeu Starling. On lui passe une classe Game qui étend Sprite.

Mais cette fois le Sprite, si on regarde bien les imports, de Starling.

Donc le Sprite optimisé qui va utiliser stage3D c’est à dire que les calculs vont être effectués par votre GPU.

 

Et on lui passe le stage de notre application.

L’antialiasing permet d’activer l’anti-crénelage pour une meilleure qualité.

On peut mettre à 16 enfin 1 2 4 8 16, tout en sachant que ça réduit les performances avec une meilleure qualité.

 

Pour les téléphones Smartphones, on peut simuler le multitouche donc il suffit d’appuyer sur la touche contrôle pour afficher 2 points différents.

Cela permet de simuler l’usage de deux doigts sur l’écran du mobile.

 

 

Passons à un notre premier exemple tout simple.

 

 

Comme je vous le disais Game qui étend Sprite de Starling.

On attend la fin de l’initialisation de la scène comme dans main et on va créer un carré tout simple.

 

Qu’est ce qu’on fait dans ce carré tout simple ?

 

Je rajoute un petit peu de commentaires, création d’un carré simple, on choisit la couleur de background.

Ensuite création d’un rectangle avec un dégradé de couleur ou un carré, ça dépend la taille qu’on lui donne.

 

Quad, c’est une classe de Starling. Si on regarde le Framework Starling, vous voyez qu’il y a plusieurs possibilités.

 

On peut afficher des boutons. Nous verrons comment créer des bouton avec Starling, des display objet, des images movieclip, sprite, stage.

 

Il y a tout un tas d’éléments très intéressants dans le Framework Starling que nous allons découvrir petit à petit.

Je ferme la classe, on créé notre dégradé de couleurs en utilisant setVertexColor.

Plusieurs couleurs définis.

 

Si on regarde la signature, on voit qu’il faut lui passer tout simplement l’identifiant, l’index et la couleur.

Ou on peut mettre une couleur unique en utilisant Color.

 

Après, on peut utiliser toutes les propriétés display objet, une rotation, les coordonnées.

 

On l’ajoute sur la scène et on lance la compilation.

 

Il y a un autre truc à définir que j’allais oublié de vous dire pour compiler vos applications avec Stage 3D avec le flash Player 11.

 

D’une part il vous faut la librairie qui est ici Player global version 11. SWC pour utiliser l’api stage3D.

Elle sera en téléchargement dans le fichier zip de l’exemple, cette librairie SWC.

Deuxièmement, au moment de la compilation, très important, il faut rajouter un paramètre.

Je vous l’ai mis dans les commentaires du fichiers, c’est-à-dire -SWF-version=13.

 

Il faut mettre ce paramètre pour compiler en utilisant les dernières fonctionnalités du flash Player numéro 11 très très important !

 

La taille, vous connaissez ça c’est pour définir le nom de l’images par seconde par défaut. Je le mets à 40.

 

Très très important -SWF-version=13 à définir.

On lance la compilation et autre chose donc trois trucs le fichier flash Player SWC en version 11.

 

-SWF-version=13 que j’ai du mettre ici.

Et dans votre index.html il faut mette le Wmode = direct c’est à dire avec SWFObjects. Quand vous intégrez votre SWF, il faut mette le paramètre Wmode = direct pour activer Stage 3D et l’accélération du GPU sinon ça ne fonctionnera pas.

Donc ces trois paramètres sont très importants.

Vous aurez tout dans l’exemple.

 

Ensuite on regarde le résultat dans notre navigateur je recharge la page.

Les performances seront très très faible comme j’utilise l’enregistrement de mon écran et mon PC n’est pas très rapide.

 

Donc des performances très faible. Là, ça nous a créé un dégradé de couleurs.

On voit le nombre de FPS par secondes classique.

 

Maintenant, on va compliquer un petit peu les choses.

C’est-à-dire qu’on va créer un carré qui tourne avec une rotation.

 

Je change ça et on va passer au code.

Alors qu’est ce qu’on fait ?

 

Toujours un new Sprite.

Donc notre contenu, on ajoute une légende donc du texte sur notre carré, qui sera ajouté en gras.

 

On ajoute le Square qui est créé juste là.

La légende, on positionne pivot, c’est pour définir le point de référence.

C’est les coordonnées 0,0.

 

On positionne notre contenu et on écoute event.onEnterFrame comme d’habitude.

 

C’est pas le event de flash classic, c’est le event de Starling.event.

Vous trouverez tous les autres éléments que vous pourrez écouter.

 

Et sur chaque frame, on change la couleur de notre carré.

Il va tourner et on va changer la couleur de notre carré.

 

On lance la compilation, on va voir le résultat.

Un carré qui change de couleur et qui tourne.

Je recharge la page donc voilà.

Désolé si ça rame j’aurais un pc un peu plus puissant dans quelques mois.

 

Nous avons notre carré qui tourne avec actionscript-facile écrit.

Et la couleur qui change au fur et à mesure sous forme de dégradé.

 

Vous le voyez changer tout simplement.

Continuons avec un autre exemple.

 

Un nouvel exemple, on utilise CustomGame c’est-à-dire que ça va nous permettre de simplifier l’interaction avec le clavier en créant un Sprite personnalisé.

 

On créé notre Sprite personnalisé. Il suffit de regarder ici.

 

Qu’est ce qu’on fait dans notre Sprite ?

C’est la même chose que tout à l’heure.

Notre Sprite, c’est notre carré avec sa taille, que l’on créé ici.

On attend que le stage soit ready.

 

Ensuite notre texte de légende comme tout à l’heure.

Tout notre affichage est contenu dans un Sprite customisé et personnalisé.

 

Notre carré notre texte, on ajoute tout ça sur la scène.

On change notre point de référence avec pivot x pivot y donc les coordonnés 0 ;0.

 

ça c’est pour le choix des couleurs aléatoires et on met à jour notre composant.

 

C’est une méthode qui sera appelée en externe pour mettre à jour notre composant.

On change la couleur de notre carré et on effectue la rotation de tout notre Sprite.

Donc le carré et le texte tout ça, c’est géré en interne par le Sprite.

 

Le Carré, sa taille, le texte, le point de référence et sa couleur et la rotation et ensuite dans game qu’est ce qu’on fait ?

 

On centre le Sprite sur la scène, on créé un custom Sprite.

Après on le centre sur la scène.

On l’ajoute pour l’affichage et on écoute des événements de la souris.

 

Lorsqu’on touche l’écran a chaque frame et lorsque notre Sprite personnalisé est cliqué.

A chaque onEnterFrame, donc à chaque image par seconde on met à jour les coordonnées de notre Sprite en fonction de la position de la souris.

 

On dit au Sprite de se mettre à jour donc il change de couleur et il tourne.

Il va suivre la souris, il va tourner et changer couleur.

 

Et là, c’est quand on clic sur l’écran et on récupère la position.

 

OnTouch, c’est quand on clic sur l’écran.

Donc sur la scène elle-même.

 

On récupère les coordonnées de la souris et on le met à jour.

Et là, c’est quand on clic sur le Sprite lui-même.

On récupère la position du clic de la souris, les coordonnées de la souris sur le Sprite.

 

Et on vérifie si une phase de clic ou du retrait du doigt de l’écran, si on est avec un Smartphone.

Et là, on enlève l’objet cliqué ainsi que ses écouteurs.

Il y a un trace avec le debuggeur.

 

Et là, c’est pour récupérer la position des clics des 2 doigts par rapport à la scène.

Et on calcule la distance entre les deux doigts.

 

Dans notre debugger monster debugger, on va voir tout ça tout de suite.

Le temps de lancer la compilation.

 

Vous voyez que notre carré suit la souris et qu’il tourne en même temps.

Voila, ça c’est le custom Sprite, à chaque frame par secondes, on recalcule les coordonnées de la souris et on fait un update sur le custom Sprite qui lui-même tourne et change de couleur.

 

Je vais cliquer dessus, il va être supprimé.

On regarde ici, l’objet est cliqué.

Il n’y a plus d’écouteurs, il a été supprimé.

 

Ensuite, on appui sur contrôle pour simuler un multitouche avec notre Smartphone.

Et on regarde la souris.

Normalement, j’ai supprimé le Sprite donc forcément, on a plus le calcul de la souris, enfin de l’écartement des deux doigts sur l’écran.

 

Donc là, je le fais sans supprimer le Sprite.

C’est à dire que je vais recommenter les même lignes que tout à l’heure pour ne pas le supprimer et pour afficher dans monster debugger la distance entre les deux doigts sur un écran de smartphone.

 

Tout en sachant que c’est simulé.

Nous avons notre carré qui tourne et la simulation du multitouche.

 

Si on regarde le debugger, distance entre les deux doigts, elle est bien calculée.

 

L’objet a bien été cliqué et là il y a toujours des écouteurs vu que je ne l’ai pas supprimé.

C’est un autre exemple de ce qu’il est possible de faire avec un Sprite personnalisé.

 

Je vais passer à un dernier exemple avec la gestion d’une image.

Alors on a gameImage et customeImage qui va avec.

 

Donc customImage étend images avec des textures.

Une texture qu’on lui passe dans gameImage.

Dans gameImage, on implémente une ressource embarquée donc notre logo, une image JPEG classique.

 

Et on créé un nouveau bitmap, enfin une nouvelle instance de notre logo tout simplement.

 

On créé un bitmap à partir de cette instance.

 

On donne notre bitmap et on créé une texture avec.

Ensuite on va créer notre image.

 

Sur la scène, on va en créer nombre image c’est 63. Avec un alpha aléatoire sur notre image, des positions aléatoires et une rotation aléatoire.

 

Et ça, ça permet de convertir des degrés en radian.

C’est un utilitaire de Starling c’est très pratique. On l’ajoute pour voir notre image.

 

Ensuite on ajoute un écouteur sur chaque image par seconde et un écouteur lorsque le Sprite est cliqué.

 

Quand il est cliqué on teste si un seul doit être utilisé ou la souris.

Et on affiche un petit debug sur détection de la phase de clic, sur chaque image.

 

Qu’est ce qu’on fait avec notre logo ?

 

Vecteur où on a stocké chaque référence aux images que nous avons créé.

 

Nos customImages que avons créés, on les a stockés dans un tableau de vecteurs un tableau typé customImage.

 

Finalement et bien on déplace notre logo.

Et lorsqu’il a atteint sa destination, on fait une rotation et on change sa destination.

On calcule une nouvelle destination donc on le déplace jusqu’à sa destination le logo.

 

Et quand il l’a atteint, on lui calcule une nouvelle destination.

Vous allez voir 63 images avec un alpha, une transparence différente, qui se déplacent.

Et quand on clic un petit peu de debug.

 

Je lance la compilation et je vais recharger ma page.

 

On va regarder notre debug, le résultat.

 

Vous allez voir 63 log qui se déplacent sur la scène.

Lorsqu’on clique, il y aura du debug.

 

Donc je clique, le multitouche est simulé tout simplement.

 

Si on regarde notre debug, on voit les objets Stage3D qui s’affichent comme c’était prévu. lors du clic de la souris.

 

Qu’est qu’il y avait d’autre dans ce code ?

 

L’utilisation d’une image avec la possibilité de la déplacer d’effectuer de la transparence dessus tout en utilisant puissance du GPU.

 

Je recharge le SWF pour vous montrer une dernière fois.

 

 

Sous cette vidéo, vous trouverez le SWF qui fonctionnent normalement sans enregistrement.

Ce sera beaucoup plus fluide donc là on arrive au terme de ce premier cours.

 

Pensez à activer le multitouche.

 

Cela démarre finalement la construction de votre application flash qui utilise la nouvelle api stage3D.

 

Donc trois choses : pensez à utiliser le Player global le fichier SWC version 11 qui sera dans le fichier zip de l’exemple.

Modifiez vos paramètres de compilation en rajoutant cette ligne cette option.

Et dans index.html activer Wmode = direct pour activer l’utilisation stage3D, l’accélération GPU.

 

Vous avez trois exemples différents pour débuter.

Petit à petit, je vais avancer dans les tutoriaux de Thibault Imbert et je rajouterais d’autres exemples dans les prochains cours.

 

 

Sous cette vidéo, vous trouverez l’ensemble du code source de Starling qui utilise les trois exemples et les 3 fichier SWF.

 

 

Est ce que vous, de votre côté, vous connaissiez cette librairie ?

 

Est que vous avez commencé à l’utiliser dans vos applications flash ?

Tout simplement pour en améliorer les performances.

 

Dites moi ça dans les commentaires.

 

Je vous dis à très bientôt sur actionscript-facile.com

[/spoiler]

Version démonstration

Ci-dessous un exemple tout simple d’utilisation de la 3D dans flash !

Cliquez ici pour voir la version de démonstration N°1.

Cliquez ici pour voir la version de démonstration N°2.

Télécharger le code source du cours AS3

Et voici le code source de l’application créée avec Starling Framework.

Le fichier zip contient également la version 11 de playerglobal v.11.swc pour la compilation de votre application flash.

Télécharger “Exemple Starling Framework Animation Images”

ex-starling-animation-images.zip – Téléchargé 1193 fois – 611,77 Ko

Consulter le code source directement sur GitHub.

Le Site Officiel de Starling Framework.

La documentation de l’API Starling Framework.

Le Forum officiel consacré à Starling Framwework.

Télécharger le livre « Introduction à Starling Framework » de Thibault Imbert (rédigé en anglais).

Télécharger “Livre Starling Framework”

Introducing_Starling-rev_1.0.pdf – Téléchargé 13172 fois – 8,90 Mo

Avez-vous commencé à utiliser la librairie Starling dans vos applications flash ?

Quel gain de performance avez-vous généralement constaté ?

Dites moi cela dans les commentaires ci-dessous.