Tutoriel Faulty Flap

Étape 6/6. Ajouter l'interface et le score

Le jeu n'est pas complet sans interface.

Dans l'Éditeur de scène > Barre d'outils des calques créez un nouveau Calque et sélectionnez-le. Depuis la Fenêtre de librairie faites glisser les 2 objets ci-dessous n'importe où en dehors de la Scène.

Note: Ce nouveau Calque 3 va contenir tous les objets d'interface. Cela facilite l'organisation de la Scène et permet aux objets d'interface d'être affichés devant les objets de jeu.

Dans l'Éditeur de liste d'événements ajoutez l'événement suivant dans le groupe Game.Intro:

Game.Intro
// Init
• Une seule action lorsque l'événement est en boucle
	(hud-title.Active) : Fixer la position à (240,200)
	(hud-tap.Active) : Fixer la position à (240,400)
	(hud-tap.Active) : Clignoter pendant 00"-20

Que se produit-il avec cet événement? Au début du jeu nous affichons l'interface d'introduction.
Nous fixons les coordonnées des 2 objets mentionnés précédemment à l'intérieur de la Scène.

Lancez l'application. Nous avons maintenant une sympathique interface d'introduction.

Mais cette interface d'introduction doit disparaître lorsque le joueur commence la partie. Réglons cela.

Ajoutez l'événement suivant dans le groupe Game.Play:

Game.Play
// Init
• Une seule action lorsque l'événement est en boucle
	(hud-title.Active) : Détruire
	(hud-tap.Active) : Détruire

Que se produit-il avec cet événement? Une fois que le groupe Game.Play est activé nous masquons l'interface d'introduction.
Nous détruisons les 2 objets mentionnés précédemment car nous n'en avons plus besoin.

Lancez l'application. C'est mieux comme ça.

Vous avez probablement remarqué qu'il manque une chose importante, l'affichage du score.

Dans l'Éditeur de scène > Barre d'outils des calques assurez-vous que le Calque 3 est sélectionné. Depuis la Fenêtre de librairie faites glisser l'objet ci-dessous n'importe où en dehors de la Scène.

Dans l'Éditeur de liste d'événements ajoutez l'événement suivant dans le groupe Game.Play:

Game.Play
// Init
• Une seule action lorsque l'événement est en boucle
	(hud-score-big.Counter) : Fixer la position en X à 240 + OWidth( "hud-score-big.Counter" ) / 2
	(hud-score-big.Counter) : Fixer la position en Y à 200

Que se produit-il avec cet événement? Une fois que le groupe Game.Play est activé nous affichons l'interface de jeu.
Nous fixons les coordonnées de hud-score-big.Counter à l'intérieur de la Scène. Nous fixons sa coordonnée X (position horizontale) à 240 pixels plus la moitié de sa propre Largeur afin que sa position soit horizontalement centrée dans la Scène.

Note: La coordonnée X 240 pixels correspond à la moitié de la Largeur de la Scène.

Lancez l'application et remarquez comment nous passons de l'interface d'introduction à l'interface de jeu.

Mais le score reste à zéro, nous allons remédier à cela.

Ajoutez l'événement suivant dans le groupe Game.Play:

Game.Play
// L'oiseau heurte un objet tuyau parent
Collision entre (bird.Active) et (pipe-gate.Active)
	: Jouer échantillon score
	(hud-score-big.Counter) : Ajouter 1 au compteur
	(hud-score-big.Counter) : Fixer la position en X à 240 + OWidth( "hud-score-big.Counter" ) / 2

Que se produit-il avec cet événement? Lorsque l'oiseau entre en collision avec un objet tuyau parent nous ajoutons 1 point au score du joueur. En d'autres termes, le joueur est récompensé par 1 point à chaque fois qu'il passe à travers une "colonne de tuyaux".
Nous incrémentons hud-score-big.Counter de 1 point. En faisant cela la Largeur de l'objet change. C'est pour cette raison que nous changeons sa coordonnée X, afin que sa position reste horizontalement centrée dans la Scène.

Lancez l'application. Le jeu est bien plus intéressant à jouer!

Nous avons presque terminé. Vous l'avez sans doute déjà remarqué, il n'y a pas d'interface game over ni aucun moyen pour le joueur de commencer une nouvelle partie après avoir perdu. Attaquons-nous à cela!

Dans l'Éditeur de scène > Barre d'outils des calques assurez-vous que le Calque 3 est sélectionné. Depuis la Fenêtre de librairie faites glisser les 7 objets ci-dessous n'importe où en dehors de la Scène:

Parce que nous avons besoin d'afficher ces objets uniquement à la fin de la partie, ils sont configurés comme ne pas Créer au démarrage. Ce réglage se trouve dans les Propriétés de l'Objet > Options du runtime. Cela permet d'économiser de la puissance de traitement au cours de la phase principale du jeu.

Note: Déplacer des objets inutiles en dehors de la Scène n'est pas la meilleure façon d'économiser de la puissance de traitement. Les rendre invisibles est plus efficace. Les détruire ou ne pas les créer l'est encore plus.

Dans les Propriétés de l'Application > onglet Valeurs créez une nouvelle Valeur globale et renommez-la bestScore. Laissez sa valeur par défaut à 0. Plus tard nous stockerons le meilleur score du joueur dans cette Valeur globale.

Dans l'Éditeur de liste d'événements ajoutez l'événement suivant dans le groupe Game.Outro:

Game.Outro
// Init
• Une seule action lorsque l'événement est en boucle
	(hud-score-big.Counter) : Rendre invisible
	: Créer (hud-gameover.Active) à (240,200) calque 3
	: Créer (hud-panel.Active) à (240,400) calque 3
	: Créer (hud-score.Counter) à (122,-12) de (hud-panel.Active)
	(hud-score.Counter) : Fixer le compteur à value ( "(hud-score-big.Counter)" )
	: Créer (hud-best.Counter) à (122,60) de (hud-panel.Active)
	(hud-best.Counter) : Fixer le compteur à bestScore
	: Créer (btn-ok.Active) à (240,600) calque 3

Que se produit-il avec cet événement? Une fois que le groupe Game.Outro est activé nous masquons l'interface de jeu et nous affichons l'interface game over.
Nous créons 5 des 7 objets mentionnés précédemment. Nous fixons hud-score.Counter à la valeur de hud-score-big.Counter, le score du joueur. Nous fixons hud-best.Counter à bestScore, le meilleur score du joueur.

Note: Contrairement aux autres objets que nous créons à des coordonnées relatives à la Scène, nous créons hud-score.Counter et hud-best.Counter à des coordonnées relatives à hud-panel.Active, sous les mentions "Score" et "Best respectivement.

Lancez l'application et remarquez comment nous passons de l'interface de jeu à l'interface game over.

Votre interface game over devrait ressembler à ceci pendant le Run time:

Capture d'écran du jeu pendant le run time

Mais le joueur ne peut toujours pas commencer une nouvelle partie. Faisons usage de ce bouton "Ok".

Dans l'Éditeur de liste d'événements ajoutez l'événement suivant dans le groupe Game.Outro:

Game.Outro
// Relancer
L'utilisateur clique avec le bouton gauche sur (btn-ok.Active)
	: Relancer la scène courante

Que se produit-il avec cet événement? C'est assez explicite. Si le joueur clique sur le bouton "Ok" le joueur commence une nouvelle partie. Pour ce faire nous relançons simplement la Scène.

Lancez l'application. Vous pouvez maintenant rejouer après avoir perdu.

Le "panneau d'affichage" indique invariablement un meilleur score de 0. Faisons maintenant usage de la Valeur globale bestScore.

Dans l'Éditeur de liste d'événements ajoutez l'événement suivant dans le groupe Game.Outro:

Game.Outro
// Meilleur score
(hud-score-big.Counter) > bestScore
+ Une seule action lorsque l'événement est en boucle
	: Fixer bestScore à value( "(hud-score-big.Counter)" )
	(hud-best.Counter) : Fixer le compteur à bestScore
	: Créer (hud-new.Active) à (12,13) de (hud-panel.Active)
	(hud-new.Active) : Clignoter pendant 00"-20

Que se produit-il avec cet événement? Si le joueur a battu son meilleur score, nous le mettons à jour et l'affichons. Nous affichons également la mention "New" (pour nouveau record).
Nous vérifions si hud-score-big.Counter est supérieur à bestScore. Si tel est le cas les actions suivantes sont déclenchées.
Nous fixons bestScore à la valeur de hud-score-big.Counter (mise à jour du meilleur score).
Nous fixons hud-best.Counter à bestScore, comme nous le faisons déjà dans un événement précédent.
Nous créons hud-new.Active à des coordonnées relatives à hud-panel.Active, à côté de la mention "Best".

Lancez l'application et tentez de battre votre meilleur score. Chaque fois que vous y parvenez, l'interface game over vous l'indiquera.

Pour finir nous allons récompenser le joueur en fonction de ses performances.

Ajoutez les événements suivants dans le groupe Game.Outro:

Game.Outro
// Médaille
(hud-score-big.Counter) >= 30
+ Une seule action lorsque l'événement est en boucle
	: Créer (hud-medal.Active) à (-80,8) de (hud-panel.Active)

• (hud-score-big.Counter) >= 60
+ Une seule action lorsque l'événement est en boucle
	(hud-medal.Active) : Force l'image de l'animation à 1

• (hud-score-big.Counter) >= 90
+ Une seule action lorsque l'événement est en boucle
	(hud-medal.Active) : Force l'image de l'animation à 2

Que se produit-il avec ces événements? Nous affichons une médaille différente en fonction du score atteint par le joueur.
Nous créons hud-medal.Active à des coordonnées relatives à hud-panel.Active, en-dessous de la mention "Medal". Puis nous fixons son Image d'animation à 0 (valeur par défaut), 1 ou 2 selon que le score du joueur est égal ou supérieur à 30, 60 ou 90 points.

Lancez l'application et essayez d'attraper quelques médailles!

Le jeu est maintenant achevé, félicitations pour être parvenu aussi loin!

Vous trouverez tous les fichiers de support pour ce tutoriel dans Clickteam Fusion > Tutorials > Faulty Flap. Cela inclut le fichier .mfa du jeu complet ainsi que les fichiers .wav utilisés pour les effets sonores.

Si vous voulez en apprendre davantage sur la construction de l'application pour divers ratios d'affichage, veuillez lire l'annexe de ce tutoriel.

Merci de penser à l'environnement avant d'imprimer ce document

Découvrez Clickteam Fusion 2.5

Partagez ce tutoriel