Résumé

A travers la création d’un jeu de plate-forme, vous allez découvrir les principaux éditeurs de Fusion et leur prise en main.

Les éditeurs de Fusion – votre Premier jeu!

Tout, dans Fusion, est construit pour être très intuitif et facile à apprendre. Toutefois, il faut un certain temps pour comprendre la mécanique de l’outil. Ce chapitre vous donne un aperçu des différents éditeurs et leur utilisation.

Dans ce chapitre, nous allons couvrir :

• Les éditeurs – Un aperçu
• l’éditeur de scène
• l’éditeur d’image et d’animation
• l’éditeur d’événements

Les éditeurs – Un aperçu

Il serait trop long de décrire tout ce que vous rencontrerez au cours de votre première heure avec Fusion. Je peux seulement vous guider à travers vos premiers prototypes. Toutefois, juste au cas où vous seriez curieux et que vous voudriez en savoir plus, il y a une excellente aide en ligne en français qui comprend les descriptions de chaque bouton et domaine de l’outil. Appuyez simplement sur F1  dans Fusion.

Ouverture et navigation à travers les principaux éditeurs

Pour ouvrir les éditeurs de story-board, de scènes et d’événements, vous pouvez généralement sélectionner l’application ou l’image à éditer dans la fenêtre Espace de travail ou dans l’Éditeur de story-board. Puis, vous pouvez soit cliquer sur un des boutons de l’éditeur dans la barre d’outils de naviguer ou cliquez avec le bouton droit sur l’élément et sélectionnez une commande Modifier dans le menu contextuel. 

Clickteam Fusion 2.5 ouvre une fenêtre « scène » par demande. Lorsque vous ouvrez un éditeur, il sera ouvert dans cette fenêtre, remplaçant le précédent. Par exemple, si vous ouvrez l’éditeur de storyboard et ensuite modifier une scène, l’éditeur de scène remplacera l’éditeur de storyboard dans la même fenêtre.

Vous pouvez naviguer dans le précédemment aux éditeurs ouvert avec les boutons avant/arrière rouge.

Voici un petit aperçu sur les éditeurs que vous allez utiliser dans les chapitres suivants :

L’éditeur de storyboard

Une fois que vous avez créé une nouvelle application, vous entrez dans l’Éditeur de story-board.

Vous obtiendrez toujours un aperçu global des différents niveaux de vos jeux (scènes).

Une application (le jeu complet) est généralement composé de plusieurs cadres (les niveaux, les menus, les écrans, etc.).

L’éditeur de scène

Chacun des cadres dans votre application sera édité dans l’éditeur de scène. Vous commencerez avec une seule image. Ouvrez-le en double-cliquant sur Scène 1. Vous allez passer la moitié de votre temps en fusion avec la création de niveaux et de l’agencement de votre jeu. 

L’éditeur d’image et d’animation

Faites un clic droit n’importe où dans votre cadre et sélectionnez « Insérer objet ». Dans la fenêtre Ouvrir, sélectionnez Actif et cliquez sur OK. Double-cliquant sur n’importe quel objet graphique (comme celui créé avec l’objet actif) cela va ouvrir l’éditeur d’image. Créez votre propre graphique pixel art ou Importer fichiers graphique externe. Vous pouvez retravailler avec eux dans cet éditeur. La section « animations » au bas de l’éditeur vous permet de définir l’animation pour vos objets. Tout ce que vous avez à faire est de définir l’ordre et de la vitesse à laquelle les images seront affichées.  

Maintenant, ouvrez l’éditeur d’événements en cliquant sur l’icône Editeur d’événement dans la barre d’outils en haut de l’écran.

L’éditeur d’évènements

Toute la programmation se fera dans l’éditeur d’événements. C’est là que vous passerez l’autre moitié de votre temps! Créer tous vos événements, des conditions et des actions dans un tableau qui ressemble à une feuille de calcul parfaitement claires. Vous apprendrez comment faire pour créer et utiliser des événements dans la prochaine section de ce chapitre. Examinez la capture d’écran suivante :

Tous les calculs sont modifiés dans l’éditeur d’expression. Si vous voulez modifier la vitesse de fonctionnement de votre personnage principal ou changer la couleur de l’arrière-plan à néon rose, alors toutes ces étapes seront traitées dans l’éditeur d’expression. Vous apprendrez le fonctionnement de l’éditeur d’expression dans la prochaine section de ce chapitre. Examinez la capture d’écran suivante :  

Voilà pour l’aperçu.

Rentrons maintenant dans le détail de chaque éditeur :

L’éditeur de scène

Fusion est un puissant outil pour créer votre premier jeu !

Pour l’instant, nous allons créer une nouvelle application, Prêt ?

Créez une nouvelle application en cliquant sur l’icône « Nouveau » dans le coin supérieur gauche de la barre d’outils. Puis, passer directement à l’image 1 en double-cliquant sur le rectangle blanc ou l’étiquette de la scène 1.

Puis

Ce que vous voyez maintenant est la scène editor, qui est l’un des éditeurs les plus importants dans la fusion. Il vous permet de poser tous les objets au sein de l’image actuellement sélectionnée de l’application.  

Nous allons créer un objet actif en double-cliquant quelque part sur votre image au centre de l’écran. Une nouvelle fenêtre s’affiche contenant toutes les extensions possibles et d’objets Vous pouvez choisir de créer.

Choisissez maintenant l’objet actif et la placer où vous voulez dans votre châssis.

Félicitations! Vous venez de créer votre premier jeu objet! Maintenant, sélectionnez l’objet actif et regardez les propriétés pour le coin inférieur gauche de votre écran. C’est là que vous pouvez changer les propriétés de votre objet actif. Pour l’instant, sélectionnez l’onglet Mouvement et cliquez sur l’icône statique à côté de Type. L’écran qui apparaît indique les possibilités de mouvement intégré de fusion. Les Objets actifs peuvent être paramétrés pour toutes les sortes de mouvements intégrés comme le mouvement de la plate-forme ou huit directions de mouvement.

Ces mouvements vont mettre automatiquement votre ancien objet statique en objet en mouvement, contrôlable,! Vous apprendrez les mouvements les plus communs dans les chapitres suivants.

Sélectionnez le mouvement de la plate-forme dans la section des mouvements non physique. 

Je suppose que vous devinez maintenant ce que sera notre premier prototype de jeu! Oui, exactement! Ça va être un petit jeu de plateforme! Il est temps de connaître certaines des propriétés de l’objet actif.

Nous allons explorer les possibilités avec, l’accélération, la vitesse, la décélération, et ainsi de suite. Il n’y a pas de bonnes ou de mauvaises valeurs pour ces paramètres. Cela dépend toujours de la façon dont vous voulez contrôler vos personnages. Par exemple, si votre jeu se passe dans l’espace, vous pourriez vouloir jouer avec le réglage du paramètre gravité de vos personnages, ou si votre personnage principal est une grand-mère, vous voudrez peut-être avoir une valeur vitesse basse.

Appuyez sur F7 pour démarrer cette scène (ce niveau de votre jeu). Vous trouverez également «  exécuter » dans la barre de menu du haut de Fusion sur le haut de l’écran. F7  fera toujours démarrer votre scène (niveau actuel). Si vous souhaitez démarrer l’application complète à partir du début, appuyez sur F8. Cela, bien sûr, sera beaucoup plus intéressant et nous le verrons dans les prochains chapitres !

Que se passe-t-il? Votre petit objet actif tombe. La gravité fait son travail. Nous devons placer un élément de décor que votre personnage puisse marcher dessus!

Double-cliquez sur quelque part sur la scène, puis créer un nouvel objet « décor ». Les objets « décor » sont très puissant lors de la création de jeux simples tels que les jeux de plateformes parce que vous pouvez faire d’une image un type d’obstacle. Cela signifie qu’ils ont automatiquement des caractéristiques de collision solides entre eux-mêmes et votre objet actif, les rendant parfaits pour faire les planchers, murs, et tout autre obstacle simple dont vous avez besoin. 

Attention à bien les définir comme des obstacles dans les options de runtime dans les propriétés du décor.

Il est temps d’enregistrer votre demande. C’est quelque chose que je vous recommande de faire aussi souvent que possible. Vous pouvez créer différentes sauvegardes en fonction des versions que vous créez. Il y a beaucoup d’espace disque est disponible de nos jours. Enregistrez votre demande en accédant au Fichier | Enregistrer sous. Choisissez un nom de fichier et cliquez sur Enregistrer. Comme je vous l’ai dit enregistrez aussi souvent que possible, choisissez un nom de fichier comme nomapplication_01, vous pouvez donc toujours garder la trace du numéro de version de votre application. C’est souvent de simples astuces telles que celle-ci qui rendront votre vie de développeur de jeux beaucoup plus facile!

L’éditeur d’images et l’éditeur d’animation

Il existe de nombreux outils permettant de créer ou de manipuler des graphismes de jeu, telles que Photoshop, Gimp, et Paint.net. Quelle que soit votre préférence de retouche d’image, vous finirez par les intégrer à l’aide de l’éditeur d’animation et d’image de Fusion. Cet éditeur n’est pas seulement l’éditeur le plus central pour tous vos graphiques, mais il est également utilisé pour régler la manière dont tous les objets se déplacent par rapport à leurs cadres d’animation et même de créer des points de référence sur vos objets, telles que la tête ou le canon.

L’éditeur d’image s’ouvre automatiquement lorsque vous double-cliquez sur un objet quelconque, alors allez-y et double-cliquez sur objet Actif. Examinez la capture d’écran suivante : 

Dans le coin en haut à gauche, vous voyez tous les outils disponibles tels que le pinceau ou outil Rectangle. Le côté droit affiche toutes les belles couleurs Vous pouvez utiliser ! L’éditeur d’animation peut être trouvé au bas de cette fenêtre. Nous travaillerons avec toutes ces options plus tard. Pour l’instant, tenons-nous en à certains outils de conception simple pour créer votre premier jeu de plateforme objet.

Ce que nous allons faire maintenant est de définir le point chaud et le point d’action de notre personnage Brique. Sélectionnez l’outil de point chaud (le petit œil dans vos outils sur le côté gauche de l’écran). Les points chauds définissent le centre réel de votre objet. Toutes les références à cet objet n’importe où dans le jeu vont traiter le point chaud comme centre de l’objet. Il tourne autour de ce point ou permet de créer un point de fixation pour d’autres objets à ce même endroit, si vous le voulez. Cette fonctionnalité est très importante et sera utilisé tout au long de vos jeux futurs.

Si le point chaud est votre point de référence de l’objet pour le monde, puis le point d’action est le point de référence pour cet objet d’autres objets. Par exemple, un point d’action peut correspondre à l’emplacement où vous souhaitez que les effets spéciaux ou d’autres objets apparaissent (dispositifs de postcombustion, les lueurs de départ, ou où coller un chapeau). Comme les points chauds, le point d’action est toujours attaché à votre objet s’il se déplace. Sélectionnez-le en cliquant sur l’icône étoile située à côté de l’œil de point chaud.

Pour l’heure, placez le point chaud dans le centre de votre graphique en cliquant sur le carré central de « Bouger » avec ses neuf petits carrés pour déplacer ces points. Utiliser « Bouger » pour déplacer pour placer le point d’action aux différents endroits de votre objet actif. 

Regardez la capture d’écran suivante de l’éditeur d’animation.

Vous pouvez voir que notre personnage est dans l’animation «  arrêté ». La fenêtre suivante affiche la direction de notre personnage, qui est la droite. La dernière section indique l’image de l’animation (pour notre personnage et ce tutoriel, nous n’aurons qu’une seule image). Notre personnage de plate-forme devra être en mesure de faire face droite et gauche, alors cliquez sur la petite case blanche sur la gauche pour montrer notre personnage « face à gauche » pour l’animation « arrêté ». Vous remarquerez que rien n’apparaît dans l’onglet « Images ». Revenir à l’affichage de notre caractère « face à droite », sélectionnez cette image, et Copier (Ctrl + C). Puis revenir à l’affichage de notre personnage orienté vers la gauche et coller (Ctrl + V).

La dernière chose que vous avez à faire maintenant, c’est d’orienter votre personnage afin qu’il regarde à gauche lorsqu’il est orienté vers la gauche. Cliquez avec le bouton droit sur votre graphique dans la fenêtre d’édition d’image et sélectionnez retournement horizontal. Cela permettra de basculer automatiquement tous vos objets sélectionnés (si vous avez plus) dans la direction opposée. Cela permettra de renverser votre objet (y compris le point chaud et point d’action) pour le côté gauche. Cliquez sur OK lorsque vous avez terminé appliquer vos modifications.

Cliquez avec le bouton droit sur l’objet «  décor » : un menu contextuel s’affiche.

En sélectionnant l’option Créer > Objet décor rapide.

Cela va utiliser l’image de l’objet sur lequel vous avez cliqué comme « texture » de votre objet décor rapide.

Nous voulons créer une sorte de toile de fond rapide. La différence entre cela et un décor/toile de fond standard est que vous pouvez facilement créer d’immenses zones carrelées avec décors rapide, qui peut être utile pour les étages ou les sols.

Ce que vous obtiendrez est une version carrelée de carrées 100 de votre décor sélectionnés. Échelle cette place à n’importe quelle taille. Vous pouvez redimensionner la toile de fond rapide dans la fenêtre propriétés ou directement redimensionner l’objet au sein de la scène. Cliquez sur l’objet une fois. Des petits carrés noirs apparaîtront dans chaque coin et sur les quatre côtés. Faites glisser l’une de ces cases dans n’importe quelle direction pour redimensionner l’objet! 

Dans notre cas, cela nous permettra de faire le sol de notre jeu de plate-forme. Les propriétés de « runtime » doivent être configurées sur  obstacle. Vous pouvez tester toutes les autres options de décor rapide objet. Placer votre « décor rapide » de type obstacle en dessous de votre personnage.

L’éditeur d’événements

Nous voulons arrêter notre personnage quand il entre en collision avec un élément du décor. Pour créer cet effet, ouvrez l’éditeur d’événements. Sur la première ligne et la première colonne ; il y a les mots nouvelle condition . C’est là que vous définissez quelque chose à vérifier (état) dans votre jeu afin de faire quelque chose (l’action). Examinez le fragment de code suivant :

Nouvelle condition

Cliquez sur « nouvelle condition » et une nouvelle fenêtre affichant tous vos objets du jeu s’affiche. Dans l’éditeur de menus, tout ce que vous avez besoin de faire est de cliquer une fois pour sélectionner l’objet souhaité ou l’effet et le menu fera le reste. Choisissez votre objet actif et rappelez-vous Qui est votre personnage. Naviguez jusqu’à la collision | contexte. Vous avez créé avec succès la condition: Actif entre en collision avec de décor.

Maintenant, vous devez choisir une action dans cette collision. Vous voulez que votre personnage soit arrêté par le décor. Cliquez avec le bouton droit sur la colonne de votre objet « actif » pour cet événement et naviguez jusqu’au mouvement | Stop. C’est votre première action. L’état et action combiné faire votre premier événement, qui ressemble à ceci : 

La procédure pour les événements sera toujours le même. Vous sélectionnez une condition dans la colonne de gauche et ajouter l’action appropriée en relation avec l’objet requis sur l’une des colonnes de droite. Vous pouvez ajouter autant d’actions que vous le souhaitez si vous voulez que plus d’actions se produisent.

Votre personnage est tous ensemble d’interagir avec le sol. Appuyez sur F7 et tester votre niveau! Vous pouvez déplacer votre personnage avec les touches fléchées (curseurs) et sauter avec Shift (bouton 1).

Si ce n’est pas déjà fait, revenez à la fenêtre Propriétés de votre personnage « actif » pour modifier les paramètres jusqu’à ce que les mouvements de votre personnage vous semblent bons. C’est une partie très importante de l’ensemble de processus de création de jeu.

Comment fonctionne la sensation de mouvement ?

Pensez à votre nouveau réglage du jeu. Sommes-nous sur la terre ou dans l’espace avec une faible gravité? Sommes-nous sur un terrain solide ou sous l’eau? Créer l’univers de votre jeu dans votre tête. Chaque réglage d’une valeur de propriété peut avoir un grand impact sur l’impression générale de votre jeu. Nous travaillerons sur les réglages de ces propriétés, leur impact sur la sensation de jeu plus tard dans ces tutoriels, mais n’hésitez pas à faire des ajustements simples justes pour voir comment ils réagissent sur votre personnage. Veillez à les définir au plus près des valeurs par défaut avant de continuer.

Obstacles

Il est temps de placer certains obstacles dans votre univers de jeu.

Vous allez dans les propriétés de la scène et vous fixez la largeur virtuelle à 1640.

Nous vous proposons de commencer par mettre une image de fond pour l’arrière-plan avec lequel il n’y aura pas d’interaction.

Dans cet objet « image » vous importez votre image de fond. Vous pouvez aussi dessiner votre décor avec l’éditeur d’images et sélectionnez l’outil Rectangle à nouveau. Dessiner un simple carré et cliquez sur OK. C’est une image de décor, donc il ne peut pas y avoir d’interaction avec.

Maintenant nous allons introduire un objet « décor » :

Définir le type d’obstacle pour obstacle dans Propriétés pour cet objet. Placez ce bloc n’importe où dans votre niveau.

Créer l’événement de collision avec le joueur et cet élément de décor pour cette scène.

Fondamentalement, vous avez tout ce dont vous avez besoin pour créer un jeu de plateforme de base à cette étape. Vous avez un décor, un sol, un joueur, et un obstacle simple. Pour créer un niveau, vous pouvez pour dupliquer l’obstacle plusieurs fois pour créer un environnement. Ou bien en faisant glisser les obstacles autant que vous voulez à partir de la liste d’objets (voir la capture d’écran suivante) et en le plaçant dans votre niveau nouvellement créé. Votre cadre peut paraître un peu comme ça maintenant : 

Allez maintenant dans l’éditeur d’événements et de créer la condition suivante de conditions spéciales (les deux rapports) :

Collision entre “actif” et “obstacle”

Sélectionnez l’objet actif et naviguer au mouvement | Stop. Vous pouvez également glisser le mouvement d’action | Stop à partir d’événement créé avant vers votre nouvelle condition ! 

Titres, noms et commentaires

Juste encore un truc avant de nous aventurer plus loin. Essayez de nommer correctement vos objets et de mettre des commentaires autant que possible. Donner un Nom de joueur à votre personnage, nommer vos blocs décors, ainsi qu’un titre à vos différentes scènes. Mettre des Commentaires dans votre séquence d’événements dans l’éditeur d’événements par l’insertion de commentaires chaque fois que c’est possible (cliquez avec le bouton droit sur les numéros à l’extrémité de chaque état et insérer un commentaire). Tout cela est très important, même si votre jeu peut sembler simple et clair au début, il va croître et s’épanouir, et après un certain temps, vous serez heureux d’avoir commenté chaque séquence et d’avoir chaque objet bien nommé.

Le défilement (scrolling)

Nous avons maintenant construit un niveau simple. Mais que faire si votre joueur quitte l’aire de jeu sur l’un des bords ? Vous avez besoin d’une sorte de caméra automatisés pour suivre votre personnage. Vous devez le défilement plus communément appelé par les gamers : le scrolling !

Le défilement est l’une des logiques visuelles les plus essentielles pour les jeux de platformes et les jeux vidéo en général. Une technique de défilement de base peut être codée avec une seule ligne dans Fusion.

Visitez l’éditeur d’événements à nouveau. Choisissez la condition toujours et sélectionnez   Fenêtre Centre | Scrollings position dans le châssis du scénarimage contrôles. Vous serez invité à sélectionner votre objet de défilement-le joueur.

Puis vous centrer la fenêtre « relatif à » votre personnage « Actif ».

Pour obtenir :

Bien sûr, vous devez ajuster les dimensions de la scène de votre niveau. Il faut revenir à l’éditeur de scène et sélectionnez la scène 1 dans la barre d’outils workspace à gauche. Maintenant aller dans ses propriétés et modifier la taille de 640 x 480 à 1200 x 480. Cela signifie que la longueur de votre niveau est de 1200 pixels maintenant. 

Ignorer la largeur et de la hauteur virtuelle pour l’instant. Votre domaine de jeu augmentera et vous allez disposer instantanément de plus d’espace pour plus de trucs cool! L’aire de jeu peut théoriquement être dimensionnée jusqu’à un milliard de pixels, mais bien sûr, la taille de la scène affectera les performances.

Comme dans les étapes précédentes, n’hésitez pas à jouer avec les propriétés de la scène 1. N’oubliez pas également d’étendre votre arrière-plan à la taille de 1200. Puis appuyez sur F7 et profitez de votre premier niveau que vous avez conçu!

Le shoot ’em up!

Bien sûr, votre personnage doit avoir des adversaires. C’est quelque chose comme une loi universelle. Bien sûr, votre personnage a à faire face à l’adversaire d’une certaine façon. La façon classique serait un « Mario-like » de l’attaquer en sautant dessus. Nous voulons utiliser un autre moyen classique pour notre prototype cependant: une simple attaque “Shoot’ em up. Nous verrons le mouvement de l’ennemi et son INTELLIGENCE ARTIFICIELLE (IA) plus tard. Mais pour l’instant, nous voulons simplement savoir comment faire pour lancer un objet par notre joueur!

Créer un objet actif et peindre une balle. Définissez également le point chaud et le point d’action pour le centre de votre balle. Je suis sûr que vous avez cessé de jongler avec les outils éditeur d’images de Fusion , mais l’un des outils les plus importants est l’outil de rognage (Ctrl + K Restreindre).

Il va automatiquement recentrer votre projectile.

Cliquer le bouton « restreindre » et disparaîtront tout l’espace inutilisé en dehors de votre objet, jusqu’aux pixels de votre graphique. Vous allez utiliser cette méthode des millions de fois à partir de maintenant. Vous êtes autorisé à ouvrir votre esprit, laissez votre esprit flanner, et soyez créatif tout en travaillant sur votre « bullet style » maintenant! Il faut nous surprendre avec des boules de feu, les faisceaux laser, le plasma flèches, ou quoi que ce soit d’ dans votre jeu!

Ouvrir l’éditeur d’événements et naviguer vers Joystick | Lire l’état du joystick. Sélectionnez ensuite le bouton 2 et désélectionnez  Flèche haut, qui est sélectionnée par défaut. Rappelez-vous, le bouton 1 est le bouton de votre saut [SHIFT]. Afin que votre condition serait comme suit :

Cliquez sur « bouton tir 2 »

Comme action, vous choisissez votre objet Actif.

Sélectionnez Lancer un objet.

Choisissez votre projectile récemment créée et cliquez sur OK. Une fenêtre s’affichera.

Choisissez Utiliser la direction de « Actif » 

Cela signifie que votre personnage va lancer une balle dans sa direction de déplacement avec une vitesse de 100 chaque fois que vous appuyez sur le bouton 2 [CTRL].

Votre éditeur d’événement doit ressembler à quelque chose comme ça maintenant :

En testant notre jeu, nous nous apercevons qu’il ne détecte pas les bords de la scène de notre niveau de jeu. Nous allons ajouter une nouvelle condition pour cela :

Tester la position de « Actif » : cliquez sur le bord intérieur droit pour lui indiquer les limites.

Ensuite : nous pouvons choisir soit de stopper son mouvement s’il quitte le terrain à gauche, soit de recommencer le niveau s’il quitte le terrain à droite.

Résumé

Vous avez fait un énorme pas vers le développement de jeux avec ce chapitre. Vous avez appris à créer un jeu de plate-forme simple avec un tireur ! Vous avez été initié à l’utilisation des principaux éditeurs de fusion et à la façon dont ces éditeurs fondamentalement fonctionnent. Il s’agit maintenant de savoir comment tout fonctionne dans Fusion!

Nous allons procéder de façon incrémentale et progressive. Mais en général, ce système de création d’objets, l’ajout de comportements, de modification des propriétés ou de style.

Le chapitre suivant vous apprendra tout sur les extensions de fusion et son système d’objet. Vous pourrez également en apprendre davantage sur les animations et collisionneurs dans Fusion. 

Cet article n'a pas été revu depuis la publication.

Cet article a été créé par Club Brickodeurs le 17 mai 2020.