Étape 2 : Les déplacements

le 6 septembre 2011 • Flash • par Dawlin

Avant de faire la map, on va s'arranger pour que le personnage puisse bouger . Ce qu'on veut comme type de déplacement, c'est que les flèches Gauche et Droite le fasse tourner, et que les flèches haut et Bas le fasse avancer dans la direction où il va.

dmode

Une petite idée m'est venue pour corser un peu le truc

Il y a des sols stables, sur lesquels on avance sans histoires. Mais il y a aussi des sols glissants, comme de la glace, ou du parquet ciré par exemple.

J'ai donc inventé le "dmode", c'est une variable qui indique le mode de déplacement.

On va dire que si dmode est égal = 1, on se déplace tranquillement à une vitesse fixe

En revanche, si dmode = 0, on se trouve sur un sol où quand on appuie sur "avancer", on augmente seulement l'accélération du personnage, ce qui fait que même si on lâche la touche, il continue à avancer jusqu'à ce que les frottements du sol le freinent suffisamment pour le ralentir.

Tout à l'heure, quand on fera la map, on définira des sols qui auront un dmode = 1 et des sols qui auront un dmode = 0, et on attribuera à ces derniers à chacun un coefficient de frottement. Par exemple on pourra faire que la glace glisse plus que le bois.

J'espère que vous avez compris parce que c'est assez sympathique d'avoir plusieurs modes de déplacement comme ça. Regardez l'exemple du jeu en première page pour essayer.

Commençons à coder pour de vrai

On va commencer par définir des constantes de vitesses, rotations, etc. Donc on va dans le fichier constantes.as et on y marque :


//############# Constantes

// Mode de déplacement : 0 avec frottements, 1 sans frottement
// En mode 1, on utilise
vitesse = -5;
// En mode 0, on utilise
accoup = 0.3;
// (vitesseM c'est la vitesse. Oui. Mais quand on appuiera sur les touches, on ajoutera "accoup" à cette vitesse)
vitesseM = 3;
//Ici on défini un premier coefficient de frottement, mais c'est juste pour faire les tests
frottements = 0.2

//rotation du personnage quand on appuie sur L ou R
vrot = 3;

Note : Pourquoi vitesse = -5 ? Pourquoi pas +5 ? Parce que, comme les plus malins d'entre vous l'auront remarqué, étant donné qu'on a une très grande map pour une très petite animation, c'est la map qui bouge, et pas le perso ! Et faire avancer le perso de +5, ça revient à faire reculer la map de 5

Donc, dans jeu.fla, dans le calque ACTIONS, on va marquer ceci :


//On inclu les fichiers dont on a besoin :
#include "Scripts/constantes.as"
#include "Scripts/interrupteurs.as"
#include "Scripts/map.as"
#include "Scripts/mechantsMobiles.as"
#include "Scripts/missiles.as"
#include "Scripts/apparaitre.as"

//############# Boucle
this.onEnterFrame = function(){
	if(Key.isDown(Key.LEFT)){
		perso._rotation -= vrot;
	}
	else if(Key.isDown(Key.RIGHT)){
		perso._rotation += vrot;
	}
}

Cela permet de le faire tourner Notez que la variable "vrot" dans constantes.as permet de régler la vitesse de rotation du tank.

Ensuite, au début de cette boucle, on va faire une distinction entre dmode = 1 et dmode = 0 :


//############# Boucle
this.onEnterFrame = function(){
	if(dmode == 1){
		//Quandon appuie sur Haut
		if(Key.isDown(Key.UP)){
			//On déplace la map et pas le perso
			map._y -= vitesse*Math.cos(perso._rotation*Math.PI/180);
			map._x += vitesse*Math.sin(perso._rotation*Math.PI/180);
		}
		else if(Key.isDown(Key.DOWN)){
			map._y += vitesse*Math.cos(perso._rotation*Math.PI/180);
			map._x -= vitesse*Math.sin(perso._rotation*Math.PI/180);
		}
		
	}
	//En revanche, si dmode = 0
	else{
		if(Key.isDown(Key.UP)){
			// On augmente la vitesse par un petit accoup (voir les constantes)
			vitesseM += accoup;
		}
		else if(Key.isDown(Key.DOWN)){
			vitesseM -= accoup;
		}
		// Et QUOI QU'IL EN SOIT, le perso bougera, même si on lâche la touche, jusqu'à ce que vitesseM soit revenue à 0
		map._y += vitesseM*Math.cos(perso._rotation*Math.PI/180);
		map._x -= vitesseM*Math.sin(perso._rotation*Math.PI/180);

		// Et tant que cette vitesse est >0, on lui applique des frottements
		if(vitesseM > 0){
		vitesseM -= frottements;
		}
	}
	
	if(Key.isDown(Key.LEFT)){
		perso._rotation -= vrot;
	}
	else if(Key.isDown(Key.RIGHT)){
		perso._rotation += vrot;
	}
}

Note 1 : Les frottements sont pour l'instant à 0.2 dans la variable de test "frottements" dans constantes.as mais ils seront définis après quand on créera la map

Note 2 :

Mais c'est quoi cette formule bizarre pour le faire avancer ??

ça ?


		map._y += vitesse*Math.cos(perso._rotation*Math.PI/180);
		map._x -= vitesse*Math.sin(perso._rotation*Math.PI/180);

Ah oui. et bien on cherche à déplacer map, et pas perso, on l'a déjà dit. On cherche également à faire avancer le perso dans la direction où il est tourné, et si on s'en réfère aux formules de trigo, ça marche

Pour ce qui est du Math.PI/180 c'est pour les conversions radians / degrés, ne vous en faites pas

maintenant, vous pouvez essayer de placer manuellement en haut de du code "dmode = 1" ou "dmode = 0", après essayer de voir si vous pouvez trafiquer un peu en modifiant les constantes, etc...

Note : cependant, pour faire des tests, remplissez le clip "map" avec de la couleur, car c'est lui qui se déplace !

Si vous voulez examiner de plus près, voici les sources du jeu tel qu'il est à la fin de cette étape : Cliquez Ici

En attendant, moi je passe à l'étape suivante : la création de la map

Étape 3 : création de la map »