Dans cette section, nous verrons comment il est possible de contrôler dynamiquement des occurences de clips sur la scène. Avec ActionScript, nous verrons comment contrôler les déplacements des objets, tester les collisions entre deux occurences et comment on peut créer dynamiquement des occurences sur la scène. Les scripts que nous allons voir peuvent être utiles, entre autres, pour le développement de jeux en Flash.
Nous commencerons par programmer les déplacements d'une occurence de clip afin de pouvoir le diriger avec les flèches du clavier. Nous allons utiliser les propriétés _x et _y afin de diriger le déplacement de l'occurence sur la scène. Créez un nouveau document et régler les dimensions de la scène à 300x300. Créez ensuite un clip sur la scène, cliquez dessus et aller dans l'éditeur d'ActionScript. Entrez les lignes de codes suivantes:
onClipEvent(enterFrame) {
if (Key.isDown (Key.RIGHT)) this._x+=5;
if (Key.isDown (Key.LEFT)) this._x-=5;
if (Key.isDown (Key.UP)) this._y-=5;
if (Key.isDown (Key.DOWN)) this._y+=5;
}
Testez l'animation. Vous remarquerez que lorsqu'on appuie simultanément sur GAUCHE et HAUT, le mouvement devient saccadé. Pour régler ce problème, nous allons utiliser une condition ELSE afin que lorsqu'une touche est enfoncée, les autres événements du clavier soient ignorés.
onClipEvent(enterFrame) {
if (Key.isDown (Key.RIGHT)) this._x+=5;
else if (Key.isDown (Key.LEFT)) this._x-=5;
else if (Key.isDown (Key.UP)) this._y-=5;
else if (Key.isDown (Key.DOWN)) this._y+=5;
}
Le clip se déplace à une vitesse de 5 pixels par image. Si on roule le film à une cadence de 30 images par seconde, le mouvement sera encore plus fluide. Mais nous pouvons également régler à tout moment la vitesse de déplacement en ajoutant une variable vitesse.
onClipEvent(load) vitesse=5;
onClipEvent(enterFrame) {
if (Key.isDown (Key.RIGHT)) this._x+=vitesse;
else if (Key.isDown (Key.LEFT)) this._x-=vitesse;
else if (Key.isDown (Key.UP)) this._y-=vitesse;
else if (Key.isDown (Key.DOWN)) this._y+=vitesse;
}
Que faire maintenant pour éviter que le clip ne sorte de la scène? Connaissant les extrémités de la scène, on peut préciser les conditions de déplacement comme suit:
onClipEvent(load) {
vitesse=5;
sceneLargeur = 300;
sceneHauteur = 300;
}
onClipEvent(enterFrame) {
if (Key.isDown (Key.RIGHT) && this._x < sceneLargeur) {
this._x+=vitesse;
} else if (Key.isDown (Key.LEFT) && this._x > 0) {
this._x-=vitesse;
} else if (Key.isDown (Key.UP) && this._y > 0) {
this._y-=vitesse;
} else if (Key.isDown (Key.DOWN) && this._y<sceneHauteur) {
this._y+=vitesse;
}
}
Voici quelques exemples de déplacements utilisant _x et _y.
Déplacement avec accélération
onClipEvent(load) coef = 0;
onClipEvent(enterFrame) {
coef += 0.1;
_x += coef;
}
Déplacement avec décélération
onClipEvent(load) coef = 10;
onClipEvent(enterFrame) {
if (coef > 0) {
coef -= 0.5;
_x += coef;
}
Déplacement circulaire
onClipEvent(enterFrame) {
t += 0.1;
_x = 200+Math.cos(t)*50;
_y = 150+Math.sin(t)*50;
}
// 200 et 150 représente l'axe autour duquel va se faire la
// rotation. 50 est le rayon entre l'axe de rotation et la
// position du clip. Cosinus en _x et sinus en _y fait
// tourner le clip dans le sens horaire. On inversera
// pour le sens antihoraire (sinus en _x et cosinus en _y).
La détection des collisions est au coeur de n'importe quel jeu vidéo. Il y a deux types de collisions: la collision avec un objet immobile (les murs par exemple) et la collision avec des objets en mouvement (les ennemis et leurs balles de pistolet par exemple). Une bonne détection des collisions va améliorer votre façon de développer un jeu et améliorer la vitesse du jeu lui-même.
Prenons un exemple. Sur la scène, on a deux clips, ClipA et ClipB, et on veut savoir quand ils se touchent. On va faire deux détections de collision, à savoir si ClipA touche ClipB, et l'inverse. Voilà donc une redondance, car si ClipA touche ClipB, ClipB touche certainement ClipA. Si on un nombre d'objets n, on devra alors faire n2 tests de collisions. Comme on ne fera pas de test de collision sur l'objet lui-même (ClipA touche ClipA), on peut enlever n tests, et comme ClipA touche ClipB est la même chose que ClipB touche ClipA, on éliminera encore la moitié des tests. Cela nous donnera finalement la formule suivante:
nombre_Collisions = (n2-n)/2;
C'est au développeur à réduire au maximum le nombre de tests de collisions possibles afin d'optimiser la vitesse du jeu.
Nous allons utiliser la méthode hitTest() pour détecter la collision entre deux clips. Sur la scène, placez un calque avec des objets immobiles (un mur, un arbre, etc.). Sélectionnez tous les objets et convertissez-les en un symbole. Donnez un nom d'occurence à ce symbole, sol par exemple.
Sur un calque supérieur, placez le clip de votre personnage. Écrivez ceci dans l'éditeur d'ActionScript pour ce clip:
onClipEvent(enterFrame) {
if (Key.isDown (Key.UP)) {
if (!_root.sol.hitTest(this._x, this._y, true)) {
this._y -= vitesse;
}
}
}
Dans un jeu comme PacMan, le héros se déplace et avale des items. Dans Flash, ces items seraient des occurences de clip, et chacun testera la collision avec le clip du héros. Dans chaque item, on pourrait placer:
if (hitTest(_root.heros)) removeMovieClip(this);
Chaque item disparaîtra de la scène lorsque le héros entrera en collision avec ceux-ci. On pourrait en même temps augmenter le score du héros pour chaque item avalé:
if (hitTest(_root.heros)) {
_root.score += 10;
removeMovieClip(this);
}
Trois méthodes de l'objet MovieClip permettent de créer dynamiquement une occurence du clip sur la scène.
duplicateMovieClip(): duplique une ocurence qui apparaît déjà sur la scène. Le nouveau clip apparaîtra sur le même scénario que l'original et héritera des propriétés suivantes:
Il n'héritera par contre pas des variables, listes et objets de l'occurence, ni de son nom et de son état de visibilité. Le nouveau clip commencera toujours à jouer à l'image 1 de son scénario.
monClip.duplicateMovieClip(name, depth, [object]);
La propriété depth réfère à l'ordre d'agencement vertical des éléments sur un scénario. Plus la valeur est élevée, plus l'objet apparaîtra au-dessus des autres. Les valeurs peuvent varier entre -16 384 et 1 048 575. Un objet placé manuellement sur la scène aura une valeur de profondeur de - 16 383. Un objet placé sur le niveau 1 apparaîtra au-dessus de celui-ci ainsi que de tous les objets placés manuellement. Chaque scénario a une profondeur variant entre -16 384 et 1 048 57, donc 1 064 960 niveaux.
Un étage ne peut contenir qu'un seul clip à la fois. Si on duplique un clip sur le même étage que l'original, il sera écrasé par sa copie.
Le paramètre object dans la méthode est facultatif, mais peut être pratique. Il permet d'attacher un objet et ses propriétés au duplicata.
monObjet = new Object();
monObjet.couleur = "rouge";
nom = "duplicata";
niveau = 100;
balle.deplacteMovieClip(nom, niveau, monObjet);
Le nouveau clip duplicata possèdera la propriété couleur = "rouge". Si on veut copier les propriétés de l'objet original dans sa copie, on écrira:
balle.duplicateMovieClip(nom, niveau, balle);
attachMovie(): crée une occurence d'un symbole placé dans la Bibliothèque. Cette méthode permet de créer une occurence d'un symbole sur n'importe quel scénario, en plus de conserver les propriétés originales du symbole et les déclencheurs d'événements qui y sont attachés. Le symbole dans la Bibliothèque doit avoir un nom de liaison, sans quoi il est impossible d'utiliser cette méthode.
trajet.attachMovie(identifier, newName, depth, [object]);
// exemple: dupliquer un symbole et lui définir un déclencheur
// d'événement
_root.attachMovie("box", "dynamicBox", 1)
dynamicBox.onEnterFrame = function() {
this._rotation += 15;
}
createEmptyMovieClip(): crée un nouveau clip sans contenu. Cette méthode est utile pour:
trajet.createEmptyMovieClip(name, depth);