Étape 6 : Interrupteurs

le 6 septembre 2011 • Flash • par Dawlin

Alors en premier lieu : c'est quoi, un interrupteur ?

C'est un bouton, quand on appuie dessus ça allume la lumière.

Certes, mais pas que. En langage jeu vidéo c'est un événement qui en déclenche un autre. Par exemple vous parlez à un personnage dans un jeu, et après ça débloque des dialogues chez un autre personnage. C'est aussi un interrupteur.

Ici, on va créer des interrupteurs pour par exemple ouvrir des portes, tuer des monstres, déclencher un écran "Fin du jeu", etc...

Mais, comme les animations, on va n'en coder qu'un seul. Pourquoi ? Parce que les autres, ça sera à vous de trouver comment les coder.

Nous allons donc programmer un interrupteur qui ouvre des portes quand on l'active. En langage de ceux qui ont conçu le jeu, vous pouvez vous dire plutôt "un interrupteur qui change une case bloquante en une autre case"

Les graphismes

Nous allons créer une nouvelle texture pour l'interrupteur. Deux, en fait. Une pour "interrupteur avant activation" et une autre "interrupteur activé".

A part ça, elles ont la même largeur (30px) que les autres. Ces deux clips ont une occurrence bibliothèque chacun : 20 pour l'interrupteur intact et 31 pour l'interrupteur actionné.

Pourquoi ?

Parce que j'ai décidé (arbitrairement), que les textures des sols seraient de 0 à 19, que les interrupteurs (car on pourra en mettre plusieurs par niveau) seront de 20 à 30, et que au dessus de 30 ça serait le reste

N'oublions pas qu'en tant que texture, il va falloir aller régler ses coefficients de frottement dans map.as

Première chose

Ah. On vient de dire que tous les interrupteurs seront de 20 à 30, c'est comme ça qu'on les reconnaîtra dans l'array de la map.

Mais, quand on dessinera la map, ça veut dire qu'elle essaiera de d'afficher une texture n°24 par exemple, alors que le dessin de l'interrupteur sera toujours n°20 !

Allons régler ça, dans map.as.

Trouvez l'endroit où on dessine la map, c'est à dire la fonction dessinerMap(); et remplacez-la par ceci :


// On crée une fonction qui dessine la map à partir de l'array ci-dessus
dessinerMap = function(){
for(i=0;i<myMap.length;i++){
	for(j=0;j<myMap[i].length;j++){
		// Si ce n'est pas un interrupteur (la plage interrupteur est déclarée dans la liste ci dessus comme >20 && <30)
		if(myMap[i][j]<20 || myMap[i][j]>30){
		var clp:MovieClip = map.attachMovie(myMap[i][j],"t"+i+"-"+j,i*100+j);
		clp._x = j*larg;
		clp._y = i*larg;
		}
		else{
		var clp:MovieClip = map.attachMovie("20","t"+i+"-"+j,map.getNextHighestDepth());
		clp._x = j*larg;
		clp._y = i*larg;
		// On lance la grosse fonction des interrupteurs (voir fichier as correspondant)
		interrupt(myMap[i][j],i,j);
		}
	}
}
//trace(myMap);
}

Dans la partie du "else", on voit que quel que soit le n° de l'interrupteur, on chargera le graphisme n°20, et on lancera le code spécial "interrupteur" grâce à une fonction que l'on va mettre en place maintenant

Allons dans interrupteurs.as


// Les interrupteurs
/* L'array suivant est très important : il contient tous les interrupteurs, et un array pour chacun d'eux comprenant :
- Son type : il peut y avoir plusieurs types d'interrupteurs :
	Qui ouvrent des portes, qui tuent des monstres, etc... ici on ne codera que celui qui ouvre les portes, pour le reste vous verrez
- D'autres champs
	En l'occurence 3 : deux pour la position de la case à ouvrir, un pour la texture à appliquer à la place

A vous d'inventer de nouveaux types d'interrupteurs et de stocker dans cet array les informations nécessaires à leurs
fonctionnement ! */
var interruptArray:Array = new Array();

//Un exemple avec l'interrupteur numéro 20 :
interruptArray[20] = [0,12,4,2];
// Il remplace la case de coordonnées 12x 4y par la texture n°2 !

Ce sont les paramètres de chaque interrupteur. Oui, chacun va modifier la case qu'il veut, et certains feront carrément quelque chose d'autres !

Passons à la grosse fonction :


interrupt = function(vquel,vi,vj){
	// On récupère le numéro de l'interrupteur
	inte = vquel;
	inteY = vi;
	inteX = vj;
	// On crée un clip vide qui servira à compter.
	var compteur:MovieClip = _root.createEmptyMovieClip("clpInte"+inte,_root.getNextHighestDepth());
	// Ce compteur va nous permettre de vérifier si on marche sur l'interrupteur
	compteur.onEnterFrame = function(){
	// On cherche où est le perso pour pouvoir regarder si il est sur l'interrupteur
	caseX = Math.floor(5-(map._x/larg));
	caseY = Math.floor(5-(map._y/larg));
	// Si on est sur la même case on executera l'interrupteur :
		if(caseX == inteX && caseY == inteY){
	// On récupère son type :
	/*
		Pourquoi je mets un "if" ?? Parce que vous coderez peut-être des interrupteurs autres que ceux qui ouvrent
		les portes et les comportements ne seront pas les mêmes que ce qu'il y a à l'intérieur de ce "if" et donc,
		grâce au type vous redirigerez le code vers une éxecution différente.
	*/
		if(interruptArray[inte][0] == 0){
			// Puis on modifie la map, puisque c'est un type 0 (ouvre des portes)
			cY = interruptArray[inte][1];
			cX = interruptArray[inte][2];
			//On la modifie selon la valeur inscrite dans interruptArray
			myMap[cY][cX] = interruptArray[inte][3];
			// On remplace également l'image de l'interrupteur par un interrupteur actionné
			myMap[inteY][inteX] = 31;
			// Mais il faut quand même actualiser le dessin de la map ! voilà pourquoi on en avait fait une fonction !
			dessinerMap();
			delete this.onEnterFrame;
			compteur.removeMovieClip();
		}
	}
	}
}

Et c'est tout. Alors bien sûr, à vous de coder d'autre types. Moi-même j'en coderai d'autres, par exemple qui font passer d'un niveau à l'autre, ou qui téléportent le perso. Peut-être que je mettrai le code à votre disposition peut-être pas

C'est fini pour les interrupteurs ! C'est une notion compliquée mais bon, vu que je vous mâche tout le code, c'est faisable, hein

Et donc, voilà les sources telles qu'elles sont à la fin de cette étape : Cliquez Ici

Dans la prochaine étape, on va créer un éditeur qui va bien bien bien bien bien bien bien nous simplifier la vie quand à la création de maps et d'interrupteurs

Etape 7 : Création d'un éditeur »