Sujets sur : fps

Cours ActionScript 3 ‘fps’

Livret Optimiser les Performances pour la Plateforme Adobe Flash

2 questions

Ecrit le 26 janvier par Matthieu
Publié dans le(s) sujet(s) Livres

Le Livet de Formation : Optimiser les Performances pour la Plateforme Adobe Flash était dans un premier temps uniquement réservé aux membres de la Formation AS3 Facile.

J’ai décidé d’en faire profiter le maximum de Développeurs ActionScript en le proposant gratuitement !

Voici ce que vous allez apprendre dans ce Livret de Formation ActionScript Flash :

  • Comment gérer la mémoire efficacement page 11.
  • La technique pour optimiser l’utilisation des Bitmaps page 22.
  • Plusieurs solutions pour réduire l’utilisation des ressources CPU page 38.
  • Comment améliorer les performances ActionScript Flash page 50.
  • Toutes une séries d’optimisations beaucoup plus fines (TextField, les boucles…) page 58.
  • Comment optimiser votre application flash page 68.

Télécharger le Livre Optimiser les Performances pour la Plateforme Adobe Flash


Donnez-moi votre avis !

Dites-moi dans les commentaires comment je pourrais l’améliorer.
Profitez-en pour poster vos exemples d’applications flash optimisées !

Je compte le compléter en fonction des évolutions du Player Flash.

 

Merci pour votre lecture,

Matthieu
Formateur des Développeurs ActionScript

Utiliser Box2D avec Starling Framework et un compteur de FPS optimisé

Commentaires fermés sur Utiliser Box2D avec Starling Framework et un compteur de FPS optimisé

Ecrit le 27 octobre par Matthieu
Publié dans le(s) sujet(s) Flash 2D

Starling Framework est une libraire ActionScript qui fournit un saut de performances considérable, continuons la découverte des différentes fonctionnalités.

Le thème de ce Cours ActionScript 3 a pour objectif de coupler Starling Framework avec Box2D : un moteur physique de détection de collisions.

Ainsi Box2D bénéficie du gain de performances du Flash Player 11 grâce aux classes Starling !

Les prochains cours AS3 seront consacrés à la découverte du Framework Box2D Flash AS3 😉

Pour une présentation de Starling Framework, je vous invite à consulter le Cours AS3 dédié.

Vous pouvez également étudier les cours précédents sur Starling Framework.

Voici ce que vous allez apprendre dans ce Cours ActionScript :

  • Comment utiliser une partie des classes Starling, proches de celles natives en Flash (Sprite, MovieClip…).
  • La technique pour associer Box2D à la puissance de Starling Framework.
  • Comment créer un compteur de FPS ultra light en consommation de ressources avec Starling Framework.
  • Et comment implémenter les classes Starling dans votre code ActionScript.
  • Un parcours de l’API Starling avec la découverte de plusieurs fonctionnalités intéressantes.

Cette formation ActionScript 3 vous permettra d’utiliser d’autres Framework avec Starling pour profiter des nouvelles performances du Player Flash 11 dans vos applications flash.

Box2D et Compteur FPS avec Starling Framework

[spoiler]

Bonjour et bienvenue sur actionscript-facile.com

 

Dans ce sixième cours sur le framework starling, nous allons voir comment utiliser le Framework starling avec une autre Framework actionscript très connu qui est box2D.

 

Et tout ça dans une application flash AS3 pour profiter des nouvelles performances du flash Player 11 avec l’api stage 3D

 

Petit récapitulatif de starling qu’est ce que c’est ?

 

C’est une librairie en pure AS3, le Framework strarling permet que le rendu, tout le contenu graphique soit calculé directement par GPU même si ce n’est pas de la 3D.

 

Finalement cela permet d’obtenir des performances de rendu très très intéressante.

L’api de starling est très familière pour un apprentissage rapide avec sprite, display objet , movieclip, image etc.

 

Il suffit d’échanger les classes natives de flash avec leur équivalent starling.

 

Pour une présentation un peu plus détaillée de starling, je vous renvoi au premier cours actionscript sur ce Framework.

 

A travers un exemple pratique tiré du livre sur starling de Thibault Imbert, que vous trouverait en téléchargement sous ce cours vidéo.

 

Il y aura d’autres cours consacrés à starling Framework et surtout à ses extensions.

Nous allons donc utiliser le Framework box2D avec des objets starling.

 

Box2D est un framework de détection avancée des collisions : sur un corps, sur une voiture, un vélo…

Il permet de détecter les frottements, les collisions entre plusieurs objets.

 

Les prochains cours actionscript sur AS3 faciles seront d’ailleurs dédiés au framework box2D.

 

Nous allons apprendre étape par étape comment profiter de ces détections avancées collisions dans nos applications flash et enfin surtout dans nos jeux flash.

 

 

Passons tout de suite à la pratique.

 

Comme d’habitude je vous le rappelle très important d’utiliser et ce paramètre de compilation -SWF-version = 13 pour activer l’api stage 3D dans votre fichier index HTML.

 

Et de mettre Wmode = direct pour activer stage3D avec le flash Player 11.

Et bien évidemment d’utiliser le fichier Player global.SWC en version 11 que vous trouverez en téléchargement sous cette vidéo.

 

On a notre classe main qui étend Sprite de flash, cette fois on définie sa taille le framerate etc.

On initialise notre debuguer, la position de la scène 0 ;0 et on démarre starling game box2D pour créer notre environnement starling.

 

Tout simplement on active l’anti-crénelage, le multitouche pour les Smartphones et on démarre starling pour la création de notre environnement.

 

box2D comment ça fonctionne ?

 

Je ne vais pas rentrer dans le détail du framework box2D.

 

Je vous montre juste un petit exemple pratique.

Je rentrerais dans le détail du framework box2D lors des cours qui lui seront entièrement consacrés.

 

Je vous montre rapidement :

on défini un vecteur de gravité, c’est pour que le corps soit autorisé à se reposer.

Donc on créé un objet world, ce sera notre monde avec tous les tests de collision de gravité etc.

 

Cela peut simuler la gravité de la terre.

Finalement, là on utilise des variables pour créer nos formes H2 body et des polygones.

 

Donc ce sera des carrés et des rectangles.

On définit la position, l’angle au sol et on ajoute une forme au sol.

Ce sera notre sol, finalement je lui ai mis un angle pour qu’il soit pentu.

 

Ainsi les forme les carrés tomberont dessus. Puis elles vont rouler, enfin se dérouler.

Cela créé nos nouvelles formes polygones.

 

La forme au sol est statistique donc densité à null. Et là on utilise quoi donc la classe Quad que nous avons utilisé dans le premier cours sur starling Framework.

 

quad permet de créer un carré et là, on définit notre body.

Donc body qui est notre forme au sol.

 

C’est là où on utilise starling framework pour créer notre forme globale. Et on l’attribut à box2D.

Et là, on créé les éléments, on en créé 63 qui vont tomber au sol.

Donc on créé une nouvelle définition de Body comme ici. Ca c’était notre forme au sol : le carré et ça permet ben c’est la forme avec sa couleur etc.

Je vous montrerai…

 

Là on créé une nouvelle forme. On lui donne sa position, sa rotation aléatoire.

On fait la forme polygone avec box2D : sa densité, la section, la restitution.

 

Et c’est là, on créé un nouveau carré starling : sa taille, la rotation, son pivot de départ.

Et on l’affecte à body.

C’est une info très importante, c’est à dire que l’on utilise un objet starling.display au lieu d’un display objet ou d’un sprite de flash.

On le passe à notre forme box2D et donc box2D va utiliser la puissance du GPU avec le flash Player 11.

 

Ensuite, on affiche notre forme tout simplement le compteur de FPS.

Je vous l’expliquer dans un instant.

 

Sur chaque frame, on met notre monde en mouvement.

 

On met à jour, on parcourt toutes les formes de notre monde et on met à jour la position et la rotation.

 

Pareil, là également on teste s’il existe des objets starling et on leur applique les lois physiques avec box2D.

On récupère notre objet starling, on le cast comme un Display objet. Et après on change sa position, sa rotation.

Puis, on met à jour notre monde globale, ça c’est notre monde box2D avec des formes qui vont tomber du ciel et s’entrechoquer.

 

Avec le test de collision, on a créé un petit compteur de FPS.

Je vais vous montrer ça tout de suite.

Sa particularité, c’est qu’il utilise la puissance du GPU pour se mettre à jour.

 

Dans les précédents cours sur straling framework, j’utilisais le compteur Hit Stats qui est le compteur classique pour vérifier les performances d’une application flash.

 

Là on va créer notre compteur de FPS qui lui va utiliser la puissance du GPU donc votre carte graphique.

Et il ne va pas utiliser beaucoup de ressources. Le truc c’est que au moment de création de l’image donc on passe par un fichier png.

C’est-à-dire qu’on utilise des bitmap font générator.

 

Dans le cours sur les polices embarquées embed, je vous ai expliqué comment ça fonctionne. Je vais aller très vite.

 

Pour limiter la taille de l’image PNG générée, on va sélectionner uniquement les caractères qui nous intéressent donc FPS, puis ce sont les chiffres qui nous intéressent.

 

J’étais dans notre image FPS et l’espace qu’il y a là, et également le point, et donc là vous faites juste option save bitmap font.

Vous enregistrez votre image. Si on regarde l’image, vous voyez qu’il y a uniquement que les caractères nécessaires.

 

On va utiliser notre compteur FPS c’est tout y a besoin, rien d’autre.

 

Comme ça notre image, si on regarde la taille elle fait uniquement 4 ko donc c’est vraiment très faible. Cela limite l’utilisation de la taille de notre application etc.

 

Donc on la charge comme d’habitude. On charge le fichier XML, FNT.

 

Et là c’est exactement comme le cours sur starling ça n’a pas changé !

 

C’est à dire comme d’habitude, on créée notre bitmap, notre fichier XML.

On enregistre la police bitmap pour la rendre disponible dans les textes.

On créé notre objet textfield avec le nom de la police.

Si vous regardez, le nom correspond au nom qu’il y a dans le fichier XML.

 

Tout simplement chicken c’est le nom de la police j’ai choisis avec les coordonnées de chaque lettre.

Chaque lettre et chiffre évidemment. Pour chaque caractère, on définit sa taille à la taille native.

 

Quand on utilise bitmap font creator, on définit une taille de police.

Là on utilisera la taille native, cela évite les déformations vu que c’est des images que l’on utilise. Ca évite les scale, les déformations couleur noires.

 

On affiche le texte sur notre scène.

 

Sur chaque image par seconde, on calcul le nombre de FPS.

 

C’est des exemples du livre de Thibault Imbert que je reprends.

C’est son calcul pour afficher le nombre de frame par secondes écoulées avec un get timer.

La dernière prise du get timer et puis la prochaine celle de maintenant la dernière.

Là maintenant, on fait un petit delta, on calcul et on affiche le nombre de FPS tout simplement.

 

C’est à dire que sur cette application, à la fois, on utilise box2D donc la détection avancée des collisions.

Et notre compteur de FPS qui lui profite des nouvelles performances du flash Player 11 avec un calcul du rendu et donc par le GPU.

Donc forcément les caractères affichés du FPS proviennent d’une image PNG que l’on a ici.

 

Il ne reste plus qu’à lancer la compilation et à voir le résultat dans une page HTML de notre application starling box2D.

 

C’est-à-dire que ici, là cette partie, c’est la partie qui penche donc c’est le sol de notre application.

Là le FPS vous voyez il est très faible, mon PC rame mais je n’y peu pas grand-chose.

 

Et donc vous voyez les détections de collision.

Je vais recharger la page et vous allez voir le compteur de FPS qui est très très faible.

Et les éléments tomber un par un sur le sol avec une détection des collisions avancées.

 

 

Le chargement est en cours. Le flash va s’afficher donc ça permet de voir l’application tourner au ralenti.

 

Notre compteur de FPS qui se met à jour tout le temps et là le sol que vous voyez ici.

 

Le sol, là détection de collision et les éléments qui vont tomber.

Bon cette application fondamentalement elle ne sert pas à grand chose mais si vous souhaitez réutiliser le framework box2D ben vous avez quelque pistes.

Comment affecter des Display Objects starling à vos formes box2D et vous pouvez même réutiliser la classe FPS dans d’autres applications dans des applications flash classiques.

 

Comme ça vous n’utiliserez que très très peu de ressources donc je vous l’ai bien noté les lignes clefs.

C’est ici la ligne importante quand on récupérera quand on teste si notre forme est un display objets starling.

 

Et au moment de la création de notre monde, c’est quand on affecte un Display Objects starling à notre monde à une forme starling tout simplement.

 

Et le compteur de FPS qui finalement, vous pouvez rajouter l’utilisation mémoire comme Ie restart, il suffit de finalement copier coller le code.

Et vous avez votre texte oTtxt.txt à mettre à jour.

 

Il n’y a rien de très compliqué, je vous fournirais la classe.

 

Je la ferais dans quelque temps et puis je vous mettrez l’équivalent de restart avec starling.

 

C’est valable ce type de classe FPS lorsque vous utilisez le framework starling dans votre application sinon ça n’a pas grand intérêt.

 

 

Comme d’habitude vous trouverez l’ensemble du code source de ce cours actionscript en téléchargement sous cette vidéo.

Comme ça vous aurez un exemple prêt à l’utilisation un modèle pour réutiliser dans vos applications.

 

Puis je serais curieux de savoir comment vous utilisez starling framework dans vos applications flash ? dans vos jeux flash ?

 

Quelles sont les performances que cela vous a apporté en termes de FPS, d’utilisation mémoire ?

 

Comment vous combinez donc l’utilisation du starling framework et de vos autres framework comme pixlib ou pureMVC par exemple ?

Partagez tout cela dans dans les commentaires sous cette vidéo et je vous dis à très bientôt pour le prochain cours sur actionsript-facile.com

[/spoiler]

Version démonstration

Et voici notre application implémentant le Framework Box2D avec Starling Framework.

Télécharger le code source du cours AS3

Et voici le code source de l’exemple Box2D 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 avec Box2D” ex-starling6-box2d-fps.zip – Téléchargé 316 fois – 792 Ko

Le site Box2D Flash AS3 pour télécharger la dernière version.

Présentation de Starling Framework par Thibault Imbert.

Télécharger la dernière version de Starling Framework.

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é 12371 fois – 9 Mo

Dans quelles types d’applications flash avez-vous implémenté Starling Framework ?

Partagez votre retour d’expérience Starling Framework dans les commentaires ci-dessous.

Comment surveiller les performances d’un code ActionScript ?

Commentaires fermés sur Comment surveiller les performances d’un code ActionScript ?

Ecrit le 10 octobre par Matthieu
Publié dans le(s) sujet(s) ActionScript 3

Dans ce nouveau cours ActionScript 3, nous allons découvrir une classe très utile pour surveiller les performances de notre code ActionScript 3 : Hi-ReS! Stats.

Présentation Hi-ReS! Stats

C’est une classe utilitaire très pratique pour tous développeurs ActionScript soucieux des performances de son application !

Cette classe affiche une fenêtre d’informations simple qui va vous aider à surveiller les performances de votre code.

Hi-ReS! Stats permet de voir:

  • FPS Frames par seconde, le nombre de d’image par seconde.
  • MS Milliseconds nécessaires pour générer une frame. Plus le chiffre est bas, mieux c’est côté performance !
  • MEM Mémoire utilisée par le code. Si votre utilisation mémoire augmenter au fur et à mesure, c’est mauvais signe…
  • MAX Mémoire Maximum utilisée par le code.

Contrôles : CLIQUEZ sur la moitié haute / inférieure du panneau pour augmenter ou diminuer le FPS de l’application.

Utilisation Hi-Res! Stats

Une classe très facile à implémenter, seulement 1 ligne de code 😉

/**
 
  The Initial Developer of the Original Code is
  Matthieu  - https://www.actionscript-facile.com
  Portions created by the Initial Developer are Copyright (C) 2010
  the Initial Developer. All Rights Reserved.
 
  Contributor(s) :
 
 */
package
{	
 
	import cours.Globe;
 
	import flash.display.Sprite;
	import flash.events.Event;
 
	import com.demonsters.debugger.MonsterDebugger;
 
	import net.hires.debug.Stats;
 
	/**
	 * La classe Main qui étend Sprite.
	 *
	 * définit le nombre d'images par secondes dans les paramètres de compilation
	 * -default-frame-rate 10
	 *
	 *
	 */
	public class Main extends Sprite
	{
 
		/**
		 * Constructeur.
		 */
		public function Main()
		{
			// attend la fin de l'initialisation de la scène
			this.addEventListener(Event.ADDED_TO_STAGE, onReady, false, 0, true);
		}
 
		/**
		 * Démarrage de l'application.
		 * définit le nombre d'images par secondes dans les paramètres de compilation
		 * -default-frame-rate 10
		 *
		 */
		private function onReady(event : Event) : void
		{
			this.removeEventListener(Event.ADDED_TO_STAGE, onReady);
 
			// Init De MonsterDebugger
			MonsterDebugger.initialize(this);
			MonsterDebugger.trace(this, "Start Application");
 
			// pour afficher les performances de notre swf
			addChild ( new Stats() ); 
 
			var oGlobe:Globe = new Globe();
			addChild(oGlobe);
			oGlobe.init();
		}
 
	}
}

Exemple Hi-ReS! Stats

Ci-dessous, j’ai repris la sphère Away3D du précédent cours, auquel j’ai ajouté l’indicateur de performance.

https://www.actionscript-facile.com/wp-content/uploads/2011/10/away3D-fps.swf

Téléchargement de Hi-ReS! Stats

Et pour télécharger le code source de la classe Hi-Res! Stats, cliquez ci-dessous :

Télécharger “Hi-ReS-Stats” Hi-ReS-Stats.zip – Téléchargé 256 fois – 7 Ko

Téléchargement directement sur le site officiel.

Solution avec Monster Debugger

Pour ceux qui préfèrent, Monster Debugger offre une fenêtre de visualisation en direct des ressources mémoire consommée par votre application.

Monster Debugger affiche également le nombre de FPS de l’application (nombre d’image par seconde).

Utilisez-vous cette classe pour mesurer les performances de votre application ou une autre solution ?

Partagez votre solution dans les commentaires ci-dessous.