Créer un jeu flash de type casse briques avec PureMVC

4 questions

Écrit le 27 décembre par Matthieu
Publié dans le(s) sujet(s) Jeux Flash

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

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 !