Mettre mon site en page de damarrage
  Approfondissement des notions de Flash 5

 

 Fiche d'enrichissement 9

 
 
 
  Création d’un jeu d’arcade
     Partie 1 : Mouvement et tir

Source David Doull 
http://www.artifactinteractive.com

À télécharger: ArcadeDepart.fla

  Présentation

Les trois prochaines fiches vous initieront à la réalisation d’un jeu d’arcade en Flash 5. Les scripts vous seront fournis avec les explications nécessaires. L’objectif est davantage de vous montrer comment se réalise un tel jeu que de vous apprendre la programmation. Prenez donc le temps de bien lire les explications fournies: elles seules pourront vous aider à comprendre.

La première des trois fiches enseigne à contrôler le mouvement (on l’a vu précédemment avec l'animation du ballon) et à faire feu sur des objets. 

Du côté programmation, il sera question de variables, de propriétés et d’instructions conditionnelles.

  Pratique
  1. Ouvrez d’abord le fichier ArcadeDepart.fla que vous avez téléchargé au préalable. Ce fichier est constitué d’un arrière-plan noir et d’un vaisseau spatial (voir ci-dessous).

  1. Commencez par convertir le vaisseau en symbole de type CLIP que vous nommez VAISSEAU_SPATIAL. Nommez l’occurrence (bouton droit, Panneau, Occurrence) VAISSEAU.

  2. Ajoutez le code suivant au clip en cliquant dessus avec le bouton droit de la souris et en sélectionnant l’option ACTIONS.

onClipEvent (load) {
         viteDeplace=10;
}

  1. Le joueur utilisera le clavier pour déplacer le vaisseau. Ajoutez le code suivant (remarquez qu’on utilise les flèches gauche, droite, haut et bas pour effectuer les déplacements) à la suite du précédent. Une fois le script entré, testez son fonctionnement.

 
onClipEvent (enterFrame) {
         if (Key.isDown(Key.Right)) {
         this._x+=viteDeplace;
         } else if (Key.isDown(Key.Left)){
         this._x-=viteDeplace;
         }

 
         if (Key.isDown(Key.Down)) {
         this._y+=viteDeplace;
         } else if (Key.isDown(Key.up)){
         this._y-=viteDeplace;
         }
}

  1. Il faut créer un autre CLIP: le rayon laser utilisé pour descendre les vaisseaux ennemis. Ajoutez un nouveau calque et nommez-le LASER. Dessinez, en avant du vaisseau, un petit cercle dégradé rouge. Convertissez-les en un clip nommé RAYON_LASER. À l 'aide du panneau OCCURRENCE, nommez l’occurrence du clip LASER.


  1. Il faut compléter le script OnClipEvent(load) du vaisseau spatial. Sélectionnez l’option ACTIONS du vaisseau spatial et modifiez le script de façon à ce qu’il soit identique à celui qui suit.  

onClipEvent (load) {
         viteDeplace = 10;
         _root.Laser._visible=false;
         compteurLaser=1;
}

La première des deux lignes ajoutées rend le rayon invisible lors du premier chargement. C’est ce clip de base qui sera recopié pour créer l’effet voulu lorsque la touche CTRL sera enfoncée. La seconde n’est qu’une initialisation de variable, reliée au rayon laser, qu’on utilisera plus tard.

  1.  Ajoutez le code suivant pour coller l’action TIR à la touche CTRL. Cette section de code doit être ajoutée immédiatement après la ligne OnClipEvent (enterFrame) { du code contenu dans le clip VAISSEAU.

 
if (Key.isDown(Key.CONTROL)) {
compteurLaser++;
_root.Laser.duplicateMovieClip("Laser"+compteurLaser, compteurLaser);
_root["Laser"+compteurLaser]._visible=true;
         }

Cette nouvelle section du script sera activée quand la touche CTRL sera enfoncée. Premièrement, on incrémente la variable compteurLaser de 1 (++ signifie incrémente de 1). Ensuite, on effectue une copie du clip Laser et on le nomme Laser plus la valeur de la variable compteurLaser (Laser1, Laser2, Laser3...). Puis on règle la position à la valeur du compteur. Enfin, on rend le nouveau clip visible dans la dernière ligne.

  1. On doit aussi ajouter un script au clip LASER. Commencez par la section ci-dessous (option Actions dans le menu contextuel).

 
onClipEvent (load) {
         LaserViteDeplace=20;
         this._y=_root.vaisseau._y;
         this._x=_root.vaisseau._x+100;
}

Ce script est effectué à la première apparition du clip Laser sur la scène. Il s’effectue aussi chaque fois que le clip est dupliqué.  Il commence par identifier une nouvelle variable laserViteDeplace et l’initialise. Il règle ensuite la position verticale du rayon laser (y) à celle du vaisseau. Enfin, il initialise la position horizontale (x) aussi à celle du vaisseau, mais lui ajoute 80 pour que le rayon soit centré par rapport à celui-ci.

  1. Il faut enfin ajouter le code suivant au clip Laser.

 
onClipEvent (enterFrame) {
         this._x+=LaserViteDeplace;
         if (this._x>600) {
         this.removeMovieClip();
         }
}  

Ce nouveau code déplace le clip Laser (ou sa copie) vers la droite. Quand la position horizontale (x) devient plus grande que 600, il enlève le clip.

  1. Testez cette première partie de votre jeu et sauvegardez le résultat dans votre répertoire personnel sous le nom Arcade_A.fla.
  Résultat attendu: 

 

 
Webmaster : Auteur du site | © Design : LaCasaGoum.com
 



<-  Haut de page  ->