Qu’est qu’un screenpack mugen me direz-vous ?
Un screenpack regroupe la configuration et le design des 4 écrans principaux de votre jeu, a savoir, l’écran de titre, l’écran de choix des personnages,l’écran des options et l’écran vs.
On peut trouver aussi des screenpacks qui comportent en plus des intros ou des lifebars, mais ces deux éléments feront l’objet de tutoriaux ultérieurs.
Dans la version de base de mugen, voici a quoi ressemble ces quatre écrans :
Mugen Ecran VS
|
Mugen Ecran de Titre
|
Mugen Ecran de selection
|
Mugen Ecran Options
|
Ce tutorial va donc vous apprendre comment personnaliser tous ces écrans et ainsi façonner le jeu à votre façon.
On va prendre pour exemple la façon dont j’ai réalisé le screenpack de mon jeu : Dragonball Z French Power
IMPORTANT : Avant de vous attaquer à ce tutorial, il faut que vous sachiez utiliser le logiciel Fighter Factory.
Je vous invite donc à consulter le tutorial sur l’utilisation de Fighter Factory.
I- L’ecran de Titre
1) Changer l’image de fond avec Fighter Factory
Tout d’abord, il vous faut choisir l’image qui constituera l’écran de titre de votre jeu.
Il vous faudra la retoucher avec votre logiciel de retouche afin de la personnaliser en y ajoutant par exemple :
– Le titre de votre jeu
– Le bloc pour le menu
Une fois la première ébauche de votre image faîte, vous devez impérativement l’enregistrer au format pcx, en mode 256 couleurs et 8 bits.
Car sinon, dans le cas échéant, votre image ne sera pas reconnue par mugen.
De même, votre image doit avoir pour taille 240 pixels en largeur et 320 en hauteur.
Voici l’image que j’ai choisi :
Une fois votre image prête et enregistrée au format pcx, lancez Fighter Factory.
Allez ensuite dans l’onglet "Sprites" et cliquez sur "ouvrir".
Dans la nouvelle fenêtre qui apparait, sélectionnez votre fichier system.sff, contenu dans le dossier DATA de votre dossier winmugen.
Toute la palette des images que contient votre fichier system.sff apparait alors à l’écran. Pour passer à l’image suivante, il vous faut faire défilerla barre de défilement qui se trouve dans le menu de gauche.
Dans notre cas, l’image que l’on veut remplacer est l’image de l’écran titre, à savoir l’image n°2.
Faîtes défiler la barre de défilement jusqu’à la faire apparaitre dans l’écran du milieu.
Pour la remplacer, il vous suffit de vous rendre dans le menu "Sprites" en haut et de cliquer sur "changer".
Selectionner l’image pcx sur votre disque dur et validez.
Votre nouvelle image apparait maintenant à l’écran.
Pensez à modifier la valeur des coordonnées de l’image dans le menu de droite.
Mettez à 0 les valeurs X et Y. Mais ne touchez pas le groupe ni l’image.
Lancez Winmugen et vous verrez ce que cela donne à l’écran !
Pour l’instant, vous pouvez remarquer que votre image défile à l’écran au lieu d’être fixe.
Pas de panique, on va régler ca dans la section suivante.
2) Positionner le menu
On a donc créé un cadre blanc sur notre image visant à accueillir le menu.
Il faut donc définir la position du menu en absisse et en ordonnée pour qu’il apparaisse pile poil dans le cadre.
Il vous faut donc ouvrir avec le bloc note, le fichier system.def qui se trouve dans le dossier data de winmugen.
2.1) Enlever le défilement de l’image de fond
On va d’abord commencer par enlever le défilement de notre image de fond.
Pour ce faire, faîtes défiler le document jusqu’à la section "Title background definition".
Vous avez ceci :
Pour que votre image de fond soit fixe, il vous faut garder uniquement la section [TitleBG 0].
Effacez donc les trois autres, et apportez ces quelques modifications à celle restante :
Lancez à présent votre jeu et miracle : Votre fond ne défile plus^^
2.2) Déplacer le menu
Remonter un peu plus haut dans votre document jusqu’à la section "Title screen definition".
C’est dans cette section que se configure la position des différents éléments qui composent l’écran de titre.
Dans la version par default, le menu se trouve donc vers le bas de l’écran, au centre.
Par rapport à notre nouvelle image de fond, nous devons donc déplacer le menu vers la droite.
Pour ce faire, voici les lignes à modifier :
Cette ligne définie la position du bloc du menu.
– 159 est la coordonée horizontale de votre menu. Ca signifie que votre menu se positionnera à 159px du bord gauche de votre écran.
– 158 est la coordonnée verticale du menu. Ca signifie que votre menu se positionnera à 158px du bord haut de votre écran.
Pour placer le menu notre emplacement, on va donc entrer les valeurs suivantes :
Lancez winmugen et vous verrez que votre menu apparait bien centrer dans votre cadre.
2.3) Personnaliser le menu
D’autres options intéréssantes vous permettent de personnaliser encore plus le menu.
Vous permet de définir l’espacement entre chaque élément du menu.
Imaginer que chaque option de votre menu est encadré d’un rectangle.
C’est les coordonées de ce rectangle qu’on vous demande d’entrer.
Vous permet de renommer à votre façon les différents items du menu.
Si vous voulez qu’une option n’apparaisse pas dans le jeu, supprimer le nom et laissez les guillemets vide.
Imaginer qu’un rectangle div class="encadre">
Vous permet de définir le nombre d’items visible sans utiliser la barre de défilement.
Ici, pour voir les options qui se trouvent aprés l’item TEAM CO-OP, il faudra utiliser la barre de défilement.
Voila !
Maintenant que vous savez personnaliser votre écran de Titre, on passe à l’écran de sélection des personnages !
II- L’écran de sélection des personnages
L’écran de sélection des personnages est le plus important du jeu, mais aussi le plus long à configurer.
1. Changer l’image de fond avec Fighter Factory
De la même manière que précédemment, choisissez l’image qui illustrera votre écran de sélection.
Tenez compte dans votre image de l’emplacement futur des slots de sélection et des portraits des personnages.
Une nouvelle fois, il est impératif d’enregistrer votre image au format pcx, en mode 256 couleurs et en 8 bits.
Pensez aussi à prendre une image au format 320x240.
– Ouvrez ensuite Fighter Factory.
– Ouvrez votre fichier system.sff.
– L’image à changer est cette fois çi la numéro 5.
– Allez dans le menu "Sprites" puis "Changer".
– Choisissez votre image pcx et validez.
Votre image apparait dans votre espace de travail. Enregistrez.
Lancez à présent winmugen et regardez à quoi ressemble votre écran de sélection.
L’image de fond est bien là, mais une nouvelle fois, elle défile.
2.- Enlever les défilements de l’image de fond
Etant donné que l’on a choisit une image fixe, on va désactiver le défilement de l’image.
Ouvez le fichier system.def avec le bloc-note.
Faîtes défiler le document jusqu’à la section "Character select screen background".
Modifier la sous-section [SelectBG 0] comme il suit :
Enregistrez.
Lancez de nouveau winmugen et vous verrez que votre image de fond ne défile plus !
3.Définir le nombre de slot
Pour les besoins de mon jeu, je souhaite proposer un choix maximum de 120 personnages. Je vais donc le définir.
Dans votre fichier system.def, remonter jusqu’à la section "Character select definition"
Les lignes qui nous intéressent sont :
Pour avoir au minimum mes 120 slots, je vais donc entrer :
Avant d’aller voir ce que cela donne dans winmugen, on va d’abord activer ces deux options en mettant comme valeur 1 :
Lancez maintenant WinMugen. Vous pouvez constater que le nombre de slot s’est bien agrandit.
Maintenant, il vous faut repositionner le bloc entier contenant les slots afin qu’il aparraisse en intégralité et à l’endroit que vous souhaitez de l’écran.
4.Positionner les slots
Toujours dans la section "Character select definition" de votre fichier system.def, il va vous falloir modifier ces lignes :
Comme pour le menu de l’écran de titre, vous devez spécifier ici les coordonnées horizontale et verticale de votre bloc.
En lançant le jeu, on a vu que le bloc était décalé en bas à droite. On va donc le ramener au centre en entrant ces valeurs :
Relancez WinMugen. Vous constatez que le menu est bien centré ce coup ci.
Mais il trop grand et tous les slots n’apparaissent pas en largeur.
On va donc réduire la taille des slots. Les lignes concernées sont :
On réduit donc la taille de chaque carré :
Et on laisse l’espacement tel quel.
Relancez winmugen.
Le bloc des slots s’affiche maintenant en intégralité.
Mais vu que l’on a réduit la taille des cellules, il se retrouve maintenant trop haut.
On va modifier à nouveau ses cordonnées en entrant :
Votre bloc est maintenant tout en bas et centré, vous laissant ainsi la place pour afficher les grand portraits de vos personnages (Appelé aussi "Big Portrait").
Mais avant de passer à la section suivante, on régler un problème que vous avez du remarquer suite à la réduction de la taille des carrés :
L’image de fond de la cellule, le curseur et l’icône du personnage sont trop grands pour contenir dans la nouvelle taille des nos carrés.
Il faut donc refaire les sprites concernés.
5.Changer l’image de fond de la cellule
Tous les carrés ont la même et unique image de fond qui définie sa taille et son contour.
Il vous faut donc créer avec le logiciel de retouche de votre choix un carré blanc encadré de bordure bleu (ou une autre couleur si vous préféré).
Il faut que cette image soit de la même taille que celle définie pour vos cellules, à savoir ici 15x15 pixels.
Mais il vaut mieux toujours faire une image a peine plus grande, afin de tenir compte des bordures et des espacements éventuels.
On va donc faire une image au format 17x17px.
Comme toujours, il vous faut l’enregistrer au format pcx, en 256 couleurs et en 8 bits.
Important également, il vous faut enregistrer cette image avec un fond transparent. (Tutorial ici)
Retourner ensuite sur Fighter Factory et changer l’image de fond des cellules, qui est la n°10, en la remplaçant par celle que vous venez de créer.
Lancez winmugen, et vous pouvez constater que vous avez à présent des carrés uniformes.
6.Changer l’image de fond des curseurs
De la même manière que précédemment, créer deux carrés blanc, l’un avec une bordure bleu et l’autre avec une bordure rouge.
Il est impératif de les créer avec un fond transparent.
Affectez leur la même taille que l’image de fond de vos cellules, à savoir 17x17px.
Et bien sûr, à enregistrer au format pcx, 256 couleurs, 8 bits !
Dans Fighter Factory, remplacez les image du curseur n° 12 et 14 par votre carré au bordure bleu.
Et remplacer les images du curseur n° 13 et 15, par votre carré rouge.
Relancez winmugen et les curseur du joueur 1 et du jouer 2 sont bien de la taille des cellules !
Il nous reste plus maintenant diminuer la taille des icônes des personnages pour qu’elle rentrent elles aussi dans notre cellule de 15x15px.
Pour ce faire, rien de plus simple.
Dans votre fichier system.def et toujours dans la section "Character select definition", recherchez cette ligne :
La valeur 1 signifie que l’icône du personnage adopte la taille par défault des cellules, à savoir 27x27px.
Sachant que nos cellules font 15x15px, on peut donc dire que la diminution par rapport à la taille originale est un peu moins de la moitié.
On va donc entrer comme valeur :
Lancez à nouveau winmugen et vous pouvez constater que la taille de l’icône est désormais en harmonie avec la taille de vos cellules !
On peut maintenant s’occuper des "Big Portrait"
7.Positionner et configurer les "Big portrait"
Les "Big Portrait" sont les grands portraits qui apparaissent quand vous survoler la case d’un personnage.
Là aussi, la taille et la position de ces portraits est entièrement configurable.
Le but ici avec l’image de fond que j’ai choisis, est de positionner les portraits du joueur 1 et du joueur 2 de chaque coté de trunks.
Pour ce faire, toujours dans la section "Character select definition" de votre fichier system.def, descendez jusqu’à la sous-section " ;Big portraits".
Par défault, vous avez ceci :
On va d’abord modifier la taille des portraits. Par défault, elle est de 120x140px.
Par rapport à nos écrans de sélection c’est un peu trop grand.
Il vous faut donc prendre ces deux lignes :
Comme pour l’icône du personnage, la valeur 1 représente la taille par défault.
On va donc entrer ces valeurs :
Lancez winmugen et vous verrez vos portraits ne dépassent plus sur vos cellules de sélection.
Ici dans notre cas, on a pas besoin de modifier les coordonnées des portraits car ils sont déjà bien placés.
Mais je vous explique quand même ici comment faire si jamais vous avez besoin :
Pour repositionner les portraits, ce sont ces deux lignes qui sont concernés :
Avec, comme déjà vu précédemment, la valeur horizontale et verticale à renseigner.
8.Positionner les noms des personnages
En dessous de la sous-section BigPortrait, vous avez la sous-section " ;Name" :
Dans notre écran de sélection, on souhaite faire apparaitre le nom du personnage en bas de son portrait.
Les lignes concernées sont :
On va donc entrer comme coordonnées :
Lancez winmugen et vous pouvez constater que le nom du personnage s’affiche en bas de son portrait !
Et voila ouf ! On en a finie avec l’écran de sélection des personnages.
On passe maintenant aux deux derniers écrans !
III- L’écran VS
L’écran vs est l’écran qui apparait une fois que les deux joueurs on choisit leur personnage et on validé.
Choisissez donc une image qui illustrera votre écran vs.
Comme toujours, format pcx, 256 couleurs, 8 bits.
Privilégez aussi la taille de 240x320 pour votre image de fond.
Ensuite, dans Fighter Maker, il va falloir ajouter cette image de fond, et non la remplacer comme pour les cas précédent.
En effet, par défault, winmugen utilise pour l’écran vs la même image que pour l’écran de sélection des personnages.
1)- Ajouter l’image de fond avec Fighter Maker
Avant d’ajouter l’image dans fighter Maker, repérez d’abord quel groupe vous allez pouvoir créér pour y affecter l’image.
Dans le menu de droite, faîtes défiler les images jusqu’à la dernière, c’est à dire la n°30.
Le groupe de cette image est le 200. Vous pouvez donc créer votre image dans le groupe 201.
Allez dans le menu "Sprites" puis "Ajouter".
Dans la fenêtre qui apparait, sélectionnez votre image pcx.
Mais avant de cliquer sur "valider", il vous faut remplir les options qui apparaissent en dessous.
– Dans groupe entrez donc "201"
– Dans la case des axes X et Y, entrez 0.
Maintenant vous pouvez valider.
Votre image est désormais intégré à votre fichier system.sff. Enregistrez.
Maintenant, il vous indiquer dans votre fichier system.def, le numéro du groupe et de l’image que vous venez d’ajouter.
Faîtes défiler votre écran jusqu’à la section " ;VS Match up screen background".
Vous avez 4 sous-sections [VersusBG] et une section [Begin Action 200].
Tout d’abord, supprimer les sections [VersusBG 2] et [VersusBG 3]. On en a pas besoin.
Ensuite, modifier la section [VersusBG 1] comme il suit :
Lancez à présent winmugen.
Choisissez le personnage et validez.
Votre nouveau écran vs apparait.
A noter que la section [VersusBG 4] correspond au logo VS qui apparait entre les deux personnages.
Cette section vous permet donc de modifier l’emplacement du logo. Vous pouvez également changer l’image du logo VS avec Fighter Maker, comme pour le reste.
2)- Positionner les portraits
De la même manière que pour les écrans précédents, vous pouvez à votre guise modifier les coordonnées et la taille des "Big Portrait" et "Noms" qui apparaissent à l’écran VS.
Je ne vais re-décrire toute la procédure une nouvelle fois.
Vous avez vu comment faire.
Pour modifier les "big portrait" et les "noms" dans l’écran vs, il faut remonter à la section juste au dessus, dans votre fichier system.def, c’est à dire la section [VS Screen].
Vous y retrouvez les deux sous-sections de tout à l’heure, à savoir ;BigPortrait et ;Names, avec exactement les mêmes options.
Il y a juste une ligne que nous n’avons pas encore utilisé mais qui se révèle utile pour l’écran vs : C’est la ligne :
Elle vous permet de définir, en nombre de secondes, le temps que sera affiché l’écran vs avant le début du combat.
Et voila.
On a finis avec l’Ecran VS, on passe maintenant à l’Ecran OPTIONS !
IV- L’écran des options
1) Changer l’image de fond avec Fighter Maker
Comme pour tous le reste, choisissez votre image de fond.
Enregistrez au format pcx, 256 couleurs et 8 bits.
A l’image de l’écran vs, par default, l’écran des options arbore lui aussi la même image de fond que l’écran de sélection des personnages.
Il vous faut donc ajouter une nouvelle image dans Fighter Maker, en mettant cette fois çi comme groupe 202 et toujours 0 pour le n° de l’image et les axes X et Y.
Dans votre fichier system.sff, descendez tout en bas jusqu’a la section " ;Options screen background".
Modifiez les valeurs comme il suit :
Lancez winmugen, et votre nouvel écran d’option est bel et bien là !
IV- Pour Conclure
Le tutorial se termine donc ici.
Il vous a expliqué comme personnaliser les 4 plus gros écrans du jeu.
Bien évidemment, il reste quelques autres écrans qui sont aussi personnalisables comme l’écran continue, l’écran victoire ou encore l’écran survival.
Si vous souhaitez approfondir vos connaissances dans la création de Screenpacks, nous vous proposons de consulter les deux tutoriaux suivants, qui sont un plus poussés que celui-ci :
– Créer son screenpack MUGEN : Pour aller plus loin
– Créer son screenpack Mugen : Spécial version Mugen 1.0
Moi j’arrive pas a changer le premier fond d’écran
un logiciel et ouais.
Mais c’est quoi Fighter Maker
Quand j’enregistre mon image et que je lance mugen j’ai error.
Des le debut j’y arrive pas aidez moi :’(