Notre action sur le bouton fonctionne et le poisson saute
quand on clique sur la bouée. Tous les éléments
sont en place pour faire un jeu. La règle peut être
la suivante :
Au clic sur la bouée, une dizaine de poissons de tailles
variables et localisés à des endroits différents
sautent. Le joueur doit cliquer sur les poissons. Chaque
fois qu’il attrape un poisson, il augmente son score.
Au bout d’un temps défini, le jeu s’arrête
et il peut « contempler » son score.
Charger l’animation 11_debut.fla (qui est en fait 10_programmation_fin_goto.fla)
Un poisson variable
Il faut suivre la piste du poisson pour connaître son
espace vital. En l’occurrence, sur l’image ci-contre,
on retient un rectangle d’environ 380 par 130 pixels
pour le déplacement (mouvement normal) de son centre
de gravité. Pour être précis il faudrait
intégrer l’épaisseur du poisson mais,
comme il sera possible de cliquer au moins sur un filet,
l’approximation est donc faite. Pour la suite du calcul
nous représenterons ces données par les variables
v et w.
Le centre du repère (le point 0)
se trouve au sommet de la courbe, normalement à la moitié de
la largeur et en haut du rectangle qui circonscrit la courbe
(coordonnée : (1/2 v, 0))
Le poisson se déplace dans une scène de 550
par 400, notés L et H.
Comme seul le mouvement normal du poisson nous intéresse, il faut connaître
la zone normale dans laquelle le centre du repère
peut se déplacer.
Pour que le poisson soit accessible, il faudra définir
sa taille qui sera toujours comprise entre la taille normale
et la moitié de la taille normale. Du fait de la taille
réduite de moitié de l’objet, le mouvement
réduit est plus petit de moitié, permettant
une zone réduite plus grande sans que le poisson sorte
de l’écran dans sa trajectoire. Le poisson étant
plus petit, positionner la plus bas pour qu’il donne
toujours l’impression de sortir de l’eau. Avec
une plage sur l’axe des _y entre 180 et 280 pixels,
plus le décalage d’échelle, la formule
tenant compte du facteur d’échelle S du poisson
(compris entre 0,5 et 1) et d’un coefficient aléatoire
R (compris entre 0 et 1) permet de positionner le poisson
(grâce à ces coordonnées (x, y)) dans
la zone de mouvement de façon aléatoire.
_x = v / 2 x S + (L – v x S) x R et _y = 180 + 100
x R + 100 x (1 – S)
soit en code ActionScript après conversion et factorisation
:
on (release) {
if (_root.nage=="oui") {
_root.nage = "non"; alea = Math.random()/2 + .5;facteur S dans notre formule Nombre aléatoire divisé par 2 + ½ pour
un nombre compris entre 0,5 et1
_root.attachMovie("pesket", "pesket1", 0); setProperty("pesket1", _xscale, alea * 100); alea
en % pour l’échelle setProperty("pesket1", _yscale, alea * 100);
setProperty("pesket1",_x,190*alea+(550-380*alea)*Math.random());
setProperty("pesket1",_y,180+100*(Math.random()+1-alea)); } }
Tu la boucles !
Maintenant qu’un poisson apparaît de façon
aléatoire dans la scène il faut, comme pour
la multiplication des petits pains, créer une dizaine
de poissons. Pour cela on peut utiliser une boucle (catégorie
: Actions- Conditions/boucles).
Le principe d’une boucle est de réitérer
une partie de programme de façon automatique. Le contrôle
se faisant sur une condition. Suivant les langages, plusieurs
types de boucles existent. Dans quasiment tous les cas, un
compteur ou équivalent permet de modifier une variable
au sein de la boucle
While do
La syntaxe générale de cette boucle est :
WHILE condition DO instruction
En ActionScript, elle se structure de la façon suivante
: while (condition) {
instructions
}
Do until
La syntaxe générale de cette boucle est :
DO instruction UNTIL condition
Contrairement à la syntaxe précédente,
la boucle est exécutée au minimum une fois
avant de passer par le crible du test.
En ActionScript, elle se structure de la façon suivante
: do { instructions
} while (condition);
For
La syntaxe de cette boucle appelée aussi itération,
bien connue des utilisateurs de tableurs, est :
FOR (initialisation, condition, modification) DO instruction
En ActionScript, elle se structure de la façon suivante for (initialisation; condition ; modification) {
instructions
}
ex : for (i=1 ; i<10 ; i=i+1) {instructions}
Dans de nombreux langages la notion d’incrémentation
(ajouter 1) ou de décrémentation (retrancher
1) conduit à une simplification de la syntaxe qui
s’écrit i++ (i=i+1) et i
- - (i=i-1).
Bien évidement ceci concerne toutes les variables
et est compris par la majorité des compilateurs et/ou
interpréteurs.
For In
La syntaxe générale de cette boucle est :
FOR chaque_choix IN liste DO instruction
Dans certains langages le mot EACH apparaît en clair
En ActionScript, elle se structure de la façon suivante for (chaque_choix in liste) {
instruction
}
Stop et Encore
Au sein d’une boucle, il est possible de placer des
instructions permettant :
d’arrêter la boucle
(break;)
de passer au cas suivant sans finir le traitement
du cas présent (continue;)
Ces instructions sont souvent exécutées en
fonction du résultat d’un test conditionnel.
Les puristes estiment que ces instructions ne sont pas propres
et qu’il est préférable de revoir l’algorithme
si un tel cas se présente, car l’analyse est
mal faite.
Dans la pratique et quand il faut produire, on peut être
amené à faire de tels appels. Attention toutefois à ceux
qui seraient notés sur le code de leur programmation
;-)
C’est mon choix !
Dans le cas de notre pauvre pesket, autant utiliser une
boucle FOR
La variable i va de 0 à 9 pour créer 10 occurrences
du poisson. Chaque cas doit être identifié ;
donc en plus du mot pesket, on ADD(itionne) le numéro
de la variable (opération de concaténation).
La profondeur est différente pour chaque objet afin
de bien les gérer.
La syntaxe aura la structure suivante
on (release) {
if (_root.nage=="oui") {
_root.nage = "non"; for (i=0; i<10; i++) {
alea = Math.random()/2 + .5;
_root.attachMovie("pesket", "pesket" add
i, i);
setProperty("pesket" add
i,
_xscale, alea * 100);
setProperty("pesket" add
i,
_yscale, alea * 100);
setProperty("pesket"add
i,_x,190*alea+(550-380*alea)*Math.random());
setProperty("pesket"add
i,_y,180+100*(Math.random()+1-alea));}}}
Quel poisson choisir ?
10 poissons sautent et sautent à nouveau tels des
moutons. Comme il faut toujours contrôler la situation,
en repensant au code généré sur la dernière
image du poisson en mouvement, on trouve :
Pesket1 est donc éliminé à chaque fois.
Le problème est que seul pesket1 est supprimé et
on passe de n à n-1 pesket (pas facile à compter
9 ou 10 poissons si vous manipulez encore !).
Il ne faut pas supprimer le pesket N°1 à chaque
fin de mouvement d’un poisson, mais uniquement le poisson
qui finit sa trajectoire.
A partir de la bibliothèque, avec le symbole « poisson
mouvement », cliquez sur l’image 48 du calque
programmation et modifier les lignes ci-dessus en cliquant
sur « Insérer un chemin cible » et en
sélectionnant en mode « Points - Relatif » This
pour obtenir un code proche de celui-ci-dessous
_root.nage = "oui";
this.removeMovieClip();
Pour ne plus voir qu’une seule tête
Nos 10 poissons font 1 saut et puis s’en vont. Le
problème est qu’ils sautent tous en même
temps. Il est souhaitable qu’ils sautent séparement.
Pour nos débuts en programmation, cette temporisation
sera mise sur la première image (et uniquement sur
la première image pour éviter des arrêts
intempestifs sur image) de l’occurrence du poisson
dans le clip « poisson mouvement ».
Pour que le jeu soit plus ludique, il faudrait qu’il
soit impossible de cliquer sur le poisson tant qu’il
n’est pas en mouvement. Il faut lors de la génération
du poisson, en plus de sa taille et de son positionnement,
rajouter une propriété de visibilité setProperty("pesket" add i,
_visible, 0);
Si un objet est invisible (0 ou false), il sera impossible de cliquer dessus.
Sa visibilité sera rendue au démarrage de son mouvement. Pour
des raisons de commodité, il est préférable pour l’instant
de mettre cette propriété visible (1 ou true) pour tester notre
temporisation
Avant de créer notre temporisation, il est évident
qu’il nous faudra cliquer sur le poisson pour qu’il
puisse disparaître (être péché).
Cela sera possible sur un bouton. Il faut donc transformer
le poisson en bouton pour permettre le clic de l’utilisateur.
Notre poisson, en plus d’être un bouton, devra
avoir un comportement de clip pour permettre de tester sur
chaque image (onClipEvent (enterFrame)) si la temporisation
est terminée. La première chose est de gérer
ces nouveaux symboles.
Ouvrir la bibliothèque, et sélectionner le « poisson
mouvement ».
Cliquer sur le poisson dans la scène à l’image
1 et le convertir en un symbole bouton appelé « poisson
bouton ». le poisson ne bouge pas, mais une zone rectangulaire
plus grande inclut notre « poisson bouton ».
Toujours sur notre bouton poisson, convertissez-le en un
symbole clip nommé « poisson emballé »
Copier le « poisson emballé » et mettez-le
en remplacement du « poisson » dans l’image
48. Faire éventuellement des modifications de positionnement
et de rotation du poisson et vérifier si la trajectoire
est correcte.
Le « poisson mouvement » (alias « pesket » en
programmation) se décompose de la façon suivant
:
Poisson emballé (clip sur la trajectoire)
Poisson bouton (bouton pour nos futures actions dans le jeu)
Poisson (clip intégrant les parties de poisson et
de la texture écailleuse)
Ecaille texture (texture appliquée dans la forme
poisson)
Ecailles ligne (2 lignes d’écailles)
Ecailles (1 ligne d’écailles)
Ecaille (de base composant notre texture)
Notre poisson bouton ayant été créé un
peu rapidement, il est souhaitable de l’ouvrir dans
la bibliothèque. Cliquer sur l’image « cliquable » et
insérer une image pour avoir les différents états
du poisson, identiques et surtout la zone de clic.
En lançant l’animation, il n’y a pas de
grosses différences avec l’étape précédente
sauf qu’une main apparaît au passage du curseur
de la souris sur les poissons.
Pour mettre une temporisation avant l’animation de
chaque « pesket », ouvrir « poisson mouvement » et
sur l’image 1 du calque « Programme »,
insérer une image clé vide sur les images 1
et 2.
Sur l’image 1, mettre un stop pour arrêter le
clip.
Sur l’image 2, rendre le clip visible (setProperty(this,
_visible, 1);)
Créer un nouveau calque au dessus du « Guide
: poisson » et le nommer « etiquette ».
Sur l’image 2, insérer une image-clé vide
et la nommer « suite » dans les propriétés
de l’image.
Il vous reste à temporiser le poisson sur l’image
1.
Insérer une image clé sur l’image 2 du
calque poisson. Ce poisson est légèrement décalé par
rapport au poisson de l’image 1. Il est possible de
copier le poisson de l’image 1 : supprimer le poisson
de l’image 2 et coller en place (Ctrl + Maj + V) le
poisson pour que les poissons de l’image 1 et 2 soient
identiques. Il est possible de tolérer le léger
décalage de la trajectoire du poisson.
Il existe de nombreuses possibilités pour ralentir
ou temporiser une animation. Dans notre cas, nous allons
utiliser une fonction simple qui consiste à tirer
un nombre aléatoire et à le comparer à un
nombre choisi au préalable. Si le nombre aléatoire
est plus petit que le nombre choisi, l’animation se
poursuit, sinon le poisson « reste dans l’ombre ».
Même sans avoir fait de probabilité, il paraît évident
que cette fonction n’est pas à l’abri
d’une très longue suite de nombres, tous supérieurs
au nombre permettant de déclencher la suite. Le test
est effectué chaque fois que l’on rentre dans
l’image (12 fois par seconde dans notre cas), aussi
même si une grande série de nombres arrivait,
cela donnerait au contraire du piment à notre jeu
: le joueur relâchant son attention au fur et à mesure
que le temps s’écoule, il pourrait être
surpris par les poissons retardataires. Pour maintenir son
attention, il faudra mettre un indicateur qui permetta de
connaître le nombre de poissons restants.
La temporisation sur le « poisson emballé » de
l’image 1 du calque poisson peut ressembler à celle-ci
dessous.
onClipEvent (enterFrame) {
PesketAvance = Math.random()*100;
if (PesketAvance<5) {
with (_parent) {
gotoAndPlay(2);
}
}
}
Une variable PesketAvance comprise entre 0 et 100 est créée.
Test si cette variable est inférieure à 5.
Ce chiffre est obtenu par essais successifs de plusieurs
valeurs, jusqu’à trouver une valeur suffisante
pour la jouabilité.
Si la valeur de la variable est inférieure à 5,
alors il faut passer à la « suite », qui
ne se trouve pas sur le poisson emballé sur lequel
est la programmation, mais sur « Poisson mouvement ».
Il faut donc demander qu’il passe avec son parent (with
(_parent)) à l’image 2. Cette image 2 ayant
une étiquette, il sera possible de modifier l’instruction.
Une fois la valeur testée il est souvent préférable,
au sein d’un clip qui n’est pas visible par l’explorateur
d’animation, de mettre les paramètres, variables… directement
dans l’animation pour les modifier plus facilement.
Le test de comparaison se fait donc par rapport à une
variable _root.proba et il ne reste plus qu’à initialiser
cette variable dans l’image 1 de la séquence
de l’animation : _root.proba = 6;
Cette valeur étant celle retenue dans le jeu.
Résultat
ici.
Combien j’ai péché ?
Un clic sur la bouée fait sauter, avec une temporisation,
10 poissons de taille variable. En approchant la souris des
poissons une main apparaît, mais aucune action n’est
lancée.
Il faut ajouter un compteur qui indiquera le nombre de poissons
péchés et incrémenter le compteur à chaque
clic sur un poisson.
On est les champions…
Créer un calque « score » entre les calques
texte et étiquette pour un affichage du score pendant
toute la durée de l’animation.
Avec l’outil texte créer une première
zone de texte et la remplir avec le mot « score ».
Créer une deuxième zone de texte à côté et
mettre un score fictif à 0000 pour avoir une idée
du format du score. Faire les modifications nécessaires
sur la police et surtout demander à avoir un texte
dynamique au lieu de statique. Dans la partie « Var
: » (comme variable) des propriétés du
texte mettre « _root.score ». Cette variable
sera initialisée ultérieurement et permettra
de connaître le nombre de poissons cliqués avec
succès.
Pour le texte, la troisième possibilité est « texte
de saisie » qui servirait à récupérer
dans un autre écran le nom du joueur qui s’afficherait
ensuite sur cet écran en temps que « Texte dynamique » du
moment qu’ils utilisent la même variable.
Utiliser les outils d’alignement si nécessaire.
Il faut maintenant positionner la variable _root.score à 0.
Comme les autres variables, il est préférable
de la mettre dans l’image 1 du calque programme.
Dans la partie Action, il existe déjà d’autres
variables. Plutôt que de taper le texte ou de sélectionner
l’action, il est préférable de dupliquer
du code existant. Le copier-coller par clic droit ou raccourci
clavier fonctionne bien, mais il est plus rapide de sélectionner
le code à dupliquer et de le déplacer en maintenant
la touche « Maj » enfoncée.
Changer ensuite le nom de la variable et mettre 0 dans la
valeur.
Ça nous file des boutons
C’est uniquement le fait de cliquer sur le poisson
qui incrémente la variable. Il faut aussi tenir compte
qu’un poisson cliqué est un poisson péché et
donc il n’est plus possible de cliquer dessus. Après
le clic sur le poisson, le faire disparaître de l’écran
(il est dans le bateau de pêche et non dans la mer).
Ouvrir la bibliothèque (F11) et double-cliquer sur
le « poisson mouvement » dans la boîte
poisson. Sélectionner le poisson sur l’image
1, c’est le « poisson emballé » qui
est un clip.
Un double clic sur le poisson emballé permet, en cliquant
sur le poisson, d’obtenir le « poisson bouton » qui
est une occurrence de bouton que l’on peut programmer
en tant que tel.
En ayant cliqué sur le bouton « poisson bouton » dans
le clip « poisson emballé », rentrer les
actions qui seront effectuées lors du clic, à savoir
incrémenter la variable _root.score et faire disparaître
le poisson :
on (release) {
_root.score = _root.score + 1;
_parent.removeMovieClip();
}
Cette syntaxe est tout à fait correcte pour une application
normale, sauf que dans un jeu il faut tenir compte de la
jouabilité. Avec une interface graphique (Windows,
Mac OS, BeOS, Motif…) l’action n’est pas
lancée lors du clic mais à la remontée
du bouton de la souris. Cela est relativement pratique car,
si l’utilisateur se trompe sur l’endroit où il
clique, il peut, avant de relâcher le clic, se positionner à un
autre endroit, ce qui permet de changer le cours de l’action
première. C’est plutôt pénalisant
dans le cas d’un jeu d’action (à moins
de l’indiquer au joueur), car dans ce cas c’est
le clic et non pas lors de la remontée du bouton que
doit s’effectuer l’action.
Il est possible de garder on press avec on release. Si c’est
le cas, il faudra l’indiquer au joueur…
Le code devient donc
on (press) {
_root.score = _root.score + 1;
_parent.removeMovieClip();
}
Le score est au départ à 0, et au fur et à mesure des
clics sur les poissons il s’incrémente.
Comme le montre l’exemple ci-contre : le score est de 5 et le nombre
de poissons de 4.
2 hypothèses sont possibles : le joueur a raté un poisson ou
un poisson n’est pas encore apparu.
Rien ne permet de lever cette ambiguïté et, comme le temps d’apparition
d’un poisson peut être long, il serait souhaitable d’établir
une deuxième variable permettant de connaître le nombre de poissons à venir.
Ça va durer encore longtemps ?
Une variable _root.restant doit être initialisée.
Elle sera incrémentée chaque fois qu’un
poisson est créé sur la scène et décrémentée
chaque fois qu’un poisson quitte la scène (que
l’on clique dessus ou qu’il arrive en fin de
trajectoire).
Pour être certain du nombre de poissons générés,
il est aussi possible de demander à gérer une
variable _root.total, indiquant le nombre total de poissons
qui ont été générés.
Dans l’image 1 du calque Programmation, mettre :
_root.total = 0;
_root.restant = 0;
Sur le calque score : ajouter un slash (barre oblique) en
texte statique et 0000 en texte dynamique avec pour nom de
variable _root.total.
En-dessous, mettre un texte statique « Poissons restants » et
un texte dynamique de valeur 0000 et de variable _root.restant.
Utiliser les possibilités d’alignement pour
présenter au mieux les résultats.
Sur la séquence 1, cliquer sur la bouée et
au sein de la boucle « for », insérer
le code :
Pour décrémenter la variable _root.restant,
il faut se positionner sur le « poisson bouton » dans
le « poisson emballé », il faut mettre
décrémenter les restant par une instruction
du style :
Quand un poisson sort de l’écran, ne pas oublier de décrémenter
les restants.
Sur l’image 48 du calque programme du clip « poisson mouvement » de
la bibliothèque, il est possible de mettre aussi la décrémentation
de la variable :
En testant le jeu vous remarquez que suivant le cas, le
jeu peut-être relancé une deuxième fois,
voire une troisième et que, rien ne se passe quand
on clique sur la bouée. Dans le feu de l’action,
il n’est jamais facile de trouver ce qu’une analyse
préliminaire aurait permis de trouver. A savoir :
si le joueur clique sur tous les « poissons boutons »,
ils disparaissent sans remettre la variable _root.nage à 0.
Il suffit de rajouter cette modification de variable sur
le bouton « poisson bouton » pour pallier au
problème et continuer à jouer, même avec
10/10 au score.
Le jeu fonctionne et, à chaque clic sur la bouée,
vous repartez avec 10 nouveaux poissons. Le problème
: un clic malencontreux sur la bouée au cours du jeu
fait disparaître tous les poissons et repartir une
nouvelle dizaine, sans positionner le compteur des restants à 0.
Il suffit, sous l’instruction _root.nage
= "non";,
de rajouter _root.restant = 0;.sur la bouée.
Il suffira d’indiquer au joueur d’éviter
de cliquer sur la bouée lors de la pêche aux
poissons, sous peine de perdre les poissons restants. Cette
fonction donnant un peu de piment au jeu.
Elle va encore nous faire une scène !
Le jeu fonctionne et il serait intéressant de l’habiller
avec un écran de début. Un écran de
fin pour indiquer le score final et éventuellement
une règle du jeu compléterait le tout.
Plutôt que de rajouter des images au début et à la
fin de la séquence 1, il est préférable
d’ajouter des séquences (scènes dans
les versions précédentes et dans d’autres
logiciels).
Utiliser le menu « Insertion – Séquence » pour
ajouter une séquence.
Utiliser le menu « Modification – Séquence… » pour
passer la Séquence 1 en deuxième position par
glisser-déplacer
Faire un double-clic sur les séquences pour les renommer
: intro et jeux.
En cliquant sur le petit clap, il est possible d’accéder à la
séquence voulue et de choisir « Intro ».
Cette séquence est vide.
Créer un calque Programmation (prg) et mettre un stop.
Créer un calque Glénan et mettre le clip « texte » de
l’archipel des Glénan, dont la taille du clip
peut être augmentée d’un facteur 150 à 200%.
Créer un calque Texte et mettre le nom du jeux (la
pêche miraculeuse ou un autre nom si vous avez une
meilleure idées).
Sur cette page d’accueil, il peut y avoir 3 possibilités
: jouer, aide et quitter le jeu.
C’est 3 actions étant différentes, 3
boutons sont nécessaires. Pour réutiliser au
maximum les objets, il est intéressant de prendre
le « bouton poisson » et de le cloner 3 fois.
Il est préférable, avant de le cloner, de l’agrandir
(200%) et de lui faire effectuer une rotation (-60 degrés)
en utilisant le menu « Modification – Transformer – Redimensionner
et faire pivoter… ».
Sur les boutons, mettre respectivement de gauche à droite
: Jouer, Aide, Quitter sur chaque « bouton poisson ».
Sélectionner le « bouton poisson » Jouer
et mettre une action Goto sur la séquence jeux à l’image
1.
Help me if you can, I'm feeling down
Pour l’aide sur le jeu, il est préférable
de la mettre dans la séquence d’intro sur une
autre image.
Sur l’image 2 insérer une image clé vide
sur le calque « prg » et mettre une action « Stop »
Créer un nouveau calque appelé étiquette
et mettre dans les propriétés de l’image « Aide ».
Les boutons peuvent être les mêmes que sur la
première image. Sur l’image 2 du calque « Boutons »,
insérer une image pour permettre aux boutons d’être
visibles sur les 2 images.
Insérer une image clé vide sur l’image
2 du calque texte. Sélectionner le texte ci-dessous
de la règle, le copier et le coller dans une zone
de texte dans Flash. La zone de texte est trop large et si
l’outil de redimensionnement est utilisé, il étroitise
la police au-delà des limites du raisonnable. Il faut
cliquer avec l’outils « texte » dans le
texte et sélectionner le rond (ou le carré)
dans le coin supérieur droit de la zone de texte pour
la modifier jusqu’aux valeurs souhaitées (avec
les zones de texte dynamique, c’est le coin inférieur
droit qu’il faut utiliser).
Règle du jeu
Vous êtes un patron pêcheur et vous comptez pêcher
le plus possible de poissons.
Vous avez la possibilité d’effectuer trois traits
de pêche.
Pour commencer chaque trait, vous devez cliquer sur la bouée.
Un clic sur un poisson et il est péché. Un
clic sur la bouée et le niveau change (dommage pour
les poissons restants). Regardez bien le nombre de poissons
restant à pêcher.
L’image d’aide doit correspondre à l’image
ci-contre.Sélectionner le « bouton poisson » d’aide
et mettre une action gotoAndPlay sur l’étiquette
d’image « Aide ».
Ne me quitte pas !
Pour quitter le jeu, le plus simple est d’utiliser
une instruction très puissante FScommand qui permet,
entre autre, de communiquer avec l’extérieur
de Flash. Dans notre cas : sélectionner le « bouton
poisson » quitter et utiliser Action – Navigateur/réseau – fscommand.
Dans la liste des commandes de lecteur autonome, sélectionner « quit ».
Attention en utilisant le menu « Contrôle – tester
l’animation », le bouton quitter ne semble pas
fonctionner. Avec l’explorateur « cherche le
dossier » dans lequel vous strocker vos fichier FLA,
vous trouverez un fichier du même nom en SWF pour lequel
le clic sur « quitter » fonctionne.
Same player shoot again
Le jeu est opérationnel mais les niveaux sont identiques.
Il n’y a pas de difficulté croissante sur les
niveaux. Il existe plusieurs possibilités pour augmenter
la difficulté du jeu. Pour notre jeu : le nombre de
poissons va augmenter à chaque niveau. Il faut donc, à la
place de la constante 10, instaurer une variable « nbpesket » modifiable à chaque
niveau. Par exemple 10, 15 et 20 poissons aux niveaux 1,
2 et 3. Si une variable niveau est créée, il
est possible d’avoir l’équivalence de
nbpeskets en fonction du niveau par la formule : nbpesket
= 5 + niveau x 5
Sur l’image 1 du calque programme de la séquence
jeu, initialiser les variables nbpesket et niveau.
_root.niveau = 1;
_root.nbpesket = 10;
Cliquer sur la bouée dans l’image 1 de la séquence
jeux et à la place de : for
(i=0; i<10; i++), mettre
le code suivant : for (i=0; i<_root.nbpesket; i++).
Sur le calque score rajouter une zone de texte statique avec
le mot score et une zone de texte dynamique affichant la
variable _root.niveau.
Il existe plusieurs possibilités pour changer de niveau
: quand le joueur clique malencontreusement sur la bouée
et quand le dernier poisson quitte la scène, qu’il
soit péché ou pas. Pour faciliter la programmation,
une fonction PassageNiveau va être créée
ce qui lui permettra d’être appelée depuis
toute partie de l’animation demandeuse.
Pour l’action sur la bouée, faire intervenir
la fonction une fois que la variable nage est revenue à « oui » pour éviter
que, par mégarde, le joueur ne reclique sur la bouée.
Il n’est donc pas possible de cliquer sur la bouée
pour passer au niveau suivant, avant la disparition du premier
poisson (pêché ou fin de trajectoire). Pour éviter
qu’à chaque clic de bouée, on puisse
passer au niveau suivant, le passage ne se fera que s’il
reste des poissons à pêcher (le nombre de poissons
restants est supérieur à 0). Ajouter sur le
code de la bouée les instructions :
on (release) {
if (_root.nage=="oui") { if (_root.restant > 0) {
_root.PassageNiveau();
}
_root.nage = "non";…}
L’appel de fonction se trouve dans « Actions – Fonctions
définies par l’utilisateur – call function ». Il est
inutile de renseigner un objet (qui contiendrait la fonction) et il n’y
a pas de paramètre à passer. Comme pour les fonctions livrées
avec Flash, il est possible de passer des paramètres à la fonction.
Dans notre cas, il aurait été possible de passer le niveau
actuel…
Après disparition du poisson, le compteur _root.restant est décrémenté.
Si ce compteur arrive à 0, il faut effectuer le passage de niveau. Après
l’instruction : _root.restant = _root.restant - 1; qui se trouve sur
le « poisson bouton » dans le « poisson emballé » du « poisson
mouvement » et sur l’image 48 du calque programme du « clip
poisson mouvement»
La fonction permettant le passage de niveau sera créé dans l’image
1 du calque programme de la séquence jeux. Vous trouverez la création
de fonction dans « Actions – Fonctions définies par l’utilisateur – function ».
Il faut lui donner un nom : PassageNiveau, mais pas de paramètres. Si
le joueur est déjà au niveau 3 c’est la fin du jeu, sinon
faire les actions suivantes : incrémenter le niveau, augmenter nbpesket,
diminuer _root.proba, ce qui donne le code :
La séquence de fin est sur l’image 3 de la séquence
Intro et comprend les éléments suivants :
Un stop sur une nouvelle image clé vide du calque « prg »
Une étiquette de Fin sur une nouvelle image clé vide
du calque « etiquette »
L’intégralité du score qui est récupéré par « copier-coller
en place » du calque score de la séquence intro
et placé sur une image clé vide d’un
nouveau calque score. Pour être plus visible, le score
peut être passé en gras et d’une autre
couleur.
Le texte des Glénan sur une image clé vide
du calque Glénan (attention à ce qu’il
n’y ait rien sur l’image 2 de ce calque)
Le texte de l’image 1 copié sur une nouvelle
image clé vide, sur lequel on ajoute le texte « fin
de la partie ». Enregistrer et jouer.
Si arrivé au niveau 3 vous cliquez sur la bouée,
vous passez à la séquence de fin. A la fin
de fonction PassageNiveau la suite des instructions de la
bouée sont exécutées et 20 nouveaux
poissons passent encore à l’écran et
permettent d’augmenter le score.
Il faux arrêter le code de la bouée si le
niveau 3 est fini.
Comme il est impossible de mettre un break dans un test conditionnel,
une nouvelle variable FinOK sera
ajoutée avant de
passer à l’étiquette de fin dans la fonction
PasssageNiveau. On profitera de l’occasion pour supprimer
tous les poissons restant éventuellement sur la scène,
par une boucle for (utiliser « Actions – Contrôle
sur les clips – RemoveMovieClip » avec « "pesket" add
i » comme Cible) :
Sur la bouée, effectuer un test après le passage de niveau pour
savoir si FinOK est diffèrent de « oui » pour exécuter
le code qui devient :
on (release) {
if (_root.nage=="oui") {
if (_root.restant > 0) {
PassageNiveau();
} if (_root.FinOK <> "oui")
{
_root.nage = "non";
_root.restant = 0;
for (i=0; i<_root.nbpesket; i++) {
…
}}}}
Ne pas oublier d’initialiser _root.FinOK <> "non" dans
le calque programmation de l’image 1 dans la séquence « jeux ».
Le fichier swf fait 28 Ko, soit environ 9 secondes de chargement avec un
modem 56K, 4 secondes avec Numéris et moins d’1 seconde avec ADSL 512.
Il n’est donc pas nécessaire de mettre une boucle pour faire patienter
l’utilisateur jusqu’à la fin du chargement.
Le jeu est terminé ;-)
Un bug, des bogues
Dans toute programmation il y a des bogues (bug
en anglais). Ce court chapitre n’a pas pour objectif
de donner un cours sur le déboguage (qui pourrait
faire l’objet d’un autre manuel), mais
simplement de montrer quelques outils utilisables dans
Flash.
L’explorateur d’animations (menu fenêtre)
est un outil pratique pour lire le code généré.
Laisser uniquement l’icône de code ActionScript
affiché pour ne voir que le code des objets
présents dans les séquences. Si un clip,
comme le « poisson en mouvement », uniquement
est utilisé par la programmation, il n’apparaît
pas dans la liste de code.
Plus intéressant, mais plus lourd : le débogueur.
Plusieurs usages sont possibles, mais l’exemple suivant
permettra d’en découvrir un.
Pour connaître les paramètres des poissons quand
ils sont lancés et pour valider de façon pragmatique
des paramètres corrects :
Aller à l’image 48 du clip « poisson mouvement » de
la bibliothèque et sur le calque Programme, mettre
un point d’arrêt sur la ligne de commande this.removeMovieClip();
par clic droit sur la ligne ou en utilisant l’icône
idoine de la fenêtre Actions. Attention Ctrl+Entrée
(menu « Contrôle – Tester l’animation » n’active
pas les points d’arrêts. Utiliser le menu « Contrôle – Déboguer
l’animation » (Ctrl+Maj+Entrée). La fenêtre
Débogueur apparaît et l’animation est à l’arrêt,
ce qui permet de tester les paramètres de départ.
Cliquer sur le triangle vert (Continuer) pour exécuter
l’animation. Cliquer sur « Jouer » et dans
la fenêtre du Débogeur, sélectionner
_level0, puis l’onglet variable pour voir les variables
initialisées sur l’image 1 de la séquence
jeux et pour remarquer que PassageNiveau n’est pas
initialisé. Cliquer sur la bouée et attendre
que le jeu s’arrête en rencontrant un point d’arrêt.
Il est possible maintenant de se positionner sur l’occurrence
_level0.pesket9 et de regarder les propriétés
de l’objet. Un clip sur le triangle vert « continuer » permet
d’aller jusqu’au point d’arrêt suivant
: un autre poisson arrive en fin de course…
Très pratique également, la fonction trace
(Actions – Actions diverses – Trace) qui permet
d’envoyer des informations textuelles ou des variables
dans une fenêtre Sortie les informations souhaitées.
N’oubliez pas avant de compiler le programme d’enlever
du code ces fonctions traces ;-)
