Composants de jeu ActionScript - Créer des objets visuels

turnmaryΛογισμικό & κατασκευή λογ/κού

5 Ιουλ 2012 (πριν από 4 χρόνια και 9 μήνες)

226 εμφανίσεις

2
Composants
de jeu ActionScript
Avant de créer des jeux complets, nous allons procéder en composant de petits morceaux.
Les programmes courts de ce chapitre offrent un aperçu de certains des concepts essentiels

d’A
ctionScript 3.0 et fournissent un certain nombre de blocs constructeurs qui pourront être
utilisés par la suite et dans vos propres jeux.
Codes sources
http://flashgameu.com
A3GPU202_GameElements.zip
Créer des objets visuels
Nos quelques premiers éléments impliquent de créer et de manipuler des objets à l’écran. Nous
récupérerons quelques clips de la bibliothèque, les transformerons en boutons, dessinerons des
formes et du texte et apprendrons à regrouper des éléments dans des sprites.
Livre-ActionScript.indb 35
31/05/11 15:22
© 2011 Pearson Education France – Jeux Flash avec ActionScript 3.0, 2e édition – Gary Rosenzweig
36

Créez des jeux Flash avec ActionScript

3.0
Utiliser des clips
Lorsque vous avez un clip dans la bibliothèque et que vous souhaitez l’importer dans votre jeu,
deux approches sont possibles.
La première consiste à faire glisser le clip sur la scène et à lui donner un nom d’occurrence
dans l’inspecteur des propriétés. La Figure 2.1 présente un clip placé sur la scène puis nommé
myClipInstance dans l’inspecteur des propriétés.
Figure 2.1
L’objet clip est nommé Mascot dans la bibliothèque, mais son occurrence dans la scène est nommée
myClipInstance.
Ensuite, vous pouvez manipuler les propriétés du clip en faisant référence à son nom, comme
ceci :
myClipInstance.x = 300;
myClipInstance.y = 200;
La seconde approche pour importer un clip dans votre jeu ne requiert que du code ActionScript.
Pour commencer, vous devez cependant rendre le clip accessible en définissant ses propriétés
de liaison. À cet effet, cliquez sur la colonne Liaison du côté droit de la liste de la bibliothèque.
À la Figure 2.1, le nom Mascot a déjà été placé à cet endroit. En général, je donne à ma classe
le même nom que celui du clip. Il est ainsi plus facile de le retenir.
Livre-ActionScript.indb 36
31/05/11 15:22
© 2011 Pearson Education France – Jeux Flash avec ActionScript 3.0, 2e édition – Gary Rosenzweig
Chapitre 2

Composants de jeu ActionScript

37
Nous pouvons maintenant créer de nouvelles copies du clip avec ActionScript. La méthode
consiste à créer une variable pour contenir l’instance
1
de l’objet et à utiliser addChild pour la
placer dans une liste d’affichage :
var myMovieClip:Mascot = new Mascot();
addChild(myMovieClip);
La variable nommée myMovieClip sera de type Mascot, ce qui signifie qu’elle peut contenir une
référence à un clip Mascot de la bibliothèque. Ensuite, nous utilisons la nouvelle syntaxe pour
créer une nouvelle copie de la classe Mascot. La fonction addChild ajoute cette copie de Mascot
à la liste d’affichage de l’animation Flash, ce qui la rend visible à l’écran.
Comme nous n’avons défini aucune autre propriété du clip, celui-ci apparaît à l’emplacement 0,
0 sur la scène. Nous pouvons définir son emplacement avec les propriétés x et y de l’instance.
Ilest aussi possible de définir son angle de rotation avec la propriété rotation. La valeur de
cette propriété s’exprime en degrés :
var myMovieClip:Mascot = new Mascot();
myMovieClip.x = 275;
myMovieClip.y = 150;
myMovieClip.rotation = 10;
addChild(myMovieClip);
Si tout cela paraît bien du travail pour un simple clip, notez qu’ActionScript permet facilement
d’ajouter plusieurs copies d’un clip. Le code qui suit crée ainsi dix copies de l’objet Mascot,
en changeant l’emplacement horizontal de manière à progresser de 50 pixels vers la droite à
chaque fois. Il fixe également l’échelle des clips à 50 % :
for(var i=0;i<10;i++) {
var mascot:Mascot = new Mascot();
mascot.x = 50*i+50;
mascot.y = 300;
mascot.scaleX = .5;
mascot.scaleY = .5;
addChild(mascot);
}
La Figure 2.2 présente le résultat de ces deux fragments de code. Le premier objet Mascot se
trouve en haut, aux coordonnées 275, 100. Les autres objets Mascot sont répartis de 50 à 500 au
niveau de la position verticale 300 et sont mis à l’échelle à 50 %.
Vous trouverez cet exemple dans l’animation UsingMovieClips.fla. Le code est inclus dans
l’image 1.
1.

NdT : puisqu’il s’agit ici de code, nous reprenons l’anglicisme universellement adopté dans la ter-
mi
nologie des langages de programmation. Dans l’interface Flash, on parlera plus naturellement des
"occurrences" d’un objet. L’anglais utilise dans les deux cas le même terme : "instance".
Livre-ActionScript.indb 37
31/05/11 15:22
© 2011 Pearson Education France – Jeux Flash avec ActionScript 3.0, 2e édition – Gary Rosenzweig
38

Créez des jeux Flash avec ActionScript

3.0
Figure 2.2
Onze mascottes ont été
créées et placées par le
code ActionScript.
Créer des boutons
Il est également possible de créer des boutons en n’utilisant que du code ActionScript. Ces bou-
tons peuvent être créés à partir de clips ou de symboles de bouton stockés dans la bibliothèque.
Pour transformer un clip en un bouton sur lequel l’utilisateur peut cliquer, vous n’avez qu’à lui
attribuer un écouteur. Le clip peut alors accepter des événements et notamment un événement
de clic de souris.
Le code suivant place un nouveau clip aux coordonnées 100, 150 :
var myMovieClip:Mascot = new Mascot();
myMovieClip.x = 100;
myMovieClip.y = 150;
addChild(myMovieClip);
Pour attribuer un écouteur, utilisez la fonction addEventListener. Incluez le type d’événement
auquel l’écouteur doit répondre. Il s’agit de valeurs constantes qui varient selon le type d’objet
et d’événement. Dans le cas présent, MouseEvent.CLICK réagira à un clic avec la souris. Ensuite,
incluez également une référence à la fonction que vous allez créer pour gérer l’événement (dans
le cas présent, clickMascot) :
myMovieClip.addEventListener(MouseEvent.CLICK, clickMascot);
La fonction clickMascot transmet simplement un message à la fenêtre Sortie. Dans une appli-
cation ou un jeu, cette fonction serait évidemment amenée à réaliser des opérations plus
productives :
function clickMascot(event:MouseEvent) {
trace("You clicked the mascot!");
}
Livre-ActionScript.indb 38
31/05/11 15:22
© 2011 Pearson Education France – Jeux Flash avec ActionScript 3.0, 2e édition – Gary Rosenzweig
Chapitre 2

Composants de jeu ActionScript

39
Pour mieux donner au clip l’apparence d’un bouton, vous pouvez attribuer la valeur true à
la propriété buttonMode de son instance. Le curseur se transforme alors en une main lorsque
l’utilisateur le survole :
myMovieClip.buttonMode = true;
Vous pouvez évidemment aussi créer des instances de symboles de bouton avec du code
ActionScript. Le principe est le même qu’avec les clips. Dans l’exemple suivant, le symbole est
lié en tant que classe LibraryButton :
var myButton:LibraryButton = new LibraryButton();
myButton.x = 450;
myButton.y = 100;
addChild(myButton);
La principale différence entre les clips et les symboles de bouton tient à ce que les boutons
possèdent quatre images spécialisées dans leur scénario. La Figure 2.3 présente le scénario de
notre symbole LibraryButton.
Figure 2.3
Le script d’un bouton
contient quatre images
représentant les trois
étapes du bouton et une
zone réactive.
La première image représente l’apparence du bouton lorsque le curseur ne le survole pas. La
seconde correspond à l’apparence du bouton lorsque le curseur le survole. La troisième image
définit l’apparence du bouton lorsque l’utilisateur a cliqué dessus sans avoir encore relâché le
bouton de la souris. Enfin, la dernière image correspond à la zone réactive du bouton. Elle n’est
jamais visible.
La dernière image peut inclure un graphisme plus large que le reste afin de permettre
à l’utilisateur de cliquer sur le bouton ou à proximité du bouton. Si les images visibles
du bouton incluent des zones vides (par exemple s’il s’agit simplement de lettres) ou
possèdent une forme bizarre, on peut donner à la dernière image une forme circulaire
ou rectangulaire plus standard qui représente la zone réactive. Vous pouvez enfin
créer des boutons invisibles en ne plaçant rien dans les images à l’exception de la
dernière.
La Figure 2.4 présente les trois états de bouton et la zone réactive d’un clip. Il ne s’agit là que
d’un exemple. Votre bouton peut présenter toutes sortes d’états Dessus et Abaissé.
Livre-ActionScript.indb 39
31/05/11 15:22
© 2011 Pearson Education France – Jeux Flash avec ActionScript 3.0, 2e édition – Gary Rosenzweig
40

Créez des jeux Flash avec ActionScript

3.0
Figure 2.4
Les quatre images qui
composent un symbole de
bouton.
Vous pouvez ajouter un écouteur au bouton de la même manière que vous l’avez fait avec un
clip :
myButton.addEventListener(MouseEvent.CLICK, clickLibraryButton);
function clickLibraryButton(event:MouseEvent) {
trace("You clicked the Library button!");
}
La troisième option pour créer un bouton consiste à utiliser le type SimpleButton afin de créer
un bouton de toutes pièces. Ou presque. Il vous faut en réalité un clip pour chacune des quatre
images du bouton : Haut, Dessus, Abaissé et Cliqué. Quatre éléments doivent donc figurer dans
la bibliothèque au lieu d’un.
Pour créer ce type de bouton, utilisez le constructeur SimpleButton. Chacun des quatre para-
mètres de SimpleButton doit être une instance de clip. Dans le cas présent, nous allons utiliser
quatre clips : ButtonUp, ButtonOver, ButtonDown et ButtonHit :
var mySimpleButton:SimpleButton = new SimpleButton(new ButtonUp(),
new ButtonOver(), new ButtonDown(), new ButtonHit());
mySimpleButton.x = 450;
mySimpleButton.y = 250;
addChild(mySimpleButton);
Vous pouvez également utiliser le même clip pour plusieurs des quatre paramètres
de SimpleButton. Par exemple, vous pouvez réutiliser l’état Haut du clip pour le clip
Cliqué. Vous pouvez du reste utiliser le même clip pour les quatre états. Le bouton sera
moins intéressant, mais il nécessitera moins de clips dans la bibliothèque.
Vous pouvez cette fois encore ajouter un écouteur au bouton que vous venez de créer avec la
commande addEventListener :
Livre-ActionScript.indb 40
31/05/11 15:22
© 2011 Pearson Education France – Jeux Flash avec ActionScript 3.0, 2e édition – Gary Rosenzweig
Chapitre 2

Composants de jeu ActionScript

41
mySimpleButton.addEventListener(MouseEvent.CLICK, clickSimpleButton);
function clickSimpleButton(event:MouseEvent) {
trace("You clicked the simple button!");
}
Le fichier MakingButtons.fla inclut le code de ces trois boutons et transmet un message diffé-
rent au panneau Sortie lorsque l’utilisateur clique sur chacun d’entre eux.
Dessiner des formes
Tous les éléments à l’écran ne doivent pas nécessairement provenir de la bibliothèque. Vous
pouvez utiliser ActionScript 3.0 pour tracer des lignes et des formes élémentaires.
Chaque objet d’affichage possède un calque graphique auquel vous pouvez accéder avec la pro-
priété graphics. C’est le cas d’ailleurs de la scène elle-même, à laquelle vous pouvez accéder
directement en écrivant du code dans le scénario principal.
Pour dessiner une ligne simple, définissez le style de ligne, accédez au point de départ de la
ligne, puis tracez la ligne jusqu’au point de terminaison :
this.graphics.lineStyle(2,0x000000);
this.graphics.moveTo(100,200);
this.graphics.lineTo(150,250);
Ce code définit un style de ligne de 2 pixels de large et de couleur noire, puis trace la ligne en
partant de 100, 200 pour atteindre 150, 250.
Le mot-clé this n’est pas indispensable mais, lorsque vous souhaitez que la ligne soit
dessinée dans une instance de clip spécifique, vous devez l’indiquer en utilisant son
nom. Par exemple :
myMovieClipInstance.graphics.lineTo(150,250);
Nous incluerons donc le mot-clé this ici afin de nous le rappeler et de rendre le code
plus facile à réutiliser dans vos propres projets.
Il est également possible de créer une ligne courbe avec curveTo. Dans ce cas, vous devez spé-
cifier un point de terminaison et un point d’ancrage. Ce processus peut être un peu compliqué
si vous n’êtes pas familiarisé avec les méthodes de création des courbes de Bézier. Il m’a fallu
quelques tentatives avant de parvenir au résultat souhaité :
this.graphics.curveTo(200,300,250,250);
Ensuite, nous allons compléter la séquence de lignes par une autre ligne droite :
this.graphics.lineTo(300,200);
Nous venons de créer le trait présenté à la Figure 2.5, composé d’une ligne droite, d’une courbe
et d’une nouvelle ligne droite.
Livre-ActionScript.indb 41
31/05/11 15:22
© 2011 Pearson Education France – Jeux Flash avec ActionScript 3.0, 2e édition – Gary Rosenzweig
42

Créez des jeux Flash avec ActionScript

3.0
Figure 2.5
Une ligne, une courbe et
une autre ligne composent
ce dessin.
Il est aussi possible de dessiner des formes. La plus simple est le rectangle. La fonction drawRect
prend une position pour le coin supérieur gauche puis une largeur et une hauteur :
this.graphics.drawRect(50,50,300,250);
Vous pouvez également dessiner un rectangle à bords arrondis. Les deux paramètres supplé-
mentaires définissent la largeur et la hauteur des bords arrondis :
this.graphics.drawRoundRect(40,40,320,270,25,25);
Il est aussi possible de créer un cercle et une ellipse. La fonction drawCircle prend en para-
mètres les coordonnées du centre et le rayon du cercle :
this.graphics.drawCircle(150,100,20);
La fonction drawEllipse ne procède pas de la même manière, puisqu’elle prend les mêmes
paramètres de coin supérieur gauche et de taille que la fonction drawRect :
this.graphics.drawEllipse(180,150,40,70);
Vous pouvez encore créer des formes remplies en commençant par une fonction beginFill et
un paramètre de couleur de remplissage :
this.graphics.beginFill(0x333333);
this.graphics.drawCircle(250,100,20);
Pour cesser d’utiliser un remplissage, exécutez la commande endFill.
La Figure 2.6 présente le résultat de l’ensemble des tracés que nous venons d’effectuer.
La plupart de ces fonctions de dessin possèdent d’autres paramètres. Par exemple, lineStyle
peut aussi prendre un paramètre alpha afin de dessiner une ligne semi-transparente. Consul-
tez la documentation pour chacune de ces fonctions si vous souhaitez en apprendre plus à ce
sujet.
Livre-ActionScript.indb 42
31/05/11 15:22
© 2011 Pearson Education France – Jeux Flash avec ActionScript 3.0, 2e édition – Gary Rosenzweig
Chapitre 2

Composants de jeu ActionScript

43
Vous pourrez retrouver les précédents exemples dans le fichier d’exemple DrawingShapes.fla.
Figure 2.6
Deux lignes, une courbe,
un cercle, une ellipse, un
cercle rempli, un rectangle
et un rectangle arrondi.
Tracer du texte
Les exemples Hello World du Chapitre 1 ont montré comment créer des objets TextField afin
de placer du texte à l’écran. Le processus implique de créer un nouvel objet TextField, de définir
sa propriété text et d’utiliser addChild pour l’ajouter dans la scène :
var myText:TextField = new TextField();
myText.text = "Check it out!";
addChild(myText);
Vous pouvez également définir l’emplacement du champ avec les propriétés x et y :
myText.x = 50;
myText.y = 50;
De la même manière, vous pouvez définir la largeur et la hauteur du champ :
myText.width = 200;
myText.height = 30;
Parfois, il peut être difficile d’estimer la taille d’un champ texte. Une largeur de 200 peut sem-
bler suffisante pour contenir le texte courant, mais pourra-t-elle contenir un autre texte si vous
décidez de le changer ? L’un des moyens rapides de voir la taille effective d’un champ texte
consiste à positionner la propriété border à true pendant que vous effectuez vos tests :
myText.border = true;
La Figure 2.7 présente le champ texte avec une bordure afin de pouvoir en apercevoir la taille.
Livre-ActionScript.indb 43
31/05/11 15:22
© 2011 Pearson Education France – Jeux Flash avec ActionScript 3.0, 2e édition – Gary Rosenzweig
44

Créez des jeux Flash avec ActionScript

3.0
Figure 2.7
Un champ texte à 50, 50
avec une largeur de 200
et une hauteur de 30.
Il convient aussi presque toujours de s’occuper de la propriété selectable. Dans la plupart des
cas, vous ne souhaiterez pas qu’elle soit activée, or il s’agit du réglage par défaut. Si vous igno-
rez cette propriété, le curseur du joueur se transforme en un curseur d’édition de texte lorsqu’il
survole le texte et lui donne la possibilité de le sélectionner :
myText.selectable = false;
Lorsque vous créerez du texte, il y a toutes les chances que vous souhaiterez définir explici-
tement la police, la taille et le style du texte. Ces réglages ne peuvent se réaliser directement.
Vous devez en fait créer un objet TextFormat, puis positionner ses propriétés font, size et bold :
var myFormat:TextFormat = new TextFormat();
myFormat.font = "Arial";
myFormat.size = 24;
myFormat.bold = true;
Vous pouvez également créer un objet TextFormat avec une seule ligne de code. Par
exemple, l’exemple précédent pourrait être réalisé de la manière suivante :
var myFormat:TextFormat = new TextFormat("Arial", 24, 0x000000, true);
La fonction constructeur TextFormat accepte jusqu’à treize paramètres, mais vous
pouvez utiliser la valeur null pour ignorer tous les paramètres que vous ne souhaitez
pas définir. Consultez la documentation pour en obtenir une liste complète.
Maintenant que nous avons un objet TextFormat, il existe deux moyens de l’utiliser. Le premier
consiste à utiliser setTextFormat sur un objet TextField. Cette approche modifie le texte afin
d’utiliser le style courant. Il n’est cependant pas nécessaire d’y recourir à chaque fois que vous
changez la propriété text du champ.
L’approche préférable dans ce cas consiste à utiliser defaultTextFormat. Vous devez le faire
avant de définir la propriété text. Le text suivant récupère alors les propriétés de style décrites
Livre-ActionScript.indb 44
31/05/11 15:22
© 2011 Pearson Education France – Jeux Flash avec ActionScript 3.0, 2e édition – Gary Rosenzweig
Chapitre 2

Composants de jeu ActionScript

45
dans TextFormat. En fait, à chaque fois que vous définissez le texte de cet objet TextField, vous
utilisez le même style. Cette approche sera le plus souvent la meilleure pour l’usage que nous
ferons des champs texte lors du développement de nos jeux :
myText.defaultTextFormat = myFormat;
La Figure 2.8 présente le champ avec son format défini.
Figure 2.8
Le format texte a été défini
pour une police Arial
à 24 points et en gras.
Étudiez l’ensemble des propriétés de TextFormat dans la documentation si vous prévoyez
d’étendre ses capacités. Vous pouvez vous amuser avec dans le fichier d’exemple DrawingText.
fla. Vous pouvez également choisir d’utiliser des objets StyleSheet et du texte balisé en HTML
à l’aide de la propriété htmlText de l’objet TextField. La fonctionnalité des feuilles de style est
très étoffée : consultez la documentation si vous souhaitez en apprendre plus à ce sujet.
Créer du texte lié
Qu’obtient-on en croisant un champ texte et un bouton ? Un lien hypertexte, évidemment. Ces
éléments peuvent eux aussi se créer facilement avec du code ActionScript 3.0.
Le moyen le plus simple de créer du texte lié dans un TextField consiste à utiliser la propriété
htmlText du champ et à lui fournir du code HTML au lieu du texte brut utilisé par la propriété
text :
var myWebLink:TextField = new TextField();
myWebLink.htmlText = "Visit <A HREF='http://flashgameu.com'>FlashGameU.com</A>!";
addChild(myWebLink);
Ce code fonctionne comme il le ferait dans une page web, à ceci près qu’il n’existe pas de
modification de style par défaut pour le lien. Il prend la même couleur et le même style que
le reste du texte. Néanmoins, lorsque l’utilisateur clique dessus, il quitte la page web dans son
navigateur et se trouve conduit jusqu’à celle spécifiée par le lien.
Livre-ActionScript.indb 45
31/05/11 15:22
© 2011 Pearson Education France – Jeux Flash avec ActionScript 3.0, 2e édition – Gary Rosenzweig