Sujets sur : Adobe Flash

Le thème du cours AS3 de cette semaine est la création d’un jeu flash de type casse-briques ou plus connu sous le nom Arkanoid.

Pour développer ce jeu flash, nous allons nous appuyer sur le Framework PureMVC.

Voici ce que vous allez apprendre dans ce Cours ActionScript :

• Quelle est la stratégie optimum pour architecturer votre projet flash.
• Quel type d’arborescence utiliser pour se repérer facilement pendant le développement.
• Comment retrouver d’un coup d’oeil la classe contenant le code recherché !
• Les classe essentielles à créer lors de l’utilisation du Framework PureMVC.
• Comment simplifier votre développement en séparant les tâches par domaine professionnel.
• La technique pour implémenter l’algorithme du jeu dans les classes adéquates.
• Comment augmenter progressivement la difficulté du jeu.
• La solution pour effectuer simplement les différents tests de collision de la balle et des autres éléments du jeu.
• Comment gérer et sauvegarder le score du joueur en créant une copie de l’écran du jeu.
• L’organisation du code utilisée pour établir une communication entre Flash et Php / MySQL.

Cette formation AS3 vous permettra de développer un jeu flash AS3 de type casse-briques / Arkanoid.

Jeu Flash Casse Briques

Version démonstration

Ci-dessous un exemple du jeu flash casse briques !

[spoiler]

Bonjour à tous ici Matthieu pour actionscript-facile.com

 

Dans ce nouveau cours actionscript, nous allons continuer à aborder la création de jeux flash après avoir vu la création d’un ticket à gratter et divers autres cours notamment avec le Framework starling nous allons voir comment créer un jeu de type case briques en AS3.

 

A travers ce cours je vais vous expliquer comment utiliser et architecturer les framework pureMVC autour de votre projet de jeu flash.

Nous verrons également la création des classes types puis comment implémenter l’algorithme du jeu : quelles sont les classes, les vues, le modèle ou les commandes qu’il gère.

 

Le tout, en intégrant une difficulté progressive du jeu, la gestion des collisions et la construction aléatoire des niveaux.

Nous verrons également la sauvegarde du score du joueur par la création d’une copie d’écran et la communication entre PHP et MySQL via du flash remoting.

Vous apercevez une petite copie d’écran du jeu flash sur votre écran.

 

Passons tout se suite à la pratique.

 

Dans un premier temps il faut créer le fichier fla.

Le but de la création d’un jeu flash est de séparer les tâches par domaine professionnel.

C’est-à-dire que le graphiste s’occupera de créer le fichier fla et tous les éléments graphiques.

Il va ensuite créer un fichier S WC.

Pour cela il faut régler les paramètres de compilation et cocher cette case exporter S WC.

 

Ensuite tous les éléments qui seront utilisables par actionscript seront directement appelable via du code AS3.

Pour ce faire vous créez les éléments graphiques un par un.

 

Le palais, le mur, les différentes interfaces game over, félicitations, les briques 1cliq, les briques où il faut 2 clics pour les faire disparaître, les briques trois clics et le fond de notre application.

 

Ensuite une fois que chaque élément est créé, il suffit de faire un clic droit propriété dessus et de cliquer sur exportée pour actionscript.

Et vous choisissez le nom de la classe. En fait c’est ce nom de classe que nous utilisons dans notre code actionscript pour ajouter l’élément graphique, pour l’utiliser dans notre application flash.

 

Tous les éléments graphiques saufs les animations étendra Sprite.

Dans ce jeu, il n’y a pas d’animation donc nous auront que des Sprite.

 

Pareil pour la balle c’est un simple cercle avec un petit effet de couleur.

Clic droit, propriété exporter pour actionscript. C’est-à-dire pour créer les éléments graphiques de notre jeux flash, on les séparent tous dans des clips de type Sprite indépendants.

Et on les exporte tous pour actionscript.

 

Zprès il est tout à fait possible de les imbriquer.

C’est-à-dire dans le background on a un clip qui s’appelle clip background et dedans, on a une autre image.

C’est l’image de fond du jeu.

Pourquoi j’écris un clip background ? parce que dessus je peux ajouter des effets comme un effet Alfa à 50 % sur l’image, comme ça je sais que mon clip background dans mon jeu flash présentera une transparence alpha de 50 %.

 

Et vous pouvez ajouter d’autres effets.

Par exemple pour game over; il est également dans un clip, le clip s’appel game over clip et il présente aussi un style un effet alpha de 80 %.

 

Maintenant voyons le mur.

Si nous regardons le mur, il y a 3 movieclip à l’intérieur.

Enfin trois clips Sprite. Si je l’ouvre on voit que c’est droite, il s’appelle droite.

On regarde les éléments du mur qui sont là.

Il y a trois clips droite gauche et haut, vous remarquerez qu’ils ne sont pas exportés pour actionscript. Car nous n’en aurons pas besoin dans notre code donc c’est normal les 3 ne sont pas exportée pour actionscript.

 

Par contre, si on revient sur le mur cela va nous servir à gérer les collisions d’une façon plus précise et séparée.

C’est a dire, j’ai créé ce clip pour pouvoir l’appeler droite. Je donne un identifiant ici, je lui donne un autre identifiant : gauche. Cela va nous servir pour la création, le test des collisions entre la balle et le mur, en fonction qui touche le haut, la droite ou la gauche.

 

Une fois que tout cela est créé, il ne nous reste plus qu’à lancer la compilation avoir un autre fichier SWC.

 

Puis nous passons sous FDT.

Dans le répertoire libs, j’ai mes fichiers SWC.

Donc je regarde Game à set et je vois tous les éléments qui sont utilisables par mon code actionscript, briques, game over, palais etc.

 

Si on regarde une classe il suffit de faire new palet. On sait que c’est un Sprite et de faire un addChild de palet et il sera affiché sur la scène.

 

Le mur rappelez-vous nous avions créé 3 movieclips a l’intérieur : haut, gauche, droite.

C’est des propriétés de la classe qui vont nous permettre de tester les collisions.

Donc une fois que ça c’est créén on a le fichier SWC pour le framework actionscript facile, monster debuggueur et lui c’est pour les boutons.

 

Donc on part de notre classe main qui est en Sprite.

On créé application facade Start-up, donc notre application façade contient toutes les commandes et les événements de notre application.

 

On associe chaque commande à une classe de commandes c’est a dire que si on regarde un peu plus précisément notre application :

nous avons org avec le framework pureMVC, le remoting de bytearray comme avec le style AS3 facile. AS3 file c’est le JPEG encodeur de bytearray et applications : qui est organisé en trois package différents.

 

Toutes les vues notre modèle, il peut y en avoir un ou plusieurs et toutes les commandes avec notre contrôleur.

 

Ensuite on lance, rappelez-vous ici on appelle start up, start up qu’est ce que ça fait ?

 

Il récupère le root et le stage et ça envoit une notification.

 

La commande start-up application start-up ça fait quoi ça ?

Elle prépare modèle donc on créé notre modèle new classe proxy en lui passant le stage

 

Et ensuite on crée nos vues avec new application médiator.

Ensuite dans application médiator pour créer les vues donc chaque vues concerne une interface utilisateur ou un élément graphique bien particulier.

 

Nous avons une vue background pour l’affichage du fond, la balle, les briques, la construction du niveau, la gestion des briques avec le nombre de clics pour les faire disparaître, une vue gagner, une vue game over, le mur, le palet et une vue pour le score.

 

Donc nous créons nos vues, des nouveaux Sprite. Tout ça et nous les positionnons c’est a dire celle là sera tout en bas, viendra par dessus le mur, le palet et la balle, les briques, le score.

 

Game over et gagner, ces 2 vues sont au dessus de toutes les autres pour qu’on puisse les voir quand elles apparaîtront et ça nous évite d’avoir à masquer les zones c’est beaucoup plus simple.

 

D’une façon très simple nous pouvons gérer l’affichage de nos différentes interfaces.

 

Ensuite on lance la création des vues, le menu contextuel, le clic droit sur l’application.

Et on dit que notre application est prête donc on envoie un événement comme quoi elle est prête.

 

Alors ensuite une fois qu’elle est prête, les différentes vues écoutent cet événement.

Par exemple on a la vue background, elle fait un new background car nous avons dans nos game A7 background, new background.

On positionne notre background, on l’ajoute sur la scène, elle écoute aucun des événements.

 

Ensuite nous avons la vue balle, elle créée une nouvelle balle. Ici on la masque, au début et on l’ajoute sur la scène et c’est tout ce qu’on fait.

 

Par contre vue balle elle écoute des événements, on voit qu’il y a eu applicationReady envoyée.

Et on envoie une notification en transmettant balle.

C’est a dire pour l’architecture de mon application j’ai choisi d’envoyer une référence vers l’objet balle à toutes les vues qui vont en avoir besoin, pour faire les tests de collisions. Donc les briques, le mur et le palet.

 

La commande info balle si on regarde ici dans application façade.

Command info balle, ça va appeler load infos qu’est ce qu’on fait ?

 

On sauvegarde la balle sur chaque vue. On sauvegarde une instance de balle dans chaque vue.

 

Si on regarde vue mur, save balle, on sauvegarde juste la balle.

Pareil pour save balle du palet. Et pareil pour viewBrique.

 

Cela nous permettra d’effectuer des tests de collisions.

Donc on a vu vue balle qui écoute différents événements.

 

Qu’est ce que fait d’autre cette vue ?

Elle s’occupe de bouger la balle.

 

Comment la balle bouge ?

Nous avons notre modèle. En fonction des jeux flash, de leur complexité, il peut y avoir plusieurs modèles dans l’application.

 

Ici ça reste relativement simple, donc un seul modèle suffit, de quoi s’occupe ce modèle ?

Il fait le flash remoting, donc la connexion avec PHP.

Il s’occupe également de l’événement on onEnterFrame ici.

C’est a dire que le modèle diffuse l’événement, un événement onEnterFrame qui est envoyé à tout le monde et toutes les vues qui ont besoin d’écouter l’événement onEnterFrame s’abonne à cet événement et effectuent des actions.

Par exemple vue balle, elle va bouger à chaque frame, uniquement bouger et tester si le joueur a perdu ou non, en fonction de la position de la balle dans l’application.

 

Ensuite nous avons vue brique, vue mur, vue palet, chaque frame va tester si il y a une collision ou non entre la balle et le palet, entre la balle et le mur.

 

Si c’est un mur de droite ou gauche, et pareil collisions entre la balle et les briques.

Donc j’ai choisi d’utiliser cette architecture tout simplement.

 

Si on regarde vue mur à chacun onEnterFrame, on fait un test de collisions.

 

Donc le mur, on le construit et un test de collisions, c’est tout simple il teste, il teste hit horizontal.

 

S’il y a eu collisions on pourrait mettre hit horizontal et hit vertical.

Donc on envoie cet événement et il est à destination de la vue balle.

La vue balle qui a intérêt d’écouter ces deux événements hit horizontal et hit vertical.

 

Qu’est ce qui se passe ?

Dès qu’elle entend hit horizontal ou hit vertical, on fait rebondir la balle.

 

Donc on change l’angle avec un petit random. Une notion aléatoire pour faire rebondir la balle.

 

Donc on change des valeurs angle qui sont ici, celui-ci est donc ça, c’est appelé à chaque frame.

 

Chaque FPS la balle se déplace. Donc on teste le game over.

 

Si la balle sort de l’écran, on envoie une notification game over.

Pas besoin d’exécuter le reste du code, ça sert à rien.

 

Et là on bouge la balle. Tout simplement en fonction de la vitesse et on a un petit compteur de frame.

C’est a dire toutes les 1333 frame, on augmente la vitesse d’une façon semi aléatoire.

 

Cela permet d’augmenter la difficulté du jeu au fur et à mesure du temps qui se déroule. Cela, c’est pour la gestion du mouvement de la balles et des collisions.

 

Ensuite comment on crée notre niveau ?

La création du niveau c’est la vue brique.

 

La vue brique s’occupe uniquement de créer un niveau aléatoire et de faire des tests de collisions.

Donc de la même façon, il y a un événement start game.

 

C’est-à-dire quand le joueur appuie sur Start game, on a la vue gagné.

Ici, on a notre bouton commencer.

Et quand on clic sur le bouton commençer, cela envoie l’événement commande start.

 

Si on regarde commande start qu’est ce que ça fait ?

On envoie un événement start game pour démarrer une nouvelle partie.

Et on lance le onEnterFrame. Pas la peine, que le modèle lance l’événement, enfin elle écoute l’événement onEnterFrame directement.

 

Au lancement de l’application ça ne sert à rien, on l’écoute uniquement quand le joueur démarre le jeu.

Donc start game, une fois qu’on a le start game, il faut construire notre level.

 

Donc on va construire notre niveau. On créé un Sprite qui va contenir toutes les briques, et ensuite on va dire qu’on a 11 lignes et 7 colonnes.

 

Et là-dessus, on créé nos briques.

Donc on récupère un nombre aléatoire compris entre 0 et 9.

 

Donc cette fonction est simple, de génération de nombres aléatoires.

Puis en fonction, on va créer un certain type de briques.

Rappelez-vous, on a trois types de briques : 1 clic 2 clics 3 clics. On augmente la probabilité d’avoir des briques 1 clic en faisant plusieurs case qui permettent de créer plusieurs briques un clic .

 

On diminue pour les briques 2 clics, les briques 3 clics doivent être assez rares.

 

Les autres cases c’est fait pour, ça permet d’augmenter le nombre de briques vides.

On créé une brique un clic et on utilise un objet en renseignant clic 1.

 

Il faut 1seul clic pour la faire disparaître, celle la 2 clics, celle là 3 clics.

 

Ppour rajouter des briques avec 4 clics, 5 clics, il suffit dans notre fichier fla de rajouter des nouvelles briques.

Et ici des nouvealles cases puis on ajoute la brique en addChild du mur de briques.

On la positionne et en à notre objet brique info qui contient le nombre de clic et le display objet allBriques, on le pousse dans un tableau.

 

Le tableau qui va contenir tous les display objets briques, ça va nous servir pour les tests de collisions.

Et ensuite on l’ajoute sur la scène le test de collisions c’est tout simple.

 

Si le tableau de briques est vide, qu’il ne contient plus de display objet c’est que le joueur a gagné.

 

Parce qu’il a fait disparaître le tableau de briques, donc on envoie la commande gagnée.

 

Par contre s’il reste des briques, on parcourt le tableaux. Et on fait un petit test, en récupérant le display objet.

Donc notre objet qui est dans le tableau display, on envoie hitTest horizontale, on a touché une brique.

 

C’est pour le score, ça permet d’augmenter le score global.

 

Et à chaque fois qu’on touche une brique on décrémente allBriqueInfoClic.

 

S’il est égal à zéro, la brique doit disparaître.

Donc on l’enlève de l’écran et on l’enlève du tableau allBrique.

 

Sinon on continue.

Si une briques trois clics, 2 clics on décrémente, donc et à chaque onEnterFrame, on fait un test de collisions.

 

Pour le score, c’est tout simple.

 

On a une vue qui nous gère uniquement le score, on écoute un événement on start game.

 

Donc on met le score à zéro.

Ensuite start game, c’est quand on change de niveau, on ne repasse pas le score a zéro.

Par contre, on l’augmente de zéro.

 

Ensuite reset score, le joueur a perdu donc on passe le score à zéro.

 

Et il y a : toucher une brique, on augmente le score de 10 points.

 

Après rien ne vous empêche d’augmenter plus ou moins le score suivant le type de brique qu’il touche.

Donc il faudra changer cet événement hit brique 1 clics, hit brique 2 clics, hit brique 3 clics très simplement.

 

Et nous savons quand le joueur a perdu.

 

Nous allons faire une copie d’écran pour conserver son score.

Ainsi il pourra le télécharger et l’envoyer à ses amis.

 

On utilise un file référence un objet.

 

Donc si score qu’est ce qui se passe ?

Notre modèle il est ici, alors il y a un événement qui dit game over commande.

 

Quand il y a une commande de game over qu’est ce qui se passe ?

on arrête d’écouter l’événement onEnterFrame.

Ensuite sur application mediator, on fait un get vue c’est-à-dire qu’on récupère l’écran comme il est actuellement en utilisant la classe de Thibault Imbert JPEG encodeurs.

 

On prend les dimensions de notre scène pour créer notre data sur le root.

 

En fait, c’est pas vraiment le root de mon application pureMVC qui contient toutes mes vues donc je récupère ce display objet qui contient toutes mes vues.

 

Cela permet de faire la copie d’écran. Qualité 100, je l’encode je récupère un bytearray et j’envoie la commande save score donc un événement qu’il va appeler la commande save score.

 

Qu’est-ce que va faire la commande save score ?

Elle va tout simplement appeler mon modèle.

Et le modèle va lancer une communication avec AMF PHP.

Qui va appeler la méthode de la classe PHP, donc on a notre classe JPEG encodeurs a une méthode qui s’appelle save to serveur.

 

On lui passe les valeurs et en cas de réponse réussite par PHP, on envoie l’événement si score avec le lien vers l’image, son nom d’image.

 

Oou sinon une erreur qui récupère l’événement si score, la vue game over qui va se mettre à jour.

 

Alors je la cherche c’est la vue game over qui récupère l’événement si score parce qu’elle l’écoute, on fait un download scrore.

 

C’est a dire on met à jour avec les paramètres envoyés avec l’événement : notre texte donc le score est disponible ici, avec le nom de l’image, un petit no cache pour gérer le cache.

 

Eet on lui propose de télécharger le score.

 

C’est à dire qu’on utilise file référence donc sur notre, on écoute l’événement texte ligne.

 

Cc’est à dire on peut mettre un lien href dans notre texte, donc on a un lien html classique qui va ouvrir votre navigateur dans un nouvel onglet.

 

Et on a un lien html qui associe un événement.

Et cet événement va lancer la fonction. L’appel de la fonction on line clicked quand le joueur va cliquer ici pour télécharger son score.

 

On utilise notre objet file référence pour lui proposer de télécharger l’image sur son disque dur.

 

Voilà un petit peu la présentation de la construction du jeu de casse briques.

 

Jje lance la compilation pour vous montrer le résultat final.

 

 

On commence, on joue.

Donc nous avons des briques 1 clic, 2 clics.

La balle rebondit tout simplement.

 

Vous voyez le background avec l’image de fond, la balle qui rebondit sur le palet, sur le mur, sur les briques.

 

Et en haut le score qui augmente à chaque fois qu’une brique est touchée.

 

Ensuite je perds.

Là ça a envoyé un événement, ça communique avec AMF PHP.

 

Votre score est disponible ici donc je clique la et ça permet d’afficher l’image du score donc la copie d’écran qui est effectué quand le joueur a perdu avec 300 points.

 

Et je peux également télécharger le score pour l’enregistrer sur mon PC.

 

Je peux rejouer et lancer une nouvelle partie.

De la même manière, si je perds, le nouveau score est disponible ici.

30 points sur votre navigateur Web et voici la copie d’écran enregistrée sur mon disque dur qui vous montre le high score.

 

Donc ça permet avec ce jeu de casse briques qui est une démonstration de comment créer un jeu flash très simplement, utiliser le framework pureMVC.

 

Les joueurs peuvent s’envoyer le score et se le partager.

Vous avez vu rapidement la création complète d’un jeu en flash en s’appuyant sur le Framework pureMVC.

 

A vous maintenant d’essayer de l’améliorer.

 

Par exemple, vous pouvez ajouter la gestion des vies dans ce jeu.

Pour ajouter la gestion des vies c’est très simple.

 

A un endroit, dans une vue, on a un game over.

Le game over, il est envoyé par la vue vue balle.

Il suffit de rajouter une constante number vie.

 

On l’initialise à chaque fois que l’on crée un nouveau jeu start game.

Et ici à chaque fois que le joueur perd, on décrémente cette variable vie.

Et dès qu’elle est à zéro, on envoie la notification de game over.

 

Sinon s’il lui reste des vies, la balle est sortie de l’écran.

On la repositionne. Vu qu’on est dans la bonne vue, pas besoin d’envoyer un événement ça sert à rien.

On la repositionne correctement et le jeu continue.

 

Ensuite, vous pouvez très bien rajouter des briques bonus.

 

Donc les briques bonus seront gérées par la vue brique.

 

Je ferais comment pour ajouter une brique bonus ?

Je rajouterais un nouveau case après un get random sur plus de nombre zéro : 20 par exemple.

 

Et sur 13, 14, je créerais une brique bonus au lieu que le clic soit 1, 2, 3, 4, 5.

Par exemple, j’aurais mon objet allBriqueInfo bonus avec une propriété Bonus zéro à un.

 

C’est-à-dire que quand il y a une collision avec une brique, on teste la brique on rajoutera rubrique info .Bonus égal 1.

 

E on donne le bonus au joueur si c’est égal zéro on fait rien.

 

Donc c’est relativement simple de rajouter des briques bonus.

 

Ici par exemple, pour toutes les briques classiques que l’on doit toucher allBriqueInfo. Bonus seraient null et pour les briques bonus il serait égal à un.

 

Dde la même manière en utilisant le même principe de bonus allBriqueInfo. Malus pour ajouter des briques qui donne un défaut au joueur comme : accélérer la balle, réduire la taille du palet.

 

De là, vous pouvez utiliser exactement la même méthode pour ajouter des briques malus.

 

 

Comme d’habitude, sous ce cours vidéo, vous trouverez le code source complet du jeu flash casse brique.

 

Est-ce que vous aussi vous avez déjà développé des jeux flash ?

 

Si oui quelles sont les stratégies que vous utilisez ?

 

Et utilisez vous un autre framework comme Vegas ou sinon pureMVC ou PixLib ?

 

Ou est-ce que vous codez directement dans le fichier fla ?

 

Dites-moi cela dans les commentaires.

Si vous avez créés des jeux de casses briques ou amélioré le jeu de casses briques que je vous fourni, n’hésitez pas à poster un lien pour montrer votre création sous cette vidéo dans les commentaires.

 

Je vous dis à très bientôt pour un prochain cours sur un autre jeu flash sur actionscript-facile.com.

[/spoiler]

Télécharger le code source du cours AS3

Vous trouverez l’ensemble du code source commenté pour vous aider.

Renseignez votre adresse mail pour recevoir le code source commenté instantanément !

Et vous, quel type de jeux flash avez-vous déjà développé?

Quelles sont les stratégies que vous avez utilisés ?

Dites-moi cela dans les commentaires ci-dessous

Postez-les dans les commentaires ci-dessous !

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.

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

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é 913 fois – 792,16 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é 13336 fois – 8,90 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.

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 concerne l’utilisation des fonctionnalités de dessins et également la gestion des Tweens avec Starling Framework.

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 dessiner avec Starling Framework.
• Comment charger vos éléments (images, fonts) dynamiquement et les utiliser avec Starling Framework.
• Et comment implémenter les classes Starling dans votre code ActionScript.
• Comment implémenter plusieurs fonctionnalités simultanément avec Starling Framework. Par exemple, en appliquant un effet de Tween alpha sur une image chargée dynamiquement.

 

• Un parcours de l’API Starling avec la découverte de plusieurs fonctionnalités intéressantes.

Cette formation ActionScript vous permettra d’ajouter le dynamisme des Tweens à vos applications flash.

De plus, vous serez capable de charger des éléments dynamiquement pour rendre vos jeux flash plus modulaires et personnalisables simplement.

Tweens et Drawing avec Starling Framework

[spoiler]

Bonjour à tous et bienvenue sur actionscript-facile.com

 

Dans ce 5eme cours sur le framework starling, nous allons voir comment utiliser des tweens, des outils de dessin et le chargement dynamiques de vos images de polices de caractères, avec starling dans votre application flash AS3.

 

 

Qu’est-ce que le framework starling ?

 

Pour une présentation complète et détaillée je vous renvoie à la toute 1ere vidéos de cours pour en apprendre plus.

 

Le Framework starling, en résumé, c’est une librairie en pure AS3.

Cela permet à votre application flash en 2D, pour le rendu, d’utiliser directement le GPU, donc la carte graphique de votre ordinateur.

 

Et d’avoir des performances de rendu incomparable par rapport aux anciennes versions du player flash.

 

L’API de starling framework, comme vous l’avez vu, est très familière, pour un apprentissage rapide.

 

En fait il suffit d’échanger les classes natives de flash avec leur équivalence dans les classes natives donc display objet, Sprite, movie clip etc. etc.

 

Dans ce tutoriel actionscript, nous allons voir plusieurs exemples pratiques.

 

Ces exemples sont tirés du livre sur starling framework de Thibault Imbert que vous trouverez en téléchargement sous cet tutoriel.

 

C’est un livre en anglais très bien fait.

Il y aura également d’autres cours AS3 consacré à ce framework.

 

Nous allons, à travers plusieurs exemples, utiliser des tween sur des objets starling, le chargement dynamique d’éléments graphiques et un outil de dessin très pratique avec straling.

 

 

Passons tout de suite à la pratique.

 

Comme d’habitude, notre classe main étend Sprite , le sprite de flash. Display.

 

Nos paramètres de compilation : pensez à rajouter default framerate si vous voulez les l’augmenter, tout en sachant que vous pouvez le configurer d’ici c’est plus simple.

Par contre n’oubliez pas de rajouter ce paramètre de compilation pour activer stage 3D avec le flash Player 11.

 

Dans vos paramètres de compilation, n’oubliez pas d’utiliser Player globale version 11. SWC, qui est bien évidemment en téléchargement sous ce tutoriel vidéo.

 

Et également, dans votre fichier index.html, pensez à rajouter Wmode = direct, ça permet d’activer stage3D et l’accélération du GPU.

 

Sinon en dehors de ça, un on créé une nouvelle instance de starling en activant

l’anti crénelage, le multitouche pour un smartphone.

 

Et on démarre game.

 

Qu’est-ce qu’on va faire ?

 

On va apprendre à manipuler les outils dessins.

C’est-à-dire on a une image et on veut la laisser affichée à l’écran .

A chaque fois que l’on appuie enfin, quand on laisse appuyer, par exemple, on peut le faire pour simuler un déplacement d’images sur un smartphone.

 

Un déplacement d’un objet et là on va prendre une image.

C’est une gomme, on l’a récupérée avec sa classe.

 

On a notre rendu de texture. Comme d’habitude, ça ne change pas, on créé un bitmap à partir notre image.

On créé les textures à partir de notre image.

Et on créé notre image avec la texture.

 

Tout ça, on l’a déjà vu plusieurs fois, c’est simple.

On déplace le point d’origine 0 ;0.

 

J’ai rajouté l’activation du smooting pour lisser l’image parce que je la redimensionne.

Juste en dessous, en faisant un scale.

 

Dans la moitié on créé notre zone de dessin.

 

Toute la taille de la scène et ensuite on créé notre canevas.

C’est-à-dire dans cette zone de dessin, on pourra dessiner.

 

On affecte la texture de rendu à une image et on ajoute le canevas sur la scène.

Ensuite, on écoute les événements de la souris ou du doigt.

 

Quand l’utilisateur appuie sur l’écran avec son doigt ou ses doigts, en multitouches on lance cette fonction.

On l’a déjà vu c’est-à-dire qu’on récupère les coordonnées des doigts dans un tableau.

On parcourt ce tableau et si c’est cliqué ou touché l’écran.

 

On dessines, sinon on fait rien.

Là on récupère la position de chaque doigts.

On positionne le pinceau, donc notre image pour dessiner.

Et après on dessine dans le canevas.

C’est vraiment tout simple.

 

Je vais recompiler l’application pour vous montrer le résultat.

 

Vous avez votre scène vide.

Si j’appuie sur la gomme, si je laisse appuyé sur la gomme qui reste appuyée en déplacement.

En relâchement, on pourrai rajouter d’effacer tout l’écran et laisser la dernière position de la gomme.

C’est simple à faire, je recharge, je vais simuler le multitouches en appuyant sur la touche contrôle.

 

J’appuie sur la touche contrôle et vous voyez 2 gommes en même temps recharger la page.

 

J’appuie sur la touche contrôle une fois.

 

Un petit outil de dessin à travailler voilà.

Cela vous laisse plusieurs possibilités dans un jeu pour faire le glisser déplacer etc. etc.

 

Maintenant, nous allons voir l’utilisation des tween avec le Framework starling.

 

 

C’est également assez simple qu’est ce qu’on fait ?

 

On récupère une police de caractère donc un fichier TTF qui contient notre polices de caractères.

 

Si on regarde ici, dans font on a angelina.ttf dans asset, on avait la gomme.

 

On attend l’initialisation de la scène.

On créé une nouvelle instance de notre police.

On créé un textField, comme le cours sur la création de deux polices embarquée.

 

Et on positionne notre texte sur la scène.

Ensuite, on affiche le texte et c’est là où on créé une tween.

 

On créé une tween, on précise le texte, enfin l’objet à ajouter sur une durée de quatre secondes.

 

Et on fait une transition de isInOut pour simuler un rebondissement.

 

Il y a plusieurs types de tween.

Vous les avez toutes là.

Vous pouvez très facilement les changer.

 

Par exemple on va prendre ça, l’objet tween.

Si vous avez déjà utilisé des tween classique qu’on peut faire ?

 

Tous ces changements d’alpha sur le texte.

Ca c’est pour bouger le ciel donc le rétrécir.

Vous avez plusieurs paramètres : vous pouvez jouer avec sous forme de tween.

 

On indique la destination de l’objet.

On va le déplacer vers le bas pour jouer sur la transparence alpha.

 

Par exemple, si on avait mit une image ici, on aurait pu jouer sur son alpha.

Ensuite, on écoute tous les événements diffusés par la tween.

 

Donc start quand elle démarre.

OnUpdate : c’est la progression quand elle est mise à jour.

OnComplete : quand elle est terminée.

 

Pour lancer la tween, il nous suffit juste de l’ajouter à starling.

 

La tween se lancera.

On a nos fonctions écouteur d’événements.

 

Appel par l’objet tween tout simplement.

 

Les trois c’est pareil.

J’ai rajouté un petit debug.

 

Après, vous pouvez enchaîner avec une deuxième tween etc. etc. une animation enfin n’importe.

 

J’ai mis du debug comme ça on verra le résultat dans monster debugger.

 

Une tween rien de bien compliqué, je lance la compilation et on va voir le résultat dans le debugger et directement à l’écran.

 

Je recharge ma page et vous allez voir le texte se déplacer avec une tween.

 

Voilà, le texte s’est déplacé normalement c’est un peu plus fluide mais bon ça c’est mon pc.

 

Je recharge une dernière fois et vous voyez le texte là qui se déplace.

Si on regarde le debug, nous avons bien notre debug.

C’est-à-dire mon chargement enfin application initialisée, la tween démarre et ensuite progression de la tween.

Elle est complétée.

Vous avez la possibilité d’enchaîner sur d’autres actions en fonction de ce que vous souhaitez écouter de la tween.

 

Nous allons voir le dernier thème de ce cours.

 

On a utilisé des ressources embarquées dans nos applications flash donc évidemment ça grossit le SWF final.

 

Il faut savoir qu’avec starling, c’est tout à fait possible de charger dynamiquement nos images, nos polices de caractères…

 

Le chargement dynamique permet d’alléger votre SWF et de charger les éléments uniquement quand l’utilisateur est sur l’interface concerné. Donc quand c’est nécessaire.

 

Pour cela, on crée un objet Loader classique.

On écoute les événements complete et error.

Et on charge une image. Une image qui est sur le site actionscript-facile.

 

Ensuite on écoute.

En cas d’erreur, ça c’est appelé par l’objet.

 

Je vais le rajouter appel par l’objet Loader.

 

Voilà et pareil ici.

Une fois que notre image est chargée, on récupère l’objet bimap.

Puisque c’est une image, quand ce sera une police on récupérera l’objet police.

 

Donc e.currentTarget.content as bitmap et après classique ça revient comme on l’avait vu tout à l’heure.

 

Une fois qu’on a récupéré notre bitmap, il nous reste plus qu’à faire un petit peu ce qu’on veut derrière.

 

Qu’est ce qu’on fait ?

On récupère notre bitmap, on créé notre texture puis on créé notre objet image et on l’affiche.

 

Vous pouvez faire ça pour vos jeux vidéo.

Vous chargez les graphismes en fonction du niveau où le joueur se situe.

Libre à vous de charger uniquement les éléments du niveau, les éléments du niveau 2.

Ca fait d’accord une petite barre de chargement mais au moins au premier chargement du SWF il sera super léger.

Il contiendra uniquement votre algorithme de calcul.

 

Il nous reste plus qu’à compiler et on va voir le résultat du chargement directement à l’écran.

 

Je vais recharger la page et vous allez voir le SWF sera vide dont il sera blanc et l’image va se charger.

 

L’image se charge et s’affiche.

Je refais elle s’affiche avec starling donc elle se charge et elle s’affiche.

 

On peut même rajouter un petit effet de tween alpha dessus.

Je vais le faire tout de suite et je vais recompiler.

 

Qu’est-ce que je fais ?

 

Comme je vous le disais, après une fois que l’image est chargée on la récupère.

 

Ca fonctionne exactement comme les autres exemples que je vous ai montré.

 

On créé notre objet tween sur l’image sur une durée de 6 secondes.

 

On fera une transition EasyOutElastic, on joue sur la transparence alpha et on l’ajoute à start.

 

Pour démarrer la tween rien de plus : là j’écoute.

Aucun événement diffusé par la tween.

J’en ai pas besoin c’est juste un exemple pratique.

 

Une fois que l’animation est chargée donc je recharge et vous allez voir l’image charger dynamiquement et après elle subi une tween sur son effet alpha.

 

Voilà, je recharge pour vous montrer une autre fois.

L’image est chargée dynamiquement et après elle subi une tween de six secondes sur son alpha.

 

On a vu plusieurs solutions d’utilisation des nouvelles fonctionnalités starling : les tween, le dessin, le chargement dynamique des assets.

 

Sous cette vidéo, vous pourrez télécharger le code source complet des différents exemples.

 

N’hésitez pas à poser vos questions sur le Framework Starling dans la zone commentaire sous cette vidéo.

Vous pouvez aussi partager vos liens vers les applications que vous avez créé qui utilise ce framework.

 

Je vous dis à très bientôt sur actionscript-facile.com pour le prochain cours sur Sarling framework.

[/spoiler]

Version démonstration

Ci-dessous plusieurs exemples d’utilisations de dessins, Tweens et chargements dynamiques avec Starling Framework.

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

Appuyez sur l’écran avec le clique gauche de la souris pour commencer à dessiner. Maintenez le bouton « Ctrl » du clavier enfoncé pour simuler le multi-touches des smartphones.

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

Télécharger le code source du cours AS3

Et voici le code source des exemples 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 Tween - Dessin”

ex-starling5-dynamic-assets-tween.zip – Téléchargé 812 fois – 828,39 Ko

Consulter le code source directement sur GitHub.

Le Site Officiel de 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é 13336 fois – 8,90 Mo

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

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

Ou utilisez-vous un Framework concurrent, équivalent ou fait maison ?

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 est axé sur l’utilisation de polices embarquées avec Starling Framework. Nous allons également apprendre à écrire du texte à partir d’une police contenu dans une simple image png (rappelez-vous le cours sur l’animation de personnages) !

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.

Dans ce Cours AS3, vous allez utiliser des polices embarquées optimisés avec Stage 3D.

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 utiliser des polices embarquées avec Starling Framework.
• Et comment implémenter les classes Starling dans votre code ActionScript.
• Comment utiliser des fichiers ttf, contenant votre police de caractères, avec Starling Framework.
• Un parcours de l’API Starling avec la découverte de plusieurs fonctionnalités intéressantes.
• Comment utiliser une police contenu dans une image png.

Cette formation vous permettra d’ajouter à vos jeux flash des polices de caractères originales.

Polices embed avec Starling Framework

Version démonstration

Ci-dessous plusieurs exemples d’utilisations des polices embarquées avec Starling Framework dans flash !

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

Télécharger le code source du cours AS3

Et voici le code source des exemples 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 polices embed”

ex-starling4-police-embed.zip – Téléchargé 1091 fois – 1,03 Mo

Télécharger Bitmap Font Generator (gratuit) pour créer une image png à partir d’une police de caractères.

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é 13336 fois – 8,90 Mo

Avez-vous développé vos premières applications flash avec Starling Framework ?

Si oui, postez un lien vers votre application dans les commentaires ci-dessous.

Si non, pourquoi ? Utilisez-vous une autre technique pour profiter de l’API Stage 3D ?

Starling Framework étant 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 est axé sur la création de boutons pour un Menu de jeu flash !

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.

Dans ce Cours AS3, nous allons apprendre à créer plusieurs boutons optimisés avec Stage 3D.

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 créer un menu composé de plusieurs boutons.
• 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.
• Le code complet pour créer votre interface d’accueil de votre jeu flash optimisé par Starling Framework.

Cette formation vous permettra de créer un menu avec plusieurs boutons et un paysage défilant pour une application flash en 2D.

Ensuite, il vous reste à implémenter les actions spécifiques à chaque bouton.

Création de Buttons avec Starling Framework

[spoiler]

Bonjour et bienvenue sur actionscript-facile.com

 

Dans cette série de cours consacré au Framework starling, nous continuons à apprendre à utiliser les fonctionnalités qu’il recèle.

 

Le thème de ce cours est consacré à la création des boutons d’un menu avec starling, dans une application flash AS3.

 

Pour ceux qui savent pas ce que c’est starling, une présentation rapide :

c’est une librairie en pure AS3.

Starling reproduit l’architecture de flash et display list, Sprite, movieclip.

 

L’avantage, c’est que tout votre rendu d’une application flash normale, donc pas en 2D, est directement calculée par le GPU.

Cela permet d’avoir des performances très intéressantes.

 

 

Pour une présentation un peu plus détaillée, je vous renvoie à la vidéo, au cours vidéo numéro 01 qui présente starling dans le détail.

 

On va passer tout de suite aux exemples pratiques de ce cours.

C’est-à-dire la création d’un menu avec starling Framework.

 

Je le répète vite fait : pensez à mettre Wmode = direct pour activer stage3D et l’accélération du CPU avec le flash Player 11.

 

De toute façon, ce sera dans le fichier de code source.

 

Ensuite, pensez à vos paramètres de compilation. Je les ai mis ici à rajoutez -SWF-version=13 pour activer l’api stage3D du flash Player 11.

 

Et également, pensez, il y a trois choses à reprendre le Player global version 11 .SWC qui sera également en téléchargement sous cette vidéo.

 

On part de notre classe main classique qui étend Sprite mais le Sprite de flash player 10. Sprite et on utilise starling en créant une instance de l’objet.

 

 

Starling l’anti crénelage, multitouche, si on est sur un Smartphone.

Et on démarre.

 

Ce qui nous intéresse, c’est de créer un menu.

On a nos éléments de boutons que je vais vous montrer.

 

Les assets, ici nous avons donc le bouton état normal et le bouton état cliqué donc c’est des images PNG tout simplement rien de bien méchant.

 

On définit un tableau vector avec les noms de chacun de nos boutons du menu :

jouer, options, se connecter.

 

On importe les deux boutons directement dans notre SWF.

L’état bas est à cliqué, du bouton est l’état normal, je vous explique.

Après, on créé des bitmaps de nos boutons que nous avons ici.

 

A des constantes à modifier, on en créé des bitmaps. Ils ont créé les textures de nos boutons.

 

Nous, on va créer un menu pour le fond.

Je vous expliquerais après et ont créé un bouton pour notre menu.

En fait, ça va contenir tout nos boutons.

Et puis là, on a notre tableau.

On boucle et on créé nos boutons.

 

Alors pour créer un bouton, on lui donne la texture pour l’état haut, le nom, le contenu texte, la texture pour l’état bas.

On met le texte en gras, sa taille et là c’est un effet, un scale donc de 0,9 au lieu de 1 sur le bouton.

 

Lorsque le bouton sera cliqué, il qui sera réduit.

On le positionne et on l’ajoute dans notre container.

On écoute l’événement triggered c’est à dire triggered sera envoyé à chaque fois que le bouton est cliqué par l’utilisateur.

 

Et quand il est cliqué qu’est ce qu’on fait ?

 

On fait un petit trace dans monster debuguer.

Ensuite on écoute le stage sur chaque image. Cela simule l’événement onEnterFrame.

 

Finalement, on centre notre menu sur la scène et on l’affiche.

 

J’ai rajouté autre chose, je précise que ces exemples provienne du livre en anglais de Thibault Imbert.

 

J’apprends à les utiliser et et je vous explique un petit peu ce que j’en ai compris.

 

On va mettre une image de fond.

Tout simplement une image de fond dans assets, rien de bien méchant.

 

Un container qui va contenir nos deux images. C’est une image qui va défiler.

Il y aura notre menu et le fond qui défile.

En fait, il y a 2 images pour simuler le défilement du fond. Ce sera les mêmes sauf qu’elles seront collées l’une à côté de l’autre.

 

On crée un bitmap de notre image, une texture. Vous commencez à bien connaître, c’est le troisième exemple que nous voyons.

 

Création texture, notre container et on créé nos deux images.

C’est les même donc à partir de la même texture, et on les positionnent.

Elles sont toutes les deux les unes à la suite des autres. On les ajoute sur la scène.

 

Enfin sur notre container, nos deux images sur le container et le container sur la scène.

Et là, vous voyez que le menu sera affiché par-dessus le background.

Donc le container d’un backround et donc là on fait scroller l’image à chaque onEnterFrame tout simplement.

 

Cela permet d’utiliser des boutons.

Je vous remontre une bitmap texture pour chaque bouton et on a la classe bouton qui contient pas mal d’appel ici.

 

Et pour enable l’état bas on peut changer en live.

On a un getter setter sur la texture pour l’état bas du bouton, pareil pour l’état normal.

 

Ici ça, ça permet de positionner le texte dans le bouton.

Par défaut le texte est centré dans l’image du bouton, mais on peut le positionner beaucoup plus précisément.

 

Si vous êtes curieux, vous regarderez la classe un peu plus en détail.

 

Je lance la compilation et ensuite je vais ouvrir mon navigateur Firefox pour vous montrer le résultat.

 

Voilà le résultat, camtasia enregistre, donc moi ça rame. Comme vous le savez, j’ai un PC plutôt moyen. Donc en fait, on a le fond qui défile.

Sur votre PC, en tant qu’exemple, il défilera à 40 images/secondes.

Donc le fond défile et nous avons donc la création de nos boutons.

 

Si je clic sur un bouton, voyez l’état bas du bouton et si on regarde le debugger, on voit que le bouton option a été cliqué.

 

Ensuite, je clique sur le bouton jouer et le bouton se déconnecter.

 

Donc ça pourra être très utile ce style de menu. Par exemple, pour vos jeux flash, cela utilisera également entre le scrolling, vos boutons, la puissance du flash Player 11 et surtout stage 3D.

Donc on regarde dans le debugger, on a appuyé sur jouer et se connecter.

 

Je fais un clear traces et puis je vais ré-appuyer sur le bouton règles tout simplement.

 

Il se réduit après on peut faire des enable / disable derrière et on constate l’appui sur le bouton.

 

C’est un exemple qui reste assez basique de l’utilisation des éléments embarqués et vecteurs, des textures.

 

Une image qu’on met dans un Sprite, la classe image que nous avons déjà vu plusieurs fois et qui contient pas mal de choses très intéressantes.

 

Je vous laisserais découvrir smothing etc.

 

Maintenant on a vu la classe bouton.

 

Dans le prochain cours, on verra les polices embarquées.

Comme pour les animations, c’était tout intégré dans une image PNG, nos polices embarquées seront également intégrés dans une image PNG.

 

Et on refera notre menu avec des polices embarquées à partir d’une image PNG.

 

Comme d’habitude, vous trouverez le code source de starling framework sous cette vidéo.

 

 

Et vous avez également le livre PDF complet de Thibault Imbert en anglais sous cette vidéo si vous voulez apprendre plus rapidement à maîtriser et à utiliser starling framework.

 

Si jamais vous avez commencé à créer des premières applications qui utilisent la puissance du flash Player 11 et stage 3D n’hésitez pas à poster sous cette vidéo dans les commentaires.

 

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

[/spoiler]

Version démonstration

Ci-dessous un exemple de création de Menu avec Starling Framework dans flash !

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

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 Button Menu”

ex-starling3-button-menu.zip – Téléchargé 1423 fois – 656,64 Ko

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é 13336 fois – 8,90 Mo

Avez-vous développé vos premières applications flash avec Starling Framework ?

Si oui, postez un lien vers votre application dans les commentaires ci-dessous.

Si non, pourquoi ? Utilisez-vous une autre technique pour profiter de l’API Stage 3D ?

Starling Framework étant 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 est axé sur l’animation de personnages, notamment pour des jeux flash !

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

Dans ce Cours AS3, nous allons apprendre à animer un ou plusieurs personnages, directement à partir d’une seule image (jpg, png) !

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 créer plusieurs personnages animés dans une seule image png ou jpg !
• 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 (comme les Custom Sprite).
• Le code complet pour créer vos premiers personnages animés grâce à Starling, à partir d’une image unique, chargée depuis votre swf.

Cette formation vous permettra d’animer des personnages en utilisant le Framework Starling et donc de profiter de la puissance du GPU pour le rendu de vos applications flash en 2D.

Animations de personnages avec Starling Framework

Version démonstration

Ci-dessous un exemple tout simple d’utilisation de Starling Framework dans flash !

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

Utilisez les touches directionnelles de votre clavier pour diriger le personnage à droite et à gauche.

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 Personnages”

ex-starling-animation-personnage.zip – Téléchargé 1303 fois – 867,68 Ko

Télécharger le logiciel gratuit TexturePacker pour créer les images png contenant vos animations.

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é 13336 fois – 8,90 Mo

Avez-vous développé vos premières applications flash avec Starling Framework ?

Si oui, postez un lien vers votre application dans les commentaires ci-dessous.

Si non, pourquoi ? Utilisez-vous une autre technique pour profiter de l’API Stage 3D ?

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é 1235 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é 13336 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.

Continuons à apprendre à utiliser de la 3D dans Flash.

Le précédent Cours ActionScript abordait l’implémentation du moteur 3D : Away3D.

Dans ce Cours AS3, nous allons créer la fameuse sphère en 3D, la planète terre qui tourne sur un axe.

Voici ce que vous allez apprendre dans ce Cours ActionScript :

• Comment implémenter et utiliser l’API Away3D dans une application flash.
• Le code complet pour créer une sphère en 3D à partir d’une image chargée à la volée ou dans votre swf.
• Les fonctionnalités primitives de Away3D.
• Un parcours de l’API Away3D avec la découverte de plusieurs classes.
• Et encore plein d’autres possibilités… le moteur Away3D regorge de fonctionnalités 😉

Cette formation vous permettra de découvrir l’API Away3D et de créer une application flash en 3D.

Tout au long de l’année, plusieurs cours ActionScript sont entièrement consacrés au moteur Away3D.

Sphère avec Away3D

[spoiler]

Bonjour à tous ici Matthieu pour actionscript-facile.com

 

Dans la vidéo du cours dernier en action script, nous avons commencé à découvrir le moteur 3D away3D.

 

Et bien, dans ce tutoriel, nous allons voir comment créer la fameuse sphère en utilisant ce moteur.

 

C’est-à-dire que nous allons créer une sphère, comme une planète, en utilisant une image l’image.

 

Soit vous l’importée dans votre SWF ou vous la chargez dynamiquement.

 

Passons tout de suite à un exemple pratique pour découvrir de nouvelles fonctionnalités d’away3D.

 

Alors, comme d’habitude, nous partons à partir de notre classe main qui étend Sprite.

 

Je vous ai préparé une classe globe qui contient tout ce qu’il faut, il y a juste à l’instancier, l’ajouter sur la scène et lancer sa méthode d’initialisation.

 

Passons tout de suite à la classe globe.

Donc on va utiliser une texture pour le globe et ce sera une image PNG qu’on importe directement dans notre fichier SWF.

 

Bien évidemment si vous préférez vous avez la possibilité de charger dynamiquement cette image PNG.

 

Donc soit, elle est stockée avec d’autre image dans un fichier SWF, soit vous la chargez dynamiquement directement.

Je vais vous montrer.

 

Donc c’est cette image PNG vaines de 700 pixels par 300 pixels à peu près et c’est celle là qui va constituer notre sphère.

Ce sera la texture de notre sphère donc c’est le reste de nos variables.

 

On commence comme tout à l’heure.

Comme le dernier cours, on initialise notre moteur : les textures, les objets, les lumières et les écouteurs.

 

Création de notre scène en 3D, donc on instancie la classe scène 3D, la caméra 3D.

On fait un petit zoom arrière pour permettre de voir la sphère entièrement.

On créé une nouvelle vue en 3D, on lui affecte la scène et la caméra.

Et on ajoute source URL, c’est-à-dire dans le menu contextuel quand vous ferez clic droit ça renvoie sur cette URL.

Et on ajoute notre vue sur la scène.

 

Pour les textures, on utilise donc cette classe qui demande en entrée un bitmap Data et un objet.

 

Donc on utilise cast.Bitmap la classe earth image.

La classe earth image, c’est notre image que nous avons embarquée.

Si vous la chargez dynamiquement, vous pouvez directement lui passer une instance bitmap et les paramètres.

 

Ensuite, on créé nos objets de la scène.

Donc on créé une nouvelle sphère, on lui passe la texture.

C’est notre image le diamètre de la sphère, radius le segment W.

En fait, segment W, c’est le nombre de lignes ou de segments qui composent la largeur de la sphère.

Et segment H, c’est nombre de segment qui compose la hauteur de la sphère.

 

Vous verrez quand vous changerez ce chiffre si je mets 3 ici et 1 là, ça me fera un carré.

Je peut faire un carré , ben on va le faire je vais mettre 4 et 1 ici et je vais lancer la compilation.

 

Et nous obtiendrons un carré parce qu’il n y a pas beaucoup de côté.

C’est le nombre d’éléments qui composent la surface si je puis dire.

 

Donc vous voyais, ça nous fait une sphère vraiment pas terrible du tout si je ne met pas beaucoup de segments.

 

Si vous voulez appliquer de la texture sur un carré, il faut utiliser une autre classe.

Pour cela, il suffit de regarder dans le Framework primitif dont je le fais en direct la le cours.

 

Je pense que ça doit être cube donc on va essayer tout de suite.

On va créer un nouveau cube là faut le changer en cube.

Évidemment il n’a pas radius.

 

Qu’est ce qu’il a lui comme paramètres le cube ?

Segment D à la place et donc je modifie ça.

Donc comme vous voyez je prends la classe cube, je m’adapte, je met le nombre de segments sa largeur.

Je peux même définir sa hauteur, là ça va nous faire un petit peu un rectangle.

 

Je lance la compilation et on obtiendra un cube.

Voilà le résultat bon c’est pas trop le thème de ce cours, c’est pour vous montrer.

Donc sur toutes les faces il y a mon logo que l’on peut voir tout en 3D.

 

Repassons au thème du cours où nous allons construire une sphère.

Donc pour cela je reviens en arrière dans le code voilà.

Je remets la sphère, vous avez d’autres primitifs.

Ce sera à vous de les découvrir plain skybox etc… tout un tas de possibilités pour construire plus rapidement vos objets en 3D.

 

J’espère que vous avez compris ce que représenté segment W et segment H.

Je crée un nouveau objet container en 3D, je lui affecte la sphère.

Et sur la scène j’ajoute le container de la sphère tout simplement.

Je crée mes lumières pour permettre de voir la sphère donc des lumières en 3D avec un vecteur en 3D.

Et l’ambiance, j’ajoute les lumières sur la scène.

Ensuite mes écouteurs, c’est-à-dire sur chaque frame par seconde, je ferais des événements au moment où la souris est appuyée.

 

Donc clic sur le bouton gauche de la souris, relâchement du bouton gauche de la souris, j’enverrais des événements.

Et sur l’événement resize, des événements donc sur un onEnterFrame.

Par défaut, je fais tourner la sphère automatiquement de plus 1 pixel à chaque fois.

 

Si l’utilisateur bouge la souris je mets à jour et je fais tourner la sphère sur l’axe des X et Y.

Renderer, ça met à jour le rendu de ma vue sur chaque image par seconde.

Donc quand on appuie sur le bouton de la souris, on récupère les coordonnées de la souris.

Et on met à jour la rotation de la sphère tout simplement.

 

Je vais lancer la compilation de ma sphère et le debug.

 

Vous allez voir un petit peu le résultat.

Après libre à vous, ça c’est juste un exemple du cube, de la sphère d’autre primitive de ce que l’on peut faire.

Après libre à vous de créer vos bannières.

Les bannières animées en 3D ou de l’intégrer dans des jeux en 3D tout en sachant que pour l’instant en attendant la version 11 du player flash les performances sont très très importantes.

 

Donc il faut vraiment optimiser son code pour gérer et fournir des performances correctes à vos internautes.

Voici la sphère qui en train de se construire.

Voilà, nous avons notre image qui est parfaitement appliquée sur notre sphère en bougeant la souris.

 

C’est-à-dire en appuyant sur le bouton de la souris et en bougeant, nous voyons bien toute notre sphère complète.

Et elle tourne toute seule donc ça prend 10 méga de ressources mémoire.

 

Moi ça ne tourne pas parce que mon PC est très lent.

Voici donc c’est un exemple très basic.

Cela vous permet de découvrir comment utiliser une image une texture et l’appliquer sur une primitive : que se soit un cube une sphère ou autre chose.

 

Ensuite libre à vous de l’appliquer.

Comme vous pouvez le voir le code est très simple.

 

Ca vous connaissez onEnterFrame, la lumière notre objet avec la texture très important.

Et les paramètres change en fonction de la primitive utilisée.

On l’ajoute sur la scène en passant par un container.

 

Après si vous êtes curieux, vous pourrez regarder le code source et regarder à quoi sert objet container.

 

Il y a tout ce qu’il faut, il y a les commentaires sur la source, notre initialisation du moteur de la scène 3D, de la caméra, notre vue.

Donc notre rendu.

 

 

Voilà un petit peu, nous avons vu comment utiliser une nouvelle facette du moteur away3D.

 

Comme d’habitude, vous pouvez télécharger le code source de cet exemple directement sous cette vidéo.

 

Et vous de votre côté quel est le rendu que vous arrivez à obtenir avec ce moteur away3D ?

 

Je serais très curieux de voir vos applications ce que vous avez réussi à faire : que se soit des bannières ou utiliser des objets 3DSMax etc. etc.

 

De toute manière dans les prochaines semaines, je continuerai de poster des cours ActionScript sur ce moteur 3D que je trouve très sympathique.

 

Et en attendant 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 !

Télécharger le code source du cours AS3

Et voici la Sphère en 3D créée avec le moteur Away3D.

Télécharger “Away3D Sphère”

away3d-sphere-ex2.zip – Téléchargé 855 fois – 1 017,19 Ko

Téléchargez la dernière version du moteur Away3D.

Vous pouvez consulter la documentation complète de l’API Away3D.

Et voici les sources ActionScript Away3D sur Google Code.

Et vous, quels rendus obtenez-vous avec Away3D ?

Postez les liens de vos applications dans les commentaires.