Sujets sur : jeux flash

Nous allons cette fois-ci créer un jeu de plateforme : Super Mario Bros.

Pour nous simplifier la tâche, nous allons tout simplement reprendre le Tile Engine du jeu RPG Zelda.

En apportant quelques modification à ce moteur de jeu, il devient rapide de créer un jeu de plateforme complexe et optimisé.

Pour approfondir le développement de jeux flash, vous pouvez aussi consulter les cours précédents : Créer des jeux flash en ActionScript.

Voici ce que vous allez apprendre dans ce Tutoriel ActionScript Flash :

• Utiliser le Tile Engine pour créer un jeu de plateforme.
• Personnaliser les graphismes avec l’ajout d’animations, des ennemis… propres à Super Mario Bros.
• Les techniques pour séparer complètement le code des graphismes.
• Plusieurs solutions pour animer les ennemis, le héros sans une seule ligne de code actionscript dans Adobe Flash CS5.
• Comment contrôler les différentes animations uniquement depuis le code actionscript.
• Comment gérer les effets et la musique efficacement dans un jeu flash.
• La technique pour modifier en temps réel le décor, en fonction des actions de Mario.
• Différentes stratégies pour booster les performances d’un jeu de plateforme.
• La gestion des différents bonus animés dans le jeu.
• Le chargement dynamique des ressources du jeu (les graphismes, les fichiers sons…).

Cette formation AS3 vous permettra de développer un jeu de plateforme comme Super Mario Bros.

Jeu Flash Super Mario Bros

Version démonstration

Ci-dessous un exemple du jeu de plateforme Super Mario Bros !

Utilisez les flèches directionnelles pour vous déplacer dans le niveau.

Télécharger le code source du cours AS3

Consultez ce site sur les jeux flash (en anglais).

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

Télécharger “Sources Super Mario Bros”

src-super-mario-bros.zip – Téléchargé 1754 fois – 1,02 Mo

A votre tour, terminez le jeu Super Mario Bros !

Ajoutez les fonctionnalités manquantes, créer des niveaux plus complets.

Et postez votre jeu flash dans les commentaires ci-dessous.

Nous poursuivons la création d’un jeu flash de type RPG ou plus connu sous le nom de Zelda.

C’est la 2ème partie du cours RPG type Zelda.

Pour lire la 1ère partie de ce cours : création d’un moteur de tile pour un jeu flash de type RPG.

Pour une meilleure approche du développement de jeux flash, vous pouvez aussi consulter les cours précédents : Créer des jeux flash en ActionScript.

Voici ce que vous allez apprendre dans ce Cours ActionScript :

• Comment ajouter des ennemis sur la carte.
• La technique pour gérer la vie de notre héros.
• La solution pour ajouter simplement différents items bonus sur la carte.
• Des items pour ajouter de la vie au héros, lui donner des balles supplémentaires.
• Comment donner la possibilité aux ennemis de tuer le héros.
• Plusieurs astuces pour l’évolution du jeu : avec différents types d’ennemis, une multitude d’items bonus, différents types d’armes…

Cette formation AS3 vous permettra de développer un jeu flash AS3 de type RPG / Zelda complet.

Jeu Flash RPG Zelda

[spoiler]

Bonjour à tous et bienvenue sur actionscript-facile.com

 

Nous allons donc passer au cours sur la création d’un jeu flash de type RPG zelda, la 2eme partie.

Au cours de cette 2eme partie nous allons voir ;

comment ajouter des ennemies à notre jeu,

ajouter des items bonus, du style gagner des vies, gagner des balles etc.

nous allons également ajouter la possibilités de tirer sur les ennemies, quand un ennemie touche le héros celui-ci perdra de la vie (le héros)

et de plus le jeu va gérer le niveau de vie du héros et le nombre de balles disponibles.

 

Passons tout de suite à la pratique.

 

Donc déjà on va commencer par modifier notre fichier fla en rajoutant les éléments graphiques nécessaires.

Donc les items, on reprend le même principe que les tiles si vous vous rappelez, un item sur chaque frame de notre movie clip.

On fait en export avec la classe de base de movie clip, il s’appelle item donc vous pouvez créer autant d’items que vous le souhaitez.

Je l’ai fais avec 2 items pour simplifier les choses, donc ce sont des images png comme d’habitude, après libre à vous de rajouter des items comme des clefs pour ouvrir les portes etc.

 

ensuite nous avons les balles, donc là, c’est un truc tout simple, c’est un sprite balle, y’a pas d’animation rien, après vous pouvez très bien mettre une classe de base movie clip et ici faire une petite animation sur la balle, un effet de vitesse …

 

Nous avons donc les ennemies, j’ai repris le héros seulement juste en changeant sa couleur, en rajoutant une teinte. Donc ennemie 1 et ennemie 2, avec une teinte différente ici.

 

Comme pour le héros, je les exporte en movie clip et je les nomme ennemie 1 et ennemie 2.

vous pouvez créer autant d’ennemies que vous le souhaitez, et forcément avec des graphismes différents, vous n’êtes pas obligé de reprendre le héros. Moi j’ai fais ça, parce que c’était plus simple, après libre à vous de créer des ennemies propre à votre jeu et l’image de game over, c’est à dire quand le héros n’a plus de vie et bien, il meurt et donc on affiche, le dit game over, qui est un sprite tout simplement.

 

Autant déclarer des sprite quand il n’y a pas d’animation ça permet d’économiser les ressources mémoires, très important dans un jeu flash.

 

Il nous reste plus qu’à compiler cela pour avoir un fichier swc que nous allons réutiliser dans notre jeu flash, où on reconnaît boulette, ennemie. Bien évidemment ennemie y a char ici, ce clip est nommé char, ça permet d’accéder à l’animation à l’intérieur, pareil pour ennemie 2.

 

Si on regarde, il s’appelle char mais bien évidemment vous pouvez l’appeler autrement mais c’est plus à gérer ensuite. Ennemie 2 aussi char, c’est comme le héros en fait les ennemies, le même principe de fonctionnement.

 

Donc pour cela on a notre classe du héros qui va gérer le nombre de balles et la vie du héros, la vitesse de la balle, la durée, le timer sur le dernier tir, mais un timer ça évite que la balle ne parte trop vite, en laissant appuyé ça ferait 40 balles par seconde, ce qui est beaucoup trop. Pareil quand le héros se fait touché par un ennemie on met un petit timer sinon le héros perdrait trop de vie, trop vite.

 

Et on initialise tout ça, et à chaque fois qu’on modifie le nombre de balles, on envoie un événement qui sera récupéré par la vue border, j’ai choisi de mettre ici le texte pour la vie et le texte pour les balles.

Donc au début y a rien, pas de vie, pas de balles, et cette vue là, écoute les 2 événements héros boulette et héros life et à chaque fois, on récupère le paramètre transmit par l’événement et on met à jours le texte sur l’écran.

 

Donc là, c’est géré par la vue map, tout ce qui est vie et héros et tout ça, quand un ennemie touche le héros, la vue map envoie un événement, cet événement là, et on met à jour la vie et le nombre de balle. Quand on gagne un bonus par exemple, là quand un ennemie touche un héros, on appelle cette classe là, on vérifie le timer dans la classe du héros si c’est bon on décrémente la vie du héros.

Après vous pouvez personnaliser en fonction de l’ennemie, décrémenter plus ou moins une vie. Donc le nombre de vie à décrémenter serait transmit par l’événement ennemie touche héros évidemment.

 

Une fois que la vie est mise à jour, on envoie l’événement pour que la vue border, le texte de vie se mette à jour automatiquement donc très pratique, les événements se posent pas de questions. Bien évidemment si le héros n’a plus de vie, on envoie la commande game over.

 

Qu’est ce que fait la commande game over ? Il suffit de regarder, on arrête d’écouter l’événement sur onEnterFrame , ça ne sert plus à rien, on en à plus besoin. On arrête d’écouter les événements sur les touches, ça sert plus à rien, on en à plus besoin également. Et qu’est ce qu’on fait d’autre ? On affiche la vue game over, en la rendant visible.

Voilà ce que fait la commande game over.

 

Ensuite,après la mise à jour de la vie, après la mise à jour des balles, on augmente la valeur des balles transmise par la vue map, et on envoie mise à jour des balles, pareil pour la vie, et on envoie mise à jour des vies, le texte.

 

Après cette vue, vous la connaissez, et on a rajouté en plus , appuyer sur la touche espace, pour que le personnage puisse tirer. Gestion en plus, donc bien évidemment dès qu’il appuie sur la tache espace, et que le timer est bon et qu’il a des balles (parce que s’il n’a plus de balles, ça ne sert à rien d’envoyer l’événement), on envoie une commande de tir à vue map qui va être récupérée et on envoie un événement héros boulette pour mettre à jour le nombre de balles disponible pour le héros sur l’écran.

 

Là, on a fait le tour de vue héros, qui gère les balles et le nombre de vies, qui s’occupe d’envoyer les événements en fonction de la touche espace et game over lorsque le héros n’a plus de vie, tout est là.

 

Vue map, qu’est ce qui se passe ??

 

elle, elle doit construire les ennemies, donc pour les ennemies ça fonctionne comme ça, on a des tableaux imbriqués.

On a un tableau global qui contient tous les ennemies pour la carte 0 mais il n’y a pas de carte 0, ça c’est tous les ennemies sur la carte 1, sur cette carte là, tous les ennemies sur la carte 2 sur cette carte là.

 

Et là on a le type d’ennemie 1 ou 2, comme je vous ai montré, ennemie 1 et ennemie 2 (le type d’ennemies). Ensuite on a les coordonnées de la case de départ, l’ennemie en x donc sur l’axe des x et sur l’axe des y, les coordonnées de la case, pareil type d’ennemies et coordonnées de cases.

Les items c’est exactement le même principe, carte 0, y a pas de carte 0, on aurait pu en mettre une, ça c’est à chacun de voir. Carte 1 et 2 on a tous nos items. Le type d’item « bonus vies », moi y en a qu’un ou deux mais vous pouvez mettre autant d’items que vous le souhaitez.

Coordonnées en x, la case en x, la case en y.

 

On a rajouté également le type d’ennemies et le type d’item ici, ça ou ça, en fonction de la carte évidemment.

La configuration d’un ennemie, sa vitesse de déplacement, là, turning, c’est le pourcentage de chance que l’ennemie change de direction. Plus le nombre est élevé moins il a de chance de changer de direction, plus il va tout droit, plus le nombre est bas et plus il a de chance de changer de direction plus souvent. Et la vitesse de déplacement de l’ennemie et la direction de départ, donc il se déplacera vers le bas quand il sera positionné, et celui là, gauche ou droite.

 

 

Même principe pour les items. Un item bonus vie, on rajoute 600 vies, et bonus balles, il gagne 3 balles type 1, type 2, vous pouvez rajouter autant d’ennemies de type d’ennemies différents et de typer d’items différents que vous avez besoin.

 

 

On construit notre niveau comme d’habitude, sauf qu’il y a 2 fonctions de plus.

La fonction removeAllDisplay, lorsqu’il y a game over, ça permet d’économiser les ressources mémoires, donc on enlève tous les display objets de notre jeu, en tout cas de notre décor, parce qu’il y a le héros qui reste, la bordure, tout ceux là sont enlevés et on les recréé.

 

AddItem, qu’est ce que fait addItem ?

 

Ça nous permet d’ajouter les items, ça récupère le type d’item 0, 1 ou 2, dans notre tableau.

Nous on va récupérer le tableau 1, celui là.

 

Et on construit nos items, donc on parcourt notre tableau et à chaque fois, on créé un nouveau item info, un objet item info, et notre élément graphique. En fonction du type d’item soit c’est des balles, soit c’est des vies, donc on renseigne les valeurs et le type. Vu que c’est un élément graphique, vous avez vu que ici les items, faut déplacer le movie clip en fonction du type d’item choisi, donc en fonction du type, on change l’image, donc on met à jour l’image affichée, on sauvegarde le clip qu’on positionne sur la bonne case de départ, notre item, on récupère sa largeur et sa hauteur, on positionne notre item sur la carte, on l’ajoute au tableau des items et on le met sur la scène.

 

AddEnnemie, c’est exactement la même chose,

sauf qu’on prend le tableau ennemie correspondant au type d’ennemie que l’on choisi, on parcourt et en fonction des ennemies et de la vitesse, du pourcentage de chance que l’ennemie change de direction, sa direction de départ, le type change en fonction du type d’ennemies.

Là on a gotoAndStop pour sa direction et gotoAndStop pour l’animation de l’ennemie en lui même. On le positionne sur la scène , sa largeur et ses coordonnées de départ.

Ça c’est pour le déplacement de l’ennemie, s’il peut aller en bas, en haut, à gauche, à droite, se déplacer et on l’ajoute sur la scène.

 

 

Ça c’est ce qui concerne l’ajout des ennemies, après comment on les gère tout au long du jeu ?

 

Shoot, c’est quand le joueur appuie sur la barre espace, on rajoute tout simplement une balle tout en sachant que le nombre de balle est géré par le héros. Il n’enverra pas d’événement s’il n’y a plus de balles, donc on se pose pas de question et on ajoute la balle tout simplement, notre identifiant de la balle, on pourrait même mettre 10 parce qu’on sait qu’on aura pas plus de 10 balles en même temps sur l’écran, donc ça nous permet d’optimiser la mémoire en réduisant le nombre d’identifiants disponible.

 

Une balle a une vitesse, on pourrait créer un élément, un objet balle, et avoir plusieurs type d’armes et plusieurs types de balles donc tout cela en fonction de la touche sur laquelle appuie le joueur, s’il change d’arme.

C’est tout le temps le même principe, type d’ennemies, type de balles, types d’items, vous pouvez réutiliser à volonté cette astuce, cette solution de programmation.

On créé notre balle sur l’écran donc on ferait un switch case si y avait plusieurs type de balles et on positionne la balle dans la même direction que le héros, s’il tire à droite la balle part vers la droite, on la positionne aux coordonnées de départ, là où se trouve le héros actuellement et la balle part en direction des coordonnées juste à coté du héros dans la même direction et juste à coté de lui largeur et hauteur. On positionne la balle et on l’ajoute sur la scène.

 

Ensuite une fois qu’on a ajouté une balle sur chaque onEnterFrame, on fait bouger toutes les balles qu’il y a à l’écran. Il peut y en avoir 2 ou 3, ça dépend de l’espacement que vous avec autorisé entre plusieurs tirs de balles. Et donc on bouge nos balles, on sait qu’on a un tableau qui contient tout nos objets balles, on le parcourt si la balle touche un obstacle, on la supprime sinon on déplace la balle, si on peut on continue a la déplacer.

La balle a touché un obstacle donc on enlève un display objet, on la supprime du tableau et on sort.

 

Ensuite on regarde si la balle a touché un ennemie donc on parcourt le tableau ennemie par exemple si la balle touche un ennemie, on supprime l’ennemie et sur un objet ennemie, vous pouvez lui rajouter un pourcentage de vie et en déduire qu’il faudrait plusieurs balles pour tuer un ennemie, donc vous êtes libre de rajouter un pourcentage de vie à vos ennemie pour que se soit plus difficile.

Et donc au lieu de directement les enlever, vous testeriez la vie de l’ennemie et ensuite vous l’enlèverez du tableau et la balle est tout de suite enlevée du tableau, sauf si vous choisissez un type d’arme où c’est des balles assez puissantes type missiles ou fusils à pompe ou autre, qui peuvent traverser les ennemies et donc vous n’enlèveriez pas la balle tout de suite.

 

Les ennemies, comment ça se passe ?

 

Sur un onEnterFrame, les ennemies ont un cerveau, une intelligence artificielle, donc on vérifie si l’ennemie touche des obstacles, on parcourt tous les ennemies et en fonction des obstacles on bouge l’ennemie.

C’est à dire que s’il peut bouger, une fonction aléatoire, soit l’ennemie se déplace soit s’il ne se déplace pas, il change de direction.

S’il peut se déplacer c’est bon, et si le nombre aléatoire est plus grand que le nombre de changement de direction, on déplace l’ennemie, sinon on change aléatoirement la direction de l’ennemie sur l’axe des x, on change sa direction ou sur l’axe des y, en fonction du fait de s’il peut se déplacer ou non.

 

On vérifie si l’ennemie a touché le héros. Si c’est le cas on le stop même pas une seconde, des milli-secondes et on envoie la notification, un ennemie a touché le héros, que l’on récupère ici, et donc on met à jour la vie du héros en la décrémentant parce qu’il s’est fait touché par un ennemie.

Ça c’est la fonction moveClip qui est utilisée par les balles qui effectue également le déplacement des balles sur la carte et des ennemies, ça ressemble beaucoup à la même fonction que le déplacement du héros donc on teste la direction, c’est les même commentaires, c’est un copier coller. Pas d’obstacles, la balle peut se déplacer, l’ennemie peut se déplacer vers le bas, ou en déplacement horizontal. On met à jour la position de la balle et de l’ennemie.

 

Rappelez vous une balle c’est un type sprite, par contre un ennemie, lui est de type movieclip.

 

Donc si le clic que l’on test ici est de type movie clip, on fait un gotoAndStop du clip pour avoir la bonne animation, si c’est une balle vu que c’est un sprite y a pas d’animation à voir. Là, vous pouvez changer les tests si votre balle devient une animation ou non, vous modifiez le test en conséquences.

 

On détermine les coordonnées des cases de l’ennemie ou de la balle.

 

Là on a fait un petit tour très rapide des mises à jour de notre jeu, donc on va le lancer pour voir ce que ça donne donc vous avez le nombre de vies initialiser, j’ai rajouté le petit compteur des fps de la mémoire utilisée pour suivre les performances en direct de notre jeu et le nombre de balles restantes.

 

On constate qu’on peut se déplacer, les ennemies se déplacent, je tire une balle et on voit bien le nombre de balles qui se décrémente. Les vies j’en ai 33, je touche un ennemie, je passe à 23, je touche un autre ennemie, je passe à 3. je prends un item, j’ai regagné de la vie, 9 de vie, 15 de vie, et là 21 de vies. Les balles j’en ai plus que 8, j’en gagne 11, je tire toutes mes balles. J’ai 21 de vie, je touche un ennemie et passa à 11 de vie, puis à 1 de vie. Il ne me reste plus de balles et en appuyant sur la barre espace je ne peux plus tirer. Je vais de l’autre coté (changement de carte) je récupère de la vie et des balles, je me suis fais touché par un ennemie, j’ai perdu.

 

En maximum, mémoire utilisée 10 méga, là on est a 8 Mo de mémoire, on reste a 40 fps, si je rejoue, ça me réinitialise mon nombre de vies, de balles. Je n’ai pas mis de possibilité de gagner mais on peut rajouter une possibilité de gagner une fois que tous les ennemies sont tués, c’est vous qui choisissez, maintenant vous connaissez le principe de fonctionnement.

J’ai récupéré tous les items, il me reste 11 balles, 31 de vie, les items sont positionner à des endroits différents sur la 2eme carte, il y en a moins, je n’ai plus que 13 de vie, 3 de vie, puis touché par un ennemie je suis mort.

 

Voilà très rapidement les fonctionnalités qu’il est possible de faire sur un RPG de type zelda, maintenant vous avez tous les éléments en votre possession pour effectuer par exemple le chargement dynamique des cartes.

 

Dans un fichier xml vous auriez la carte associée directement à l’ennemie et aux items disponibles, ça changerait juste votre fonction buildLevel ou avant de faire un buildLevel , vous effectuerez un chargement du fichier xml et à la fin du chargement vous effectuerez cela donc ça ne change pas grand chose. Vous pouvez rajouter des types de balles différentes des items pour ouvrir les portes etc etc.

 

Le moteur de tile est en place vous pouvez le faire sur des cartes beaucoup plus grande, vous développer un éditeur de cartes pour vous simplifier les choses.

 

Vous trouverez le code source du jeu flash sous la vidéo. Si vous le souhaitez il faut le télécharger et vous l’approprier et vous amuser avec , personnaliser les graphismes du jeu, ajouter des nouvelles fonctionnalités.

[/spoiler]

Version démonstration

Ci-dessous un exemple du jeu flash RPG Zelda !

Utilisez les flèches directionnelles pour vous déplacer sur la carte.

La touche espace pour tirer sur les ennemis !

Télécharger le code source du cours AS3

Consultez ce site sur les jeux flash (en anglais).

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

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

Avez-vous déjà développé un RPG comme Zelda ?

Avec quels outils ?

Dites-moi cela dans les commentaires ci-dessous.

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

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

Pour une meilleure approche du développement de jeux flash, vous pouvez aussi consulter les cours précédents : Créer des jeux flash en ActionScript.

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.
• Les classe essentielles à créer lors de l’utilisation du Framework PureMVC.
• Comment créer le décor en utilisant un système de Tile (ou case).
• La technique pour construire votre fla avec tous les éléments graphiques de votre carte du jeu.
• La solution pour effectuer simplement les différents tests de collision avec les différents éléments du décor.
• Comment gérer le déplacement du décor et du joueur sur une carte immense.
• La technique pour optimiser les ressources mémoires utilisées par l’affichage de la carte.
• Comment effectuer un chargement dynamique avec des cartes immenses.

Cette formation AS3 vous permettra de développer un jeu flash AS3 de type RPG / Zelda.

Jeu Flash RPG Zelda

[spoiler]

Bonjour à tous et bienvenue sur actionscript-facile.com

 

Dans ce petit cours AS3, nous allons voir comment créer un jeu de type Zelda RPG en AS3.

Etant donné qu’il y a beaucoup de concepts à aborder dans la création d’un jeu de type Zelda, ce sera fait étape par étape.

 

Dans la première partie de ce cours, nous allons créer le jeu avec le déplacement du décor, la construction des niveaux, les tests de collision.

Dans les cours suivants, nous allons voir comment intégrer des ennemis, que le héros puisse sauter par dessus des obstacles, rentrer dans une maison etc. etc.

 

Dans ce cours, nous allons utiliser le framework pureMVC qui est relativement simple à mettre en œuvre.

Pour commencer à s’amuser un petit peu, je vais donc vous montrer comment organiser votre projet, la structure du fichier Flash, ce qu’il doit contenir, un petit peu comment utiliser FDT.

Puis nous allons créer les classes types comme d’habitude, et là le plus intéressant, nous allons commencer à intégrer l’algorithme du jeu.

C’est-à-dire à utiliser le moteur de tiles.

 

Ce moteur ce n’est pas moi qui l’ai inventé, je l’ai trouvé sur un site Internet et je l’ai adapté en actionscript3.

 

Et avec le framework pureMVC, l’architecture de type Zelda que je voulais mettre en place et vous montrez. Puis nous allons voir la création et le déplacement du décor, le déplacement du personnage, les tests de collision avec les éléments de la carte.

 

Et également le chargement de niveau. C’est-à-dire si vous vous utilisez votre jeu avec un niveau qui est hyper long ça va être long à charger et très long à calculer pour le flash.

Donc ce n’est pas très optimisé, vous allez voir que dans le jeu, il y a des portes.

Quand le héros passe la porte, en fait ça lance le chargement. Après c’est vous qui l’implémentez.

 

Je l’ai mis en statique, mais vous pouvez mettre chargement dynamique de fichier XML, des graphismes du jeu et création du nouveau décor.

 

Nous passons tout de suite à la pratique.

 

Nous allons donc regarder la construction de notre fichier Flash.

Notre fichier flash en fait, on va créer un fichier SWC.

Il suffit de cocher cette case exporter un SWC et c’est tout. Le reste, on ne le change pas, y a le fichier SWF mais après c’est vous qui voyez.

 

Là c’est des cours que j’essaye de faire le plus simple impossible donc on va utiliser un fichier SWC pour nos graphismes.

Après avec un fichier SWF, vous pouvez charger dynamiquement. Ce fichier SWF, donc les niveaux dans un fichier SWF qui contient les graphismes par niveau.

 

Après c’est en fonction de la complexité du jeu. On ajoute plus ou moins d’éléments externes chargés dynamiquement, à la demande, en fonction des actions d’utilisateur.

 

Donc on va utiliser un moteur de tiles. C’est dire que notre carte notre jeu va être composé de plein de cases qui feront 30 par 30.

 

Des éléments de 30 pixels par 30 pixels positionnés à 0 ;0.

Puis les coller les uns aux autres.

En fait, ce sera un tableau avec des coordonnées en X et en Y. A chacune de ces coordonnées correspondra une petite case comme celle-ci : une tile.

Ca s’appelle un engine tile en anglais, moteur de case, on va l’appeler en français.

 

Ces petites cases vont permettre de construire votre niveau.

Donc là, il y en a plusieurs, ce sont à chaque fois des images GIF, PNG ou JPEG que vous placez dans un movieclip qui s’appelle tile.

 

Quand on va construire notre niveau je vais vous montrer, on fera un gotoAndStop vers la tile à afficher,.

Oon peut en mettre autant qu’on veut, c’est pas limité.

 

Si on regarde notre bibliothèque, on a tous nos éléments :ici les images, voilà donc des images PNG.

Et après moi je ne suis pas très fort en graphisme, je fais ça très simple.

 

J’ai récupéré un logiciel qui permet de créer des jeux RPG. Donc j’ai récupéré les images, j’en ai créé plusieurs.

Ensuite, on a notre héros donc notre héros. Il a quatre images clé.

En fonction de la direction où il va aller, donc à droite, à gauche, en haut et également il a une animation.

C’est-à-dire, quand le héros descend, il joue cette animation. Qand le héros monte, il joue cette animation.

Il suffit de rentrer dedans pour voir l’animation du héros. Pareil à droite et à gauche.

 

Voilà toutes les animations de notre héros tout simplement.

 

 

Ensuite nous avons la bordure. C’est une bordure qui est sur tout l’écran. Qui met en valeur le jeu.

 

C’est vous qui choisissez graphiquement. Comme d’habitude vu que c’est un fichier SWC, pour chaque élément dont on a besoin, on exporte pour actionscript : classe héro, c’est un movie clip parce qu’il y aura des gotoAndStop. Pareil pour le tile et on a besoin des propriétés du movie clip gotoAndStop pour sélectionner l’élément du décor.

 

Comme je vous l’ai dit, bordure sera un Sprite parce qu’il n’y a pas d’animation dans notre bordure.

Une fois que tout ça est prêt, on exporte en fichier SWC.

 

On passe sous FDT.

Notre fichier SWC il est ici et on remarque tout nos éléments : chars, dans héros il y a le movie clip char qui est accessible comme d’habitude. Parce qu’on va pouvoir agir dessus, donc on lui a donné un nom ici : char.

On peut l’appeler héros comme vous voulez. Ca nous permet à nous d’agir dessus depuis l’ActionScript directement.

N’oubliez pas de l’appeler char, vous devez retrouver sa propriété ici.

 

C’est effectué avec pure MVC.

On part de notre classe mère comme d’habitude. Et un petit start-up, je vais passer un petit peu plus vite.

 

Je vous renvoie au cours flash pureMVC pour comprendre un type d’architecture du projet.

Il faut savoir que dans notre application, on a notre commande, le modèle, y en a qu’un seul.

Il peut y en avoir plusieurs c’est pas exclu. Et nos vues tout simplement, et applications facade, qui contient les commandes et les événements.

 

Enfin ces événements appellent des commandes.

Je les séparent toujours ces événements qui appellent des commandes, des événements classiques qui communiquent de vue à vue ou autres d’un modèle à vue etc.

 

Donc on a enregistré toutes nos commandes et on envoie la notification start-up comme d’habitude.

Start-up, ça va créer notre modèle.

On récupère le stage, on va en avoir besoin. Et on créé nos vues ici.

On récupère le root et on créé nos vues, donc la création des vues elles sont ici.

 

C’est l’application médiator, on positionne nos vues.

Si ici on positionne nos vues, on a la vue background. Si vous regardez elle est vide, ça peut servir si on veut mettre certains éléments dans le décor vraiment en dessous de tous les autres.

Là j’ai utilisé à la place la propriété SWF background color et je lui ai mis cette valeur mais sachez qu’il y a la vue backgroud qui est prêt à accueillir des graphismes qui sera là pour ça.

 

 

Ensuite, on a notre carte, le décor.

Le héros qui est par dessus la carte, les murs donc c’est la bordure.

Les bordures et la vue gagnée donc c’est le bouton commencer tout simplement .

 

On regarde notre modèle, d’un autre modèle, j’ai mis une petite classe modèle pour l’instant il n’y a rien dedans mais j’aime bien laisser ce qui peut servir pour faire évoluer le jeu.

Puisque là le jeu n’est pas terminée.

 

Dans les prochains cours nous allons nous en servir.

Là y a la gestion du onEnterFrame, c’est-à-dire que l’on s’enregistre quand l’utilisateur appuie sur le bouton commencer.

On écoute onEnterFrame pour envoyer un événement toutes les images par seconde quand le joueur appuie sur le clavier.

Mais là il n’y a pas le bouton, mais quand il y a game over ou gagné, on enlève l’événement onEnterFrame.

Et à chaque image par seconde, on envoie cet événement. Toutes les vues abonnés réagissent.

 

Les commandes, ça c’est le clic droit sur le menu démarrer start game. C’est pour lancer le onEnterFrame et ça, c’est pour créer notre médiateur.

Pas grand-chose comme commande. Le modèle on a vu rapidement, il est assez simple.

 

Maintenant les vues : vue background elle est vide.

On a la vue gagnée qui a uniquement un seul bouton, le bouton commencer, je passerai vite parce que c’est pas le coeur du jeu.

 

La vue héros, qu’est-ce que fait le héros ?

On le créé set up puis start game. On fait un set up puis un set up contrôle, on créé notre héros en le positionnant en position neutre dans le movie clip.

Pareil pour l’animation, on l’ajoute sur la scène. Et on envoie la largeur et la hauteur du héros.

 

En fait, il en a besoin pour la création et le déplacement du décor. Et ensuite set up contrôle c’est-à-dire qu’on va écouter les actions de l’utilisateur sur certaines touches.

 

Donc sur certaines touches, on utilise un simple booléen tout simplement très simple.

Booléen à true, suivant la touche qui est appuyée.

 

Space je l’ai mis ça servira pour plus tard. C’est pour que l’utilisateur puisse utiliser son pistolet ou son épée pour tuer des ennemis.

En fonction du type de booléen, on envoie un événement déplacer la carte avec les datas.

La direction en X, la direction en Y c’est aussi simple que cela.

Et ça se sera récupéré, cet événement par vue map.

 

En fonction du bouton appuyé, la direction change en X et en Y.

Évidemment si aucune touche n’est pressée, on positionnent en position neutre notre héros.

Sinon, on lance l’animation concernant le héros en fonction de la direction qu’il a pris. Donc de la touche appuyée.

 

Ca c’est la vue héros qu’est qu’elle a d’ autre ?

Elle a une seule chose : elle écoute l’événement de déplacement, c’est-à-dire vue map vous allez voir la carte déplacée.

 

Il faut évidemment déplacer le héros donc cette carte vue map envoie un événement qui est récupéré par vue héros et il met à jour ses données ici.

Tout simplement sa position donc la position du héros change.

On écoute l’événement envoyé par le modèle envoyé sur onEnterFrame.

 

Et c’est là où on envoie les événements mouve map, à la classe vue map, sur chaque image par seconde.

On déplace la carte et le héros pour que le jeu soit fluide et rapide

 

Si on regarde vue map pour construire un niveau, c’est tout simple.

On utilise les frame, nous ici dans tile, on vient dans tile, vous avez frame 1, frame 2, frame 3, frame 4, des éléments du décor. Et on donne le numéro 15, là se sera laissa les sapins, numéro 13 des palmiers, une porte 19, une montagne.

On rempli notre carte donc ça c’est des lignes lignes à l’écran, colonne colonne colonne colonne.

 

Pareil une carte 2 donc ça c’est des cartes dans un jeu plus complexe. On les chargent via des fichiers XML via remoting.

Enfin elles sont chargées dynamiquement en fonction de là où votre joueur se situe dans votre jeu.

 

Donc on construit notre carte avec des chiffres.

Bon évidemment, dans les jeux plus complexes, les développeurs utilisent un éditeur de carte qui permet de créer automatiquement ce type de tableaux ou le fichier XML ou autre suivant le protocole que vous avez choisi.

 

Donc l’éditeur, ça permet d’avoir visuellement tous les éléments de la carte et de construire beaucoup plus facilement de visu plutôt qu’une suite de chiffres.

Vous pouvez faire un éditeur de carte si vous souhaitez là c’est pas le thème du cours pour l’instant on va se concentrer sur la construction du niveau.

 

 

Vous créez un tableau à deux dimensions votre carte.

 

Qu’est-ce qu’on a ?

set up puis on initialise notre jeu.

J’ai mis plusieurs commentaires pour vous aider au maximum.

 

La taille d’une case c’est 30 pixels comme je vous l’ai dit dans le fichier flash.

Les cases visibles à l’écran, nombre de cases visibles à l’écran sur la ligne des X et en vertical Y, le centre de l’écran pour positionner le héros.

 

Ca c’est calculé, pendant le déroulement du jeu et pareil la taille de la carte c’est en fonction de la taille du tableau.

 

Nous avons les informations sur le personnage : ses coordonnées de départ en cases.

Pour trouver les coordonnées des cases autour du héros, c’est pour les tests de collision et s’il a le droit de se déplacer.

 

Par défaut, il a le droit de se déplacer nulle part. En fonction de l’appui du joueur, s’il appuie sur la touche droite, gauche ou autre, on déplace l’utilisateur.

Ca c’est la position et la taille du héros. On sait sur notre carte à tout moment où se positionnent le héros.

 

Ici on attend un événement, que le héros soit prêt.

 

Une fois le héros prêt, on lance la construction du level. Et on renseigne les informations de notre personnage : sa largeur et sa hauteur en fonction de la taille du héros réelle que l’on envoyé ici.

 

On construit notre level, on va parcourir notre tableau.

On utilise un Sprite qui va contenir toutes nos tiles les unes à la suite des autres.

 

Par défaut on prend la map, enfin map du level, on a transmit la map 1. Je veux dire la première et on va lancer la construction.

On détermine les positions du héros lorsqu’il est proche des bordures donc des bords de notre écran de jeu. Et ensuite, on va parcourir toutes les colonnes et pour chaque colonne on va mettre en place toutes les lignes de notre jeu.

Tous les éléments graphiques, on fait colonne par colonne et ligne par linge.

 

 

Première colonne, toutes les lignes tac tac tac, deuxième colonne toutes les lignes etc. etc.

 

Comme ça on construit tout notre jeu. On utilise un objet haut map éléments qui contient le nom de l’élément.

S la case est sur la carte, on lui donne un autre nom tile, c’est optionnel, on pourrait l’enlever, on s’en sert jamais. Dans les prochains cours, on va optimiser certaines fonctions de jeu pour gagner en rapidité et en ressources mémoire.

 

Là je fais des boucles, beaucoup de boucles pour retrouver certains éléments.

Vous allez voir qu’on peut simplifier ça en ciblant directement avec le bon nom parce que on sait qu’il existe en théorie.

 

La frame à afficher et si c’est une porte, on a notre fonction get porte by number.

En fonction du nombre donc on va configurer, c’est une porte sur la première carte, c’est notre porte, sur la deuxième carte, on lui dit que c’est une porte.

 

On donne la position de départ de notre personnage en termes de cases.

Par défaut il n’y a pas de porte 3 et 19.

Si on regarde ici 3 une porte, 19 une autre porte.

Donc porte pour la première carte, porte pour la deuxième carte.

 

Ensuite, on récupère est-ce qu’il est franchissable ou non, l’élément du décor dans notre case est ce qu’elle est franchissable ou pas ?

 

Il suffit de configurer ici toute les images qui sont franchissables ou non et de les reporter ici.

 

Donc nous on sait que de un jusqu’à 19 les portes sont franchissables. Évidemment, tous ces éléments sont franchissables : c’est soit des fleurs, de l’herbe ou des petits éléments du décor auquel le héros peut passer à travers.

Et sinon, on a nos obstacles par défaut c’est pas franchissable on met false.

 

return on pourrait l’enlever on pourrait même mettre, juste enlever ici et laisser celui là, ça déroulent enfin c’est du détail ça nous permet à partir de la Frame sélectionnée, de savoir si le décor est franchissable ou non.

 

Et ensuite on créé une new tile donc nouvelle case new tile. On va créer ça et on l’ajoute sur notre carte. Donc on le met dans notre objet où on garde toutes les informations name la Frame si c’est une porte le clip, on l’ajoute sur la scène ici à tiles qui va contenir.

 

C’est un tableau qui contient tous nos éléments graphiques on le positionne et on le met sur un gotoAndStop.

 

frame donc on le déplace ici sur la bonne Frame Graphic et à la fin on l’ajoute à l’écran.

 

On fait ça pour tout le monde.

Ensuite on ajoute notre carte sur l’écran. On positionne notre héros à la position de départ que nous souhaitons, que nous avons configurés. On garde en mémoire les coordonnées d’origine du héros, ça permet de déterminer de quel côté déplacer la carte en fonction du héros.

 

Et on envoie les coordonnées au vrai héros lui, parce que ça c’est notre personnage sur la carte. On envoie à la vue héros les nouvelles coordonnées qu’il devra utiliser tout simplement.

 

Ensuite on écoute un seul événement move map. A chaque fois, on récupère les éléments envoyés par la vue héros. Ici en fonction des touches appuyées de direction, on change et on lui dit de se déplacer.

Donc on teste autour du héros s’il y à des obstacles. On récupère get case by name, c’est cette fonction dont je vous parlais.

 

A chaque fois, je boucle dans tous mes éléments graphiques dans mon tableau où il y a tous mes objets tiles, mes cases et je recherche le nom.

 

Cette fonction peut être optimisée. Dans un prochain cours, je vous montrerai comment l’optimiser.

On n’aura plus besoin de parcourir tout le tableau, on ciblera directement le display objet par son nom. Et celui là nous renverra sa position dans le tableau.

 

Je vous expliquerai ça, y a rien de bien compliqué.

On continue de tester si les déplacements vertical en y sont possibles ou pas.

Avec la vitesse de déplacement du héros, on déplace le héros vers le haut si c’est possible donc on teste s’il y a des murs, pas de mur donc déplacement.

S’il y a un mur, on place le héros juste à côté du mur, on fait ça vers le haut vers le bas en horizontal Y.

 

On teste get corner, et en déplacement à droite, à gauche. Là, on récupère les éléments et on teste tout simplement à chaque fois notre case, on peut passer à travers elle est franchissable ou pas.

On peut marcher à travers ou non tout simplement.

 

Ensuite, on continue et là on va déterminer les nouvelles coordonnées du héros. On envoie la nouvelle position du héros.

Si c’est une porte, on va lancer la mise à jour de la carte parce que chaque élément à une propriété porte avec un booléen donc une map.

 

Ca met à jour les nouvelles coordonnées du personnage pour le positionner sur la carte.

Et on lance tout simplement un build level en lui transmettant un tableau.

Donc le .map aux portes infos et ça va relancer la construction d’un nouveau niveau, rien de bien compliqué.

 

Et c’est là où on va déplacer la carte. En fait, la subtilité dans un jeu de RPG, il y a le héros qui se déplace jusqu’au centre de la carte et ensuite c’est la carte qui se déplace.

 

Donc ça faut bien le comprendre, d’un côté vous avez le héros qui se déplace jusqu’au milieu de l’écran et ensuite la carte se déplace jusqu’aux bords.

Et quand on ne peut plus déplacer la carte sur la droite par exemple. On atteint le bord, ben on déplace uniquement le héros.

 

Donc les 2 se déplacent en même temps en fonction d’où le héros se situe sur la carte.

C’est ici, on teste en déplacement horizontal si on doit déplacer la carte ou non. C’est en fonction de la position du héros.

 

Et ensuite, si on doit supprimer des lignes et des colonnes. Parce que si on déplace la carte, évidemment sur la carte, il y a des nouvelles cases qui vont changer. On va faire un up date case et un up date case qu’est ce que ça fait tout simplement ?

 

Grosso modo ça fait un gotoAndStop pour mettre à jour l’élément.

Là on fait un gotoAndStop sur les cases existantes pour les changer graphiquement en fonction des données que nous recevons.

 

Ici on vérifie si la nouvelle case est sur la carte sinon on créé une case vide qui ne servira à rien.

 

Et la, si c’est une porte on récupère les infos de la porte. On repositionne le nouveau clip évidemment aux bonnes coordonnées.

 

On récupère est ce qu’il est franchissable ou non et on le met sur la bonne image dans notre movie clip.

C’est-à-dire que quand on déplace la carte ont reconstruit les cases les unes après les autres en fonction de la position du héros.

 

Soit on construit les cases qui sont celles plus à droite, soit on construit les cases qui sont celles plus à gauche.

Pareil pour un déplacement vertical, c’est le même principe. Soit on reconstruit les casses tout en haut, le plus en haut. Ou alors, le plus en bas.

 

Ca ça dépend ici de la position du héros sur le jeu.

 

Là je vous ai vraiment présenter très rapidement un moteur de RPG de type Zelda.

 

Il y aura d’autres cours sur ce moteur, à partir des questions que vous me poserez je vous expliquerai un peu plus en détail ce qui vous pose problème.

 

Par exemple si c’est vue map, comment déplacer la carte, reconstruire graphiquement toutes les cases en fonction du déplacement du héros, je vous expliquerai tout ça donc.

 

N’hésitez pas à poser toutes vos questions sous la vidéo.

 

Et bien évidemment pour compléter ce jeu, il restera à ajouter des ennemis, que notre héros puisse se défendre en donnant des coups d’épée ou avec un pistolet, que notre héros puissent sauter par-dessus des obstacles sur la carte, rentrer dans une maison.

 

Il y a aussi la gestion du jour et de la nuit.

Tous ces éléments seront abordés dans les prochains cours sur actionscriptfacile.

 

Je vais vous montrer une petite démonstration du résultat de ce petit jeu.

 

Je lance la compilation ça prend un petit peu de temps, je met le debuggeur en place et je vous montre.

 

Donc notre carte n’est pas encore construite, il y a juste les bordures.

Je clique sur le bouton commencer, ça affiche les éléments de la carte.

 

Vous voyez le héros se déplace jusqu’ici, la carte ne se déplace pas, la carte ne se déplace pas. Uniquement le héros là au milieu, uniquement le héros se déplace et dès qu’il va passer ce point, la carte se déplace et jusqu’ici la carte arrête de se déplacer.

Parce qu’on arrive au bord donc elle ne se déplace plus.

 

La carte pareille, jusque-là hop la carte se déplace, je passe le milieu de l’écran comme c’est configuré, la carte se déplace/

 

Ici nous avons donc une porte, une porte qui va charger le niveau deux en direct. Le niveau 2 est chargé et on peut se déplacer.

 

Vous voyez qu’on est toujours à 40 images par seconde donc on consomme à peine huit méga de mémoire.

Bien évidemment, on peut l’afficher en beaucoup plus grand notre jeu, en mettant beaucoup plus de cases et d’éléments.

 

Vu que c’est un cours, j’ai voulu faire simple. J’ai fait que sur 300 par 250, après on peut faire comme d’habitude sur 550 par 400.

C’est libre à vous, de toute façon il y a des ressources mémoire disponibles.

 

On peut se déplacer.

Là c’est un obstacle, le héros ne peut pas passer à travers.

Là non plus, là c’est de l’herbe donc il peut marcher dessus. Si c’est des sapins, il ne peut pas passer à travers.

 

Tout ça est testé en direct. Le jeu est relativement fluide.

 

Là on a notre porte, on passe.

 

Rien ne vous empêche d’agrandir la taille de vos tableaux c’est-à-dire ici : la taille de de ce tableau pour que votre carte, en agrandissant la taille de ce tableau, votre carte sera beaucoup beaucoup plus grande.

 

Et donc le déplacement dans le jeu sera beaucoup plus important. Parce que là, vous voyez que ça comme colonnes, on a vite fait et très très rapidement le tour de la carte.

 

Là on peut jouer sur la subtilité, c’est de mettre les niveaux qui se chargent dynamiquement à chaque fois que le joueur passe une porte.

 

C’est une petite démonstration de l’utilisation de ce moteur.

 

Comme je vous le dis, il y a beaucoup de choses à rajouter.

 

Et on va le faire tout au long de l’année en complétant et en améliorant ce jeu flash.

 

 

 

En attendant, et comme d’habitude, vous pouvez télécharger le code source complet de ce jeu flash RPG Zelda sous cette vidéo.

 

Et comme je vous le disais, pour les prochains cours sur les jeux flash, n’hésitez pas à poser vos questions sur les difficultés que vous rencontrer.

Notamment dans ce code source ou dans le code source du case briques.

 

Dites-moi les difficultés que vous rencontrez, quel type de jeu flash vous avez développé.

 

Et vous, quelle stratégie vous utilisez .

 

Je vous dis à très bientôt sur actionscriptfacile.com.

[/spoiler]

Version démonstration

Ci-dessous un exemple du jeu flash RPG Zelda !

Utilisez les flèches directionnelles pour vous déplacer sur la carte.

Télécharger le code source du cours AS3

Consultez ce site sur les jeux flash (en anglais).

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, comment développez-vous vos jeux flash?

Avec quels outils ?

Dites-moi cela dans les commentaires ci-dessous.

Le cours AS3 de cette semaine vous propose de commencer à développer vos premiers jeux flash pour les smartphones et tablettes Android.

Tout cela est possible avec la technologie Adobe AIR et c’est toujours de la programmation ActionScript 3 !

Voici ce que vous allez apprendre dans ce Cours ActionScript :

• Où télécharger et comment installer tous les logiciels nécessaires pour la compilation Adobe AIR et la publication sur Android Market.
• Comment créer un certificat valide pour publier vos applications Adobe AIR sur Android Market.
• La technique pour tester vos applications flash sur votre PC grâce à l’émulateur Android.
• Et comment installer et configurer l’émulateur Android.
• La solution pour installer Adobe AIR sur l’émulateur Android.
• Toutes les stratégies pour configurer et utiliser l’Éditeur ActionScript FDT afin de compiler rapidement vos applications Adobe AIR.
• Et surtout la technique pour tester directement après la compilation votre application Adobe AIR : le tout automatiquement !

Cette formation AS3 vous permettra de commencer à utiliser Adobe AIR pour concevoir vos jeux flash et les publier sur Android Market.

Toute une série de cours AS3 concernant la programmation d‘application Adobe AIR et Android est prévue 😉

Adobe AIR et Android

[spoiler]

Dans ce cours AS3 nous allons voir comment créer des applications flash en AS3 mais pour la plate-forme Android c’est-à-dire en utilisant adobe air.

 

Donc nous allons voir la configuration et l’installation de tous les logiciels nécessaires nous avons besoin du JDK java plateforme en standard édition du SDK Android, où nous allons configurer l’émulateur de Smartphones pour tester nos applications Adobe air directement sur notre PC avant de les envoyer sur l’android Market et ensuite nous allons créer un certificat pour publier sur Android avec Adobe air toujours puis nous passerons à la configuration de FDT.

 

Passons tout de suite après dans un premier temps il vous faut donc vous rendre à cette adresse oracle.com etc. et télécharger Java plate-forme standard édition donc c’est gratuit.

 

Il suffit de cliquer sur download et en suite vous prenez la version qui vous convient en fonction de quel système d’exploitation vous êtes linux à 32 bits 64 bits, Windows 32 bits 64 bits, 64 bits sous Windows ça fonctionne très bien pour créer des applications Adobe air pour Android.

 

C’est celle que j’utilise la version 64 bits puis à la fin du téléchargement vous installez le JDK de java tout simplement.

Ensuite il vous reste à télécharger le SDK de Android qui est lui aussi gratuit, moi j’ai pris la version instal air 6.exe, qui fait à peu près 30 méga, vous la téléchargez, vous l’installez.

 

Il y a la version Mac, la version Linux ensuite au niveau de téléchargement des logiciels nous aurons besoin du SDK de Adobe air c’est pour l’émulateur Android donc il suffit de le télécharger sur cette adresse Adobe.com air.html de cliquer ici et de télécharger soit la version Mac OS X soit la version Windows.

Le SDK 2 air n’est pas obligatoire, je mettrai sous cette vidéo en téléchargement le runtime 2 air pour que vous puissiez l’installer sur votre émulateur donc les développeurs qui sont sous Linux ne vous inquiétez pas y’aura tout ce qu’il faut sous la vidéo, le SDK 2 air n’est pas indispensable une fois que vous avez télécharger tout ça il faut effectuer un petit peu de configuration.

 

Il faut le lancer donc vous lancez Android SDK manager dans votre menu démarrer, au menu classique sous Linux, Mac je connais et vous choisissez les paquets installés donc sur votre écran,sur l’écran de la vidéo voyez tous les paquets que j’ai installés donc la dernière version d’android, j’ai installée les outils et moi j’ai installé Android 2.3.3 parce que mon téléphone portable utilise Android 2.3.4.

 

Donc ça me permet également de les tester en direct sur mon Smartphone Android et c’est tout ce que j’ai installé, si j’ai également installé ça le support paquage Google USB driver paquage, le Market licensing paquage et les Web drivers une fois vous avez tous sélectionnés vous installez vous cliquez sur le bouton install paquage et il vous demandera de confirmer vous dites oui et vous attendez y’a qu’à attendre y’a juste ça à faire, c’est très rapide très simple.

 

Ensuite nous allons lancer l’émulateur une fois que c’est installé il faut lancer l’émulateur donc c’est Android virtual Device manager. Vous en créez autant que vous voulez moi j’ai créé deux émulateurs pour ma version de Android de mon Smartphone et un autre pour la dernière version de Android, vous faite édit ou new, vous sélectionnez la version d’Android la taille de la SDcarte 00 méga ça suffit largement copie des grandes buld in HVGA et c’est tout ce qu’il y a à faire.

 

Puis vous cliquer sur Start et l’émulateur démarre je vous montre la configuration pour Android 4.03.

Toujours 500 méga de mémoire, HVGA et voilà une fois que vous avez votre émulateur qui est démarré en passant avec la souris, vous pouvez changer d’écran tout simplement c’est pas l’idéal je dois dire, mais bon, sinon vous cliquez sur les points ici ça fonctionne tout aussi bien.

 

Vous avez accès à différentes touches appareil photo, caméra, le menu pour voir un petit peu toutes les applications qu’il y a d’installées.

 

Ensuite ou peut revenir à l’écran.

Qu’est ce qu’il y a d’autres ? vous pouvez accéder directement à toutes les applications ici très simplement. Voilà l’émulateur ce sera très très pratique pour tester nos applications après donc avant de pouvoir commencer à développer sous FDT parce que ça c’est le but de développer sous FDT.

 

Il nous reste à créer un certificat, ce certificat permettra de compiler votre fichier SWF et d’en faire un fichier APK pour Android et vous pourrez publier votre application sur la plate-forme Android.

 

Pour vous simplifier la vie j’ai fais un fichier .bat.

Le fichier .bat pour créer un certificat.

Qu’est ce qu’il contient et ben il suffit d’appeler ADT, donc c’est un programme qui se trouve dans le répertoire de Flex.

Dans le répertoire de Flex, moi il est installé ici, vous avez le logiciel ADT qui fonctionne en ligne de commande.

 

Tout simplement pour créer votre certificat avec le fichier.bat suffit, vous avez juste à modifier.

CN c’est votre nom, le nom de votre entreprise le nom de l’organisation, le pays, la période de validité donc c’est en nombre d’années j’ai mis en 33 ans le type de cryptage vous pouvait mettre 1024 RSA j’ai mis 2048 RSA le nom du fichier du cryptage de la clé à créer et le mot de passe que vous devez retenir.

 

1fois que ça c’est fait il vous suffit de lancer le fichier .bat qui s’appelle creat certificat qui est ici. Vous cliquez dessus y a 2-3 trucs, vous appuyez ça prend un petit peu de temps et voilà le fichier nouveau certificat.p12 est créé avec une période de validité de 33 ans comme ça vous n’aurez aucun problème.

 

Après ce fichier vous le prenez vous le stockez ou vous voulez sur votre disque dur nous allons nous en servir dans FDT.

 

Qu’est ce qu’il y a d’autre à faire maintenant ? il nous reste à installer Adobe air sur notre émulateur de Smartphones parce que ici, quand vous le démarrez à la base il y a pas AS3 facile enfin ça c’est l’application que j’ai faite et si on regarde, l’application Adobe air n’est pas installée et on n’a pas de lien pour accéder directement à Android Market.

 

Pour ce faire j’ai créé également un petit fichier .bat tout simple il suffit d’appeler ADB.Device. ça nous permet de savoir si notre émulateur est bien connecté en USB finalement sur notre système et d’installer à ADB install runtime.apk. pourquoi on a pris le SDK de Adobe air ?

 

Pour pouvoir utiliser ADB et installer à Adobe air.apk sur l’émulateur Android c’est uniquement pour ça donc ce fichier je le mettrais en téléchargement sous ce cours vidéo comme ça vous aurez pas forcément besoin de télécharger Adobe air ce sera beaucoup plus simple parce que ADB existe également non il n’existe pas ADB donc voilà.

 

Il suffit d’aller dans ce répertoire, je l’ai installé ici le SDK Flex puis sur Android. Bin vous trouverez donc l’exécutable ADB.exe que vous appelez soit avec le fichier.bat soit en ligne de commande ça c’est vous qui choisissez.

 

Il fait 7 méga à peu près le runtime d’Adobe air pour Android, et voici les lignes de commandes que j’ai tapées donc à ADB.Device. Comme je vous ai montrer ça met émulator 554, il est connecté et on le voit. Il s’appelle bien comme ça ensuit et ADB install.apk.

 

Et là faut attendre un petit moment c’est un petit peu long, on croit que ça fonctionne pas donc faut patienter une ou deux minutes, le fichier APK et transféré sur l’émulateur Smartphone et il est installé. Vous avez après « success » comme quoi ça a réussi, l’installation s’est bien passé et de ce fait vous le voyez tout de suite et ensuite vous aurez Adobe air qui apparaît ici.

 

Maintenant là à peu près tout ce qui a configuré et terminé maintenant nous allons passer à FDT , je vous montre très rapidement.

 

Enfin l’installation la préparation de votre environnement de travail pour créer des jeux flash sous Android.

Il y aura un deuxième cours AS3 qui sera totalement dédié à la programmation à la publication sur l’Android Market etc.

 

Je vais aller un peu plus vite. Vous lancez FDT comme d’habitude.

Vous faites new project et là vous choisissez mobile et AS3.

Vous donner un nom à votre projet vous choisissez la plate-forme Android IOS on verra plus tard. Vous sélectionnez votre version le nom et vous faites finish c’est à dire vous avez un projet comme ça après.

 

Moi je lis le fichier XML de actionscriptfacile et je fais un petit affichage c’est vraiment très simple pour cet exemple.

Comme d’habitude vous faites run configurations vous allez dans FDT mobile applications Android et vous donnez un nom. Vous sélectionnez le mail la plate-forme c’est Google Android vous cochez on Device ça permet qu’à chaque fois que vous allez lancer la compilation, votre application Android sera automatiquement lancée sur l’émulateur

C’est très pratique ça permet de faire un test en direct, la compilation les paramètres de compilation j’ai pris des paramètres classiques avec Adobe air 2.6 le SDK pour la version flash 10.2 donc c’est Flex 4.5.1

 

j’ai mis framerate à 40 j’ai rien touché d’autre et là il n’y a rien à faire donc après vous venez vous cliquer sur configure project property donc ça se sera généré automatiquement y’a pas besoin de le faire là dans les propriétés vous donner un nom à votre application, un nom aux fichiers et un ID le numéro de version, l’option full screen et orientation et les permissions que vous allez demander à l’utilisateur de l’application AS3 facile, qui est seulement un flux RSS

 

Elle a uniquement besoin d’une permission d’accéder à Internet donc j’ai coché juste ça.

Pour la signature il suffit d’aller chercher le certificat que vous avez créé il y a un instant.

 

De mettre le mot de passe que vous avez mis dans le certificat au moment de sa création donc le même mot de passe, c’est très important de ne pas l’oublier.

 

Vous configurez les icônes pour l’application d’ Android/Android ensuite le contenu, le fichier XML qui va être généré automatiquement, le fichier SWF qui va être généré au moment de la compilation et les trois logos que vous renseigner les extensions là y en a pas besoin pour l’instant.

 

Ici vous sélectionnez le répertoire d’enregistrement de votre fichier APK.

Et là ça installe et ça lance l’application sur tous les appareils connectés donc sur votre émulateur par exemple et vous n’avez plus qu’à cliquer sur exporte application en dessous.

 

Vous voyez que ça lance la compilation tout simplement le fichier est créé voilà c’est terminé il a était envoyé sur l’émulateur.

 

Si on regarde l’émulateur, l’application flash vient de se lancer, l’application Android s’est donc lancée avec le chargement des derniers articles.

 

Et si vous cliquez bah vous pouvez cliquer sur le dernier article ça l’affiche, ça renvoie directement sur le lien du site.

Donc c’est vraiment très pratique très rapide pour tester avec l’émulateur votre application Android si vous voulez pas vous embêter il y a une autre solution.

 

Il suffit de créer un SWF.

 

En fait une application Android avec Adobe air, c’est juste un SWF qui est compilé avec des paramètres du fichier XML dans un fichier APK.

 

Donc vous créez vos SWF, vous mettez une taille pour mobile.

Et vous faites un petit run.

C’est-à-dire que ça vous lance l’application.

Et c’est exactement ce qui apparaîtra dans votre Smartphone.

 

Voilà un petit peu, dans le prochain cours AS3, nous verrons comment Programmé le multi touche etc., notre application Android et la publier sur le Android Market.

 

Après si on regarde sur le Android Market ça se passe comme ça.

 

Vous avez donc bah vous configurez votre application avec les copies d’écran les logos, le langage les fichiers APK que vous envoyez et après.

 

Vous cliquez sur enregistrer publier et ensuite votre application apparaît sur l’ Android Market donc on la voit ici.

 

Par exemple si on revient sur toutes les applications et qu’on fait une recherche AS3 nous allons tomber dessus voilà.

 

Vous pouvez cliquer sur installer ou ici pour avoir plus de détails, vous pouvez même rajouter une vidéo.

Et donc votre application Android faite avec flash en actionscript3 est disponible pour tout le monde.

 

Sous cette vidéo je vous ai mis le fichier zip qui contient les deux fichier.bat pour à la fois:

créer le certificat et

envoyer installer Adobe air sous votre émulateur Android.

 

Dans le prochain cours nous verrons pour créer notre première application.

Donc en programmation actionscript, la publier sur le Android Market.

 

Et ensuite nous verrons comment par exemple un jeu flash qui tourne sur le Web, vous pouvez rapidement le convertir en fichier APK pour le publier sur la plate-forme Android.

 

En attendant je vous dis à très bientôt pour le prochain cours actionscripfacile.com

[/spoiler]

Version démonstration

Ci-dessous le lien vers l’application AS3 Facile sur Android Market !

Installer AS3 Facile (Adobe AIR sur Android Market).

Télécharger les fichiers du cours AS3

Vous trouverez les fichiers .bat pour vous simplifier :

• La création des certificats valides sur Android Market.
• L’installation Adobe AIR sur l’émulateur Android.
• Le Runtime.apk pour installer Adobe AIR sur l’émulateur Android.

Télécharger “Android Installation scripts .bat”

Android-installation-scripts-bat.zip – Téléchargé 1316 fois – 6,89 Mo

Téléchargez le JDK Java Platform Standard Edition.

Téléchargez le SDK Android.

Téléchargez le SDK Adobe AIR.

Téléchargez le Open Source Flex SDK.

Consultez la liste des appareils (smartphones et tablettes) compatibles avec Adobe AIR.

Publiez vos applications Adobe AIR sur Android Market.

Et vous, développez-vous des applications Adobe AIR pour la plateforme Android ?

Avez-vous déjà publié des jeux Adobe AIR ?

Postez-les dans les commentaires ci-dessous !

 

Résumé du livre : Apprenez à développez des Jeux Flash étapes par étapes grâce à des exemples simples et précis !

Par Henri Blum, 2ème édition, Juillet 2011, 511 pages.

La 1ère partie du livre est une mise en bouche pour le développeur !

L’auteur commence par une introduction présentant les différents types de jeu avec des exemples et une définition précise. Ensuite viens plusieurs chapitres sur l’organisation, le game design, les méthodes agiles, l’algorithmie.

Puis l’auteur aborde les bases de la programmation ActionScript et l’utilisation d’Adobe Flash CS5 avec la création d’un scénario, les propriétés d’un DisplayObject, les portées des variables…

Une partie très complète qui englobe également la programmation orientée objet (POO) et les évènements.

Chaque concept est toujours expliqué à l’aide d’un exemple et d’un fichier fla en code source.
Pour les développeurs débutants, il y a même plusieurs paragraphes permettant de les aider à mieux appréhender les concepts essentiels de flash.

La 2ème partie du livre rentre dans le vif du sujet : le développement des jeux avec Flash.

Il y a carrément un chapitre complet pour chaque type de jeux flash.

L’auteur commence par décrire les étapes du développement d’un Casual Game. Toutes les stratégies utilisées sont expliquées en détail comme le déplacement de la raquette, le déplacement d’une balle.

Mais aussi dans le cas d’un casse briques, l’auteur nous dévoile comment effectuer des textes de collision, les techniques de chargements des niveaux, les fichiers de configuration, l’enregistrement des données…

Tout est fourni, le contenu des fichiers xml, la structure de la base de données.

A la fin de chaque chapitre, vous avez le code source complet du jeu, pour à votre tour, le personnaliser, l’utiliser, vous amuser !

Ensuite, l’auteur vous explique le développement d’un jeu d’aventure type RPG. Avec un méthode identique pour chaque chapitre, vous serez guidé pas à pas pendant la création de chaque étape du jeu.

Vous apprendrez la création et le déplacement, ainsi que l’animation du personnage principal. L’auteur vous montre sa solution pour créer et déplacer le décor.

Mais également comment gérer les monstres et l’intelligence artificielle, puis une technique pour coder les interactions avec le joueur. Et encore bien d’autres concepts expliqués par l’auteur, qui serait beaucoup trop long à résumer dans cette courte critique.

Le chapitre suivant concerne la création d’un Shoot themp up. L’auteur explique la gestion du scrolling multiplan, le starfield horizontal et la création d’arme comme les missiles à tête chercheuse !

L’auteur enchaine avec la création d’un jeu de courses automobiles. Ce chapitre fournit une méthode pour créer un jeu à deux. Puis vient la création de l’intelligence artificielle et des autres pilotes. Une partie complète est consacrée à la création et au défilement des circuits (les décors), en utilisant le bruit Perlin et la génération de texture.

Puis vient le chapitre sur les jeux en 3D avec la présentation des possibilités prévues dans Flash Player 10. L’auteur présente les jeux développés en « fausse 3D » avec un exemple détaillé. Puis vient l’utilisation des librairies 3D comme Away3D. Un exemple détaille les bases pour utiliser Away3D dans ses jeux flash.

Il y a également plusieurs paragraphes avec toujours des exemples à l’appui pour la création de jeux en 3D isométriques (création des décors), les wargames et la gestion des tuiles hexagonales.

Et la 2ème partie se termine avec la création d’un jeu de plateforme (comme Mario). L’auteur donne des solutions techniques pour la gestion de la gravité et des personnages.

La 3ème partie concerne la distribution des jeux en réseau

Le livre contient plusieurs chapitres sur les sockets binaires et socket xml. Il y a également des explications sur l’utilisation du flash remoting et les serveurs d’échange de données (Flash Média Serveur).

Puis, l’auteur nous apprend comment gérer correctement les domaines de sécurité et quels types de données échanger.

De plus, il y a tout un chapitre entièrement dédié aux téléphones portables.

Avec les jeux flash portés sur les OS iPhone et Android par l’intermédiaire de la technologie AIR.

La 4ème partie sur l’optimisation du code ActionScript

Plusieurs chapitres sont dédiés à l’optimisation de vos jeux flash.

L’auteur détaille comment adapter le framerate de votre application, quand utiliser Timer ou EnterFrame, les simplifications mathématiques à appliquer.

Il y a des exemples pour détailler les différences de performances et consommation mémoire entre les images vectorielles et les bitmap.

Il y a également des explications sur la réutilisation des objets, les boucles et le texte dynamique.

Ainsi que des annexes regroupant tout un ensemble de liens concernant la programmation ActionScript et la création de jeux flash.

Conclusion

J’ai beaucoup apprécié ce livre : Développez des jeux en Flash. Les explications sont claires et détaillées, plusieurs types de jeux sont expliqués dans le détail et surtout avec le code source.

Ce livre est extrêmement complet pour appréhender le développement de jeux flash.

Il permet de poser des bases solides, avec des notions simples d’algorithmes mathématiques.

Après, il faut savoir que ces nouvelles connaissances acquises devront être complétées par l’apprentissage des design pattern, l’utilisation d’un framework as3 (Pixlib, PureMVC ou autre) et de la pratique.

Petit à petit, vous serez capable de créer des jeux flash de plus en plus complexes.

Je conseille ce livre surtout aux débutants en ActionScript, cela vous aidera concevoir vos premiers jeux très simplement en vous amusant.

Commander ce Livre ActionScript 3

Commander sur Amazon le Livre ActionScript 3 : Développez des jeux en Flash.

Sommaire

Partie 1 : Programmation

Chapitre 1 : Introduction

1. Introduction
2. Casualgame et advergame
3. Serious game et e-learning
4. Jeux multijoueurs et MMORPG

Chapitre 2 : Game design : agilité et modestie

1. Introduction
2. Savoir s’organiser
3. Game design et game doc
4. POO, méthode agile et tuti quanti

Chapitre 3 : Apprendre la programmation avec Flash

1. Introduction
2. La programmation : qu’est-ce que c’est ?
3. Algorithmique
4. Langage de programmation
5. ActionScript

Partie 2 : Développement des jeux avec Flash

Chapitre 4 : Développement d’un Casual Game

1. Description et étapes de développement
2. Déplacement de la raquette
3. Déplacement de la balle
4. Tests de collision
5. Techniques de chargement des niveaux
6. Distribution d’un jeu
7. Sauvegardes d’un jeu
8. Finalisation

Chapitre 5 : Développement d’un jeu d’aventure RPG

1. Description et étapes de développement
2. Création et déplacement du personnage principal
3. Animation du personnage
4. Actions et combinaisons de touches
5. Création et déplacement du décor
6. Monstres et intelligence artificielle
7. Propriétés du personnage
8. Interactions du joueur
9. GAME-OVER
10. Armes et projectiles
11. Objets et items
12. Transformation dynamique du décor
13. Nuit et obscurité
14. Finalisation

Chapitre 6 : Shoot them up

1. Introduction
2. Scrolling multiplan
3. Starfield horizontal
4. Le mille-feuilles du shoot them up.
5. Missile à tête chercheuse

Chapitre 7 : Courses automobiles

1. Introduction
2. Jeu à deux
3. Intelligence et pilotage
4. Mode 7
5. Bruit Perlin et génération de texture
6. Effets spéciaux

Chapitre 8 : Jeux en 3D

1. Introduction
2. Flash Player 10 « Astro » et la 3D
3. Bases de la 3D
4. 3D précalculée
5. Librairies 3D
6. Vue 3D isométrique

Chapitre 9 : Wargames et tuiles hexagonales

1. Wargames et tuiles hexagonales

Chapitre 10 : Jeux de plates-formes

1. Introduction
2. Gravité et théorie

Partie 3 : Distribution

Chapitre 11 : Jeux en réseau

1. Introduction
2. Socket XML et socket binaire
3. Serveurs d’échange de données
4. Flash Remoting
5. Domaine de sécurité
6. Quelles données échanger ?

Chapitre 12 : Téléphone portable

1. Introduction
2. Plate-forme mobile
3. Le « cas » iPhone

Partie 4 : Optimisation

Chapitre 13 : Comment optimiser votre code

1. Introduction
2. Nombre réel d’images par seconde (Framerate)
3. Timer ou EnterFrame ?
4. Simplifications mathématiques
5. hitTestObject
6. Variables
7. Transparence
8. Images vectorielles et bitmap
9. Texte dynamique
10. Boucles
11. Réutilisation d’objets

Annexes

1. Introduction
2. Forums et sites sur Flash
3. Sites consacrés au développement de jeux vidéos
4. Site divers (mais utiles !)

Commander sur Amazon le Livre ActionScript 3 : Développez des jeux en 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 !

Le thème de ce Cours AS3 aborde les 6 étapes fondamentales pour développer une application ou un jeu flash 😉

En effectuant ces étapes une par une, vous réduisez fortement le risque de bugs.

De plus, vous améliorez considérablement la robustesse et la souplesse de votre application.

Votre application flash devient ainsi beaucoup plus facilement maintenable dans le temps !

C’est parti pour la 1ère étape.

Étape 1 : Analyse du Projet

Une analyse du projet est nécessaire pour déterminer les besoins du clients. Il n’est pas forcément nécessaire d’utiliser l’artillerie lourde (UML, Merise…), c’est vraiment en fonction du projet et de sa complexité.

Le plus important est de déterminer exactement les fonctionnalités de l’application à développer pour le client. Tout simplement, rédiger un document reprenant une à une chaque demande du client, transposée en fonctionnalités. Ce document ne contient pas de technique, il est compréhensible par tout le monde.

Ce document représente le cahier des charges fonctionnel de votre projet !

Il est indispensable que le cahier des charges fonctionnel soit validé par votre client.

Cela vous évitera des désagréments par la suite : tel que le développement de fonctionnalités non prévues, une erreur d’interprétation de la demande du client…

Étape 2 : Étude Technique

Ensuite, il vous faut commencer un document qui va aborder l’aspect technique de votre application : le cahier des charges techniques.

Dans la pratique, en fonction de la complexité de l’application, vous proposerez une ligne directrice concernant les technologies à utiliser.

Par exemple, il n’est toujours opportun d’utiliser un Framework ActionScript.

Pour des applications ayant peu de fonctionnalités, d’interactions utilisateurs, le Framework PureMVC fera très bien l’affaire.

Par contre, pour une application ou un jeu flash plus évolué, avec une interaction utilisateur plus poussée et complexe, le Framework PixLib s’avère très pratique pour faciliter et accélérer le développement.

En fonction de votre étude technique, il est nécessaire de faire la part des choses : « inutile de sortir le bazooka pour tuer une mouche ».

Sur certains projets, vous pouvez vous passer complètement d’un Framework ActionScript.

Étape 3 : Diagramme de Classes

Tout dépend encore de votre projet, pour des petites applications, je vous conseille de passer directement à l’étape 4. Inutile de perdre du temps.

Pour des applications flash complexes, un diagramme de relations entre toutes les classes est particulièrement intéressant lorsque vous êtes plusieurs développeurs à intervenir. C’est également pratique pour la maintenabilité et les évolutions futures de l’application.

Sur ce diagramme, vous pouvez rajouter les principales responsabilités de vos classes : c’est à dire leurs méthodes publiques, leurs fonctions (c’est à dire ce qu’elles effectuent).

Ce diagramme de classes représente le pilier de votre application, que vous partagerez avec les autres développeurs de votre équipe.

Étape 4 : La Programmation

Et nous voilà dans le vif du sujet : la conception de votre application flash.

L’utilisation d’une stratégie de debug est indispensable avec un logiciel comme Monster Debugger, Firebug…

Il est également nécessaire de suivre les performances de votre code actionscript.

Plusieurs Éditeurs ActionScript peuvent grandement vous simplifier la programmation, comme FDT ou en FlashDevelop.

Étape 5 : La Phase de Tests

Une étape trop souvent négligée par les Développeurs, tout cela pour gagner du temps !!!

Qui au final, ce temps « gagné’ sera perdu en correction de bugs directement en Production.

Et surtout, une perte de crédibilité face à vos clients…

La phase de tests consiste à vérifier une à une l’ensemble des fonctionnalités de votre application.

Le but est de déceler les fameux bugs cachés, les pertes de performances…

Une fois que votre application fonctionne comme prévu dans votre analyse fonctionnelle, il vous reste la dernière étape 😉

Étape 6 : La Livraison

Et voila la dernière étape : la livraison de votre application flash au client 😉

Au fur et à mesure de vos différents projets, vous allez acquérir de nouvelles compétences.

Cela vous permettra de développer vos propres classes utilitaires et même un Framework adapté à vos besoins !

Et vous, comment procédez-vous pour développer vos applications flash ?

Quelle ligne directrice utilisez-vous ?

Donnez-moi votre avis dans les commentaires ci-dessous.

Dans cette interview, Michel nous dévoile comment il a appris la programmation flash, quels sont les outils qu’ils utilisent quotidiennement et sa méthodologie de travail.

En plus, il fournit même un exemple entièrement commenté !

Michel a également un avis différent du mien pour programmer des applications flash, à découvrir dans l’interview ci-dessous…

Texte de l’interview de Michel

Matthieu : Bonjour Michel, peux-tu te présenter aux lecteurs d’actionscript facile ?

Michel : Bonjour Matthieu et tous les lecteurs d’actionscript facile !

Je suis haut de 1m82, lourd de 86Kg, brun capillairement parlant et j’ai les yeux vert-marrons ! Alors ?!

Ce n’est pas de la présentation américaine, ça ? 😉

Plus sérieusement, j’ai 31 ans et j’habite le centre de la France depuis plus de 15 ans maintenant.

Mon lien avec l’informatique a commencé dés mon arrivée en France, en 91 à l’âge de 11 ans avec un Amstrad CPC 6128.

Le problème était que je n’avais pas de disquettes à l’époque, alors je passais mon temps à recopier des pages de codes dès le matin pour pouvoir jouer la suite de la journée…

Je ne comprenais pas la moindre ligne de code à ce moment là et ce qui me foutait la rage c’est quand je me trompais dans une adresse mémoire, juste d’un chiffre et plantais l’ordi, à deux doigts de la fin du listing…

De toute façon, j’ai fini par péter mon Amstrong à la suite d’un très mauvais score à Ghost’nGoblins… 😀

Mais j’ai compris petit à petit le fonctionnement de l’ordinateur, le code. Et très rapidement je préférais passer mon temps à coder des jeux plutôt que d’y jouer.

J’ai fais ensuite l’acquisition d’un IBM PS/1, mon premier PC cadencé à 8Mhz, 40Mb de disque dur et 512Kb de mémoire vive, que je saturais très rapidement avec mes programmes ambitieux en Turbo Pascal.

C’est à ce moment là, en 1995 à peu près, que j’ai eu la chance de découvrir la « demoscene » et des « coders » chevronnés comme Skal, Unreal, pour ne citer qu’eux, à travers des groupes de démo comme Bomb, Pulse, Haujobb…

La demoscene est un monde à part dans l’informatique, un côté très « underground » qui m’a très vite séduit et qui mérite à lui tout seul un chapitre entier.

Pour faire court, c’est grâce à ça que j’ai compris l’importance d’optimiser son code, ses graphismes et les sons…

C’est aussi à ce moment là que j’ai pu comprendre l’utilité des mathématiques en informatique, qui, il faut l’avouer, ne me servaient jusqu’alors, qu’à compter la monnaie rendu par mon épicier arabe lors de mes fréquents achats de bombons (les œufs aux plats, mes favoris) !

Mais je l’avoue, j’ai pris une telle claque avec la demoscene, tellement largué au niveau du code que je me suis mis au graphisme 2D 8bits sous GrafxII (un Deluxe Paint d’Amiga, sur PC pour les connaisseurs)

J’ai alors passé quelques années dans des groupes comme Toadstood, Popsy Team, Skytech, Enenzi à créer et optimiser des images (et oui à l’époque des dessins en 16 couleurs c’était tendance).

Là aussi il y avait des cadors comme Made, Lazur, Yoga ou X-Man pour ne citer qu’eux également.

Je vais arrêter là pour la demoscene, sinon je vais pleurer de nostalgie 😀

Mais il me semblait intéressant de citer cette période qui a son importance sur la suite de mon parcours dans le monde du Flash notamment.

C’est au début des années 2000 que j’ai donc découvert le Flash, un logiciel qui m’a permis de lier mes deux passions : le code et le graphisme.

Alors oui, avec Flash 3, on ne parlait pas vraiment de code, mais d’une gestion très basique d’événements utilisateurs pour la plupart du temps. Mais le dessin et l’animation vectorielle était une petite révolution dans le monde du Web, défiant les horribles Gifs animés qui nous fracturaient les rétines sur la majorité des sites web de l’époque.

Depuis ce temps et jusqu’en 2003, je travaillais beaucoup avec l’IDE Flash en freelance, pour ne pas dire « au black » pour créer des pochettes de CD, des logos, des bannières, des présentations CD et des sites web full-Flash.

En 2004, j’ai intégré l’équipe du célèbre site de jeux en ligne Prizee.com en tant que deuxième développeur Flash. On bossait alors sous l’IDE Flash MX 2004 en ActionScript 2.0.

Là j’ai eu la chance de « tirer la bourre » avec mon responsable et très doué Cédric Néhémie, aka Abe !

Ce furent des moments de travail très enrichissants et rapidement nous sommes passés sous MTASC, le célèbre compilateur en ligne de commande produit par le talentueux Nicolas Cannasse de Motion-Twin.

Au fur et à mesure de notre collaboration, nous avons mis au point des outils et des « workflow » plus performants les uns que les autres pour sortir des jeux, exploitant les limites des performances du Flash Player et dans des délais très courts.

J’ai pendant ce temps évolué au sein de l’entreprise pour être tour à tour responsable Flash de Prizee, chef d’équipe et chef de projet.

Puis j’ai convaincu mon équipe et la direction de passer à haXe, un nouveau langage « web », successeur de MTASC, que nous utilisions pour produire du contenu Flash très performant. Nous suivions l’actualité haXe et Flash de très près afin d’être toujours à la pointe de la technologie en matière de développement de jeux en ligne.

Depuis je ne suis plus jamais repassé à l’ActionScript sauf sous la menace 😀

Là aussi, il y a un chapitre entier à consacrer à haXe qui est à mon sens un langage et un « concept » révolutionnaire !

J’ai ensuite quitté Prizee pour me consacrer entièrement à haXe.

J’ai nourri un blog très fréquenté, écrit des articles pour un magazine spécialisé dans la technologie Flash, Flash&Flex developers, et un livre a même était en projet, que j’ai dû mettre en stand by malheureusement pour diverses raisons.

Par ailleurs, je dispense ponctuellement des cours de Flash/haXe à l’IUT de Clermont-Ferrand aux élèves de 3ème année de « Licence pro Web » et j’ai également effectué des formations à l’APTA ou du consulting auprès de certaines entreprises, toujours dans le domaine du Flash, haXe et du développement Web en général.

Aujourd’hui je suis en phase d’intégrer un nouveau portail de jeux en ligne.

 

Matthieu : pour apporter des précisions, Michel a été un de mes premiers formateur en actionscript, c’est lui qui m’a enseigné les bases.

Eh oui, à l’époque c’était encore de l’AS2 ! Nous avons travaillé ensemble pour la société Prizee.com

Michel, peux-tu nous expliquer ton parcours de développeurs débutant à professionnel ?

Quelles sont les ressources, les éléments qui t’ont le plus aidé ?

Et surtout, combien de temps cela t’a t-il pris ?

Michel : Comme j’ai pu l’expliquer dans ma courte présentation 😀

Il y a eu plusieurs phases. Très tôt, j’ai eu une attirance pour le développement, l’envie de crée des jeux et pas seulement les utiliser, les « subir ».

Le monde de la demoscene ensuite a été très révélateur des besoins d’optimisation des programmes à l’exécution (gestion de la mémoire, prise en compte de la lenteur des PC de l’époque…) ainsi qu’en en terme de stockage (et oui c’était les disquettes à l’époque !)

Puis la découverte de Flash, dans les années 2000.

D’abord à des fins personnelles, puis petit à petit je me suis lancé dans le développement un peu plus professionnel en offrant mes services en tant que développeur de sites web full-Flash.

Mais c’est réellement à Prizee que j’ai eu l’opportunité de m’enrichir et mettre tous mes acquis au profit d’un développement complètement professionnel avec tous les impératifs que ça implique.

Les éléments qui m’ont le plus aidé sont le moteur de recherche Google mais aussi les décompilateurs !

J’ai énormément appris en regardant ce qui se faisait de mieux en matière d’animation Flash.

J’ai passé des journées et nuits entières à décompiler et essayer de comprendre le code des autres.

J’ai également beaucoup trainé sur les mailing-lists OSFlash et haXe et IRC : #flash, #flash.fr, #haxe

Mais au risque de passer pour un vieux con arrogant, il faut avant tout être passionné, motivé, persévérant…

 

Matthieu : donc, Michel, tu es un créateur professionnel de jeux vidéos flash, si je comprends bien ?

Peux-tu nous dire quels sont les jeux que tu as créé ?

Et surtout comment ?

Michel : J’ai crée des jeux aboutis, principalement en étant à Prizee. Si mes souvenirs sont bons, j’ai développé « La marre aux cadeaux », « Toudou Aviateur » et participé aux développements d’autres jeux de mon équipe.

Par contre, je me suis très rapidement spécialisé dans la réalisation d’outils de développement.

C’est réellement ce que je préfère !

Pour prendre un exemple concret, avec la mise en place d’un efficace workflow haXe et grâce au mode de programmation d’applications modulaires, les gars de mon équipe ne s’occupaient plus que du développement du moteur du jeu en lui-même, quasiment.

Tout le reste étaient des modules de présentation, de gestion de l’interactivité des joueurs, de la communication avec la partie serveur, communs à tous les jeux et indépendant de celui-ci.

 

Matthieu : et avec quels outils, logiciels, ressources… ?

Michel : Mes outils favoris sont un bloc-notes avec plein de gribouillis dessus et un stylo (je suis accro des Bic noirs transparents…vraiment, je trouve qu’ils glissent super bien sur une feuille ! :D).

Ensuite je suis fan de formules mathématiques, ça me fait réellement tripper d’optimiser mes calculs, de trouver des suites logiques etc.

Sinon je ne suis pas adepte des gros IDE lourds, je travaille sur FlashDevelop ou directement avec Notepad++.

Je ne suis pas non plus un grand fan de frameworks, pour la plupart trop chargés et abrutissant le développeur à terme (c’est mon avis, ça vaut ce que ça vaut hein…Quoi ?! Tu veux t’batt ?!? :D)

Ce n’est pas que j’aime systématiquement « réinventer la roue » mais j’ai à force, développé mes propres classes légères et répondant à mes propres besoins, ni plus ni moins.

J’aime la simplicité avant tout.

 

Matthieu : Avec ton expérience de développeur, quels conseils donnerais-tu à un débutant voulant se lancer dans la programmation actionscript ?

Michel : Je ne sais pas si je vais être de bons conseils, vu l’intitulé du site « ActionScript facile » puisque je défends bec et ongles et tente de promouvoir haXe !

Mais, convictions personnelles à part, je conseillerais de comprendre dans un premier temps ce qu’est Flash, le format SWF, le Flash Player etc.

De s’intéresser un peu à ce qu’il y a derrière…

Ensuite, je pense qu’il est essentiel de ne pas être totalement dépendant des différents frameworks proposés depuis des années sur la scène Flash, ni d’aucun IDE ou scripts d’aides au développement.

Ou du moins, pour être plus précis et quitte à me répéter, je conseillerais de toujours savoir comment tout ceci fonctionne en arrière plan…

Il ne s’agit pas là de « réinventer la roue » encore une fois, ou de coder sur une machine à écrire, mais tout simplement savoir se débrouiller sans, en cas de besoin.

J’ai malheureusement rencontré beaucoup de développeurs qui étaient très vite largués sans leurs outils habituels.

Pour finir, je serais d’avis de bien cerner un besoin en développement et d’appliquer le juste nécessaire et le « mode de développement » adéquat.

Pour prendre un exemple concret là aussi, un jeu doit être robuste, fluide.

Et pour qu’un jeu « claque » à coup d’effets spéciaux, il est indispensable de coder un peu plus bas niveau, plutôt que d’alourdir le tout à coup de couches abstraites, certes très élégantes mais d’avantage adaptées à des développements plus lourds d’interfaces etc.

 

Matthieu : As-tu des techniques ou « astuces » pour programmer des applications et jeux flash robustes et évolutifs ?

Des stratégies simples à mettre en œuvre pour optimiser une application ou un jeu flash ?

Michel : Il y a pas mal de données sur lesquelles on peut agir. Optimiser ses boucles, utiliser des algorithmes connus, les bons types de variables dont les temps d’accès en lecture ou écriture peuvent être plus ou moins lents, surveiller les fuites de mémoire, éviter les couches abstraites comme évoqué précédemment…

D’une manière générale, plus un code est abstrait, plus il est compréhensible au niveau humain et plus la machine galère à le comprendre elle !

Et donc, plus une application se veut évolutive et « modulaire » et moins elle est rapide à l’exécution.

C’est encore une fois un compromis à trouver selon les besoin du développement.

Attention au surdéveloppement donc.

 

Matthieu : Allez, as-tu une application, un code source, ou un tutoriel à partager avec nous ?

Michel : Hmmm, voyons voir…

Ce n’est pas un truc de cador mais j’aime beaucoup partager cet exemple de petit effet avec mes élèves, c’est donc plutôt anecdotique.

Un petit coup de sinus/cosinus ça vous tente ?

Je savais que j’allais vous faire rêver !!! Pom, pom pom… 😀

Allez, ce n’est pas si compliqué, vous allez voir.

Les fonctions sinus et cosinus sont périodiques de période 2 PI, c’est-à-dire qu’elles « bouclent » en quelque sortes sur les même valeurs.

De plus, on sait qu’elles oscillent entre -1 et 1.

Voici la courbe de la fonction sinus par exemple :

On peut voir ici que sin( -PI ) = sin( -PI + 2PI ) = 0 etc et comme ça jusqu’à l’infini et peut-être même jusqu’au ciel qui sait ? :p

Ces fonctions peuvent donc se révéler très utiles pour créer des déplacement « rigolos » entre-autres.

Ce genre d’effets était très apprécié dans les démos à une certaine époque et est encore utilisé dans certains jeux par exemple.

Le reste du programme consiste à créer des lettres avec un dégradé de couleurs et un contour.

Pour ce faire, il existe de nombreuses possibilités.

Ici, j’ai choisi de « découper » dans un carré de dégradé de couleur, la lettre puis lui donner un contour, le tout sans incorporer la police de caractères dans le SWF final, ce qui permet d’alléger notre fichier final.

Comme vous pouvez le voir, ce petit bout de code est écrit en haXe, mais vous pouvez très facilement l’adapter en AS3.

 

Matthieu : je te remercie beaucoup pour cette interview et l’ensemble des conseils que tu as donné aux lecteurs d’actionscript facile.

Je te laisse le mot de la fin.

Michel : J’ai été ravi de répondre aux questions et j’espère très sincèrement avoir contribué positivement au contenu de ton site, que je trouve clair et instructif.

Et comme disent nos amis anglo-saxons : c’étaient mes 2 cents 😉

Et voici l’application flash codée en haXe

Télécharger le code source

Vous trouverez ci-dessous le code source de cette application programmée avec haXe !

Télécharger “Bannière effet texte Michel”

banner-haXe-michel.zip – Téléchargé 656 fois – 8,05 Ko

Pour aller plus loin

Pour ceux qui sont intéressés par le langage haXe, voici le site de Michel avec des tutoriels sur haXe, ainsi que son site personnel.

Et également le site officiel d’haXe.

Souhaitez-vous des tutoriels sur le langage haXe ?

Ayant programmé des applications avec haXe, dites-moi si je peux vous aider avec ce langage.

Quels fonctionnalités voulez-vous aborder en vidéos ?