Flash : Le principe d'une Map

le 1 juillet 2011 • Flash • par Dawlin

En vue de beaucoup de tutoriels qui vont utiliser ce que j'appelle les maps, notamment pour créer un jeu de Morpions ou même un jeu vidéo plus complexe, voici un petit tutoriel pour vous expliquer le principe des maps, et comment elles fonctionnent.

Qu'est-ce qu'une map ?

Ce que j'appelle une map, c'est ça :

C'est à dire une grille où chaque case possède une caractéristique X horizontale et une Y verticale et une valeur Z quelconque. Votre fichier Flash avec ses pixels est une map en lui-même

Euh... Mais c'est que ça ?

Oui, certes, c'est un peu léger comme définition, mais pensez à ce qu'on peut en faire :

Un moteur 3D, où la valeur Z donne la profondeur

Un jeu de morpion

Un casse-tête où on doit déplacer des cases

Un jeu vidéo de type Tile Based Game ! (superbe site, mais en anglais)

Il y a bien d'autres applications que je vous réserve pour d'autres tutoriels qui suivront (nous apprendrons à faire le casse-tête et le morpion, promis )

Comment définir notre map en flash ?

Une map va se définir comme ceci :

Vous voyez par transparence que si on organise le code comme ceci, c'est pour que ça ressemble à la map finale.

En texte ça donne ça :


var myMap:Array = [[0,0,0,0],
		            [0,0,0,0],
			    [0,0,0,0],
			    [0,0,0,0]];

Oui, bon, la mise en forme du code est pas géniale, mais dans flash ça le fait

Bon maintenant, on peut se rendre compte que Ô ! Notre variable map, là... et ben c'est une double array ! Si si, vous savez, une array, dans une array !

Donc, si je veux l'utiliser, je pourrais atteindre la valeur Z (ici c'est partout 0) grâce à :


myMap[Y][X];

En faisant jouer les valeurs de Y et de X pour atteindre une case située à la ligne Y et à la colonne X.

Bref. Comment on va faire ppur l'utiliser ? On va se fixer un petit objectif : notre map possède des valeurs Z égales à 0 ou à 1. Si c'est 0 on n'affiche rien, sinon on affiche un carré noir.

Aide :

Mes carrés font 30px de côté
J'ai besoin d'une boucle qui lise les lignes
Et dedans une boucle qui lise les cases
Et attacher un clip si Z= 1, ce qui inclut un clip noir 30x30 dans la bibliothèque exporté pour ActionScript (Liaisons...)

Allez, je vous donne le code ? Ok :

Clique pour afficher le code

Fermer ce cadre

 var myMap:Array = [[0,0,0,0],
					[0,1,0,0],
					[0,0,0,1],
					[1,1,0,0]];
 for(i=0;i<4;i++){
	for(j=0;j<4;j++){
		if(myMap[i][j] == 1){
			var clp:MovieClip = this.attachMovie("monClip","c"+i+"-"+j,this.getNextHighestDepth());
			clp._x = j*30;
			clp._y = i*30;
		}
	}
 }

Note : on place le clip en _x et en _y sur la scène en fonction de ses caractéristiques I et J et de la largeur de côté qu'on a définie.

Et ça donne ça :

Bon. Mine de rien, si vous avez compris ça, vous avez tout compris... pourquoi ?? Et bien vous savez placer des carrés sur une map, et les faire réagir en fonction d'une troisième valeur qui leur est propre.

Allez, je vous aide encore : Au morpion, Z peut avoir trois valeurs : 0 (rien), 1 (joueur 1 a joué dans cette case), 2 (joueur 2 a joué dans cette case)

Et ça sera valable partout

Voici la source du deuxième code

Voilà, je vous prépare une petite flopée de tutoriels pour apprendre les maps,

dont un paraîtra dans quatre jours,

Dawlin

Flash : Le principe d'une Map

Qu'est-ce qu'une map ?

Comment définir notre map en flash ?

Lisez aussi...

Flash : Charger et exploiter un fichier XML externe

Créer un jeu de parachute en FLASH