« Créer un jeu de parachute en flash : 2/3

Créer un jeu de parachute en flash : 3/3

le 16 juin 2010 • Flash • par Dawlin

Sur ces trois chapitres de tutoriels, vous avez :

Chapitre 1: Les parachutistes
Chapitre 2: Le ParaJeu
Chapitre 3: Le CANON !! <= Vous êtes ici

Et oui, les enfants, vous l'attendiez tous :

Le Canon

Tout d'abord, un joli canon qui tue sa race, composé de :

Une base (dans un symbole) :

Un canon qui est relié par une boule qui pivotera (dans un symbole) :

Un boulet disproportionné pour tout démonter :

Attention : double-cliquez sur le canon puis déplacez-le de façon à ce que le centre de la boule soit sur l'origine du symbole (la petite croix) :

ça va servir à définir le centre de rotation, pour que notre objet tourne selon ce point.

Et on assemble la base et le canon dans un gros symbole appelé "ensemble", je le place sur ma scène et lui donne ce nom d'occurrence scène :

Mais ! Je double-cliques sur le symbole ensemble pour aller dedans, et je donne à mon symbole "canon" le nom d'occurrence "canon" :

Youpi, tout est en place, on va pouvoir faire le code... niak niak ...

Les déplacements

Ce qu'on veut, c'est faire tourner notre canon quand on appuie sur les flèches gauche/droite du clavier.

Donc pour que ça soit bien propre, je vais marquer mon code dans le symbole "ensemble", je double-clique dessus, et dans la première image je mets ça :


vitesseCanon = 6;
var mouchard:Object = new Object(); // on va créer un mouchard pour espionner le clavier !
mouchard.onKeyDown = function(){//Quand on appuiera sur une touche, ça fera...
	if(Key.isDown(Key.LEFT)){// si on appuie sur la touche gauche...
		canon._rotation-=vitesseCanon; // on fait tourner le canon vers la gauche
	}
	else if(Key.isDown(Key.RIGHT)){ // Sinon si c'est la touche droite
		canon._rotation+=vitesseCanon; // vers la droite (sans blague)
	}
}

Key.addListener(mouchard); // et on n'oublie pas de demander au mouchard d'espionner !

Note : on pourrait lui donner des angles interdits, pour éviter qu'il fasse des tours...

Le lançage de boulets

On va rajouter dans notre code pour espionner le clavier celui qui dit que quand on appuie sur la touche espace on lance un boulet... On nomme le boulet "boulet" dans la biblithèque (clic-droit + liaison comme on a vu avant). Tout comme le canon, le boulet doit être placé sur son origine !!

ce qui nous donne à la fin le code suivant :


vitesseCanon = 6;
vitesseBoulet = 12;
b = 0; //initialisation du nombre de boulets
var mouchard:Object = new Object(); // on va créer un mouchard pour espionner le clavier !
mouchard.onKeyDown = function(){//Quand on appuiera sur une touche, ça fera...
	if(Key.isDown(Key.LEFT)){// si on appuie sur la touche gauche...
		canon._rotation-=vitesseCanon; // on fait tourner le canon vers la gauche
	}
	else if(Key.isDown(Key.RIGHT)){ // Sinon si c'est la touche droite
		canon._rotation+=vitesseCanon; // vers la droite (sans blague)
	}
	//et maintenant, le boulet !
	if(Key.isDown(Key.SPACE)){// Si on appuie sur espace
	//Note : l'occurrence bibliothèque du boulet est "boulet"
		var boul:MovieClip = _parent.ensemble.attachMovie("boulet","b"+b,_parent.ensemble.getNextHighestDepth());// on crée le symbole
		/* et là ça se corce, il faut qu'il apparraisse, mais au bout du canon,
		donc je lui donne une position de départ qui est celle du canon :
		*/
		boul._x = canon._x;
		boul._y = canon._y;
		/* Puis il faut le déplacer de la longueur du canon, dans le sens de la rotation du canon
		On prend donc une longueur de 100 pour le canon*/
		boul._y -= 100*Math.cos((canon._rotation-90)*Math.PI/180);
		boul._x += 100*Math.sin((canon._rotation-90)*Math.PI/180);
		b++;
		//astuce : même si il est rond, je lui donne la même rotation que le canon... En réfléchissant vous comprendrez
		boul._rotation = canon._rotation;
		// Maintenant il faut donner au boulet sa vitesse :
		boul.onEnterFrame = function(){
			//Toujours la même formule pour le faire aller suivant une rotation...
		boul._y -= vitesseBoulet*Math.cos((boul._rotation-90)*Math.PI/180);
		boul._x += vitesseBoulet*Math.sin((boul._rotation-90)*Math.PI/180);
		// mais cette fois on a remplacé la distance 100 par la vitesse qu'on veut
			// On rajoute une condition pour qu'il se supprime si il va trop loin, pour ne pas surcharger l'animation ;)
			if(boul._x <= -200 || boul._x >= 600 || boul._y <= -600 || boul._y >= 200){
				boul.removeMovieClip();
			}
			
		/* Et là ça se re-corce, mais quelque chose de dur : il faut que quand le boulet touche un
		des parachutistes (dont on ne connaît pas les noms, puisqu'ils sont différents chaque !) il
		le supprime et se supprime.
		Nous allons donc procéder comme suit :
		- Le boulet teste 24 fois par seconde avec tous les parachutistes si il les touche
		- Si oui, il se supprime, et les supprime
		24 x par seconde avec 4 parachutistes dans le champ, ça fait des tests et ça alourdit,
		mais c'est efficace... Voilà donc la formule : */
			for(var i in _parent.cont){//on les compte tous selon i
				if(boul.hitTest(_parent.cont[i])){ // Si boul le touche
					boul.removeMovieClip();// il se supprime
					_parent.cont[i].removeMovieClip();// et supprime le parachutiste...
				}
			}
		}
	}
}

Key.addListener(mouchard); // et on n'oublie pas de demander au mouchard d'espionner !

ça fait beaucoup à digérer, mais en fait quand on le fait petit bout par petit bout ça va

Note : On pourrait s'amuser à rajouter des petits funny trucs, comme un système qui compte le score, à chaque parachutiste touché on l'incrémente, ou un timer qui limite le nombre de boulets à la seconde (il faut toujours limiter les boulets ).

Ce qui donne :

Et voilà la Source

Voilà, merci d'avoir suivi ces trois longs chapitres de tutoriels,

Dawlin

« Retour au sommaire