1. Introduction

Ce court article va vous expliquer ce qu'est une collision en flash, comment les détecter et dans quel cadre les utiliser. Vous devez disposer du flash player 7 pour pouvoir visualiser les animations. Il est disponible sur le site de Macromedia.

2. Qu'est-ce qu'une collision

Une collision de deux Movie Clip en flash se produit lorsque ceux-ci se rencontrent. Il suffit que l'un des pixels d'un movie clip rencontre un pixel appartenant à l'autre movie clip pour provoquer une collision.

2.1. Cadre d'utilisation

Les collisions sont principalement utilisées dans les jeux. Tous les jeux de balles s'y prêtent bien. Les jeux consistant à tirer sur certaines cibles aussi. Dans les exemples qui vont suivre, je vais d'ailleurs vous montrer comment détecter si un "vaisseau ennemi" a été touché ou non.

2.2. Méthodes de détection

Il existe plusieurs méthodes pour détecter une collision. La plus précise mais certainement la plus complexe aussi consiste à utiliser des calculs mathématiques. Ceci est surtout nécessaire lorsque l'on désire connaître l'angle de la collision. Une autre méthode, beaucoup plus simple consiste à utiliser une fonction flash prévue à cet effet. C'est l'utilisation de cette fonction que nous allons aborder. Cette fonction ne permet malheureusement pas de déterminer un quelconque angle de collision.

2.3. Exemple simple de collision

Cliquez au sein de l'animation pour lui donner le focus et bougez le cercle à l'aide des flèches et allez à la rencontre du carré.


Cliquez pour lire la vidéo



Dans cet exemple simple, nous avons deux movie clip, un cercle et une barre verticale. Nous désirons simplement savoir si le cercle a touché la barre verticale ou non.

Note: comme vous l'aurez certainement constaté, la détection de la collision dans cet exemple n'est pas parfaite, ceci est dû au fait que le cercle est englobé dans un MC carré. Donc lorsqu'une des extrémités du carré touche la barre, flash détecte une collision même si le cercle ne l'a pas touché. Pour éviter cela, soit vous devez préférer une autre méthode de détection, soit ne travailler qu'avec des formes géométriques se rapprochant le plus possible d'un carré ou d'un rectangle.

Le cercle est nommé "mc1" et la barre "mc2". Voici le code nécessaire pour réaliser cette animation

 
TéléchargerCacherSélectionnez

2.4. Exemple de collision dans un petit jeu

Le but du jeu est simple, c'est le classique jeu de fusée auquel on jouait quand on était petit :)). Des vaisseaux ennemis tentent d'atteindre le bas de l'écran. Vous devez tirer dessus pour les en empêcher, si l'un d'entre eux parvient à atteindre le bas de l'écran vous perdez. Ce petit jeu illustre bien l'utilisation de "hitTest()" et la détection de collision.

Du point de vue technique, nous avons deux MC chargés statiquement, il s'agit de la fusée et du clip qui gère les vaisseaux ennemis. Les flèches de gauche et droite servent à déplacer la fusée et la barre d'espace à tirer sur les vaisseaux. Vous pouvez la maintenir enfoncer pour envoyer une série de balles.

Nous devons donc gérer:

  • Les flèches du clavier
  • La barre d'espace
  • L'envoi automatique de vaisseaux ennemis
  • Détecter si une balle touche un vaisseau ennemi et supprimer celui-ci
  • Détecter si un vaisseau ennemi a atteint le bas de l'écran auquel cas, le joueur perd


Cliquez pour lire la vidéo



Code à placer sur la frame 1 de l'animation

 
TéléchargerCacherSélectionnez

Code à placer sur la frame 2 de l'animation

 
TéléchargerCacherSélectionnez

Code à placer sur la frame 3 de l'animation

 
TéléchargerCacherSélectionnez

3. Téléchargement