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

À télécharger: Ennemi.wmf  Boom.wmf

1. Commencez par ouvrir Arcade_B.fla et sauvegardez sous le nouveau nom : Arcade_C.fla.

2. Créez un nouveau calque que vous nommez ENNEMI. Placez ce calque dans le haut de la liste des calques.

3. Importez l’image Ennemi.wmf que vous avez téléchargée précédemment. Groupez l’image (CTRL+G) et redimensionnez-la à l’aide du panneau Info en respectant les critères suivants : 60 pixels de largeur par 37 pixels de hauteur.

4. Convertissez l’image en un symbole de type Clip que vous nommez ENNEMI. Nommez l’occurrence de ce clip ENNEMI1.

Les ennemis traversent la scène de la droite vers la gauche. Le joueur doit les éviter ou les descendre. Un ennemi atteint explose. Par contre, si l’un d’eux entre en collision avec le  joueur, la partie est finie. La technique de copie des clips est celle utilisée pour obtenir plusieurs vaisseaux ennemis. La première section de code sert à déterminer une position de départ aléatoire pour les cibles.

5. Sélectionnez le clip ENNEMI et ajoutez le script suivant dans le fenêtre Actions.

onClipEvent (load) {
            function reset() {
            this._x=600;
            this._y=random(200)+100;
            viteEnnemi=random(4)+1;
            }
            reset();
}

Ce script effectue deux opérations : il définit une fonction nommée RESET et exécute ensuite celle-ci. Comme les instructions sont placées dans une instruction LOAD, elles sont exécutées lors du chargement du clip.

 La ligne Function reset et les trois suivantes définit la fonction. This._x = 600 détermine la coordonnée x du vaisseau ennemi. La suivante détermine au hasard (random) un nombre entre 99 et 299 qui servira de coordonnée y pour le vaisseau. La ligne quatre détermine, toujours au hasard, une vitesse pour le vaisseau, laquelle est placée dans la variable viteEnnemi. Finalement, la dernière ligne de code, reset(), appelle la fonction que l’on vient de créer.

6. Le vaisseau ennemi doit bouger. Un autre script se charge de cette opération. Toujours dans la boîte Actions du clip ENNEMI, ajoutez la section de code suivante, sous le script déjà présent.

onClipEvent (enterFrame) {
            if (_root.vaisseau.défileDépart==true) {
                this._x-=viteEnnemi+_root.sol_principal.viteSol;
            } else {
                this._x-=viteEnnemi;
            }
            if (this._x<=10) {
            reset();
            }
}

Cette nouvelle section de code réalise encore deux choses : elle déplace le vaisseau ennemi à travers la scène en diminuant sa coordonnée x et ramène le vaisseau ennemi à droite s’il sort de la scène par la gauche.  

La première structure de condition (if) vérifie si la variable défileDépart a la valeur true. Si c’est le cas, la coordonnée x du vaisseau est diminuée de la vitesse du vaisseau et de celle du sol, sinon seulement de la vitesse du vaisseau.  

La seconde (if) vérifie si le vaisseau est sorti de la scène par la gauche. Si oui, la fonction RESET est appelée : celle-ci replace le clip à la droite de la scène et lui attribue une position au hasard.

7. Testez votre jeu. Vous devriez voir un vaisseau ennemi traverser l’écran de la droite vers la gauche. Lorsqu’il sort de la scène, un autre apparaît. Si vous déplacez votre vaisseau, vous pouvez observer le mouvement complet.

8. Un seul ennemi serait trop facile. On va donc en ajouter. Créez un nouveau calque et nommez-le CONTRÔLE. Placez-le dans le haut de la liste.

9. Cliquez avec le bouton droit de la souris dans le premier cadre de ce calque et sélectionnez Actions. Entrez le script ci-dessous.

numEnnemi=3; 

for (i=2; i<=numEnnemi; i++) {
Ennemi1.duplicateMovieClip("ennemi"+i, i+100);
}

La première ligne crée une nouvelle variable, numEnnemi et l’initialise à 3. Cette variable correspond au nombre d’ennemis présents sur la scène à tout moment. Les trois lignes suivantes constituent une boucle qui multiplie le clip Ennemi1. Cette boucle crée une variable appelée i qui vaut 2 au départ. I++ indique à Flash d’incrémenter i de 1 chaque fois que la boucle est répétée. I<=numEnnemi lui dit de répéter la boucle tant que i est égal ou plus petit que numEnnemi. Dans le cas contraire, elle arrête. On obtient comme résultat la création de deux copies d’ENNEMI1 qui portent les noms ENNEMI2 et ENNEMI3. Si vous changiez la valeur de numEnnemi (4 par exemple) la boucle produirait autant de copies de plus qu’il  faudrait.

10. Refermez la fenêtre Actions et ajoutez une image à tous les calques en sélectionnant le cadre #2 de chacun et en pressant F5.

11. Revenez au cadre #2 du calque CONTRÔLE et pressez F6. Ouvrez la boîte Actions (bouton droit de la souris dans le cadre) et ajoutez la ligne suivante.

Stop();

12. Testez le jeu et sauvegardez le travail déjà accompli. 

Trois vaisseaux ennemis se trouvent continuellement en scène. Il ne reste plus qu’une chose à faire pour que ça devienne véritablement un jeu : détecter les collisions. En effet, il faut savoir si un laser frappe un ennemi et, en conséquence, le faire exploser et si un vaisseau frappe celui du joueur pour mettre ainsi fin à la partie.

13. Voici le code permettant de détecter les collisions entre le rayon laser et un vaisseau ennemi. Ouvrez la fenêtre Actions du clip LASER. Corrigez le clip enterFrame pour qu’il devienne identique à celui ci-dessous.

onClipEvent (enterFrame) { 
          this._x+=LaserViteDeplace; 
          if (this._x>600) { 
              this.removeMovieClip(); 
         } 
         if (this._name<>"Laser") {
            for (i=1; i<=_root.numEnnemi; i++){
               if (this.hitTest(_root["Ennemi"+i])) {
                   _root.score += 100;
                   _root["Ennemi"+i].gotoAndPlay(2);
              }
         }
     }
}

Ce script vérifie si le laser entre en collision avec n’importe quel vaisseau ennemi. Pour ce faire, il emploie une boucle et une instruction hitTest permettant de vérifier les collisions. S’il y a collision avec un ennemi, la variable SCORE est incrémentée de 100 et le vaisseau ennemi joue son cadre #2.

14. Fermez la fenêtre Actions et créez un nouveau calque que vous nommez SCORE. Placez-le sous le calque CONTRÔLE.

15. Sélectionnez dans le panneau CARACTÈRE la police ARIAL et une taille de 20 pts. Sélectionnez TEXTE, OPTIONS et cliquez sur le bouton Texte. Cliquez sur la scène, là où vous désirez placer la zone, et réglez les caractéristiques du texte comme dans l’exemple ci-dessous. Étirez ensuite la zone pour qu'elle puisse recevoir les résultats.

Remarquez le nom de la variable utilisée pour le contenu de la zone, SCORE. C’est le même que dans le script servant à vérifier les collisions. Remarquez aussi le bouton 123 enfoncé: seuls des chiffres peuvent être placés dans cette boîte de texte.

16. Cliquez dans le cadre #1 du calque CONTRÔLE et ouvrez la boîte Actions. Inscrivez, à la suite du code déjà présent, la ligne d’initialisation de la variable SCORE ci-dessous.

Score=0;

17. Il faut ajouter une explosion lorsqu’un ennemi est frappé par un rayon laser.  Ouvrez le clip ENNEMI en mode édition. Celui-ci ne contient qu’un calque constitué d’un seul cadre contenant le graphique représentant le vaisseau ennemi.

18. Créez une nouvelle image (F6) dans le cadre #2 de ce calque. Importez dans ce cadre l’image Boom.wmf que vous avez téléchargée précédemment. Groupez les différentes parties de cette image (CTRL+G) et attribuez-lui une taille de 65 x 65 à l'aide du panneau INFO. Convertissez-la en un symbole Graphique que vous nommez BOOM.

19. Déplacez l’image au-dessus du vaisseau ennemi et placez-la derrière celui-ci (CTRL+MAJ+FLÈCHE VERS LE BAS). Groupez les deux images (CTRL+G).

20. Créez une nouvelle image (F6) dans le cadre #3. Dissociez la nouvelle image (CTRL+MAJ+G) et sélectionnez l’explosion. À l’aide du panneau INFO, réglez les dimensions à 85 x 85. Regroupez les deux images.

21. Répétez les mêmes opérations pour le cadre #4 en utilisant cette fois des dimensions de 105 x 105.

22. Enfin, dans le cadre #5, répétez les mêmes opérations, mais en enlevant le vaisseau pour ne laisser que l’explosion dans des dimensions de 125 x 125 pixels. Vous pouvez voir ci-dessous un exemple des 5 images constituant le clip.

23. Insérez une image-clé vide (F7) dans la case #6 .  Nommez ce calque VAISSEAU ENNEMI. Créez un nouveau calque au-dessus du précédent et nommez-le CONTRÔLE. Sélectionnez le premier cadre de ce calque et ajoutez l’action suivante.

Stop();

24. Insérez une image-clé vide (F7) dans la case #6 de ce calque  et ajoutez une nouvelle fois la ligne de code:  Stop();.

On ajoute une ligne Stop dans le cadre #1 pour éviter que le vaisseau n’explose s’il n’a pas été frappé par un rayon laser. Rappelez-vous que le code permettant que l’animation représentant l’explosion du vaisseau (commençant au cadre #2) s’exécute a été ajouté précédemment.

L’explosion est stoppée dans le cadre #6 parce qu’il n’y a pas d’image dans ce cadre. Lorsque le vaisseau est frappé par un rayon, il continue sa route jusqu’à ce qu’il soit sorti de la scène à gauche, mais il n’est plus visible.

25. Lorsque le vaisseau du joueur frappe un vaisseau ennemi, il doit aussi se produire un événement. Revenez à la Scène 1 et sélectionnez l'occurrence ENNEMI1 du vaisseau.  À la fin du script onClipEvent(enterFrame), tout juste avant la dernière accolade, insérez les lignes de code suivantes.

if (this.hitTest(_root.vaisseau)) {
       _root.gotoAndStop ("PartieFinie");
}

On vérifie à l’aide de ce code (hitTest) s’il y a une collision entre le vaisseau du joueur et le vaisseau ennemi. Si c’est le cas, la ligne du temps est dirigée vers le cadre nommé PartieFinie.

26. Lorsqu’un vaisseau explose, il faut s’assurer qu’il retourne au cadre #1 du clip ENNEMI. Une petite ligne de code placée à la fin de la fonction RESET, tout juste après la ligne viteEnnemi=random(4)+1; se charge de cette tâche. Ajoutez-la donc (boîte Actions du vaisseau ENNEMI).

this.gotoAndStop(1);

27. On va préparer le message indiquant qu’une partie est terminée. Ajoutez d’abord une troisième image à chaque calque de la scène 1 à l’aide de la touche F5. Insérez ensuite une image-clé vide (F7) dans les cadres #3 des calques ENNEMI, LASER, VAISSEAU et CONTRÔLE: on ne veut pas que ces images soient visibles lorsque la partie est finie.

28. Cliquez avec le bouton droit de la souris dans le cadre #3 du calque CONTRÔLE et sélectionnez PANNEAUX, IMAGE. Entrez PartieFinie comme étiquette d’image: c’est vers ce cadre que sera dirigée l’animation en cas de collision entre le joueur et un vaisseau ennemi.

29. Ajoutez un nouveau calque au-dessus du calque ENNEMI et nommez-le PARTIE FINIE. Ajoutez une image-clé vide (F7) dans le cadre #3 de ce calque et assurez-vous que TEXTE STATIQUE est sélectionné dans les options de texte. Inscrivez le message suivant, au centre de la scène, en déterminant vous-même les paramètres du texte.

PARTIE TERMINÉE!

30. Enregistrez le jeu et testez-le. Il est fonctionnel. On peut cependant encore l’améliorer.

31. On va ajouter un bouton RECOMMENCER. Créez un nouveau calque juste au-dessus de Partie finie. Nommez-le Recommencer.

32. Insérez une image-clé vide (F7) dans le cadre #3 de ce calque. Sélectionnez FENÊTRE, BIBLIOTHÈQUES COMMUNES, BOUTONS et glissez le bouton nommé Push bar sur la scène, juste sous le texte Partie terminée. Renommez ce symbole RECOMMENCER.

33. Sélectionnez le bouton et ouvrez la boîte Actions. Ajoutez le script suivant qui relance  le jeu lorsque le bouton est cliqué.

on (release) {
            gotoAndPlay (1);
}

34. Ajoutez le texte RECOMMENCER sur le bouton. Utilisez les paramètres que vous désirez. Groupez le bouton et le texte (CTRL+G) ensemble. L’écran de fin de partie devrait ressembler à celui ci-dessous.

35. Pour limiter le nombre de rayons laser présents sur la scène en même temps, il faut ajouter d’autres lignes de code. Sélectionnez le vaisseau spatial et ouvrez la boîte Actions.

36. Ajoutez les deux lignes suivantes dans le clip onClipEvent(load), juste en dessous de défileDépart=false. Il s’agit de deux nouvelles variables, la première servant à indiquer le nombre maximum de rayons et la deuxième, à numéroter ceux-ci.

maxlasers=4;
CompteurRayon=1;

37. Il faut ensuite remplacer la ligne (Key.isDown(Key.CONTROL)){ par celle ci-dessous.

if (Key.isDown(Key.CONTROL) and (compteurLaser<=maxLasers)) {

Une nouvelle condition pour qu’un rayon laser soit émis entre en vigueur. Il faut maintenant non seulement que la touche CTRL soit enfoncée, mais aussi que la variable compteurLaser soit inférieure ou égale à maxLasers.

38. Il faut enfin changer les deux lignes suivantes (identifiées A) par celles identifiées B.

A)        _root.laser.duplicateMovieClip("Laser"+compteurLaser, compteurLaser);
            _root["laser"+compteurLaser]._visible=true;

B)        _root.laser.duplicateMovieClip( "laser"+compteurRayon, compteurRayon );
            _root["laser"+compteurRayon]._visible=true;
            compteurRayon++;
            if (compteurRayon>maxLasers){
                        compteurRayon=1;
      }

Les nouvelles lignes de code  permettent de déterminer combien de rayons sont présents sur la scène en même temps. Il reste à diminuer la variable compteurLaser lorsqu’un rayon quitte la scène.

39. Sélectionnez le clip LASER et ouvrez la fenêtre Actions. Ajoutez la ligne de code suivante juste en-dessous de if (this._x>600){.

_root.vaisseau.compteurLaser--;

40. Enregistrez une nouvelle fois  le jeu et testez-le.