TUTORIEL CLICKTEAM FUSION La gestion des mouvements, animations et graphiques
Résumé Dans cette session, vous allez apprendre à maitriser la gestion des explosions de vos objets en utilisant les graphismes, les animations, les mouvements prédéfinis de ClickTeam Fusion…
christophe thomas [Adresse de messagerie]
MOUVEMENTS, ANIMATIONS ET GRAPHIQUES
Au cours de cette session, nous allons aborder tout ce qui touche à la gestion des déplacements et à la façon de donner vie à votre jeu. Vous découvrirez également les bases de l'animation ainsi que l'éditeur d'animation. Vous découvrirez également les types de mouvement intégré, qui sont l'un des atouts les plus essentiels de Fusion. Dans cette session, nous allons couvrir : • la création d'animations • particules simple • Les Mouvements prédéfinis de Clickteam • l'importation de graphiques et d'animations • Travailler avec des calques
LA CRÉATION D'ANIMATIONS - COMMENT FAIRE EXPLOSER DES CAISSES! Il est temps de tester vos projectiles sur quelque chose! Pour cette raison, vous allez créer un simple objet actif. Dessinez une caisse en bois ou en tout ce que vous avez toujours voulu souffler en morceaux. L'éditeur d'animation est placé dans la partie inférieure de l'éditeur d'image que vous avez déjà utilisé pour créer des graphiques (non animés) simples. Chaque objet actif peut avoir un certain nombre d'animations, et ces animations sont utilisées lorsque l'objet se déplace sur l'écran. Chaque objet actif peut avoir un nombre illimité d'animations. Il y a plusieurs animations par défaut avec des noms allant de « arrêté » à « se lever », mais vous pouvez ajouter autant d’animations que vous le souhaitez avec des noms personnalisés. Soyez prudent lorsque vous utilisez les valeurs par défaut des animations car différents types de mouvement de fusion et d'événements se déclenchent avec certaines animations automatiquement par défaut. C’est le revers de la médaille.
Nous utiliserons la « disparition » prédéfinie pour l’implosion de notre caisse. Fusion jouera automatiquement l'animation de la disparition/implosion de notre boite lorsque votre objet est détruit.
P a g e 1 | 13
Pour l'instant, copiez votre boite dans l’animation « arrêté » et coller le graphique à la première image de disparition de l'emplacement. Maintenant, copier et coller la même caisse afin de créer une deuxième image pour la disparition de l'animation. Essayez de détruire votre caisse peu à peu jusqu’à la faire disparaitre. C’est pour cela que nous parlions d’implosion. Vous pourriez, par exemple, utiliser l'outil Gomme pour effacer certaines parties de votre caisse. Puis copiez et collez ce légèrement détruite caisse à l’image 3 et effacer un peu plus. Répétez cette étape aussi souvent que vous le souhaitez pour créer votre première animation.
Pour modifier la vitesse de votre animation, allez à l'onglet Options Direction, et de définissez la vitesse d'animation avec la valeur de votre choix. Vous pouvez cliquer sur le bouton Lecture dans le coin inférieur droit de l'éditeur d'image pour afficher un aperçu de votre animation et assurez-vous que la vitesse de lecture est appropriée. Bien sûr, vous devez tester vos animations en runtime pour trouver la bonne vitesse.
Une règle simple pour les animations dans Fusion : plus vous avez d'images dans une section d'animation, plus votre animation sera fluide. L'inconvénient est que l'animation met plus de temps à se dérouler, de sorte qu'il pourrait rendre vos commandes de jeux molles ou moins réactives. En général, pour le genre de jeux que nous réalisons, quatre à six images suffisent. Pour certains jeux plus complexes avec des graphismes plus évolués, il faut utiliser 10 à 12 images. En fin de compte, cela dépend de votre style, la taille de fichier souhaité, l’apparence que vous souhaitez donner à votre jeu, et bien sûr du temps que vous pouvez passer sur les graphismes !
Pour résumer : vous devez juste créer une caisse avec un graphisme simple pour l’animation « arrêté » et une animation d’implosion de la caisse dans l’animation « disparition ». Vous avez aussi réglé la vitesse de votre animation. Vous devez maintenant écrire un événement qui va détruire la caisse lorsqu'elle sera touchée par une balle. Accédez à l'éditeur d'événements et de créer la condition suivante :
Lors de la collision entre projectile et la caisse Cette condition qui déclenchera les deux mesures suivantes :
P a g e 2 | 13
Détruire projectile & Détruire Caisse Vous pouvez aussi inclure votre arrière-plan ou d’autres obstacles dans cette condition. Le projectile sera détruit s’il touche votre environnement. Si vous appuyez sur F7 pour tester votre réalisation, vous vous rendrez compte que votre caisse explosera lorsqu’elle sera touchée avec l'un de vos balles! EFFETS PARTICULES SIMPLE Nous allons à présent ajouter un effet de particules simples pour ajouter un « effet spécial » à l’explosion de la caisse. Nous voulons quelques petits pixels pour « exploser » à partir de la caisse et rebondir un peu avant qu'ils ne soient détruits eux-mêmes. Pour produire cet effet, créer un nouvel objet actif; dessiner juste une petite particule de la couleur de votre caisse et le dupliquer quatre fois dans votre animation « arrêté ». Définissez la vitesse de cette animation à 4, et fermer l’éditeur d'images. Notre boite explose en plusieurs planches. Nous nommerons les particules de notre explosion « planches ».
Vous allez maintenant en apprendre un peu plus sur les mouvements prédéfinis Clickteam. Accédez aux propriétés de vos particules et sélectionnez mouvement Flipper dans les types de mouvement . Le mouvement de Flipper permet à votre objet actif de se déplacer comme une boule de flipper, c’est-à-direune balle rebondissant avec un effet de gravité. C'est exactement ce que nous voulons pour nos particules d’explosions! Définir la gravité de 12 et la vitesse initiale à 30. Définissez également la direction initiale de 6 à 8 de la partie supérieure des flèches. Ceci définit l'orientation de l'objet quand il commence son mouvement ou à partir de la position où l'objet a été créé. Si vous sélectionnez plus d'une direction, une direction aléatoire à l'intérieur de la sélection sera choisie. Dans notre cas, la particule rebondira jusqu'à la vitesse initiale de 30 et une gravité de 12, qui va faire glisser l'objet vers le bas après un certain temps.
P a g e 3 | 13
Ouvrir l'éditeur d'événements et de l'apparence de votre ancienne condition : sur collision entre projectile et la caisse. Passez à la cinquième colonne (créer des objets), et sélectionnez Créer l'objet. Recherchez votre particule/planche, sélectionnez-la, puis choisissez Relatif à la caisse quand la prochaine fenêtre contextuelle apparaît. Cela va créer une particule/planche par rapport à votre caisse lorsqu'elle est touchée par un projectile. Dupliquer la même action (créer les planches par rapport à la boîte) dans ce même lieu six fois pour créer six particules lorsque l'événement se déroule.
Créer une nouvelle condition, et définir le mouvement pour que vos planches rebondissent lorsqu'elles entrent en collision avec le décor (votre sol et vos obstacles).
Ensuite :
P a g e 4 | 13
Nous ajoutons une nouvelle condition pour faire disparaitre (détruire) la planche au bout de quatre rebonds.
Nous créons un calcul très simple qui détruit notre objet « planche » lorsque l'animation atteint l'image 4 ou supérieure. Rappelez-vous, vous avez dupliqué votre graphique de planches quatre fois et, par conséquent, créé cinq images d’animation. Examiner la condition suivante :
Si l’image courante de Planches >= 4 alors détruire particule
P a g e 5 | 13
Vous pouvez choisir différentes conditions lorsque vous travaillez avec l'éditeur d'expression : l'égalité, différent, plus grand/plus petit, et strictement plus grand/plus petit/égal. Vous pouvez ainsi vérifier si votre animation est inférieure, égal ou supérieure à une valeur spécifique.
Appuyez sur F7 et tester vos nouveaux événements. Tirez sur la caisse qui va changer avec l’animation « disparition » lorsqu'elle entre en collision avec un projectile. En outre six planches apparaîtront à la position de destruction de la caisse et rebondiront sur le sol jusqu'à ce que ses animations atteignent l’image 4. LES MOUVEMENTS DE CLICKT EAM Vous avez déjà utilisé deux différents mouvements intégré, la plate-forme dans la Session 2, les éditeurs de Fusion - votre premier jeu et le mouvement de flipper. Les deux sont très utiles pour créer des petits jeux ou prototypes, mais il y a beaucoup d’autres mouvements intégré que vous pouvez choisir. Tous les mouvements sont contrôlés par le clavier, la souris ou un joystick lorsque vous travaillez sur un ordinateur personnel. Il y a un paramètre par défaut pour les périphériques d'entrée (selon ce que vous souhaitez utiliser). Modifier cette entrée par défaut dans les propriétés de l'application, en vertu de commandes par défaut, dans l' onglet Options d'exécution. Vous pouvez facilement sélectionner n'importe quelle touche ou bouton comme nouvelle entrée par défaut, comme illustré dans la capture d'écran suivante :
Comme vous pouvez le voir, vous pouvez configurer les commandes pour jusqu'à quatre joueurs. Vous pourriez, par exemple, régler les commandes de mouvement de joueur un pour les touches W, A, S, D et les commandes de mouvement du joueur deux à l'aide des touches fléchées pour créer un jeu à deux joueurs sur un seul écran.
P a g e 6 | 13
LES MOUVEMENTS NON PHYSIQUES Au début, nous nous concentrerons sur les mouvements non physiques, qui comprennent certains des plus basiques et courantes mouvements classique des jeux vidéo 2D. Il vous suffit de sélectionner votre objet actif et choisir le mouvement voulu dans ses propriétés !
BALLE QUI REBONDIT : LE MOUVEMENT DE REBOND Un objet avec ce mouvement rebondit comme une balle de caoutchouc sur les obstacles. Ce mouvement simple peut être utilisé de nombreuses autres façons différentes. Il peut être considéré comme le moteur d'un objet. Il s'appliquera une impulsion, mais vous pouvez décider de la direction, la vitesse, ou la dynamique. Vous pouvez créer une IA très simple avec le réglage de la direction d'un objet actif (l'ennemi) vers la position de votre joueur et appliquant le mouvement de rebond. L'ennemi va maintenant suivre votre joueur où qu'il se déplace.
CHEMINEMENT : LE CHEMIN DE CIRCULATION Le cheminement oblige votre objet à suivre un chemin donné. Vous pouvez dessiner ou définir ce chemin en quelques clics. La Configuration du mouvement suivant un chemin est effectuée via une boîte de dialogue, et non via une liste de propriétés. Il vous suffit de cliquer sur le bouton Modifier dans la liste des propriétés pour ouvrir la boîte de dialogue. Un chemin de mouvement est représenté avec une ligne faite de différents segments. Chaque segment est séparé des autres par un nœud. Sélectionnez un nœud pour régler la vitesse du segment suivant. Cela vous permet de créer un nombre illimité de petits chemins avec des vitesses différentes.
Vous pourriez utiliser un simple et unique chemin pour votre solution d’explosion de caisse du jeu de plateforme exemple, ou pour créer un simple ennemi. Placez simplement deux nœuds pour créer un chemin d'accès. Maintenant activer les déplacements et le retour de boucle à la fin dans la boîte à outils de mouvement de chemin. Votre ennemi repart sur ce chemin indéfiniment !
P a g e 7 | 13
LE-MOUVEMENT CONTRÔLÉ À LA SOURIS Le mouvement de la souris vous permet de contrôler un objet à l'aide de la souris. Lors de l'exécution, un pointeur de souris Windows disparaîtra et l'objet donné se déplacera en conséquence avec la souris. Vous pouvez également restreindre la zone dans laquelle l'objet se déplace.
LES HUIT DIRECTIONS DE MOUVEMENT C’est LE type de mouvement pour les personnages de RPG. Il est facile à manier et à mettre en œuvre pour débuter. Vous pouvez régler l'accélération, la décélération et la vitesse de votre objet. C'est à peu près tout.
VOITURE DE COURSE Ce mouvement peut être intéressant pour vous si vous voulez créer un jeu de course ou un shoot’em up classique avec défilement de haut en bas. Votre objet actif aura accélération et décélération avec de bas en haut et de direction avec à gauche et à droite. EXTENSIONS DE MOUVEMENT Pour l'instant, nous allons passez les mouvements physiques. Vous en apprendrez davantage sur ce sujet passionnant dans une session ultérieure. Cela peut être difficile à maitriser, mais nous savons tous combien c'est cool de jouer avec la physique, mais nous avons prévu la moitié d’une session à propos de la physique plus tard.
Donc si vous avez testé beaucoup de mouvements non physiques, essayez de jongler avec les extensions de mouvement maintenant. Ces mouvements sont principalement conçus pour les objets et personnages non-joueurs. Cela signifie que la plupart de ces mouvements ne sera pas contrôlé par le joueur et sont, par conséquent, idéale pour des mouvements automatisé.
Vous avez déjà testé le mouvement Flipper pour vos « planches ». L'objet avec ce mouvement agira comme un organisme avec une gravité et une vitesse. Comme vous l’avez déjà expérimenté, il peut non seulement être utilisé pour des jeux de flippers, mais aussi pour des particules que votre joueur doit attraper ou éviter . Ces
P a g e 8 | 13
mouvements peuvent et doivent être détournées de leur utilisation initiale. Vous devez juste pour penser de façon créative et n’ayez pas peur d'expérimenter !
Le mouvement de vaisseau spatial est le seul mouvement contrôlé par le joueur de cette section. Il est un peu difficile à maitriser au début. Il peut être utilisé pour créer une version de base d’un jeu de type « astéroïdes ». Créer un objet actif, et activez l' option de rotations automatiques dans les propriétés de l'objet. Pour tester la version classique de ce mouvement, désactiver la gravité dans le mouvement, ainsi que les propriétés de puissance de poussée et de vitesse de rotation de 70. Les extensions de mouvements restantes devraient être simples et faciles à comprendre. Il suffit d'appliquer les mouvements uniques de Circulaire à InAndOut à un objet actif de démonstration et voir ce qui se passe. Vous trouverez des informations sur la manipulation et l'utilisation d'extensions de mouvements restants. Comme nous l’avons déjà écrit : ces mouvements peuvent et doivent être détournées de leur utilisation initiale. Vous devez juste pour penser de façon créative et n’ayez pas peur d'expérimenter !
IMPORTATION DE GRAPH IQUES ET D'ANIMATION S Vous avez peut-être réalisé que nous n'avons pas fait trop attention à la charte graphique. C’est la jouabilité du jeu lui-même qui doit être étudié toujours en premier. Oui, le style est important, mais la racine de votre jeu sera toujours son gameplay et sa jouabilité. Si vous avez le sentiment d’être satisfait de votre prototype, alors vous pouvez commencer à penser aux graphismes de vos jeux.
P a g e 9 | 13
Il est très simple d'importer des graphiques ou des animations image par image d'objets différents dans Fusion. Vous pouvez importer des graphiques pour tous types d'objets ou d'extensions, mais vous utiliserez principalement le déjà célèbre « objet actif » pour vos personnages, vos objets, vos ennemis, ou vos éléments d'interface.
Créer un objet actif et ouvrez l'éditeur d'image. La barre supérieure sur le côté gauche montre les outils dont vous aurez besoin pour importer ou sauvegarder des graphiques à partir de et vers votre disque dur.
Lorsque vous cliquez sur le bouton Import (Importer), un sélecteur de fichier s'ouvre et vous permet de sélectionner le fichier image à importer à partir de votre disque dur. Selon le type d'image ou l'animation que vous importez, vous serez en mesure de sélectionner soit un simple fichier d'image ou les fichiers d'animation. Pour l'instant, sélectionnez n'importe quel arrière-plan graphique que vous voulez avoir dans le jeu de plateforme prototype et avez créé au cours des derniers chapitres. Un ciel bleu devrait faire un excellent travail. Dans notre répertoire Formation\Base pour Brickodeurs\Pixel explosion\ nous avons des images de nuages numérotées pixelExplosion00 à pixelExplosion09. Fusion les a automatiquement détectés et nous propose de les importer comme animation.
Les options d'importation s'affichent une fois que vous avez sélectionné une image. Le tableau de sprites permet d’importer des tilesets ou des charsets. Fusion vous les découpe à votre convenance. LES OPTIONS D'IMPORTATION
P a g e 10 | 13
Les tilesets et charsets sont utilisés pour réduire au minimum tous les graphiques d'une animation à une seule image et permet d'optimiser les tailles des fichiers de vos graphiques. Vous pouvez en rechercher sur des sites comme http://opengameart.org
De retour dans les options d'importation, définissez la transparence avec n'importe quelle couleur que vous voulez supprimer de votre image. Dans le cas de notre explosion, la couleur transparente serait le fond blanc. Utilisez le bouton de sélection pour choisir une autre couleur directement à partir de l'image, ou double-cliquez sur le carré de couleur pour choisir une couleur dans un sélecteur de couleur. Si vous ne souhaitez pas utiliser une couleur transparente, il vous suffit de choisir une couleur qui n'est pas présente dans l'image. L’option d'importation en tant qu'animation vous permet d'importer une série d'images pour une animation. Il vous suffit de sélectionner le nombre d'images en mode animation. Il est important de nommer les graphiques dans l’ordre chronologique de cette manière : image_01, image_02, image_03, et ainsi de suite. L'image-objet feuille vous permet d'importer d'option animations à partir de feuilles d'image-objet. Définir la taille de bloc à la taille d'une image-objet unique de votre feuille.
L' option de mode boîte vous permet de capturer plusieurs images contenues dans les cases d’un seul fichier image. Pour que cette option fonctionne, vous devez respecter certaines règles lors de l'enregistrement du fichier image. Tout d'abord, chaque graphique que vous souhaitez importer doit être entouré Par un rectangle d'une couleur différente de la couleur de fond de l'image. La même couleur doit être utilisée pour définir tous les rectangles entourant les graphiques contenus dans l'image.
P a g e 11 | 13
Vous allez utiliser toutes ces options dans vos projets à venir, mais pour l'instant, nous voulons simplement importer une simple image d'arrière-plan sans transparence ou animations.
TRAVAILLER AVEC DES CALQUES Les calques sont très utiles pour deux raisons principales. Vous pouvez organiser votre arrière-plan et votre écran à l'aide de calques différents avec différents objets pour différentes fonctions. Vous pouvez, par exemple, créer un calque d'interface, un calque de jeux, et un calque de fond, ainsi répartir les objets graphiques dans les différents calques que vous allez utiliser dans votre jeu.
Les propriétés du calque sont également importantes, puisqu'elles vous permettent d'ajouter des effets de rendu (ajouter, soustraire, et ainsi de suite) à votre calque ou de définir la vitesse de mouvement du calque ( les coefficients X et Y) pour créer des effets de parallaxe.
Barre d'outils des calques sur le côté droit. Créer un nouveau calque en cliquant sur l'icône « Nouveau calque ». Faites maintenant glisser ce nouveau calque sur celle existante avec tous les objets de votre jeu. Le calque existant est maintenant le calque supérieur.
Sélectionnez le fond de votre ciel dans le cadre et faites-le glisser sur le calque d'arrière-plan nouvellement créé. Quoi qu’il arrive, votre image du ciel sera maintenant derrière un objet du calque supérieur. Examinez la capture d'écran suivante :
P a g e 12 | 13
Pour ajouter un effet de parallaxe à la calque, il vous suffit de sélectionner le calque d'arrière-plan, et définir l' x coefficient de quelque chose autour de 0,7. Cela fera ralentir le calque d'arrière-plan (et donc de l'image de fond) jusqu'à 70 pour cent la vitesse du calque supérieur. N'hésitez pas à tester l'effet de parallaxe maintenant.
Le même effet se produira à la hauteur lorsque vous définissez une valeur inférieure à 1 pour le coefficient de y. La barre d'outils de calques va se masquer automatiquement après un certain temps par défaut. Elle restera toutefois ouverte à droite de l'écran en cliquant sur le bouton punaise haut de la page.
Maintenant, imaginez toutes les possibilités de cet effet. Vous pouvez créer une autre calque entre vos deux premiers calques, définissez le x coefficient de 0,4, et ajouter des graphiques de nuages. Vous allez ajouter une fantastique illusion de profondeur à votre jeu.
RÉSUMÉ Dans cette session, vous avez appris comment mieux utiliser l'éditeur d'animation pour créer des animations simples. Vous avez créé deux moyens de faire exploser un objet. Vous avez aussi appris comment travailler avec l'éditeur d'expression. Nous vous avons fait une première présentation des mouvements non physique et vu comment les utiliser dans différentes situations de jeu. Vous savez également comment importer des graphiques et des animations et la façon de les placer sur des calques différents au sein de votre scène de jeu.
Le prochain chapitre inclura l'utilisation de fusions et d'objets d'extensions Vous pourrez également en apprendre davantage sur les animations et la façon de les mettre en œuvre pour un ensemble d'objets.
P a g e 13 | 13