Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Etape 1 : Déplacer et animer un personnage

Compatible ActionScript 2. Cliquer pour en savoir plus sur les compatibilités.Compatible ActionScript 3. Cliquer pour en savoir plus sur les compatibilités.Compatible Flash CS3. Cliquer pour en savoir plus sur les compatibilités.Par Monsieur Spi, le 14 mars 2010

Bonjour,

Comment faire pour qu’un personnage réagisse aux commandes en effectuant des actions au sein d’un jeu vidéo. C’est une question qui revient régulièrement sur le forum, j’ai donc pris la liberté de ce petit tutoriel pour vous expliquer la manière dont je procède. Bien sûr ce n’est pas la seule, mais c’en est une déjà, ça vous fera un point de départ.

Nous n’allons pas nous occuper des interactions avec le décor ni créer de moteur de jeu à proprement parler, réservons cela pour le prochain exercice. Concentrons-nous essentiellement sur cette partie amusante qu'est l’animation du personnage et la gestion de ses déplacements et mouvements.

Désolé, cette partie à été faite il y a longtemps et le code est en AS2 au début, mais la traduction complète en AS3 est à la fin rassurez-vous. J'ai fait le choix de laisser les explications avec des exemples en AS2. Comme c'est relativement la même chose à ce stade ceux qui travaillent encore dans cette version du langage pourront en profiter pour passer en douceur à l'AS3 ;-)

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Utilisez les flèches de direction de votre clavier pour déplacer le personnage.

1 : Paramètres du projet

Allons-y, ouvrez un nouveau projet et donnez-lui les paramètres suivants :

  • Largeur = 600 px
  • Hauteur = 400 px
  • Couleur de fond = noir
  • FPS = 30

1 : Notions

Commençons par séparer mouvement et déplacement dans votre esprit, ce sont deux choses différentes qui pourtant seront intimement liées pour vos joueurs au final.

En effet, dans ce genre d’exercice les animations sont souvent des séquences d’images qui, lorsqu’elles sont affichées les unes à la suite des autres, donnent l’impression d’un mouvement (on appelle ça des Sprites dans le monde du jeu vidéo).

Mais votre personnage doit évoluer au sein du décor et il n’est pas raisonnable d’imaginer créer tous les déplacements possibles sous la forme de séquences d’images. Nous allons donc nous limiter aux mouvements possibles et nous servir du code pour gérer les déplacements des objets à l’écran en fonction de la bonne volonté de votre joueur.

Résumons, nous avons d’un côté les animations de notre personnage, chaque animation représente un mouvement possible, et de l’autre nous avons le programme qui se charge de déplacer les objets à l’écran tout en affichant le mouvement correspondant.

Les premiers mouvements que nous allons réaliser dans ce tutorial sont :

  • au repos
  • marche vers la gauche
  • marche vers la droite

Au repos est une notion assez simple à comprendre, c’est l’attitude qu’à votre personnage lorsque le joueur ne fait rien. Je choisirai une simple image représentant la position debout pour le perso de mon exemple, mais rien ne vous empêche d’y coller une animation comme cela se fait souvent lorsqu’on attend trop longtemps sans rien faire dans un jeu…

Marche vers la gauche et marche vers la droite sont le premier piège dans lequel tombent les débutants qui ont tendance à vouloir créer une animation différente pour chaque direction. En fait dans 99,99 % des cas votre personnage marche de la même manière quel que soit la direction qu’il prend, une seule animation suffit dans ce cas, il suffit simplement de retourner le personnage et ça le programme peut très bien s’en charger. Vous comprendrez aisément qu’il est plus simple, plus rapide et plus léger de retourner un objet plutôt que de le dessiner deux fois.

On commence à préparer notre projet, on crée donc une première image du perso au repos.

Puis on attaque une animation du perso qui marche (peu importe le sens mais par convention je choisirai vers la droite). A ce stade vous devez saisir une notion importante, celle du temps. Vous devez calibrer vos animations sur une cadence et vous y tenir !

Lorsque l’on utilise uniquement le code ce n’est qu’un problème mathématique simple, mais dès qu’on va utiliser des séquences d’images cela devient un réel problème de précision. Toute la fluidité de vos animations est liée au nombre d’images affichées par seconde. Un mouvement fluide pour l’œil humain est de 25 images par seconde, cependant on préférera souvent des cadences de 30 images par seconde pour des animations numériques.

Donc faire exécuter un pas complet (2 jambes) à votre personnage demandera 30 images.

Plus vous souhaitez un mouvement fluide et complet plus vous affichez d’images différentes, soit 30 images différentes sur 30 images maximum. Mais il y à peu de projets où on demande ce genre de précision, du coup vous pourriez encore alléger le mouvement en n’affichant que 15 images sur 30, vous affichez simplement deux fois chaque image, le mouvement sera légèrement moins fluide mais vous n’utilisez que la moitié de vos images.

Bien considérons que vos deux premiers mouvements sont prêts et repassons sur Flash.

Pour l’instant nous avons toujours une scène vierge, on va commencer par créer notre perso. D’ordinaire je ne laisse rien sur la scène et je travaille exclusivement avec des objets importés de la bibliothèque et une frame vide sur la timeline dans laquelle je glisse le code, et aujourd’hui ne fera pas exception à la règle, nous allons donc procéder ainsi.

Créez un MovieClip nommé « Perso » assurez vous que le repère de position soit au centre du clip c’est très important pour les mouvements du perso. Exportez le pour AS (clic droit sur le clip dans la bibliothèque) et donnez le nom de liaison « Perso ».

Dans ce clip, sur la première frame mettez le perso au repos et sur la seconde mettez un clip qui contient la séquence d’images représentant la marche. Ajoutez un code stop() au dessus de ces deux frame pour éviter qu’elles ne tournent en boucle.

Si vous avez travaillé depuis la scène effacez le clip perso qui n’a plus rien à y faire, il est au chaud dans la bibliothèque.

Bien, nous avons notre objet « Perso » qui contient les divers mouvements possibles (pour l’instant deux seulement), nous avons terminé la partie graphique, on attaque enfin le code.

1 : Programme

Non, il ne faut pas se jeter dessus tête baissée, posons nous quelques secondes pour réfléchir à ce que nous devons faire, notre code doit contenir :

  • Quelques variables
  • Un objet à animer
  • Une fonction pour contrôler les touches du clavier
  • Une fonction pour déplacer l’objet en fonction des touches
  • Une boucle permanente pour écouter les événements

C’est partit et on commence par les (la) variables :

var vitesse:Number=5; // vitesse de déplacement

Ensuite on crée une occurrence (copie ou clone) du clip de référence « Perso » et on la pose sur la scène.

this.attachMovie("perso","perso",1, {_x:200,_y:300});// crée le perso depuis un clip de la bibliothèque

On souffle un peu et on se prépare à attaquer les fonctions, pour ceux qui ne sauraient pas à quoi servent les fonctions référez vous à la notice de Flash et jetez un œil aux bases de la programmation ;-)

L’enchaînement logique des différentes fonctions est le suivant :

  • La boucle principale lance en permanence la fonction « directions() ».
  • La fonction « directions() » lance la fonction « deplacement » avec un paramètre différent en fonction de la touche pressée. Si aucune touche n’est pressée alors la fonction affiche le personnage au repos.
  • La fonction « deplacement ()» se charge de déplacer l’objet en fonction du paramètre passé.
// Touches de direction
function directions() {
	if (Key.isDown(Key.RIGHT)) {
		deplacement(1);
	}
	if (Key.isDown(Key.LEFT)) {
		deplacement(-1);
	}
	if (!Key.isDown(Key.RIGHT) && !Key.isDown(Key.LEFT)) {
		perso.gotoAndStop(1);
	}
}
 
 
// Déplacements
function deplacement(sens) {
	perso.gotoAndStop(2); //frame ou se trouve l'animation         
	perso._xscale = 100*sens;//direction du perso 
	perso._x += vitesse*sens;// position du perso 
}
 
 
// Boucle principale
this.onEnterFrame = function () {
	directions();
};

Et voilà le perso viens d’apprendre à marcher.

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Au prochain épisode nous lui apprendrons d’autres mouvements.

2 : Notions

C’est reparti pour la phase 2 du tutoriel.

Nous avons vus comment lier un mouvement et un déplacement et comment bien différencier les deux. Avant d’aller plus loin il faut ajouter une précision importante, dans un même déplacement il est parfois possible faire plusieurs mouvements. Autrement dit il est tout à fait possible que pour les besoin du jeu vous ayez à gérer indépendamment le haut et le bas de votre personnage.

Imaginez par exemple que notre personnage soit muni d’une arme, il pourrait alors courir tout en tirant, ou être fixe (au repos) et tirer. Dans ce genre de cas vous avez deux possibilités, soit créer un mouvement unique pour chaque type de d’action/déplacement (courir, repos, repos+tirer, courir+tirer) mais c’est risqué. Soit séparer votre personnage en deux bloc, le haut du corps et le bas du corps, et vous servir de chaque bloc pour articuler vos mouvements (bas du corps courir, bas du corps repos, haut du corps tirer, haut du corps repos), là vos mouvements seront fluides, par exemple si le personnage est en train de courir et qu’on veut tirer, les jambes continuent leur mouvement normal et seul le haut du corps effectue un mouvement différent.

Pour le moment nous n’allons pas encore exécuter des mouvements composés, mais il faut que vous soyez au courant dès à présent si jamais vous êtes en train de construire les sprites de votre jeu, ne vous lancez pas dans toutes les anims définitives si vous devez les découper plus tard, pensez à travailler avec deux bloc et pas un seul ;-)

Dans cet exercice je ne vais pas laisser la possibilité à mon personnage d’effectuer deux actions simultanées (dommage hein ?) ça serait trop beau, je ne vais pas non plus vous mâcher tout le boulot, on est là pour apprendre ensemble, ensuite à vous de faire les choses pour vos besoins ;-)

2 : Actions possibles

Il est temps de définir un peu les premiers types d’actions/mouvements que mon personnage pourra faire dans un hypothétique futur jeu.

Mon personnage doit pouvoir :

  • Courir à droite
  • Courir à gauche
  • Sauter vers la droite
  • Sauter vers la gauche
  • Sauter sur place
  • Viser
  • Tirer lorsqu’il est train de viser

Le tout doit bien sur pouvoir s’enchaîner sans saccade et sans saute, là encore 90% du travail va se faire hors de Flash, on repart sur notre logiciel d’animation (ici Poser 4) pour créer toutes les animations utiles pour les différents mouvements.

Comme on est malins on va de nouveau se poser les bonnes questions avant de se jeter sur le boulot. Par exemple ai-je besoin d’une animation complète pour le saut ? C'est-à-dire tout le développement du saut, impulsion, extension des jambes, mouvements des bras, replis, extension de la jambe, amorti au sol, roulade pour finir ? Hummm, je vais choisir quelque chose de bien plus simple, une position d’extension pour la courbe montante du saut et une autre pour la courbe descendante du saut et ça suffira pour mes besoins. Donc ici simplement deux images vont suffire, bon celles que j’ai utilisées ne sont pas au top, mais c’est pour montrer, à vous de jouer les artistes ;-)

Bien admettons que vous ayez préparés toutes vos animations, repassons sur Flash. Même processus que dans la première partie de cet exercice on balance tout dans des clips dans la bibliothèque.

Petite précision pour les puristes de la chose, vous verrez plus tard que de découper ses sprites image par image puis de les recomposer dans un clip ne sont pas les meilleures méthodes ni les plus rapides, il est préférable d’utiliser ce qu’on appelle des SpriteSheets, des feuilles de sprites, où toutes vos images sont réunies en une seule grande planche. Dans votre programme vous chargez la feuille, déterminez la zone qui vous y intéresse et vous en servez pour dessiner un bitmap dans votre objet d’affichage. Un des gros avantages de cette technique en dehors du fait qu’elle est plus économe en ressources, c’est qu’elle permet de séparer deux choses, les graphismes et la programmation. Pour modifier les graphismes il suffit de modifier la feuille de sprites sans avoir besoin de toucher au programme ou de le recompiler.

Mais la mise en place de ce genre de chose demanderait un tutoriel complet entre le chargement, l’alignement, la découpe, et le retraçage, nous n’en sommes pas là, ici le but est d’expliquer de manière simple à des débutants le procédé qui au final est le même sauf qu’on découpe les choses à la main au lieu de dire au programme de le faire.

Allez assez de blabla, on repasse à Flash et à notre programme.

Normalement toutes vos animations sont intégrées, vous devriez avoir ce qui suit :

Dans le perso :

  • Frame 1 : repos
  • Frame 2 : courir
  • Frame 3 : début saut
  • Frame 4 : fin saut
  • Frame 5 : tirer

2 : Structurer le code

Voici le code que nous avions jusqu’à présent :

var vitesse:Number=5; // vitesse de déplacement
 
this.attachMovie("perso","perso",1, {_x:200,_y:300});// crée le perso depuis un clip de la bibliothèque
 
// Touches de direction
function directions() {
	if (Key.isDown(Key.RIGHT)) {
		deplacement(1);
	}
	if (Key.isDown(Key.LEFT)) {
		deplacement(-1);
	}
	if (!Key.isDown(Key.RIGHT) && !Key.isDown(Key.LEFT)) {
		perso.gotoAndStop(1);
	}
}
 
// Déplacements
function deplacement(sens) {
	perso.gotoAndStop(2); //frame ou se trouve l'animation         
	perso._xscale = 100*sens;//direction du perso 
	perso._x += vitesse*sens;// position du perso 
}
 
 
// Boucle principale
this.onEnterFrame = function () {
	directions();
};

Avant toute chose nous allons essayer de structurer un peu le programme, normalement on travaille avec des classes pour faire les choses proprement, mais si vous suivez ce tutorial pour débutant on va considérer que les classes c’est pas encore pour vous et on va donc travailler en procédural, c'est-à-dire grossièrement avec son code sur la timeline de Flash.

Cela ne nous empêche pas de faire les choses proprement, il est avant tout essentiel de pouvoir se repérer simplement dans le code, histoire de ne pas chercher pendant des heures où on a bien pu mettre telle ou telle variable ou fonction. A partir de là chacun sa méthode, je recommande de répartir le programme sur plusieurs calques, un par type de bloc utile. Par exemple ici je crée 3 calques, variables, main, et moteur.

  • Variable contiendra toutes les variables dites globales (celles qui peuvent servir partout).
  • Main est ce que j’appellerai le « pilote » du programme.
  • Moteur rassemble les instructions utiles au fonctionnement du programme.

Voyons ce que je dois mettre dans le calque « variables » :

// variables déplacements
var gravite:Number = 0;// la gravité du jeu
var vitesse:Number = 4;// la vitesse du héro
var sens:Number = 0; // la direction du héro
 
// variables mouvements
var lateral:Boolean = false; // mouvement latéral 
var vise:Boolean = false;// le héros vise 
var tire:Boolean = false;// le héros tire 
var saute:Boolean = false ;// le héros saute
var acunne:Boolean = true // aucune action en cours
 
// touches de direction
var k:Function = Key.isDown;// enfoncer une touche
var g:Number = 37;// gauche 
var h:Number = 38;// haut 
var d:Number = 39;// droite
var b:Number = 40;// bas
var t:Number = 32;// espace (tir)
 
// crée le perso depuis un clip de la bibliothèque
attachMovie("perso","perso",1,{_x:200, _y:300});

Pas grand-chose à expliquer ici, nous avons simplement rajouté quelques variables qui vont nous être utile plus tard, elles sont logiques et faciles à comprendre.

Elles sont de trois types :

  • Number, littéralement des nombres
  • Boolean, vrai ou faux
  • Function, une fonction

Tout le bloc concernant les touches de directions n’est là que pour vous simplifier la lecture. Quand on fait appel à une touche du clavier elle renvoie normalement un numéro, il me semble plus clair d’utiliser l’initiale du mouvement à effectuer que le numéro de la touche au sein du programme, mais rien ne vous empêche de supprimer ces lignes et de vous servir directement du code de la touche dans votre moteur, ça revient au même. Quand à la variable de type Function c’est là aussi un simple raccourcis qui va éviter de taper toute la fonction dans le corps du programme, ce qui va le rendre plus lisible.

Par exemple, ici écrire : if (Key.isDown(38))
Est pareil que d’écrire : if (k(h))

Passons au deuxième calque, Main.

// Boucle principale
onEnterFrame = function () {
	moteur();
};

Rien de plus simple, en fait le « Main » est ce que j’appelle pour simplifier le « pilote » de l’application, c'est un peu le chef d’orchestre. Ici on va mettre tout ce qui sert à piloter le programme, dans notre cas une simple boucle perpétuelle qui lance le moteur.

Pour l’instant ça n’a pas vraiment de sens de coller cette simple instruction sur un calque indépendant, mais par la suite lorsque vous aurez plein de choses à piloter en même temps (score, ennemis, scrolling, tir, etc…) vous serez bien content que tout soit piloté d’un seul et unique endroit.

Et on passe au moteur proprement dit.

Voici déjà le bloc de code complet, puis nous allons l’étudier pas à pas ensemble :

// moteur
function moteur() {
 
	// variables
	sens = k(d)-k(g);// orientation
	aucune = !k(g) && !k(d) && !k(h) && !k(b)// aucune action
	lateral = k(d) || k(g);// mouvement latéral
	vise = perso._y==300 && k(b);
	tire = k(t);
 
	// calcul de la gravité
	if (perso._y>=300) {
		perso._y = 300;
		gravite = -k(h)*10;
	} else {
		gravite++;
	}
 
	// déplacements           
	if (!vise)perso._x += vitesse*sens;// horizontal
	perso._y += gravite;// vertical
 
	// mouvements
	if (sens)perso._xscale = 100*sens;// oriente le perso
	if (aucune) mouvement(1);// repos 
	if (lateral) mouvement(2); // droite et gauche
	if (gravite<0) mouvement(3); // saute
	if (gravite>0) mouvement(4); // tombe
	if (vise) mouvement(5);// vise
	if (vise && tire) perso.anim.play();// tire
 
}
 
// animation du perso
function mouvement(mouv) {
	if (perso._currentframe != mouv) {
		perso.gotoAndStop(mouv);
	}
}

2 : Étude du code

On va procéder par ordre, on commence donc par le premier jeu d’instructions :

// variables
sens = k(d)-k(g);// orientation
aucune = !k(g) && !k(d) && !k(h) && !k(b)// aucune action
lateral = k(d) || k(g);// mouvement latéral
vise = perso._y==300 && k(b);
tire = k(t);
saute = k(h) ;

Là aussi ce bloc ne sert qu’à vous permettre de mieux lire la suite du programme, on pourrait tout à fait s’en passer en écrivant directement les conditions dans le corps du code, mais là encore il me semble plus lisible d’exprimer ça de manière claire.

Par exemple : sens = k(d)-k(g);
Aurait pu s’écrire directement là où on en a besoin : Key.isDown(39) - Key.isDown(37)

Tient d’ailleurs à propos de cette petite manip, ça peut vous sembler étrange de comparer deux conditions ; « si la touche droite est enfoncée » moins « si la touche gauche est enfoncée ». Qu’est ce que ça peut bien donner comme résultat un machin comme ça ?

Les valeurs Booléennes sont de deux types, 0 ou 1, 0 correspondant à « false » (faux) et 1 correspondant à « true » (vrai). Donc cette petite soustraction va nous renvoyer trois résultats :

  • 0 – 0 = 0
  • 0 – 1 = -1
  • 1 – 0 = 1
  • 1 – 1 = 0

On peut donc en déduire très simplement le « sens » qui est de 0 au repos, -1 quand on va vers la gauche et 1 quand on va vers la droite.

Le calcul de la gravité.

// calcul de la gravité
if (perso._y>=300) {
	perso._y = 300;
	gravite = -saute*10;
} else {
	gravite++;
}

C’est sans doute la chose la plus compliquée du programme, c’est pour dire…
Ici le but est de calculer la force de gravité qui va s’exercer sur notre personnage.
Hé oui, on veut que le personnage puisse sauter, c’est très bien mais pour ça il faut qu’il puisse à la fois monter mais qu’il retombe à un moment donné.

Comme pour le moment nous n’avons pas déterminé de sol précis on va utiliser une position à la place, on va dire que notre sol virtuel se trouve à 300 pixels en hauteur.

Si le héros se trouve sous cette limite ou sur cette limite alors on commence par le positionner sur la limite, comme ça il « colle » au sol.

Puis on fait varier la gravité en fonction de l’appui sur la touche « haut ».
Rappelez vous ce que nous venons de voir, une condition renvoie un Boolean, vrai ou faux, 0 ou 1. Ici on indique donc au programme que si le perso touche le sol alors la gravité est égale à –saute (donc vrai ou faux donc 0 ou 1) multiplié par 10 (une valeur choisie arbitrairement pour le saut).

Résumons :

  • Si le héros est sur le sol alors si on appuie sur la touche « haut » la gravité est égale à -10.
  • Si le héros est sur le sol alors si on n’appuie pas sur la touche « haut » la gravité est égale à 0.
  • Si le héros n’est pas sur le sol alors la gravité s’incrémente de 1.

Nous avons calculé la gravité à présent voyons les déplacements.

// déplacements           
if (!vise)perso._x += vitesse*sens;// horizontal
perso._y += gravite;// vertical

Le déplacement horizontal : if (!vise)perso._x += vitesse*sens;
Si le héros n’est pas en train de viser, là il vous faut faire un petit effort de projection dans le futur, nous avons dit plus haut que notre héros devra pouvoir viser et tirer, ok mais cela influe sur le déplacement latéral, il ne peut pas à la fois viser et se déplacer, nous devons donc le préciser. Si le héros n’est pas en train de viser donc, sa position sur l’axe des X est égale à la vitesse de déplacement du héros multiplié par le sens (-1, 0, 1).

Pour être clair jusqu’au bout :

  • Si le héros ne vise pas et qu’on appuie sur la touche gauche, sa position est modifiée de vitesse*-1.
  • Si le héros ne vise pas et qu’on appuie sur la touche droite sa position est modifiée de vitesse*1.
  • Si le héros ne vise pas et qu’on appuie sur aucune touche de direction sa position est modifiée de vitesse*0.

Passons au vertical à présent : perso._y += gravite;

Rien de plus simple, la position du héros sur l’axe des Y est égale à la position actuelle du héros + la gravité.

Si le héros est au sol et qu’on appuie sur la touche haut sa position s’incrémente de -10.
Mais comme dès que le héros ne touche plus le sol la gravité s’incrémente de +1.
Alors la gravité va réduire à chaque pas du programme.

C’est pas clair ? Un exemple, un exemple, un exemple…

Ok voyons ça concrètement pas à pas :

Le héros est au sol, la gravité est de 0.
On appuie sur la touche « haut », la gravité est de -10 (on monte) le héros monte de 10 pixels, il n’est donc plus en contact avec le sol.
Au prochain pas du programme (la prochaine fois que la boucle est lue) la gravité est de -10+1 = -9, le héros se déplace de -9 sur l’axe Y.
Puis : -9+1=-8
Puis : -8+1=-7
Puis : -7+1=-6
Puis : -6+1=-5
Puis : -5+1=-4
Puis : -4+1=-3
Puis : -3+1=-2
Puis : -2+1=-1
Puis : -1+1=0

Ha ! Nous avons atteint le haut de courbe, à présent le héros va redescendre.

Puis : 0+1=1
Puis : 1+1=2
Puis : 2+1=3

Etc, jusqu’à ce qu’il touche le sol et que la gravité revienne à 0.

Ok on a nos déplacements, pour l’instant on va se limiter à ça, passons aux mouvements.

// mouvements
if (sens)perso._xscale = 100*sens;// oriente le perso
if (aucune) mouvement(1);// repos 
if (lateral) mouvement(2); // droite et gauche
if (gravite<0) mouvement(3); // saute
if (gravite>0) mouvement(4); // tombe
if (vise) mouvement(5);// vise
if (vise && tire) perso.anim.play();// tire

Voilà principalement à quoi servent toutes les variables et les raccourcis que nous avons déclarés au départ et en haut du moteur, normalement arrivé ici ça doit vous paraître lisible.

En gros on vérifie ce qu’est en train de faire le héros.
En fonction de l’action en cours on appelle la fonction « mouvement » et on lui passe un paramètre, qui n’est autre que le numéro de la frame qu’on souhaite afficher.
Note spéciale pour le tir, en effet ce mouvement est composé de deux parties symbolisées ici par des conditions, si le héros est en train de viser et qu’on tire alors on joue l’animation du tir.
Ceci nous impose de mettre un « stop() » au début de l’animation et de nommer le clip qui représente ce mouvement dans le conteneur du héros, j’ai chois pour nom « anim ».

Ce qui nous donne : si le perso vise et tire alors lis le clip anim qui se trouve dans perso.

Allez dernier bloc de code pour aujourd’hui, la gestion des mouvements.

// animation du perso
function mouvement(mouv) {
	if (perso._currentframe != mouv) {
		perso.gotoAndStop(mouv);
	}
}

C’est une petite fonction à part qu’on appelle à chaque fois qu’on veut changer de mouvement. La première question qui vient c’est pourquoi ne pas avoir mis ça directement dans le moteur ? Pour la lisibilité essentiellement, au lieu d’écrire autant de fois la condition qu’il y a de mouvements je ne l’écris qu’une fois et j’y fais appel avec le bon paramètre. Vous remarquerez que je ne fait pas simplement appel à la frame passée en paramètre mais que je vérifie avant que le héros n’est pas déjà en train d’afficher cette frame. C’est votre deuxième question légitime, pourquoi ? Tout simplement parce que je veux éviter que mon programme s’emmêle les pinceaux, en vérifiant que le mouvement que je veux afficher n’est pas déjà en cours j’évite de recommencer ce mouvement du début à chaque fois que j’appuie (ou laisse appuyée) la touche correspondante.

Voici le résultat final que vous devriez obtenir.

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Comme je suis gentil aujourd'hui je vous ajoute la source à ce stade du programme ;-)

tuto_deplace02.fla

Passage en AS3

Vous avez toutes les bases pour continuer en AS1/2 avec ce que vous avez déjà appris plus haut.
Il est temps de se mettre à jour et de passer en AS3.

Comme vous allez le voir les différences sont mineures, comme souvent c’est avant tout une question de logique, il suffit d’adapter le code à nos besoins. On va conserver la même structure que je vous explique pas à pas.

Calque « Variables » :

// variables déplacements
var gravite:Number = 0;// la gravité du jeu
var vitesse:Number = 4;// la vitesse du héro
var sens:Number = 0; // la direction du héro
var droite:Boolean=false;
var gauche:Boolean=false;
var haut:Boolean=false;
var bas:Boolean=false;
var tir:Boolean=false;
 
// variables mouvements
var lateral:Boolean = false; // mouvement latéral 
var vise:Boolean = false;// le héros vise 
var tire:Boolean = false;// le héros tire 
var saute:Boolean = false ;// le héros saute
var aucune:Boolean = true // aucune action en cours
 
// crée le perso
var perso:Perso= new Perso();
addChild(perso)
perso.x=200;
perso.y=300;

Par rapport à tout à l’heure qu’est ce qui change ?
Pas grand-chose, on a remplacé les variables « h,b,g,d,t » par « haut, bas, gauche, droite, tir ».
C’est à présent des Booléens qui ne sont pas liés pour l’instant au code des touches.
On supprime la variable « tire » qui ne sert plus à rien.

On a modifié la création du perso pour que ça corresponde à l’AS3.

Calque « Main » :

// ecouteurs
stage.addEventListener(KeyboardEvent.KEY_DOWN, appuyer);// appuie
stage.addEventListener(KeyboardEvent.KEY_UP, relacher);// relâche
stage.addEventListener(Event.ENTER_FRAME, moteur);// moteur

Là aussi c’est très simple, on remplace notre boucle permanente (onEnterFrame) par des écouteurs, deux pour le clavier (appuyer et relâcher une touche) et un pour la boucle principale.

Calque « Touches » :

Ha ! Là on a rajouté un calque spécifique à la gestion des touches.
AS3 est plus contraignant que AS1/2 pour la gestion des touches, ainsi les répétitions et les actions qui étaient naturelles en AS1/2 doivent à présent être décrites précisément. En clair en AS3 si on reste appuyé sur une flèche il ne la compte qu’une fois, c’est pourquoi nous allons nous servir de variables Booléennes pour savoir si on doit ou pas se déplacer.

Pour plus d'infos un tuto dédié par BillyBen

// Appuyer sur une touche
function appuyer(e:KeyboardEvent):void {
	switch (e.keyCode) {
		case 39 :
			droite=true;// aller à droite
			break;
		case 37 :
			gauche=true;// aller à gauche
			break;
		case 40 :
			bas=true;// aller en bas
			break;
		case 38 :
			haut=true;// aller en haut
			break;
		case 32 :
			tir=true;// tirer
			break;
 
	}
}
 
// relâcher une touche
function relacher(e:KeyboardEvent):void {
	switch (e.keyCode) {
		case 39 :
			droite=false;// aller à droite
			break;
		case 37 :
			gauche=false;// aller à gauche
			break;
		case 40 :
			bas=false;// aller en bas
			break;
		case 38 :
			haut=false;// aller en haut
			break;
		case 32 :
			tir=false;// tirer
			break;
 
	}
 
}

C’est très simple, on utilise l’instruction « swich » pour comparer le code de la touche enfoncée ou relâchée, lorsqu’elle est enfoncée la variable de l’action correspondante est « true » et lorsqu’elle est relâchée elle est « false ».

Calque « Moteur » :

Nous revoici sur la plus grosse partie de notre programme et vous allez voir que les changements sont là aussi mineurs.

// moteur
function moteur(e:Event):void {
 
	// variables
	sens = int(droite)-int(gauche);// orientation
	aucune = !droite && !gauche && !haut && !bas// aucune action
	lateral = droite || gauche;// mouvement latéral
	vise = perso.y==300 && bas;
 
	// vertical
	if (perso.y>=300) {
		perso.y = 300;
		gravite = -int(haut)*10;
	} else {
		gravite++;
	}
 
	// déplacements           
	if (!vise)perso.x += vitesse*sens;// horizontal
	perso.y += gravite;// vertical
 
	// mouvements
	if (sens)perso.scaleX = sens;// oriente le perso
	if (aucune) mouvement(1);// repos 
	if (lateral) mouvement(2); // droite et gauche
	if (gravite<0) mouvement(3); // saute
	if (gravite>0) mouvement(4); // tombe
	if (vise) mouvement(5);// vise
	if (vise && tir) perso.anim.play();// tire
 
}
 
// animation du perso
function mouvement(mouv):void {
	if (perso.currentFrame != mouv) {
		perso.gotoAndStop(mouv);
	}
}

Bah ?! Ya koi ki a changé ???
Pas grand-chose, j’ai simplement remplacé les conditions des mouvements par les valeurs booléennes des actions que nous avons déterminées dans le code des touches. Une seule chose est notable, en mode strict en AS3 les booléens restent des booléens, il faut les convertir explicitement : int(leBoolean).

Et voilà c’est aussi simple que ça.
A partir de maintenant nous allons donc continuer en AS3.

Voici ce que ça donne en AS3.

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Et la source qui va avec ;-)

tuto_deplace02_as3.fla

page suivante > Etape 2 : Grilles et collision