Partie 2 : Créer un jeu flash de type RPG Zelda avec PureMVC

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.