Aperçu de stages dans l’écran de sélection Mugen : Tutorial

Donner une touche personnelle et professionnelle à vos screenpacks en ajoutant un aperçu de vos stages !

 I. Introduction

Qu’est ce qu’un aperçu de stage ?

C’est la possibilité qu’offre Mugen de créer une police (un font) qui permet d’afficher à l’écran de sélection une image réduite du stage auquel on veut jouer.

Comme sur les exemples suivants :

Tiré respectivement de mes jeux : Street Fighter 2009 The Clash et DragonBall Z Budokai HR.

Quel est l’intérêt d’un tel font ?

Tout d’abord il rend la reconnaissance du stage plus facile, un nom n’est pas toujours très parlant, et ensuite visuellement cela apporte un plus non négligeable à la qualité graphique de votre screenpack.

Les limites d’un tel aperçu

La plus contraignante des limites est le nombre de stages que l’on peut gérer avec ce font. Je considère qu’au delà de 40 stages, il est inutile de vouloir créer un aperçu, en effet il faut savoir (et j’y reviendrai plus tard) que tous les stages de votre jeu seront regroupés en une seule image de 256 couleurs, donc un trop grand nombre de stages nuira fortement à la qualité visuelle de cette image (en gros plus on veut mettre de stages et plus on perd de qualité à l’aperçu). D’autre part puisque que l’on va créer un font, il faut comprendre que chaque aperçu sera associé à un caractère (lettre, chiffre, etc.), on est donc limité par le nombre de caractères gérables dans une police Mugen (soit moins de 100).

Et enfin une autre des limites, une fois cette police créée, c’est qu’il ne sera plus possible alors d’ajouter un stage à notre jeu (à moins de créer une autre police...). Ce qui vous en conviendrez, va à l’encontre de la flexibilité de Mugen. Je conseil donc de ne créer une telle police uniquement pour "un jeu complet" qui sera destiné à ne jamais être modifié.

 II. Outils

Avant de nous lancer dans la création de cette police, voici la liste des outils qui nous seront nécessaire pour en venir à bout :

- Un éditeur graphique type Photoshop, Paint Shop Pro ou The Gimp...
- Le programme FntEditor.
- Le programme StageViewer.

En outre, avant de commencer, l’idéal, c’est de bien étudier votre écran de sélection. En effet, afficher un aperçu de stage ne se gère pas aussi simplement qu’un simple affichage de texte, car l’aperçu prendra une certaine place, du moins, si vous voulez qu’il soit reconnaissable. A vous donc de voir comment vous pouvez agencer cet écran en travaillant sur la taille, la position et l’apparence de certains éléments, pour voir où seront vos shots et quelle taille ils occuperont. Il vaut mieux faire ceci avant d’entrer dans le vif du sujet, sans quoi vous serez peut-être amené à devoir refaire vos captures de stage parce qu’elles seront trop grandes ou trop petites.

  III. Principe

L’idée est assez simple : pour afficher le nom d’un stage à l’écran de sélection, Mugen récupère le nom du stage dans son fichier DEF, et l’affiche à l’écran en utilisant une police spécifiée. On va donc renommer le nom dans les DEF de stage pour qu’il n’ait qu’un seul caractère. Ensuite, on créera une police où chaque caractère sera non pas une lettre mais un shot correspondant au stage qui porte ce nom. Par exemple, si on a un stage "Toto", on renomme "Toto" en "A" (par exemple), et dans la police spéciale que l’on va créer, on incorpore les shots de tous les stages, et on définira le shot correspondant à "Toto" comme étant la lettre A. Ainsi, quand Mugen voudra afficher le nom du stage "Toto", il récupérera le nom dans le DEF ("A") et affichera le caractère correspondant dans la police (c’est à dire le shot du stage, associé à la lettre A).

 IV. Récupérer les images des stages

Maintenant nous allons voir comment récupérer une image (un shot) d’un stage sans les barres de vie, ni les personnages afin de nous en servir comme aperçu.

La méthode la plus simple consiste à utiliser l’excellent logiciel Stage Viewer. Malheureusement, ce logiciel n’étant pas encore parfait il se peut que certain stage ne puisse pas être vu par ce logiciel, (notamment tous les stages HR !) pour ces stages là il faudra utiliser une autre méthode plus complexe qui consistera à faire "disparaître" de l’écran Mugen les personnages et la barre de vie.

1) Avec Stage Viewer

Tout d’abord lancé le programme, vous devriez voir s’ouvrir une boite de dialogue qui vous demande de localiser le dossier de votre jeu Mugen :

En cliquant sur OK, vous allez pouvoir parcourir les lecteurs et dossiers de votre PC pour sélectionner votre dossier Mugen (pas le dossier Stages !!!).

Une fois votre dossier sélectionné, cliquer sur OK. (Note : vous ne recevrez ce message qu’au premier lancement de Stage Viewer, par la suite et par défaut à chaque fois que vous lancerez le programme, il ira chercher les stages dans ce dossier Mugen, pour en changer par la suite, il vous suffit de supprimer le fichier SV.cfg puis de relancer le programme.) Ne vous occupez pas des autres fenêtres qui s’ouvriront ensuite, contentez vous de cliquer sur OK à chaque fois pour arriver finalement à la fenêtre suivante :

Cliquez sur "Stage List" dans la barre de menu pour afficher la liste des stages dans un menu latéral à droite :

sélectionner ensuite le stage dont vous voulez un aperçu puis appuyer sur la touche F8 de votre clavier pour obtenir une capture de votre stage.

Pour récupérer l’image il vous suffit d’aller dans le sous-dossier "snapshots" du dossier de StageViewer ! L’image porte le nom du stage, suivi d’un chiffre et elle est enregistré au format pcx.

2) Sans Stage Viewer

Voici une autre méthode pour récupérer une capture d’un stage, elle n’est pas de moi mais de Mike Wirewolf et fonctionne aussi très bien !

Il n’y a qu’un léger changement à faire dans le fichier Data\mugen.cfg (et encore, il se peut que les paramètres soient déjà correctement établis) : Trouvez la section [Debug] vers le début de fichier, et assurez-vous que la valeur du paramètre "AllowDebugKeys" est à 1.

Ensuite, lancez Mugen, allez en mode Training, sélectionnez n’importe quels personnages, puis le stage que vous désirez capturer. Une fois le combat lancé, déplacez les personnages de façon à obtenir la vue souhaitée (traditionnellement, on prend la vue affichée au début du combat, donc sans déplacer les personnages, mais on peut faire des exceptions pour un meilleur aperçu du stage), puis faites les combinaisons de touches suivantes :

- [Ctrl]+L : Pour désactiver les barres de vie

- [Ctrl]+[Alt]+1 : pour faire disparaître le joueur 1,

- [Ctrl]+[Alt]+2 : pour faire disparaître le joueur 2.

- [F12] : pour prendre un shot de l’écran (au format PCX).

Effectuez à nouveau ces combinaisons pour réactiver l’affichage des différents éléments. Notez qu’on ne peut pas modifier la vue du stage lorsqu’on a désactivé les personnages. Si la vue ne vous convient pas, vous devez réactiver les personnages, les déplacer selon votre convenance, puis les désactiver à nouveau.

 V. Créer le font

1) Créer l’image du font

Maintenant que nous avons récupéré une capture de chacun des stages de notre jeu, nous pouvons créer notre police.

Il faut tout d’abord réduire toutes les images à la même taille (à vous de voir laquelle suivant comment vous souhaitez placer l’aperçu de stage dans votre écran de sélection).

Ensuite il faut réunir tous les images en une seule image en les alignant horizontalement les une à la suite des autres (sans en décaler une vers le haut ou vers le bas), c’est à dire que si vous avez par exemple : 30 images de 96 par 72, l’image contenant toutes les captures devra elle avoir une taille de : 30x96 = 2880 par 72.

Vous devez obtenir une image qui ressemblera à ça :

Attention, ce n’est pas tout ! Pour éviter les erreurs, on doit prévoir un cas particulier dans la sélection des stages : le "randomselect". C’est la sélection d’un stage de façon aléatoire. Nous devons donc agrandir notre image d’une largeur de shot (donc de 96 pixels dans notre exemple). Libre à nous de dessiner ce que l’on veut pour symboliser l’aléatoire : un point d’interrogation en blanc sur fond noir ou une image.

Vous obtiendrez alors quelque chose comme ça :

Maintenant que notre image est complète, il nous faut la transformer en 256 couleurs. Seulement une fois cela fait, je vous rappelle que la index couleur qui se trouve à l’index 0 de notre palette correspondra à la transparence, or nous n’avons pas besoin de transparence pour notre police, il nous faut donc éliminer cette couleur.

Voilà comment je procède avec Gimp (il doit y avoir d’autre méthode, mais la mienne a l’avantage d’être plutôt rapide et très simple...) :

- Tout d’abord changer la couleur d’index 0 pour la remplacer par une autre plus voyante et qui n’est pas dans la palette (rose bonbon ou vert fluo)

- Ensuite sélectionner cette nouvelle couleur sur l’image.

- Puis prendre l’outil pinceau et choisir comme couleur de remplissage une couleur de la palette proche de celle qui se trouvait à l’index 0 (bien souvent cela sera du noir).

- Et enfin repasser avec le pinceau sur la couleur voyante. Si c’est bien fait vous ne devez voir aucune différence avec l’image du début.

Enregistrer ensuite votre image au format pcx.

2) Créer le fichier texte

Quand on crée une police, comme c’est notre cas actuellement, on a besoin d’un fichier texte qui va dire à Mugen comment "découper" l’image et comment associer tel "morceau" à tel caractère.

Notre fichier texte sera donc simple. Il comporte 2 partie : [Def] qui donne les caractéristiques globales de la police, et [Map] qui liste tous les caractères de la police, dans l’ordre.

La partie [Def] :

;Police Aperçu de stages by .....
[Def]
Size = 96,72
Spacing = 0,0
Colors = 255
Offset = 0,0
Type = Fixed

Quelques explications :

- La première ligne débute par un " ;" ce qui veut dire que c’est un simple commentaire.

- Size définit la taille d’un caractère moyen au format largeur,hauteur. Dans notre cas, c’est simple : puisque tous les shots - qui formeront chacun un caractère - auront tous la même taille, il suffit de mettre la taille d’un shot soit 96,72.

- Spacing définit l’espacement (largeur,hauteur) entre un caractère et le suivant. 0,0 par défaut.

- Colors définit le nombre de couleurs dans chaque banque de couleurs.

- Offset indique le décalage en largeur,hauteur à appliquer pour afficher le caractère par rapport à la position initiale.

- Enfin, Type définit le type de police (fixe ou variable). Pour nous, ce sera toujours Fixed.

Ouvrez fonteditor puis recopier la partie [Def], comme ceci :

La partie [Map] :

Avant de voir cette partie, il faut s’arrêter sur quelque chose d’important : pour notre police d’aperçu de stage certain caractère sont interdis et un autre est "réservé", voyons lesquels.

En fait c’est très simple, si vous regardez attentivement un écran de sélection d’un jeu mugen vous verrez que lorsque vous souhaitez choisir un stage il apparaît : "Stage : Random". Or pour nous ne doit apparaître que l’aperçu de notre stage, les lettres S, t, a, g, e et n, d, o , m nous sont donc interdites et la lettre R est "réservé" à l’aperçu de stage aléatoire.

Résumé : dans la map il ne faut jamais utiliser les caractères suivants : S, t, a, g, e , n, d, o, m et le caractère R désignera toujours l’image du stage aléatoire.

Voici donc à quoi doit ressembler votre map :

[Map]
A
B
C
D
E
F
G
H
R

A correspondra au premier aperçu de stage, B au deuxième, C au troisième... et R pour le Random.

Il ne nous reste plus qu’à insérer notre image en cliquant sur , puis à sauvegarder en cliquant sur .

Vous devez obtenir quelque chose qui ressemble ça :

 VI. Intégrer l’aperçu dans le jeu

Maintenant que nous avons créé notre police, il ne nous reste plus qu’à effectuer quelques modifications avant de la tester.

Premièrement, et c’est tout bête mais mieux vaut le rappeler, placer votre police dans le dossier font de votre jeu mugen !

Deuxièmement, il nous faut renommer tous les stages de notre jeu pour que chaque aperçu corresponde au bon stage. Pour cela il nous faut ouvrir chaque fichier .def de nos stages (à l’aide de bloc-notes) puis remplacer :

name = "nom du stage" par name = "A" (si A est le caractère correspondant à ce stage dans notre map...)

Vérifier bien que vous renommez convenablement les stages (n’inverser pas deux stages entre eux...).

Ensuite il faut indiquer à Mugen d’utiliser notre font, pour cela ouvrir le fichier systeme.def :

Tout d’abord, en début de fichier, vous devez voir une section [Files] qui se termine par des lignes "font..." suivi d’un numéro (font1 = , font 2 =, etc.). Rajoutez une ligne en prenant le numéro suivant (si ça s’arrête à "font3=font/jg.fnt" comme c’est le cas dans le screenpack de base de Mugen, insérez une ligne en dessous, et commencez la ligne par "font4="), et complétez avec le nom de votre police (n’oubliez pas d’indiquer le dossier "font").

Par exemple, pour notre police, ça donnera : font4=font/stage.fnt

Ensuite, cherchez les paramètres suivants, vers le milieu du groupe

[Select Info] :

stage.active.font=
stage.active2.font=
stage.done.font=

Remplacer par :

stage.active.font= 4,0, -1
stage.active2.font= 4,0
stage.done.font= 4,0

Enregistrer votre fichier systeme.def avec ces modifications puis lancer mugen pour voir enfin à quoi ressemble votre aperçu.

Normalement vous devez remarquer que votre aperçu se trouve un peu n’importe et sûrement pas là où vous souhaiteriez qu’il soit....

Il ne vous reste donc plus qu’à le déplacer en changeant les valeurs de :

stage.pos = 320,450

Changer ces valeurs jusqu’à ce que l’aperçu retrouve la place que vous lui avez désigné !

Vous pouvez bien sûr améliorer cette aperçu de stage de diverses manières : rajouter le nom du stage sur l’aperçu, encadrer l’aperçu,....

Mais ces améliorations ne dépendant que de vous et de votre imagination, n’oubliez pas que Mugen offre des multitudes de possibilités...

Tutorial réalisé par Misterr07 (librement inspiré de celui de Mike Werewolf)

Commentaires (0)

Qui êtes-vous ?
Votre message

Soutenez-nous!
Vous aimez JeuxMangas?

Alors soyez sympas et aidez-nous à atteindre les 5000 abonnés sur notre chaîne youtube!

YouTube

Les + consultés