Accueil | Tutoriaux

Tutoriaux : largage de bombes à l'aide du clavier
 

1. Introduction
 
Je ne suis pas du tout un fan des jeux vidéos mais de temps en temps, au cours de mes errances sur le net il m'arrive de jouer avec des jeux en flash... pendant quelques heures. Je vous conseille de tester les jeux réalisés par André Michelle et Ferry Halim dont les sites respectifs figurent parmi les liens de zoneflash. Ce qui éveille mon intérêt dans les jeux de qualité c'est le respect des lois de la physique et de la mécanique qui rendra le jeu réaliste. C'est en parcourant le forum de flash-france que l'idée de ce tutoriel m'est venue : il s'agit ici d'apprendre à utiliser le clavier pour déclencher le largage d'une bombe d'un vaisseau en déplacement.
 
 
Utiliser la glissière pour faire varier la vitesse du "spaceinvaders" et tapez sur la barre d'espace pour larguer une bombe. Bien entendu, nous sommes très loin d'un jeu complet ! Cependant, en suivant ce tutoriel vous aurez les connaissances qui vous permettront de déclencher des actions à l'aide du clavier. Je vous conseille également de lire le tutoriel "simuler la gravité" pour comprendre les lois qui gèrent les déplacements des bombes.
 
2. Dans la bibliothèque et sur la scène principale
 
- Ouvrez le logiciel Flash et créez un nouveau document. Définissez les dimensions de l'animation : 300 pixels de largeur et 300 pixels de hauteur.
- Dans le panneau "propriétés du document", définissez la cadence de l'animation à 30 images par seconde.
- Créez un nouveau symbole (Ctrl+F8) de type clip et dessinez le vaisseau spatial ou l'avion de vos rêves ! Dans le panneau de liaison de ce clip, cliquez sur la case à cocher "exporter pour ActionScript" et enfin tapez "spaceinvaders" dans le champ de texte "liaison". Ainsi, nous pourrons placer dynamiquement une occurrence de notre vaisseau spatial sur la scène principale qui dans l'IDE de Flash restera totalement vide. Veillez à ce que le dessin de votre vaisseau soit centré verticalement et horizontalement par rapport au centre du clip.
 
3. Le code et l'animation obtenue
 
Dans la première image clé de la scène principale, placez le code suivant :
  
gravite = 0.2;
vitesse = 2;
taille = 3;
 
this.attachMovie("spaceinvaders", "spaceinvaders", 0);
 
xmin = -0.5*spaceinvaders._width;
xmax = 300+0.5*spaceinvaders._width;
ymin = 50;
ymax = 275;
 
spaceinvaders._x = xmin;
spaceinvaders._y = ymin;
 
this.createEmptyMovieClip("ligne", 1);
ligne.lineStyle(0, 0, 100);
ligne.moveTo(0, ymax);
ligne.lineTo(300, ymax);
 
ecouteur = new Object();
 
largage = true;
 
ecouteur.onKeyDown = function() {
if (Key.isDown(Key.SPACE) && largage) {
larguerUneBombe();
largage = false;
}
};
 
ecouteur.onKeyUp = function() {
largage = true;
};
 
Key.addListener(ecouteur);
 
tomber = function () {
this.vy += gravite;
this._x += this.vx;
this._y += this.vy;
if (this._y>ymax) {this.removeMovieClip();}
};
 
larguerUneBombe = function () {
var depth = this.getNextHighestDepth();
var bombe = this.createEmptyMovieClip("bombe"+depth, depth);
bombe._x = spaceinvaders._x;
bombe._y = spaceinvaders._y;
bombe.beginFill(0, 100);
bombe.moveTo(-0.5*taille, 0);
bombe.lineTo(-0.5*taille, -taille);
bombe.lineTo(0.5*taille, -taille);
bombe.lineTo(0.5*taille, 0);
bombe.lineTo(-0.5*taille, 0);
bombe.endFill();
bombe.vx = vitesse;
bombe.vy = 0;
bombe.onEnterFrame = tomber;
};
 
spaceinvaders.onEnterFrame = function() {
this._x += vitesse;
if (this._x>xmax) {this._x = xmin;} else if (this._x<xmin) {this._x = xmax;}
};
 
Cliquez dans l'animation pour lui donner le focus !
 
4. Le code avec ses commentaires
 
Dans cette première partie du programme, on définit les constantes physiques de l'animation. La première constante est celle qui concerne la gravitation : plus cette constante est grande plus l'accélération des bombes sera grande et plus leur vitesse au moment de l'impact sera grande.
gravite = 0.2;
 
Ce paramètre définit la vitesse de déplacement du vaisseau spatial. A chaque image, le vaisseau se déplacera de 2 pixels vers la droite.
vitesse = 2;
 
J'ai décidé de larguer des bombes carrées : "taille" n'est rien d'autre que le côté de ce carré exprimé en pixels.
taille = 3;
 
A l'aide la fonction attachMovie et du nom de liaison "spaceinvaders", nous plaçons une occurrence de notre vaisseau spatial sur la scène principale. Cette occurrence s'appellera "spaceinvaders".
this.attachMovie("spaceinvaders", "spaceinvaders", 0);
 
La lettre "x" désigne fréquemment une abscisse et "min" est l'abréviation de "minimale". xmin est donc l'abscisse minimale que pourra prendre notre vaisseau spatial. Si l'abscisse du vaisseau est inférieure à xmin, celui-ci n'est plus visible. Il faudra donc veiller au cours de l'animation à ce que l'abscisse du vaisseau reste toujours supérieure à xmin.
xmin = -0.5*spaceinvaders._width;
 
xmax est l'abscisse maximale que pourra prendre notre soucoupe volante. Si l'abscisse de la soucoupe est supérieure à xmax, celle-ci est hors de la scène et n'est donc plus visible. C'est pourquoi nous veillerons à ce que l'abscisse de la soucoupe reste toujours inférieure à xmax au cours de l'animation.
xmax = 300+0.5*spaceinvaders._width;
 
ymin est l'ordonnée du vaisseau.
ymin = 50;
 
ymax est l'ordonnée du "sol" matérialisé par une ligne horizontale, autrement dit c'est l'ordonnée des points d'impact. Les ordonnées des bombes seront donc toujours comprises entre ymin et ymax.
ymax = 275;
 
On définit l'abscisse et l'ordonnée du vaisseau spatial.
spaceinvaders._x = xmin;
spaceinvaders._y = ymin;
 
On crée un clip vide nommé "ligne" dans lequel nous allons tracer un segment horizontal afin de matérialisé le sol.
this.createEmptyMovieClip("ligne", 1);
 
Nous définissons le style du trait : taille, couleur et transparence.
ligne.lineStyle(0, 0, 100);
 
Nous traçons le segment horizontal joignant les points de coordonnées (0 ; ymax) et (300 ; ymax).
ligne.moveTo(0, ymax);
ligne.lineTo(300, ymax);
 
Nous créons un objet qui permettra d'interagir avec le clavier.
ecouteur = new Object();
 
Nous définissons un booléen qui est initialisé avec la valeur "vrai". Ce booléen obligera le joueur à enfoncer la barre d'espace pour larguer une bombe, puis à relâcher la barre d'espace pour pouvoir larguer la bombe suivante.
largage = true;
 
Nous définissons une fonction qui sera appelée tant qu'une touche du clavier sera enfoncée.
ecouteur.onKeyDown = function() {
 
Si la touche du clavier qui est actuellement enfoncée est la barre d'espace et que le booléen "largage" est "vrai" alors...
if (Key.isDown(Key.SPACE) && largage) {
 
...nous larguons une bombe et nous donnons à "largage" la valeur "faux".
larguerUneBombe();
largage = false;
 
Fin du if et de la fonction onKeyDown.
}
};
 
De la même manière nous définissons une fonction qui sera exécutée lorsque le joueur relâchera une des touches du clavier. Cette fonction fait une chose simple : elle donne au booléen "largage" la valeur "vrai" rendant ainsi possible le largage d'une autre bombe. Grâce à "largage" on empêche le joueur de faire des largages en "rafale".
ecouteur.onKeyUp = function() {
largage = true;
};
 
On donne à l'objet "ecouteur" la faculté d'être à l'écoute des frappes sur le clavier.
Key.addListener(ecouteur);
 
On crée une fonction qui gérera la chute des bombes. J'aime bien donner aux fonctions des noms évocateurs : c'est pour cette raison que bien souvent je les nomme en utilisant des verbes.
tomber = function () {
 
Chaque bombe sera dotée d'une variable "vy" qui représentera l'ordonnée de son vecteur vitesse. Les lois de la physique nous conduisent à faire augmenter cette vitesse verticale en lui ajoutant à chaque image la valeur de la constante de gravitation définie dans les premières lignes du programme. Ainsi la vitesse verticale des bombes augmentera régulièrement au cours de la chute : c'est ce que l'on appelle un mouvement uniformément accéléré...
this.vy += gravite;
 
De même chaque bombe sera dotée d'une variable "vx" qui représentera l'abscisse de son vecteur vitesse. On ajoute à l'abscisse de la bombe l'abscisse de son vecteur vitesse.
this._x += this.vx;
 
Code similaire à la ligne précédente : on ajoute à l'ordonnée de la bombe l'ordonnée de son vecteur vitesse.
this._y += this.vy;
 
Si l'ordonnée de la bombe devient supérieure à l'ordonnée maximale ymax alors on enlève la bombe de la scène principale.
if (this._y>ymax) {this.removeMovieClip();}
 
Fin de la fonction "tomber".
};
 
Voici une fonction qui permettra de créer une bombe, de la placer sur la scène principale et de définir sa vitesse initiale.
larguerUneBombe = function () {
 
On cherche le calque le plus élevé de la pile afin d'y placer la bombe suivante sans "écraser" les précédentes.
var depth = this.getNextHighestDepth();
 
On crée un clip vide que l'on place sur le calque le plus élevé. C'est à l'intérieur de ce clip que nous allons tracer notre bombe sous la forme d'un simple carré noir.
var bombe = this.createEmptyMovieClip("bombe"+depth, depth);
 
On définit les coordonnées de la bombe : celles-ci sont identiques à celles du vaisseau spatial.
bombe._x = spaceinvaders._x;
bombe._y = spaceinvaders._y;
 
A l'intérieur du clip (encore vide), on trace un carré noir de côté "taille". Ce carré est centré horizontalement et son bord inférieur a une ordonnée nulle.
bombe.beginFill(0, 100);
bombe.moveTo(-0.5*taille, 0);
bombe.lineTo(-0.5*taille, -taille);
bombe.lineTo(0.5*taille, -taille);
bombe.lineTo(0.5*taille, 0);
bombe.lineTo(-0.5*taille, 0);
bombe.endFill();
 
On définit le vecteur vitesse de la bombe au moment du largage : la vitesse verticale est nulle tandis que la vitesse horizontale est égale à celle du vaisseau spatial.
bombe.vx = vitesse;
bombe.vy = 0;
 
On définit une fonction qui sera appelée à chaque image de "la ligne de vie" (ou timeline) de notre bombe.
bombe.onEnterFrame = tomber;
 
Fin de la fonction "larguerUneBombe".
}
 
Nous définissons une fonction exécutée à chaque image de la timeline du vaisseau spatial. Cette fonction gérera le déplacement latéral du vaisseau.
spaceinvaders.onEnterFrame = function() {
 
On ajoute à l'abscisse du vaisseau la valeur de la constante "vitesse".
Si la valeur de la constante "vitesse" est positive le vaisseau se déplace de gauche à droite (comme dans notre cas).
Si la valeur de la constante "vitesse" est négative le vaisseau se déplace de droite à gauche.
this._x += vitesse;
 
Si l'abscisse du vaisseau devient supérieure à "xmax", on place le vaisseau à l'abscisse "xmin".
Si l'abscisse du vaisseau devient inférieure à "xmin", on place le vaisseau à l'abscisse "xmax".
En procédant ainsi on s'assure que l'abscisse du vaisseau reste toujours comprise entre xmin et xmax. A tout moment le vaisseau reste visible : s'il sort par la droite de l'animation il réapparaît par la gauche et s'il sort par la gauche il réapparaît par la droite.
if (this._x>xmax) {this._x = xmin;} else if (this._x<xmin) {this._x = xmax;}
 
Fin de la fonction onEnterFrame.
};
 
5. Pour aller plus loin...
 

Voici quelques idées qui vous permettront de prolonger l'exercice :

- vous pouvez essayer de provoquer l'explosion des bombes au moment où elles touchent le sol ;
- on peut imaginer des bombes qui rebondissent puis qui explosent après un certain temps ;
- il est certainement possible d'ajouter une cible au niveau du sol et de détruire progressivement la cible en fonction de la proximité des explosions...


Vous me direz sûrement qu'imaginer une animation est une chose, la réaliser en est une autre !! Mais bon j'ai tout de même le droit de délirer :=).
 
Accueil | Tutoriaux