Tutoriel Faulty Flap

Étape 4/6. Ajouter les tuyaux

Ajoutons les tuyaux mortels que le joueur va devoir éviter.

Dans l'Éditeur de scène > Barre d'outils des calques assurez-vous que le Calque 2 est sélectionné. Depuis la Fenêtre de librairie faites glisser pipe-gate.Active dans la Scène aux coordonnées (216,328). Faites également glisser pipe-top.Active aux coordonnées (216,248) juste au-dessus de pipe-gate.Active. Pour finir faites glisser pipe-bottom.Active aux coordonnées (216,408) juste en-dessous de pipe-gate.Active.

Votre Scène devrait ressembler à ceci:

Capture d'écran de la Scène de votre application

Voici notre tout premier obstacle tuyau, mais pourquoi est-il composé de 3 objets Actifs?
pipe-top.Active et pipe-bottom.Active sont des objets enfants, nous allons simplement les faire suivre pipe-gate.Active leur objet parent. Faire cela est très facile avec Clickteam Fusion. Lisez la suite pour savoir comment.

pipe-gate.Active est configuré comme étant non Visible en début de scène, le Mouvement Balle qui rebondit lui est assigné avec une Direction initiale de 16 (gauche) et une Vitesse initiale de 25. Son Mouvement est stoppé au démarrage.

Bien entendu nous avons besoin de plus de tuyaux. Maintenez Ctrl et faites glisser pipe-gate.Active aux coordonnées (472,328). Faisons-le encore une fois, maintenez Ctrl et faites glisser pipe-gate.Active aux coordonnées (728,328). Ensuite créez les instances additionnelles de pipe-top.Active et pipe-bottom.Active de la même façon. Nous disposons maintenant de 3 instances de chaque objet.

Votre Scène devrait ressembler à ceci:

Capture d'écran de la Scène de votre application

Au lieu d'utiliser de nombreux tuyaux dans une immense Scène que nous ferions défiler, nous n'utiliserons que quelques tuyaux que nous allons déplacer en direction du joueur et que nous allons repositionner lorsqu'ils quittent la Scène. Cela produira l'illusion parfaite d'un défilement horizontal infini.

Mais comment faire pour que les objets enfants suivent leur objet parent?

Dans l'Éditeur de liste d'événements insérez un nouveau groupe d'événements appelé pipes.Active et laissez coché Actif quand la scène commence. Déplacez-le à la fin de la liste des événements. Ce groupe contiendra exclusivement des événements relatifs aux objets tuyau.
Ensuite ajoutez-y l'événement suivant:

pipes.Active
// Appairer les objets parents/enfants
• Toujours
	(pipe-top.Active) : Fixer la position en X à X( "(pipe-gate.Active)" )
	(pipe-top.Active) : Fixer la position en Y à Y Top( "(pipe-gate.Active)" )
	(pipe-bottom.Active) : Fixer la position en X à X( "(pipe-gate.Active)" )
	(pipe-bottom.Active) : Fixer la position en Y à Y Bottom( "(pipe-gate.Active)" )

Que se produit-il avec cet événement? Nous fixons constamment (Toujours) les coordonnées des objets enfants aux coordonnées de l'objet parent.
Même s'il existe plusieurs instances de chaque objet, Clickteam Fusion sélectionne une instance de chaque objet et les "assemble", formant ainsi des "groupes" d'instances. Ce système très commode s'appelle appariement d'objets.

Lancez l'application et remarquez comme les tuyaux sont statiques. C'est parce que leur mouvement est stoppé.

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

Game.Play
// Init
• Une seule action lorsque l'événement est en boucle
	(pipe-gate.Active) : Démarrer

Que se produit-il avec cet événement? Une fois que le groupe Game.Play est activé nous démarrons le Mouvement des tuyaux. Cela semble assez approprié, n'est-ce pas?

Lancez l'application. Les tuyaux quittent la Scène par la gauche, mais ne reviennent jamais. Réglons cela.

Ajoutez l'événement suivant avant le premier événement dans le groupe pipes.Active:

pipes.Active
// Boucler position en X
(pipe-gate.Active) quitte le terrain à gauche
	(pipe-gate.Active) : Faire le tour

Que se produit-il avec cet événement? Lorsque pipe-gate.Active quitte la Scène par la gauche nous faisons boucler sa position horizontale sur le côté opposé de la Scène.

Lancez l'application. Les tuyaux sont maintenant repositionnés sur le côté droit de la Scène, mais certains d'entre eux se chevauchent. Corrigeons cela.

L'action Faire le tour fonctionne en conjonction avec la Taille virtuelle de la Scène. Dans notre cas nous sommes intéressés par la Largeur virtuelle. Ce réglage se trouve dans les Propriétés de la Scène > onglet Configuration. Par défaut la Largeur virtuelle et la Hauteur virtuelle de la Scène sont égales à sa Taille.

Actuellement lorsque pipe-gate.Active quitte la Scène par la gauche, l'action Faire le tour le repositionne à la coordonnée X 480 pixels, parce que la Largeur virtuelle de la Scène est fixée à 480 pixels. Cette valeur est trop petite et provoque le chevauchement des objets tuyau. Alors à quelle valeur devrions-nous fixer la Largeur virtuelle?

Observez les objets tuyau que nous avons créés dans la Scène. Les "colonnes de tuyaux" sont espacées de 256 pixels, et nous avons 3 colonnes. Si nous multiplions ces deux chiffres nous obtenons 768 pixels, ce qui correspond à l'espace horizontal total occupé par les 3 "colonnes de tuyaux". Nous allons donc fixer la Largeur virtuelle de la Scène à 768 pixels. Lorsque pipe-gate.Active quitte la Scène par la gauche, l'action Faire le tour le repositionne à la coordonnée X 768 pixels. Cela devrait répondre à nos besoins.

Lancez l'application. Les colonnes de tuyaux sont maintenant régulièrement espacées!

Mais les tuyaux ont tous exactement la même position verticale. Ce n'est pas très amusant, nous allons donc introduire un peu de hasard.

Dans l'Éditeur de liste d'événements ajoutez l'événement suivant après le premier événement dans le groupe pipes.Active:

pipes.Active
// Randomiser position en Y
• La position en X de (pipe-gate.Active) > 480
+ Une seule action lorsque l'événement est en boucle
	(pipe-gate.Active) : Fixer la position en Y à 232 + 32 * Random(10)

Que se produit-il avec cet événement? Lorsque pipe-gate.Active est en dehors de la Scène à droite, nous fixons sa coordonnée Y à une valeur aléatoire comprise entre 232 et 520 pixels, avec 9 intervalles de 32 pixels.

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

Lancez l'application. N'est-ce pas plus drôle ainsi?

Au début de la partie les tuyaux doivent se trouver en dehors de l'écran. Nous pourrions les éloigner en utilisant l'Éditeur de scène, mais il est préférable de les laisser en place et d'utiliser des événements.

Insérez un nouveau groupe d'événements appelé Game.Init et laissez coché Actif quand la scène commence. Déplacez ce groupe en haut de la liste des événements. Ce groupe contiendra tous les événements qui doivent être exécutés une fois au tout début du jeu.
Ensuite ajoutez-y l'événement suivant:

Game.Init
// Tuyaux
En début de scène
	(pipe-gate.Active) : Fixer la position en X à X( "(pipe-gate.Active)" ) + 600

Que se produit-il avec cet événement? Au début du jeu nous déplaçons simplement les tuyaux de 600 pixels vers la droite de leur position initiale.

Lancez l'application. Maintenant le danger arrive quelques secondes après le début de la partie.

Rien ne se passe lorsque l'oiseau heurte les tuyaux, nous allons faire des tests de collision!

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

Game.Play
// L'oiseau heurte un objet tuyau enfant
Collision entre (bird.Active) et (pipe-top.Active)
	: Jouer échantillon lose
	(bird.Active) : Changer la séquence d'animation pour Chute
	: Activer le groupe "Game.Outro"
	: Désactiver le groupe "Game.Play"

• Collision entre (bird.Active) et (pipe-bottom.Active)
	: Jouer échantillon lose
	(bird.Active) : Changer la séquence d'animation pour Chute
	: Activer le groupe "Game.Outro"
	: Désactiver le groupe "Game.Play"

Que se produit-il avec ces événements? Lorsque l'oiseau entre en collision avec un objet tuyau enfant, nous affichons sa Séquence d'Animation de chute. Et plus important encore, nous désactivons le groupe Game.Play dans lequel nous testons le contrôle joueur, empêchant ainsi d'autres sauts.
En outre nous activons le groupe Game.Outro pour une utilisation ultérieure.

Note: C'est ici que l'on s'aperçoit de l'intérêt d'utiliser deux groupes d'événements en rapport avec l'oiseau. Lorsque l'oiseau heurte un objet tuyau, le groupe bird.Active reste activé laissant l'oiseau tomber jusqu'à ce qu'il entre en collision avec les objets de décor.

Lancez l'application et essayez de voler aussi loin que vous le pouvez! L'oiseau tombe lorsqu'il heurte un tuyau.

Nous n'avons pas tout a fait terminé avec les tuyaux. Ils doivent cesser de se déplacer lorsque l'oiseau heurte l'un d'entre eux.

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

Game.Outro
// Init
• Une seule action lorsque l'événement est en boucle
	(pipe-gate.Active) : Stop

Que se produit-il avec cet événement? Une fois que le groupe Game.Outro est activé nous stoppons le Mouvement des tuyaux.

Lancez l'application et heurtez un tuyau. Les tuyaux cessent de se déplacer. En y pensant, notre jeu est presque achevé.

Un dernier détail. L'oiseau est parfois entièrement caché derrière les tuyaux. C'est parce que ces derniers ont été ajoutés dans la Scène après l'oiseau, et donc les tuyaux sont affichés devant lui.

Pour résoudre cela sélectionnez bird.Active dans l'Éditeur de scène. Ensuite dans le menu principal sélectionnez Arranger > Ordre > Au premier plan. Désormais bird.Active est affiché devant les autres objets qui se trouvent sur le même Calque.

Découvrez Clickteam Fusion 2.5

Partagez ce tutoriel