Tutoriel Faulty Flap

Étape 5/6. Ajouter le sol

Il est probablement temps d'ajouter quelque chose de visuellement plus attrayant que la grande zone noire en bas de la Scène qui constitue le sol jusqu'à présent.

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 ground.Active dans la Scène aux coordonnées (0,656).

Il s'agit d'un objet Actif, le Mouvement balle qui rebondit lui est assigné avec une Direction initiale de 16 (gauche) et une Vitesse initiale de 25. Son Mouvement est activé au démarrage.

Bien entendu nous avons besoin de plus d'1 instance de ground.Active pour remplir toute la Largeur de la Scène. Faites un clic droit sur ground.Active et sélectionnez Dupliquer. Dans la boîte de dialogue saisissez 1 pour les Lignes et 15 pour les Colonnes puis validez. Nous disposons maintenant d'un total de 15 instances de ground.Active, espérons que cela est suffisant.

Votre Scène devrait ressembler à ceci:

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

Lancez l'application. Les objets sol quittent rapidement la Scène par la gauche laissant apparaître la zone noire. Bien raisonné, nous allons faire boucler leur position!

Dans l'Éditeur de liste d'événements insérez un nouveau groupe d'événements appelé ground.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 sol.
Ensuite ajoutez-y l'événement suivant:

ground.Active
// Boucler position en X
(ground.Active) quitte le terrain à gauche
	(ground.Active) : Faire le tour

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

Lancez l'application. Les objets sol sont effectivement repositionnés sur le côté droit de la Scène, mais pourquoi est-ce qu'il y a un espace vide?

Rappelez-vous de la Propriété de la scène appelée Largeur virtuelle, nous l'avions préalablement fixé à 768 pixels. Cela signifie qu'en faisant Faire le tour de la zone de jeu à un objet lorsqu'il quitte la Scène par la gauche, il est repositionné à la coordonnée X 768 pixels.
Mais l'espace horizontal total occupé par nos objets sol est égal à 480 pixels seulement, c-à-d 15 instances de ground.Active dont la largeur est de 32 pixels.
Donc pour combler l'espace vide nous avons besoin de 9 instances supplémentaires de ground.Active. Parce qu'avec un total de 24 (15 + 9) instances de ground.Active, l'espace horizontal total occupé par nos objets sol est égal à 768 pixels. Voilà qui colle parfaitement!

Dans l'Éditeur de scène faites un clic-droit sur l'instance de ground.Active située le plus à droite et sélectionnez Dupliquer. Dans la boîte de dialogue saisissez 1 pour les Lignes et 10 pour les Colonnes puis validez. Nous disposons maintenant d'un total de 24 instances de ground.Active.

Votre Scène devrait ressembler à ceci:

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

Lancez l'application. Il n'y a pas plus d'espace vide, et le jeu a l'air bien plus attrayant avec ce sol qui défile.

Nous n'avons pas tout à fait terminé avec le sol. Il doit cesser de se déplacer lorsque l'oiseau heurte un obstacle.

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
	(ground.Active) : Stop

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

Lancez l'application. Nous y sommes presque!

Maintenant que tous les objets qui composent le décor sont présents dans la Scène, nous allons leur donner quelques variations de couleur.
Dans les Propriétés de l'Application > onglet Valeurs créez une nouvelle Valeur globale et renommez-la sceneryVariant. Fixez sa valeur par défaut à 3. Nous allons stocker la variante actuelle du décor dans cette Valeur globale.

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

Game.Init
// Décor
En début de scène
	: Fixer sceneryVariant à ( sceneryVariant + 1 ) mod 4
	(pipe-top.Active) : Force l'image de l'animation à sceneryVariant
	(pipe-bottom.Active) : Force l'image de l'animation à sceneryVariant
	(ground.Active) : Force l'image de l'animation à sceneryVariant
	(horizon.Active) : Force l'image de l'animation à sceneryVariant

Que se produit-il avec cet événement? Au début du jeu nous fixons la Valeur globale sceneryVariant à une valeur entière faisant un cycle de 0 à 3.
Nous fixons également l'Image d'animation de plusieurs objets à sceneryVariant de telle sorte qu'ils affichent une image différente, indexée de 0 à 3.

Note: Dans l'expression ci-dessus nous utilisons l'opérateur mod (modulo) qui renvoie le reste d'une division. Il est souvent utilisé pour faire boucler une valeur de 0 à une valeur donnée.

Lancez l'application. Chaque fois que vous perdez et rejouez, la Scène est relancée et le décor change faisant un cycle de 4 variantes. Mais quelque chose ne vas pas, non?

Note: Utilisez le bouton le plus à gauche du débogueur (Rewind) afin de relancer la Scène.

Arrangeons la Couleur de fond de la Scène. Ajoutez l'événement suivant dans le groupe Game.Init, juste après l'événement que nous avons ajouté précédemment:

Game.Init
// Décor
En début de scène
+ sceneryVariant = 0
	: Fixer couleur de fond à GetRGB( 60, 188, 252 )
	
• En début de scène
+ sceneryVariant = 1
	: Fixer couleur de fond à GetRGB( 252, 160, 68 )
	
• En début de scène
+ sceneryVariant = 2
	: Fixer couleur de fond à GetRGB( 248, 120, 248 )
	
• En début de scène
+ sceneryVariant = 3
	: Fixer couleur de fond à GetRGB( 152, 120, 248 )

Que se produit-il avec cet événement? Au début du jeu nous vérifions la valeur de sceneryVariant et changeons la Couleur de fond de la Scène. Nous utilisons l'expression GetRGB() disponible sous l'objet Spécial, elle nous permet de saisir les valeurs RGB d'une couleur. Ces 4 couleurs sont celles utilisées pour le ciel dans les 4 Images d'animation de horizon.Active.

Note: Pour obtenir les valeurs RGB d'une couleur utilisée dans l'image d'un objet, ouvrez L'Éditeur d'image ou L'Éditeur d'animation comme si vous alliez éditer l'image. Sélectionnez ensuite la couleur désirée avec la pipette. Les valeurs RGB de la couleur sélectionnée sont indiquées sous la palette de couleurs.

Lancez l'application. Maintenant la Couleur de fond de la Scène correspond au reste du décor.

Découvrez Clickteam Fusion 2.5

Partagez ce tutoriel