Tutorial - Comment créer un jeu flash (programmation action script flash, fichiers source .fla inclus)
Seconde partie du tutorial. Vous allez maintenant
programmer en Actionscript pour animer les
movieclips flash. Vous allez apprendre comment
calculer une distance dans flash en action script et gérer le score ainsi que l'élimination du joueur. Les fichiers source .fla sont disponibles en téléchargement après chaque étape. Vous pouvez bien sur modifier ce fichier source pour créer le jeu que vous avez envie avec des graphismes améliorés.
>>
Tutorial - Créer un jeu flash, Action script et animation, 1ère partie
Animation de movieclips en action script flash (propriétés _x et _y)
Pour que les flèches arrivent de manière décalée dans le temps, on va simplement les créer plus ou moins haut dans la scène. Pour cela, on utilise une
fonction de flash qui retourne un nombre aléatoire.
Vous pouvez placer ce morceau de code dans un autre calque de la scène (nommé "fonction" par exemple) ou au sommet de votre code Action script actuel :
// randRange(40, -200); renvoie un nombre entier aléatoire compris entre 40 et -200
function randRange(min:Number, max:Number):Number {
var randomNum:Number = Math.floor(Math.random() * (max - min + 1)) + min;
return randomNum;
}
On place ensuite les flèches verticalement en assignant ce nombre à la propriété _y de chaque MC (en dehors du bloc onEnterFrame, pour l'initialisation):
// On crée les flèches avec une coordonnées _y entre 40 et -200, soit au dessus de l'aire de jeu
fleche_gauche_move._y = randRange(40, -200);
fleche_bas_move._y = randRange(40, -200);
fleche_haut_move._y = randRange(40, -200);
fleche_droite_move._y = randRange(40, -200);
// on définit une vitesse de descente
vitesse=3;
// on aligne les flèches qui descendent avec les flèches fixes en faisant correspondre les propriétés _x
fleche_gauche_move._x = fleche_gauche._x;
fleche_bas_move._x = fleche_bas._x;
fleche_haut_move._x = fleche_haut._x;
fleche_droite_move._x = fleche_droite._x;
Ensuite, dès que la flèche va passer un certain seuil (en bas de l'aire de jeu), on va la remonter toujours avec un nombre aléatoire pour créer un décalage. Sinon on fait défiler les flèches en incrémentant
la propriété _y.
On aura donc dans le bloc onEnterFrame :
// on fait bouger les flèches en incrémentant la propriété _y de chaque instance
fleche_haut_move._y += vitesse;
fleche_bas_move._y += vitesse;
fleche_droite_move._y += vitesse;
fleche_gauche_move._y += vitesse;
// on vérifie si les flèches n'ont pas atteint le pallier du bas (350 pixels)
// Si oui, on les remonte de manière aléatoire; sinon on ne fait rien et les flèches continuent de descendre
if (fleche_haut_move._y > 350) {
fleche_haut_move._y = randRange(40, -200);
}
if (fleche_droite_move._y > 350) {
fleche_droite_move._y = randRange(40, -200);
}
if (fleche_gauche_move._y > 350) {
fleche_gauche_move._y = randRange(40, -200);
}
if (fleche_bas_move._y > 350) {
fleche_bas_move._y = randRange(40, -200);
}
Si vous faîtes une prévisualisation de votre animation flash (ctrl+entrée), les flèches devraient descendre correctement. Si ce n'est pas le cas, vérifiez que vous avez
bien orthographié les noms d'occurence sur la scène et dans le code.
Vous pouvez comparer aussi avec le fichier source flash .fla (étape 4).
Télécharger le fichier source flash de l'étape 4
Calcul de distance simple en actionscript flash (propriété _y)
Pour calculer le score du joueur, on va
calculer la distance entre la flèche de référence (fixe) et la flèche qui descend (au moment de l'appui clavier). Le code va donc être placé dans les blocs où on détecte l'appui sur une touche clavier.
En dehors du bloc onEnterFrame, on crée tout d'abord une constante qui va contenir la marge d'appui (en pixel). Ainsi, quand vous voudrez régler la difficulté, il vous suffira de modifier cette constante "grosse_marge".
Vous pourrez aussi créer d'autre palliers pour accorder au joueur certain bonus en cas de bon score. Pour la touche haut, on aura donc :
grosse_marge = 30;
score_total = 0;
onEnterFrame = function () {
if (Key.isDown(Key.UP) && relache_haut == 0) {
// on calcule la distance entre la référence et la flèche au moment de l'appui
distance_haut = (fleche_haut_move._y) - (fleche_haut._y);
relache_haut = decompteur_max;
// si l'appui est dans la marge spécifiée
if (Math.abs(distance_haut) < grosse_marge) {
// on augmente le score_total en fonction de la distance précédente
score_total += 100 * Math.round(grosse_marge - (Math.abs(fleche_haut_move._y - fleche_haut._y)));
}
}
}
Répétez la portion de code du bloc onEnterFrame 4 fois, pour chaque touche en changeant les noms d'occurence.
Pour afficher la variable score, créez un champ texte en mode "Texte dynamique" avec en champ Var. : score_total. Pour plus de clarté dans l'organisation de votre scène, vous pouvez placer ce champ texte
sur un calque différent.
Télécharger le fichier source flash de l'étape 5
Cacher un movieclip avec un masque flash
Pour restreindre l'affichage des flèches à l'aire de jeu seulement, on va mettre les 4 flèches mobiles dans un calque masqué par un calque masque flash au dessus.
Arrangez vos calques pour avoir le fond sur un calque "background" et les flèches sur un calque "fleches". Au dessus de ce calque "fleches", créez un calque nommé "masque_fleches". Verrouillez tous vos calques sauf le calque "masque_fleches".
Tracez ensuite
une forme à la plume en suivant les contours de l'aire de jeu puis remplissez-la.
Faîtes ensuite un clip droit sur le calque "masque_fleches" puis sélectionnez "Masque" pour
transformer ce calque en masque flash. Si vous voulez modifier la forme du masque, il vous suffit de déverrouiller le calque "masque_fleches".
Télécharger le fichier source flash de l'étape 6
Gestion des vies et de l'élimination du joueur
On va donner 4 possibilités d'erreur au joueur. Le joueur commet une faute dans deux cas:
- si le joueur appuie sur la bonne touche mais quand la flèche n'est pas encore dans la marge imposée
- si la flèche arrive en bas mais que le joueur n'a pas appuyé sur la touche correspondante
On va donc créer une variable "elimination" qui va gérer le nombre de vie restantes. En fonction de cette variable, on change la propriété _visible du movieclip représentant une vie pour le faire apparaître ou non.
Les vies sont 4 occurences d'un même movieclip que l'on va nommer "etoile_1", "etoile_2", ... On va aussi créer des variables tape_haut, tape_bas ... qui vont vérifier si le joueur a bien appuyé sur la touche correspondante. Pour la touche haut on aura donc le code actionscript suivant :
if (Key.isDown(Key.UP) && relache_haut == 0 && elimination >= 0) {
distance_haut = (fleche_haut_move._y) - (fleche_haut._y);
relache_haut = decompteur_max;
if (Math.abs(distance_haut) < grosse_marge) {
score_total += 100 * Math.round(grosse_marge - (Math.abs(fleche_haut_move._y - fleche_haut._y)));
} else if (elimination < 4) {
elimination += 1;
}
tape_haut = 1;
}
// Si la fleche a atteint le bas de l'ecran
// et si aucun appui sur la touche
if (fleche_haut_move._y > 350) {
fleche_haut_move._y = randRange(40, -200);
// Si pas d'appui dans la zone OK
if (tape_haut != 1) {
elimination += 1;
tape_haut = 0;
}
tape_haut = 0;
}
Pour l'affichage ou non des étoiles, on utilisera cette portion de code dans le bloc onEnterFrame (sans oublier d'initialiser sa variable elimination = 0; en dehors) :
// portion EN DEHORS du bloc onEnterFrame
tape_haut = 0;
tape_bas = 0;
tape_gauche = 0;
tape_droite = 0;
elimination = 0;
/////////////////////////////////////
// ELMINATION
/////////////////////////////////////
if (elimination > 0) {
etoile_4._visible = false;
if (elimination > 1) {
etoile_3._visible = false;
if (elimination > 2) {
etoile_2._visible = false;
}
}
}
if (elimination > 3) {
trace("Fin du jeu : joueur éliminé");
// Code a executer quand le joueur est éliminé
etoile_1._visible = false;
elimination = -100;
}
Télécharger le fichier source flash de l'étape 7
Améliorations à apporter
Bien sur, ce n'est qu'un tutorial qui vous donne les
bases pour faire un jeu. Vous pouvez tout modifier et surtout rajouter des fonctionnalités, par exemple :
- Ecran de bienvenue/ Ecran de fin de jeu
- Musique de fond, bruitages
- Bonus cumulatifs
- Mode pause
- ...
>>
Tutorial - Créer un jeu flash, Action script et animation, 1ère partie
tout d'abord je voudrais vous dire que votre didacticiel est excellent !
Mais, il y a un problème au niveau du jeu ...
Quand, par exemple, on doit appuyé sur flèche gauche :
si nous restons appuyé quelques secondes le score augmente de façon exponentiel !
VoilÃ
contact : darshshneider@hotmail.fr