Tutoriel Moiki : couleurs, images et sons

Changer l’apparence de ses FI, ajouter des images et du son, ça tente beaucoup d’auteurices, mais certains systèmes de création ne rendent pas ça très accessible. Un des avantages de Moiki, c’est qu’il n’a pas ce problème : si on est pas libres de tout changer – la disposition des éléments sur la page, texte au milieu, choix en bas, etc. est fixe – les changements qu’on peut faire sont très faciles à mettre en place.

Dans cet article, nous allons faire un petit tour d’horizon de ce qu’il est possible de faire pour personnaliser les visuels et les sons de sa FI avec Moiki. Pour cela, il faut avoir une histoire sur laquelle appliquer ces changements : je vais reprendre celle réalisée dans le tutoriel précédent.

L’onglet Médias

Dans la colonne du milieu de l’atelier, sélectionnons l’onglet Médias en cliquant sur l’icône en forme de feuille de papier.

On y trouve une liste de toutes les images, icônes et sons utilisés dans notre histoire. Dans mon cas, j’ai pour l’instant une image (celle choisie pour la couverture) et deux icônes (celles de mes objets). En cliquant sur le bouton bleu Médias +, je peux choisir d’ajouter à la liste de nouvelles images, sons ou icônes qui seront ensuite utilisables dans notre FI.
Puisque je n’ai pas encore de son dans ma liste, je vais rectifier ça tout de suite.

Comme je ne suis ni bruiteuse ni compositrice, je me suis tournée vers la banque de données Free Sound plutôt que d’importer mes propres sons. Comme The Noun Project (pour les icônes) et Unsplash (pour les images), utiliser des mots clés en anglais donne de bien meilleurs résultats de recherche. Un petit cadre vous permet d’affiner votre choix : cherchez-vous une boucle musicale, pour servir de musique de fond sur plusieurs passages, ou un son ponctuel, à déclencher à un instant précis et, dans ce cas, quelle est la durée de son souhaitée ?

Si vous désirez vendre votre jeu, n’oubliez pas de cocher l’option « Exclure les licences non commerciales » quand vous choisissez vos médias pour éviter les problèmes de droits d’auteur. La licence associée à chaque son ou image est rappelée par la petite bulle en bas à droite du cadre.

J’ai sélectionné une boucle musicale, un effet sonore et une nouvelle image. Par défaut, les sons s’affichent dans la liste avec le nom de la recherche utilisée pour les choisir. Pour mieux s’y retrouver, on peut cliquer sur la flèche à droite du son dans la liste, ou sur l’onglet Sons pour accéder à une liste plus détaillée, dans laquelle on peut changer le nom de chaque son.

Une fois nos médias choisis, ajoutés à la liste et organisés, il ne nous reste plus qu’à les ajouter à notre histoire pour en faire profiter les joueureuses.

Utiliser les médias

Les boucles sonores

Retournons dans l’onglet Séquences de notre colonne centrale. Pour lancer une boucle sonore, il faut sélectionner la séquence dans laquelle on souhaite faire démarrer la musique. Sous les blocs de texte et de type de la séquence, on trouve un bloc supplémentaire, le bloc Médias, avec un bouton +. En cliquant sur ce bouton, puis sur « Modifier la boucle sonore », un menu déroulant apparaît, avec pour options « Arrêt de la boucle », puis une liste des boucles sonores disponibles dans les médias.

Pour lancer une boucle, il suffit de la choisir dans la liste. Le bloc Médias permet maintenant d’ajuster les paramètres de cette boucle (volume, vitesse, et un éventuel délai, si on souhaite faire démarrer ou changer la musique un peu après l’arrivée dans la séquence). Une fois une boucle lancée, elle va tourner en continu jusqu’à ce qu’on passe par une séquence qui en change ou qui l’arrête, ou qu’on arrive à la fin de l’histoire. Comme une musique me suffit tout au long de ma courte histoire d’exemple, je n’ai rien à faire de plus.

Les effets sonores et les illustrations

Pour ajouter un effet sonore à une séquence, le procédé est très similaire : sélectionner la séquence, descendre jusqu’au bloc Médias, bouton +, choisir « Ajouter un effet sonore » puis l’effet sonore désiré dans la liste. Les paramètres qui apparaissent sont les mêmes que pour les boucles. La différence, c’est que l’effet sonore ne sera joué qu’une seule fois, à l’instant où la séquence apparaît (ou un peu après, si on ajoute un délai). Si on souhaite le réutiliser sur plusieurs séquences, il faut l’ajouter à chaque fois.

Pour ajouter une illustration, c’est quasiment le même procédé, mais les paramètres à ajuster seront différents.

On peut choisir si l’image s’affichera au dessus ou au dessous du texte de la séquence, si elle sera de forme rectangulaire (par défaut) ou circulaire, sa taille, et si elle sera accompagnée d’un bouton « Loupe » pour zoomer sur l’image ou non. Comme pour les effets sonores, les images d’illustrations n’apparaissent que dans la séquence où elles sont ajoutées.

Si vous regardez votre graphe, sur la droite de l’atelier, vous pouvez maintenant voir de petites icônes note de musique ou image attachées à certaines séquences. Ça permet de visualiser rapidement où et quand vont apparaître vos médias.

L’onglet Thèmes

Dernière touche personnelle, il est aussi très facile de modifier certains éléments de l’interface : couleurs, image de fond, police d’écriture, animations de transition, sons quand on clique sur les boutons, etc. Ça se passe dans le menu Thèmes, accessible en cliquant sur le bouton en forme de pinceau.

Dans la colonne du milieu, on peut voir la liste des thèmes. Pour l’instant, je n’en ai qu’un seul, le thème par défaut qui est appliqué à toutes mes séquences. Sur la droite, le graphe des séquences a été remplacé par une FI d’exemple qui permet de voir à quoi ressemble chaque thème en jeu. Pour changer de tout ce bleu, on va cliquer sur le bouton Personnaliser, avec son petit crayon.

Moiki propose pas mal de Thèmes de base qui changent drastiquement l’apparence des séquences et qui sont tous modifiables. On peut ajouter une image de fond, pour remplacer la couleur unie du thème et des effets sonores qui seront liés à certains événements (clic sur un bouton, gain ou perte d’un objet, fin heureuse ou tragique). En cliquant sur le bouton Voir les options, on fait de plus apparaître d’autres blocs qui permettent de modifier toutes les couleurs du thème, la police d’écriture, les animations et plein d’autres choses encore.

Les modifications sont enregistrées au fur et à mesure, n’hésitez pas à expérimenter.

Ce thème sera appliqué à toutes les séquences. Je vais en créer un second pour la partie de l’histoire qui se déroule dans la cuisine, et y ajouter une image de fond. Pour cela, il suffit de retourner à la liste des thèmes en cliquant sur Retour, puis sur le bouton Ajouter un thème. Je sélectionne ensuite le thème par défaut dans la liste Copier depuis le thème pour ne pas avoir à recopier les réglages à la main ; je n’aurai plus qu’à modifier les éléments qui m’intéressent.

Lorsqu’un nouveau thème est créé, il apparaît dans la liste des thèmes, mais il n’est pas immédiatement utilisé en jeu. Pour corriger ce problème, il suffit de retourner dans l’onglet Séquences, de sélectionner la ou les séquences « charnières » où vous voulez changer de thème, et de cliquer sur le petit bouton pinceau, près du titre de la séquence. Le thème choisi sera appliqué sur cette séquence et toutes les suivantes, jusqu’au prochain changement ou jusqu’à la fin du jeu.

Une petite bulle ornée d’un pinceau s’ajoute sur le graphe pour vous permettre de repérer les séquences au cours desquelles un changement de thème a lieu.

Et voilà qui termine cet article !
Vous avez maintenant toutes les clés en main pour renforcer l’ambiance de votre histoire Moiki en y ajoutant du son et en modifiant son apparence. Vous pouvez aller voir l’histoire d’exemple dans l’atelier en mode lecture si le cœur vous en dit.