Comment créer un jeu de Labyrinthe en 10 minutes ?

Logiciels requis : Flash et Photoshop

La première partie de la réalisation du jeu se fait avec Photoshop.
1. créez un nouveau document, un peu plus grand que la taille du labyrinthe final (ex : 700/550 pour du 640/480 à la fin).
2. remplissez de noir l'espace de travail
3. Appliquez l'effet "Tiles" (carreaux)
4. Appliquez l'effet "Ripples" (vaguelettes)
5. Puis "Gaussian Blur" (flou gaussien) au point d'avoir un effet de trait irrégulier (à épaisseur différente) (ne plus voir les vaguelettes)
6. Recadrez l'image à la taille souhaitée
7. Poussez le contraste à 60%
8. Enregistrez votre image ou copiez la.

La seconde partie se fait dans Flash.

1. Collez votre image ou importez la (si sauvegardée)
2. Appliquez l'effet "Trace bitmap" avec les paramètres suivants
  "Color threshold" = 1
  "Min area" = 10 pixels
  "Curve Fit" = normal
  "Corner threshold" = normal
3. Maintenant vous avez une forme (approximative) en deux couleur.
4. Sélectionnez la couleur interne des carreaux et effacez la.
4bis. il est possible que des carreaux restent fermé, alors veillez à ce que toute les formes faisant partie de la couleur interne soit effacées.
5. Vous avez la base globale de votre Labyrinthe. reste à créer le script qui fera que vous pourrez vous déplacer à l'intérieur.
6. Créez un nouveau clip qui représentera le personnage évoluant à l'intérieur du labyrinthe (j'ai créé un rond)

Vous devez avoir dépensé moins de 10 minutes à faire cela.
La dernière partie n'est, en fait, que du script dans Flash.
Vous pouvez soit passer une minute à le copier et le coller, soit essayer de le comprendre. La seconde solution prend assurément un peu plus de temps.

Troisième partie : le script

1. La forme du labyrinthe doit être convertie en symbole (MovieClip) au préalable.
2. Le symbole du personnage doit être nommé dans la scène principale (dans l'exemple il s'agit de "bonom").
3. Copiez le script et appliquez le sur le clip du labyrinthe. Explications en 4.

onClipEvent (enterFrame) {
   if (this.hitTest(_root.bonom._x, _root.bonom._y, true)){
      _root.bonom._y=_root.ley;
      _root.bonom._x=_root.lex;
      _root.bloque+=1;
      if (_root.bloque>=50){
         _root.bonom._x=325;
         _root.bonom._y=425;
      }
   } else {
      _root.bloque=0;
      if (Key.isDown(Key.UP)){
         _root.ley=_root.bonom._y;
         _root.bonom._y-=2;
      }
      if (Key.isDown(Key.DOWN)){
         _root.ley=_root.bonom._y;
         _root.bonom._y+=2;
      }
      if (Key.isDown(Key.RIGHT)){
         _root.lex=_root.bonom._x;
         _root.bonom._x+=2;
      }
      if (Key.isDown(Key.LEFT)){
         _root.lex=_root.bonom._x;
         _root.bonom._x-=2;
      }
   }
}

4. Si vous ne comprenez pas les "_root." écrivez les sans en tenir compte plus que çà.
5. leX et leY sont en fait les coordonnées du joueur lorsque l'on presse une touche de direction. (il seront nécessaire en cas de blocage).

6. Explications :
if (this.hitTest(_root.bonom._x, _root.bonom._y, true)){
Veux dire si le joueur touche les parois du labyrinthe,
_root.bonom._y=_root.ley;
sa coordonnée est la coordonnée précédente (en clair il reviens en arrière). idem pour "_x".
_root.bloque+=1;
Et comme, en pratique, cela ne fonctionne pas toujours * , la variable "bloque" augmente.
if (_root.bloque>=50){
_root.bonom._x=325;
_root.bonom._y=425;
}
Si la variable "bloque" a trop augmentée, le "bonom" reviens à son point de départ (chez moi 325/425).
} else {
autrement (si le "bonom" ne touche pas les parois du labyrinthe).
if (Key.isDown(Key.UP)){
_root.ley=_root.bonom._y;
_root.bonom._y-=2;
}
Si l'on appuie sur la flèche du haut, "leY" deviens la nouvelle coordonnée "précédente" et le "bonom" se déplace vers le haut.

7. Le reste du script est identique pour les autres directions (2 étant la valeur qui détermine la vitesse de déplacement)

* NOTA : Pourquoi la variable "bloque" est elle présente ?
Par exemple, le joueur appuie sur "haut" et "bas" en même temps (même l'espace d'une seconde). Il suffit qu'il se trouve à côté d'une parois pour que le "bonom" se retrouve à 4 pixels à l'intérieur de la parois. Cela se fait parce qu'il aura plus appuyé sur une touche que l'autre (Flash aura pris en compte les coordonnées précédentes mais pas le déplacement). En définitive Flash ne saura plus vraiment où se trouve "leY" soit la coordonnée précédente et il la situera à l'intérieur de la parois. En voulant revenir en arrière le "bonom" sera soit à l'intérieur de la parois, soit au bord, mais dans la parois quand même.
D'où l'intérêt de la variable "bloque" qui augmentera alors rapidement en qui remettra le "bonom" à son point de départ.

NOTA2 : Une autre solution aurait été de comparer les coordonnées du "bonom" et ses coordonnées précédentes afin d'augmenter son retour en arrière (pour qu'il puisse sortir de la parois). Le constat est que le problème viens du fait que Flash ne retrouve pas bien les coordonnées précédentes...  De ce fait, le "bonom" risquerai plus de passer au travers de la parois que de revenir en arrière (ce qui est gênant pour un jeu de labyrinthe).

Voilà ! Si vous avez besoin de plus de conseil quand à la réalisation de ce jeu, écrivez moi à : laurent.boudre@wanadoo.fr