Créer un mod pour Frets On Fire

Introduction du cours

Bonjour à tous.

Vous connaissez peut-être le jeu "Frets On Fire" ; il s'agit d'un jeu gratuit proche du jeu "Guitar Hero" sur PS2.
Je vais, à travers ce tuto, vous apprendre à créer des mods pour Frets On Fire.

Vous pourrez très facilement arriver à un résultat aussi bien que celui-ci (voire meilleur ;) ) :

Il s'agit de mon premier mod : "Megaten". Je me baserai sur celui-ci pour ce tuto.

Dans sa version actuelle, Frets On Fire ne permet pas de créer de mods qui influencent le gameplay. Bien que le terme "mods" soit employé, on pourrait plutôt appeler ça des "Modifications Graphiques" ou des "Thèmes". Aucune connaissance en programmation n'est donc nécessaire. ;)

Découverte de FoF

Dans cette partie, je vais vous faire découvrir Frets On Fire (FoF).

Qu'est-ce que Frets On Fire ?

Frets On Fire est un jeu gratuit et Open Source pour PC qui a remporté l'"Assembly demo party 2006". Il fonctionne sur Windows (y compris Vista ^^ ), Linux et les Mac OS X (Mac Intel), même si la version de Frets On Fire pour Mac OS X est encore expérimentale et très instable sur les PPC. Le jeu est codé en Python et utilise la bibliothèque Amanith.
C'est aussi un clone de la série "Guitar Hero" sur PS2, Xbox,...

Frets On Fire possède 2 musiques de base, mais on peut en ajouter une grande quantité. Il est d'ailleurs possible d'importer les chansons des jeux "Guitar Hero I" et "Guitar Hero II", mais aussi de créer ses propres chansons à partir de fichiers .ogg.

Téléchargement et installation

Pour télécharger la dernière version du jeu, rendez-vous sur le site officiel :

http://fretsonfire.sourceforge.net/

Sélectionnez la "Full Version" correspondant à votre système d'exploitation puis installez le jeu.

La dernière version (lors de l'écriture de ce tuto) est la 1.2.512. Cependant, elle ne gère plus les .png et donc si vous voulez créer un mod pour cette version, il est nécessaire de maîtriser totalement les .svg ! Je vous conseille donc de télecharger la version 1.2.451.

Vous pouvez télecharger la version 1.2.451 à cette adresse :

http://sourceforge.net/project/showfil [...] ase_id=501448

Désolé pour les linuxiens débutants si je ne détaille pas l'installation, mais je n'utilise plus Linux et je l'ai très peu utilisé...

Les outils nécessaires pour créer un mod

Maintenant, je vais vous faire la liste de tous les logiciels nécessaires à la création d'un mod pour Frets On Fire.

• Un logiciel de graphisme : The Gimp, Paint.NET, ...

Il faut que le logiciel soit capable d'exporter des .png avec transparence. C'est le cas de Paint.NET mais pas de Photofiltre qui réduit vos .png à 256 couleurs si vous utilisez la transparence. Cependant, si vous voulez absolument utiliser un logiciel comme Photofiltre car vous le maîtrisez mieux qu'un autre, vous devrez utiliser, en plus, un autre logiciel comme Paint.NET, afin d'exporter vos images en .png avec la transparence sans réduire les couleurs.

Site Officiel de Paint.NET

• Un logiciel de graphisme vectoriel : Inkscape

Inkscape permet de faire des images vectorielles (qui sont basées sur les formes et non les pixels et peuvent donc être agrandies sans être pixelisées). Cependant, vous n'aurez pas besoin de savoir dessiner avec Inkscape pour introduire vos images dans le jeu avec les .svg. ;)

Site Officiel de Inkscape

• Un logiciel d'édition de son : Audacity, Nero Wave Editor (payant, inclus dans Nero), ...

Il faut un logiciel qui puisse exporter des fichiers au format .ogg. Bien que ce ne soit pas nécessaire dans un mod, ceci peut vous être utile pour remplacer la musique de fond du menu, les sons lors de la validation ou du retour dans les menus ou lors du décompte avant le lancement d'une musique.

Site Officiel de Audacity

• Un éditeur de texte : Notepad++ , le Bloc-notes, ...

  Site Officiel de Notepad++

Une fois que vous avez tout ce qu'il faut, nous allons passer au chapitre suivant et enfin pouvoir commencer à créer un mod. :)

Création du mod

Tout d'abord, sachez que vous pouvez très bien vous aider d'un mod existant comme LightsGraphics ainsi que des fichiers de base du jeu.
Vous trouverez des mods existants dans votre dossier mods, qui se situe normalement dans :

C:\Program Files\Frets on Fire\data\mods\

Les fichiers de base du jeu se situent, quant à eux, directement dans le dossier data.
Pour commencer, créez le dossier de votre mod dans le dossier mods du jeu et donnez-lui un nom.

Maintenant, je vais vous expliquer le fonctionnement de Frets On Fire.

Lorsqu'aucun mod n'est activé, le jeu utilise les fichiers se trouvant dans le dossier data et ne s'occupe pas des fichiers contenus dans les mods.
Si l'on active un mod, le jeu va d'abord chercher les fichiers dans le dossier du mod activé et s'il n'en trouve pas un là, alors il le prendra dans le dossier data.

Passons maintenant au chapitre suivant. Nous y créerons les .png.

Les imagesLes multiplicateurs de score

Nous allons commencer par les images des multiplicateurs de score 2x, 3x et 4x qui apparaissent lorsque le joueur réussit à enchaîner un certain nombre de notes.

Je vous rappelle que vous n'êtes pas obligé de TOUT modifier. Vous pouvez vous contenter, par exemple, de changer juste les fichiers concernant les fonds d'écrans et de conserver les autres fichiers de base du jeu.

Commencez par faire une image aux dimensions 112 x 117.
Représentez-y un "X2" ou ce que vous voulez, du moment que ça indique aux joueurs que leurs points sont multipliés par 2.

Exemple :

N'oubliez pas de mettre le fond de votre image en transparent !

Enregistrez votre image au format .png dans le dossier de votre mod sous le nom de 2x.png.
Faites de même pour les images x3 et x4 en les nommant respectivement 3x.png et 4x.png.

Le manche de la guitare

Maintenant, nous allons dessiner la texture du manche de la guitare, là où défilent les notes.
Il faut réaliser une texture au format 252 x 366. Celle-ci sera répétée jusqu'à la fin de la musique.

Exemple :

Je l'ai enregistrée en .jpg pour économiser de la place et pour vous rappeler que vous pouvez utiliser la transparence, qui est représentée sur cette image par le quadrillage gris / blanc, à gauche et à droite de l'image.

Une fois que vous avez fini, enregistrez votre image au format .png dans le dossier de votre mod sous le nom de neck.png.

Le logo

Nous allons maintenant modifier le logo Frets On Fire qui apparaît dans le menu principal au lancement du logiciel. Vous pouvez modifier le logo de base ou bien créer le vôtre. Les dimensions du logo de base sont 572 x 138 (là encore, n'oubliez pas la transparence ! ^^ ).

Une fois votre logo terminé, enregistrez-le au format .png dans le dossier de votre mod sous le nom de logo.png.

Image de chargement

Vous pouvez aussi modifier l'image qui apparaît lors des écrans de chargement (pendant la recherche des musiques dans votre collection, le chargement d'une musique ou avant l'écran des scores).
Le format de l'image de base est 247 x 216.

Une fois l'image finie, enregistrez-la au format .png dans le dossier de votre mod sous le nom de loading.png.

Le personnage du menu

Vous pouvez aussi modifier le personnage qui apparaît sur la droite du menu principal. Ses dimensions de base sont 302 x 413.

Une fois le personnage fini, enregistrez-le au format .png dans le dossier de votre mod sous le nom de pose.png.

Exemple :

Il y a encore d'autres images à modifier, comme celle du fond du menu principal.
Je vais juste vous donner leurs noms :

• ball1.png = sphère située en haut à droite lors d'une partie qui montre le nombre de notes à réussir avant un multiplicateur ;

• ball2.png = comme ball1.png ;

• cassette.png = image de fond de l'écran du choix d'une musique ;

• keyboard.png = image de fond du menu principal ;

• left.png ;

• right.png ;

• editor.png.

Images personnelles

Maintenant, nous allons nous occuper des décors de la scène lors d'une partie. Vous pouvez faire à peu près tout ce que vous voulez :D : une scène, un guitariste, des spots (nous verrons après pour les lumières qui en sortent ;) ), un public, un personnage de jeu vidéo, etc.

Exemple :

(un démon appelé "Jack Givre" du jeu vidéo "Shin Megami Tensei: Lucifer's Call" sur PS2. ^^ )

Vous pouvez faire autant d'images de ce type que vous voulez. :)

Sachez qu'il est possible de modifier les fichiers cassette.dae, key.dae et note.dae (qui sont des modèles 3D) avec un logiciel comme Blender. Cependant, je ne m'y connais pas assez pour en parler en détails dans mon tuto.

Les images vectorielles

Il faut un fichier vectoriel pour chaque image. Bien qu'il ne soit pas nécessaire d'utiliser le .png dans certains cas, vous allez mettre chacune de vos images .png dans une image vectorielle .svg, vu que je ne sais pas exactement desquelles il s'agit.

Lancez Inkscape puis, via votre explorateur, prenez le fichier d'une de vos images .png et faites-le glisser dans la fenêtre de Inkscape. Placez ensuite votre image dans le coin en haut à gauche de la feuille comme sur cet exemple :

Maintenant, allez dans "Fichier" -> "Enregistrer sous..." et enregistrez le fichier dans le dossier de votre mod en le nommant comme le .png qui lui correspond, mais avec l'extension .svg (exemple : neck.png -> neck.svg).

Faites ceci pour TOUTES vos images .png.

Voilà ! Passons au chapitre suivant dans lequel nous allons nous occuper des fichiers .ini stage.ini et theme.ini.

stage.ini et theme.ini

Dans ce chapitre, je vais vous expliquer quoi mettre dans les fichiers .inistage.ini et theme.ini.

Création de la scène avec le stage.ini

stage.ini est sûrement le fichier LE PLUS IMPORTANT d'un mod ! Il s'agit du fichier qui va dire à Frets On Fire :

- affiche cette image ;
- positionne cette image à tel endroit ;
- redimensionne cette image ;
- crée des effets, ...

Il gère donc tout le décor de la scène. :)

C'est quoi, un .ini ?

Un fichier .ini n'est rien d'autre qu'un fichier texte. :p
C'est pour cela que je parlais d'un éditeur de texte comme Notepad++ dans la liste des logiciels nécessaires à la création d'un mod.
Les .ini existent depuis très longtemps et d'ailleurs, beaucoup de vieux jeux PC sauvegardaient les options du joueur dans un fichier .ini éditable avec le Bloc-notes.

Je vous conseille d'utiliser Notepad++ et de sélectionner dans son onglet "langage" : "MS INI file".
C'est beaucoup plus facile de se repérer avec Notepad++ qu'avec le simple bloc-notes de windows.

Pour enregistrer votre fichier au format .ini avec n'importe quel logiciel de traitement de texte, faites "Enregistrer sous...". Ensuite, dans le champ "Nom du fichier", mettez le nom du fichier suivi de .ini (exemple : stage.ini) et sélectionnez dans le menu déroulant situé en-dessous "Tous les fichiers". Terminez en cliquant sur "Enregistrer".

Maintenant, je vais vous montrer la structure du .ini :

[layer1] texture    = flame1.svg xres       = 512 yres       = 512 xscale     = 1.3 yscale     = 1.3 xpos       = 0.0 ypos       = 0.0 angle      = 0.0   [layer1:fx1] type       = wiggle trigger    = miss xmagnitude = 0.02 ymagnitude = -0.04 frequency  = 2.0   [layer1:fx2] type       = scale trigger    = pick xmagnitude = 0.05 ymagnitude = 0.05 delay      = 0.25

Je vais découper cette structure en plusieurs parties afin de vous l'expliquer plus en détails :

[layer1] texture    = flame1.svg xres       = 512 yres       = 512 xscale     = 1.3 yscale     = 1.3 xpos       = 0.0 ypos       = 0.0 angle      = 0.0

Cette partie s'appelle [layer1]. Elle contient le nom d'une image à afficher (c'est la valeur de "texture") ainsi que sa position (valeur de "xpos" et "ypos"), ses dimensions (valeur de "xscale" et "yscale") et son angle (valeur de "angle").

[layer1:fx1] type       = wiggle trigger    = miss xmagnitude = 0.02 ymagnitude = -0.04 frequency  = 2.0

Cette partie s'appelle [layer1:fx1]. Elle permet d'ajouter un effet, dans certaines conditions, à l'image affichée par [layer1].

Dans le cas présent, elle déplace l'image (type = wiggle) de 0.02 sur l'axe X (xmagnitude = 0.02) et de -0.04 sur l'axe Y (ymagnitude = -0.04), de façon à donner un effet de secousse quand le joueur rate une note (trigger = miss).

Cela peut vous paraître un peu flou si vous n'aimez ni l'anglais, ni les maths. ^^

Mais ne vous inquiétez pas, je vous expliquerai la liste des commandes et valeurs par défaut. Cependant, pour les axes X et Y, je ne peux que vous conseiller de faire des essais afin de réussir à vous situer dans la fenêtre. Si ça peut vous rassurer, en créant mon mod, je n'ai pas réussi à tout positionner correctement au bon endroit du premier coup, et j'ai passé plus d'une heure à positionner les spots correctement. :p

Enfin, la chose principale à retenir est cette structure :

[layer1]   [layer1:fx1]   [layer1:fx2]   [layer2]   [layer2:fx1]   ...