Étape 3 : création de la map

le 6 septembre 2011 • Flash • par Dawlin

Re-bonjour dans la troisième partie du tutoriel pour créer un jeu vidéo, et maintenant on va créer la map. C'est à dire le sol, les murs, etc, qui constitueront l’environnement dans lequel se déroule le jeu. Dans la première partie, nous avions défini des textures, avec chacune un numéro. On va bien vite comprendre à quoi servent ces numéros

Création de la map

Note : Dernière chance de compulser le tuto sur les maps

Ouvrez map.as

Donc, on a définit la texture "pavé" comme numéro 0, et une case bloquante comme numéro 3. On va donc se générer une map avec une double Array, comme ceci :


// #################### Création de la map
var myMap:Array = [[3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3],
				   [3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,3],
				   [3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,3],
				   [3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,3],
				   [3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,3],
				   [3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,3],
				   [3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,3],
				   [3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,3],
				   [3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,3],
				   [3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,3],
				   [3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,3],
				   [3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,3],
				   [3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,3],
				   [3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,3],
				   [3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,3],
				   [3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,3],
				   [3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3]];

Cette map dessinerait donc un rectangle avec seulement des pavés, et sur les bords des murs pour pas qu'on s'échappe

Affichage de la map

Maintenant on va voir comment la lire pour afficher son contenu à l'écran :


// Liste des sols : 
/* Liste actuelle :
0 : pavé
1 : pierre
2 : bois (ciré !)
3 : vide
*/
// On crée une fonction qui dessine la map à partir de l'array ci-dessus
dessinerMap = function(){
//Boucle pour les lignes
for(i=0;i<myMap.length;i++){
	//Boucle pour les cases à l'intérieur des lignes
	for(j=0;j<myMap[i].length;j++){
		// On crée un clip qui charge l'occurrence bibliothèque du numéro de la texture
		var clp:MovieClip = map.attachMovie(myMap[i][j],"t"+i+"-"+j,i*100+j);
		clp._x = j*larg;
		clp._y = i*larg;
	}
}
//trace(myMap);
}
//Puis on l'utilise
dessinerMap();

Oups ! La variable "larg", je l'avait oubliée ! Il faut placer


larg = 30;

dans constantes.as. Elle définit la largeur d'une case. Ici nos textures sont paramétrées pour faire 30px de large

Et les textures étant repérées dans la bibliothèque par leurs numéros, en utilisant une map qui contient ces numéros, on peut créer toute la map comme ceci.

Note : les "attachMovies" se font dans le clip "map", celui que nous avions placé sur la scène dans la partie 1. D'ailleurs, dorénavant, tout se chargera dans cette map

Bien bien. Il est temps également de modifier la map. Étant donné qu'elle est assez bien disposée dans votre fenêtre de code, vous pouvez à peu près voir comment vous la modifiez. Moi je fais des chemins en pierre (n°1) et des pièces en bois (n°2) fermées par des murs (n°3)

On teste :

Déplacement sur la map

la map s'affiche, mais on ne la voit pas en entier ... Pourquoi ? parce qu'on ne peut pas bouger notre personnage dedans ! C'est ce qu'on va mettre en place maintenant, mais premier problème : comment savoir si on utilise dmode = 1 ou dmode = 0 pour les types de déplacement ? (si vous ne vous souvenez plus de ce que c'est , voir partie précédente)

Bon, restons sur map.as, je vais vous exposer une petite astuce.

L'astuce du jour de tonton Dawlin

Chaque sol a son propre coefficient de frottement pour si dmode = 0, non ?

Donc on va définir arbitrairement ceci :

Les sols dont le coefficient de frottement sera 0 enclencheront dmode = 1
Les sols dont le coefficient de frottement sera 10 seront bloquantes (la texture n°3 par exemple)
Les autres sols enclencheront dmode = 0 et leur coefficient de frottement restera tel quel


//Frottements : on applique pour chaque n° de texture (voir plus haut) un coefficient de frottement
var frottArr:Array = new Array();
// Si c'est 0, on passe en "dmode = 1" qui signifie déplacement sans frottement
// Si c'est 10, la case est bloquante
frottArr[0] = 0;
frottArr[1] = 0;
frottArr[2] = 0.1;
frottArr[3] = 10;

Ici on voit bien que 0 et 1 (pavé et pierre) seront avec dmode = 1, que 2 (bois) sera avec dmode = 0 et aura un coefficient de freinage (frottement) de 0.1 pixel/s² et que 3 (case noire) bloquera.

Comment mettre en place ce système dans les déplacement ??

Retour sur jeu.fla où nous attendent nos gestions des déplacements

au début de la boucle onEnterFrame, c'est à dire juste après


this.onEnterFrame = function(){

et juste avant le "if(dmode==1){"

Vous placez ceci :


// Calcul de quelle case
	caseX = Math.floor(5-(map._x/larg));
	caseY = Math.floor(5-(map._y/larg));
	//On lit le frottement, et si il est égal à 0 on a dit que c'était dmode = 1
	if(frottArr[myMap[caseY][caseX]] == 0){
		dmode = 1;
		vitesseM = 1;
	}
	// Sinon, on vérifie quand même qu'il n'est pas égal à 10
	else if(frottArr[myMap[caseY][caseX]] != 10){
		//Et on applique dmode = 0;
		dmode = 0;
	}

Explication de code sur le calcul de la case :

caseX c'est la variable dans laquelle on stocke la valeur de la case où se trouve le perso
Math.floor() c'est pour arrondir une division (parce qu'on est jamais exactement sur le centre de la case)
5 c'est parce que le perso se trouve à 150px du bord, soient 150/30 : 5 cases du bord
-map._x/30 : moins parce que le perso avance donc la map recule, on l'a déjà expliqué, et /30 parce que on compte en nombre de cases.

On a donc calculé comme ça sur quelle case est le perso, puis on cherche la valeur de cette case (pavé, pierre, bois, mur) grâce à "myMap[caseY][caseX]" puis on cherche le coefficient de frottement de la texture qui porte ce numéro en fouillant dans frottArr[]

Parce que si je dis frottArr[numéroDuneTexture] il me sort le coefficient de frottement de cette texture, on vient de le définir dans map.as.

Les cases bloquantes

Pour les cases bloquantes, deuxième astuce : Au tout début de la boucle onEnterFrame, c'est à dire juste après


this.onEnterFrame = function(){

On va regarder quelle est la position du perso :


	// Sauvegarde de la position actuelle
	sMapX = map._x;
	sMapY = map._y;

Puis à la toute fin, on vérifie si entre temps on n'a pas appuyé bêtement sur "avancer" et on ne s'est pas retrouvé sur une case bloquante :


// Calcul de quelle case encore pour vérifier qu'on arrive pas dans un mur :)
	caseX = Math.floor(5-(map._x/larg));
	caseY = Math.floor(5-(map._y/larg));
	if(frottArr[myMap[caseY][caseX]] == 10){
		// Si c'est le cas on restaure la position précédente :
		map._x = sMapX;
		map._y = sMapY;
	}

Note : ce code est à placer à la toute fin de la boucle onEnterFrame, c'est à dire juste avant la fermeture d'accolade }

On se fait une map funky et on teste :

Super. Cependant il y a un petit bug : Les cases bloquantes ne bloquent qu'à partir du centre. Normal, la détection des cases se fait à partir du centre du perso. A vous de régler ça, parce que moi, je cherche toujours

La map est terminée et fonctionnelle, on va pouvoir passer à l'étape suivante

Mais auparavant, n'hésitez pas à télécharger les sources du jeu à ce stade : Cliquez Ici

Étape 4 : Ennemis et lance-missiles »