Tutoriels

Créer son screenpack Mugen : Spécial Version Mugen 1.0

Publié le: jeudi 17 avril 2014 - Dernière modification le: lundi 4 février 2019 - par

Misterr07 vous explique dans ce tutoriel comment créer un screenpack MUGEN en utilisant toutes les nouveautés offertes par la version 1.0 du moteur

Voici un nouveau tutoriel sur la création d’un screenpack, mais cette fois-ci pour le nouveau moteur mugen 1.0 !

I - Préliminaires

Petit rappel des conseils :

 Premier conseil : Ce tutoriel est destiné aux personnes maîtrisant déjà un minimun l’univers Mugen et la création avec MUGEN.

Si vous débutez, consultez avant tout chose ces tutoriaux pour apprendre les bases :

 Convertir une image pour MUGEN : Avec GIMP et Rendre le fond d’un sprite transparent pour MUGEN
Pour les bases dans le travail sur les sprites

 Créer son screenpack Mugen : Bien Commencer et Créer son screenpack Mugen : Aller Plus loin
Pour apprendre les bases dans la création d’un screenpack.

Deuxièmement, les outils qui nous seront utiles :

 Gimp pour tous ce qui est retouche d’images !
 fighter factory pour les fichier sff !
 blocnotes pour les fichiers def !

Avant toute chose

Il existe une énorme différence entre mugen 1.0 et winmugen. Avec le nouveau moteur mugen on choisit la "taille" du screenpack sans changer de moteur !

En effet ils existent différentes versions de winmugen pour différents formats d’affichage !

Petit rappel :
 winmugen : 320 par 240 pour tous les écrans !
 winmugen plus (ou winmugen HR) : 320 par 240 pour tous les écrans sauf l’écran select qui est en 640 par 480
 WinmugenHd ou brokenmugenHd : 640 par 480 pour tous les écrans sauf l’écran select qui est en 1280 par 960

Or il n’existe qu’une version de mugen 1.0 mais avec celle-ci on peut choisir la résolution du screenpack avec l’ajout de la ligne "localcoord = " dans la section [Info] du system.def de notre screenpack.

 localcoord = 320,240 pour un screenpack LR.
 localcoord = 640, 480 pour un screenpack HR.
 localcoord = 1280,720 ou 1920,1080 pour un screenpack HD.

Et la grande innovation de mugen 1.0 c’est que tous les écrans de notre mugen seront de la même taille ! (640 par 480 pour screenpack HR par exemple !)

Ceci étant précisé, avant de commencer la création du screenpack il nous faut d’abord effectuer plusieurs choses :

1.Choisir la résolution du screenpack

Ca va aller très vite, si vous souhaitez créer un screenpack en 320 par 240 autant utiliser le moteur winmugen !
Et d’autre part à l’heure actuelle il n’existe que très très peu (pour pas dire aucun) personnages HD, donc aucun intérêt de créer un screenpack HD !
Nous allons donc choisir : localcoord = 640,480 (comme 99 % des screenpacks créés pour mugen1.0)

2.Modification du fichier mugen.cfg

Pour que notre screenpack s’affiche correctement nous devons modifier quelques lignes du fichier mugen.cfg.

motif = data/system.def
Pour utiliser le fichier system.def qui se trouve dans le dossier data (et non l’autre de data/mugen1 !)

GameWidth = 640    
GameHeight = 480

Pour que mugen s’affiche en 640 par 480

3. Modification du fichier system.def

[Info]
name = "Default"     ;Name of motif
author = "Elecbyte"    ;Motif author name
versiondate = 09,01,2009 ;Version date of motif (MM-DD-YYYY) (new in MUGEN 2009)
mugenversion = 1.0    ;Version of M.U.G.E.N motif is compatible with (new in MUGEN 2009)
localcoord = 640,480    ;Local coordinate space width and height (new in MUGEN 2009)

Nous pouvons donc passer à la création proprement dite !

II - L’écran de titre

Pour ne pas changer nous allons créer un screenpack sur... DBZ ! (bah c’est vraiment là où j’ai le plus de matériels pour créer ! :))

En fond nous allons mettre une image représentant l’espace, on part de cette image :

Créer son screenpack Mugen : Spécial Version Mugen 1.0 - Image5

On enlève le vert, et on redimensionne 640 par 480, puis en pcx 256 couleurs et on obtient :

Créer son screenpack Mugen : Spécial Version Mugen 1.0 - Image6

Dans system.sff on remplace l’image 0,0 par la notre, puis dans system.def on cherche la ligne

;Title background definition
[TitleBGdef]
bgclearcolor = 0,0,0
on remplace tous les TitleBG par :

[TitleBG 0];fond
type = normal
spriteno = 0, 0
start = 0, 0
velocity = .77,.35
tile = 1,1
mask=0

Quelques explications :
 "velocity" pour donner une vitesse de défilement à notre image (pour donner une impression de mouvement ! ;))
 "tile = 1,1" pour répéter l’image à l’infini !
 "mask=0" aucune couleur n’est transparente !

Ensuite on va placer la planète de dragonball sur ce fond, on part de :

Créer son screenpack Mugen : Spécial Version Mugen 1.0 - Image7

On la redimensionne à notre convenance (ne pas hésiter à faire des essais sur le fond !), puis on la transforme en pcx 256 couleurs mais sur un fond transparent (voir mon précédent tuto pour savoir comment faire !).

Puis dans system.sff on change l’image 5,1 par notre planète.

Dans system.def on ajoute :

[TitleBG 1];planete
type = normal
spriteno = 5, 1
start =-160, 80
mask=1

Et dans mugen on a :

Créer son screenpack Mugen : Spécial Version Mugen 1.0 - Image8

On va ensuite rajouter le dragon, on part de cette image :

Créer son screenpack Mugen : Spécial Version Mugen 1.0 - Image9

On enlève le nom shenron pour ne garder que le dragon, on redimensionne un peu (pour laisser un peu de place en haut !), puis on la transforme en pcx 256 couleurs mais sur un fond transparent !

Créer son screenpack Mugen : Spécial Version Mugen 1.0 - Image10

Puis dans system.sff on change l’image 5,0 par notre dragon.
Dans system.def, on ajoute :

[TitleBG 2];dragon
type = normal
spriteno = 5, 0
start =-138, 40
mask=1

Puis on va rajouter un logo pour le titre de notre screenpack, on part de cette image :

Créer son screenpack Mugen : Spécial Version Mugen 1.0 - Image11

On la nettoie, on rajoute mugen, puis on la redimensionne à notre convenance (ne pas hésiter à faire des essais), puis on la transforme en pcx 256 couleurs mais sur un fond transparent !

Créer son screenpack Mugen : Spécial Version Mugen 1.0 - Image12

Puis dans system.sff on change l’image 5,2 par notre logo.

Dans system.def on rajoute :

[TitleBG 3];logo
type = normal
spriteno = 5, 2
start =-322,0
mask=1

Dans mugen :

Créer son screenpack Mugen : Spécial Version Mugen 1.0 - Image13

Il nous reste à mettre un petit cadre pour le menu, je choisis une image qui me plait, je la nettoie, la redimensionne (vous commencez à avoir l’habitude ! ;D) et j’obtiens :

Créer son screenpack Mugen : Spécial Version Mugen 1.0 - Image1

Puis dans system.sff on change l’image 5,3 par notre cadre.

Et pour que ca "rende" mieux je vais rajouter un fond sous mon menu :

Créer son screenpack Mugen : Spécial Version Mugen 1.0 - Image2

Puis dans system.sff on change l’image 5,4 par notre fond de cadre.

Dans system.def :

[TitleBG 4];Menu
type = normal
spriteno = 5, 3
start =-320,280
mask=1

[TitleBG 5];Fond Menu
type = anim
actionno = 6
start = -320,280
mask = 1

[begin action 6]
5,4,0,0,1,,as18d80

Quelques explications pour le fondecadre (je sais c’est pas français mais ca sonne bien ! :P) :

 "type = anim" : Ce sera une animation

 [begin action 6] : Je déclare l’animation
 5,4,0,0,1,,as18d80 ---> Cela aura pour effet une "fausse transparence" !

Et finalement dans mugen, j’obtiens :

Créer son screenpack Mugen : Spécial Version Mugen 1.0 - Image3

Il nous reste à placer notre menu dans le cadre pour cela on change : menu.pos =

menu.pos = 130,320
(en gros pour l’instant on verra après avec le font du menu !)

Créer son screenpack Mugen : Spécial Version Mugen 1.0 - Image4

II - L’écran select

Pour rappel, je vous avais expliqué qu’il y avait (en gros) deux façons d’aborder la création d’un écran select :

 Respecter les dimensions standards des portraits (donc créer des cases et des emplacements pour les bigs portraits proportionnelles aux standards de mugen !)
 Ou faire selon son imagination ! ;D

Ici nous allons créer un screenpack selon nos envies, et nous n’allons donc pas respecter les tailles des portraits standards ! Les avantages : on peut faire ce qu’on veut ! Les inconvénients : il faudra créer nous mêmes les portraits pour notre screenpack !
Néanmoins pour ce tuto je ne créerais que quelques portraits afin de vous montrer comment faire.....

1. L’image de fond

Je le dis, et je le répète : inutile de prendre une image trop chargée pour l’écran select ! Une fois que nous aurons placé nos portraits, big portraits, les noms... il n’y aura que très peu de place visible !

Je choisi une image qui provient de l’anime DB Kai (le remake HD de Dragon Ball Z pour ceux qui ne connaitrait pas !) :

Créer son screenpack Mugen : Spécial Version Mugen 1.0 - Image14

Je redimensionne mon image en 640 par 480, je la transforme en pcx 256 couleurs (vous commencez à avoir l’habitude ! ;D).

Dans mon fichier system.sff je remplace l’image 100,0 par celle-ci.
Dans mon fichier system.def, on enlève tous les [SelectBG ] et on les remplace par :

[SelectBG 0] ;image de fond
type = normal
spriteno = 100,0
start = 0,0
mask=0

2.Les big portraits

Récemment j’étais tombé sur cette image :

Créer son screenpack Mugen : Spécial Version Mugen 1.0 - Image15

Et je m’étais dis qu’elle ferait bien pour div class="encadre"> Je commence par la redimensionner (en l’état actuel elle prendrait trop de place dans mon écran select !), et après plusieurs essais, j’obtiens une taille qui me convient. Ensuite pour plus de commodité, je vais placer les deux images qui div class="encadre">

Créer son screenpack Mugen : Spécial Version Mugen 1.0 - Image16

(sur cette image j’ai placé mes deux cadres à 1 pixel du haut et à 10 pixels des bords, on verra que c’est important plus tard !)
Dans mon fichier system.sff je remplace l’image 102,0 par celle-ci, puis dans system.def je rajoute :

[SelectBG 2]; cadres portraits
type = normal
spriteno = 102,0
start = 0,0
mask = 1

et dans mugen j’ai pour l’instant :

Créer son screenpack Mugen : Spécial Version Mugen 1.0 - Image17

3.Les cases

Je vais commencer par choisir la taille de mes cases, pour pouvoir en avoir au moins une soixantaine dans mon écran select, qu’elles puissent se "glisser" facilement entre les cadres de mes big portraits....
C’est donc ici qu’on va commencer faire des maths ! ;D

J’ai besoin de savoir la taille de mes cadres de big portraits : 171 par 199 !
Je l’ai placé à 10 pixels du bord, entre mes deux cadres j’ai donc un espacement de : 640 - 171*2 - 2*10 = 278 !
Je veux aussi laisser un espacement de 6 entre la première case et le cadre gauche et la dernière case, et le cadre droit, il me reste donc : 278 - 6*2 = 266 !
Entre chaque case je veux laisser un espace de 2 pixels !
Supposons que je veuille mettre 7 cases, j’ai donc 8 espaces de 2 pixels à retirer et il me reste : 266 - 16 = 250 que je ne peux pas diviser par 7 (je ne trouve pas un nombre entier !)
Je réessaye avec 6, cette fois j’ai 7 espaces de 2 pixels à retirer et il me reste : 266 -14 = 252, et cette fois-ci j’ai 256/6 = 42 !

Je choisis donc 42 comme largeur de ma case !

Pour la hauteur je choisis (à peu près) arbitrairement 56 !

Je peux donc créer mon image :

Créer son screenpack Mugen : Spécial Version Mugen 1.0 - Image18

J’en profite pour créer l’image de mon random :(pour la taille j’enlève deux pixels à gauche, deux à droite, deux en haut et deux en bas par rapport à celle de ma case : j’obtiens 38 par 52 (à retenir ce sera aussi la taille de nos portraits 9000,0 !), et j’obtiens :

Créer son screenpack Mugen : Spécial Version Mugen 1.0 - Image19

Ensuite je calcul que : 14*42 + 15*2 = 618 ---> je pourrais mettre jusqu’à 14 colonnes en large ! Et que : 8*56 + 9*2 = 466 ---> je pourrais mettre jusqu’à 8 lignes en hauteur !

dans system.def je modifie donc ces lignes là :

rows = 8
columns = 14

pos = 13,10

cell.size = 42,56

Explication sur "pos =13,10" : 640 - 618 = 22, et 22/2 = 11 mais je dois rajouter les 2 pixels de ma case et j’ai : 11 + 2 = 13, pour le 10 c’est un peu au feeling pour l’instant !

Dans system.sff je remplace l’image 150,0 par celle de notre case (je la place en 0,0 !), et la 151,0 par celle de notre random (toujours placé en 0,0).

Pour pouvoir afficher quelque chose sous mugen je dois rajouter : 8*14 = 112 randomselect dans le fichier select.def ! Une fois cela fait dans mugen je vois :

Créer son screenpack Mugen : Spécial Version Mugen 1.0 - Image20

Aie ! Ca recouvre tous l’écran !
Mais rien de bien grave, pour arranger cela : on va d’abord enlever une ligne (histoire de laisser de la place en haut et en bas !), donc :

rows = 8
columns = 14

devient :

rows = 7
columns = 14

Et on va descendre un peu nos cases, pour cela on va changer la valeur de pos :
pos =13,10 devient : pos =13,50.
Et dans mugen ça donne :

Créer son screenpack Mugen : Spécial Version Mugen 1.0 - Image21

C’est déjà mieux, maintenant on va dégager l’espace devant nos cadres de big portraits, pour cela on va "enlever" les quatre premières cases de nos trois premières lignes, et pour cela on va remplacer les randomselect correspondant avec des blancs dans le fichier select.def, sans oublier d’enlever les 14 derniers randomselect (on effacer une ligne !), nos trois premiers blocs ressemblent à ça :

blanc
blanc
blanc
blanc
randomselect
randomselect
randomselect
randomselect
randomselect
randomselect
blanc
blanc
blanc
blanc


blanc
blanc
blanc
blanc
randomselect
randomselect
randomselect
randomselect
randomselect
randomselect
blanc
blanc
blanc
blanc


blanc
blanc
blanc
blanc
randomselect
randomselect
randomselect
randomselect
randomselect
randomselect
blanc
blanc
blanc
blanc

J’en profite aussi pour placer l’affichage des noms des persos, des stages et du mode combat (arcade, versus....) dans system.def :

title.offset = 320,22   ;Position of title (Arcade Mode, etc)

p1.name.offset = 20,212  ;Position to put name

p2.name.offset = 620,212

stage.pos = 320,471

Et dans mugen j’ai :

Une fois que j’ai mes cases je peux créer mes curseurs de sélection : pour cela le plus simple et de partir de l’image de notre case et de broder autour, pour moi ça donne :

P1
Créer son screenpack Mugen : Spécial Version Mugen 1.0 - Image22
Créer son screenpack Mugen : Spécial Version Mugen 1.0 - Image23
P2
Créer son screenpack Mugen : Spécial Version Mugen 1.0 - Image24
Créer son screenpack Mugen : Spécial Version Mugen 1.0 - Image25

La deuxième image correspond au curseur quand on a sélectionné le personnage, je vais rajouter une animation pour que ça ait l’air mieux, pour cela dans system.def :
 p1.cursor.done.spr = 161,0 devient : p1.cursor.done.anim = 161
 p2.cursor.done.spr = 171,0 devient : p2.cursor.done.anim = 171

Et je rajoute les anim 161 et 171 :

[Begin Action 161] ;P1 selected cursor
161,0,0,0,2,,as156d128
161,0,0,0,2,,as154d130
161,0,0,0,2,,as152d132
161,0,0,0,2,,as150d134
161,0,0,0,2,,as148d136
161,0,0,0,2,,as146d138
161,0,0,0,2,,as144d140
161,0,0,0,2,,as142d142
161,0,0,0,2,,as140d144
161,0,0,0,2,,as138d146
161,0,0,0,2,,as136d148
161,0,0,0,2,,as134d150
161,0,0,0,2,,as132d152
161,0,0,0,2,,as130d154
161,0,0,0,2,,as132d152
161,0,0,0,2,,as134d150
161,0,0,0,2,,as136d148
161,0,0,0,2,,as138d146
161,0,0,0,2,,as140d144
161,0,0,0,2,,as142d142
161,0,0,0,2,,as144d140
161,0,0,0,2,,as146d138
161,0,0,0,2,,as148d136
161,0,0,0,2,,as150d134
161,0,0,0,2,,as152d132
161,0,0,0,2,,as154d130

Idem pour p2 (on remplace 161 par 171 !)

4.Les portraits

Passons maintenant à nos portraits !
Comme je vous l’ai dit nous allons voir ça sur quelques exemples (à vous d’en faire d’autres si ça vous chante ! :))

Premièrement : Avoir à sa disposition un bon nombre d’images de bonne qualité de vos persos ! (google est votre ami ! :))

Deuxièmement : Créer des "gabarits" pour chaque portraits (les 9000,0 et les 9000,1 !), c’est dire une image vierge à la taille et à la forme voulue !
Pour nous :

 9000,0 : une image rectangulaire toute simple de 38 par 52
 9000,1 : Je ne vais garder que l’intérieur "orangée" de mon cadre, c’est à dire ça :

Créer son screenpack Mugen : Spécial Version Mugen 1.0 - Image26

D’où mon gabarit une image de 140 par 164 :

Créer son screenpack Mugen : Spécial Version Mugen 1.0 - Image27


 Conseil : pour le gabarit du big portrait choisir une couleur trés voyante et faire attention que votre image soit d’une seule couleur uni ! c’est mieux pour la suite !)

Sur un exemple :
Pour mes deux portraits je vais partir de la même image (ce n’est pas du tout obligatoire !) :

Créer son screenpack Mugen : Spécial Version Mugen 1.0 - Image28

Pour mon portrait 9000,0, je diminue la taille de cette image puis je la colle sur mon gabarit 9000,0 en la déplaçant pour obtenir quelque chose de bien :

Créer son screenpack Mugen : Spécial Version Mugen 1.0 - Image29

Pour le big portrait je diminue la taille de cette image, puis je colle le gabarit sur cette image !
J’obtiens :

Créer son screenpack Mugen : Spécial Version Mugen 1.0 - Image30

Je sélectionne mon grand rectangle 140 par 164, je rempli de noir le transparent, puis je transforme en pcx 256 couleurs en choisissant comme couleur transparente le rose bonbon de mon gabarit !
et j’obtiens mon portrait :

Je place dans le dossier char de mugen le perso "imperfect cell" de "SAWWEN", je change ses portraits 9000,0 et 9000,1 par ceux que je viens de créer ! (positionner en 0,0 !)
Puis je modifie les emplacements des portraits dans system.def :

portrait.spr = 9000,0  
portrait.offset = 2,2
portrait.scale = .5,.5 <----- pourquoi , parce que notre screenpack étant en 640 par 480 et 99% des persos étant LR (en 320 par 240), mugen double la taille de notre portrait ! (faite un essai pour voir ! ;))
;Big portraits
p1.face.spr = 9000,1   ;Do not change from 9000,1
p1.face.offset = 26,18  ;Position to put big portrait
p1.face.scale = .5,.5
p1.face.facing = 1
p2.face.spr = 9000,1
p2.face.offset = 614,18
p2.face.scale = .5,.5
p2.face.facing = -1

Pour les valeurs d’offsets des big portraits, il suffit de mesurer sur l’une de nos images d’écran de sélection !

IV- L’écran Versus

Comme pour notre ?cran select je vais vous montrer qu’on peut faire plein de choses dans l’ ?cran versus... ;)

1.L’image de fond

Encore une fois le fond va être recouvert à quasiment 80-90 % donc inutile de choisir une image "chargée"....
Je choisis une image simple que je redimensionne en 640 par 480 et que je transforme en pcx 256 couleurs ! (l ? vous devriez presque vous dire : il radote, on a compris ! j’espère ! ;D)

Créer son screenpack Mugen : Spécial Version Mugen 1.0 - Image31

Ensuite dans notre system.sff on crée rajoute notre image en lui donnant le numéro : 106,0, et en position x,y : 320,0 (pour qu’elle soit centrée !)
Et dans system.def, on supprime tous les [VersusBG ] et on rajoute :

[VersusBG 1] ;fond
type = normal
spriteno = 106,0
start = 0,0
mask=0

2.Encadrement portraits

Là encore on va "div class="encadre"> Je créer donc pour ce screenpack cet div class="encadre"><pment là :

Créer son screenpack Mugen : Spécial Version Mugen 1.0 - Image32

En laissant de la place pour l’anim du versus, les noms des players 1 et 2, et le numéro du match en mode arcade (nouveauté de mugen 1.0 !)
Vous aurez deviner que le rose correspond à la transparence !
Je rajoute cette image dans mon system.sff en numéro : 105,0 ! et en position x,y : 320,0 !
Et dans system.def, je rajoute :

[VersusBG 2] ;encadrement
type = normal
spriteno = 105,0
start = 0,0
mask=1

3.Portraits

Comme expliqué plus haut, on va en créer de nouveau qu’on numérotera : 9000,2 ! (mugen nous le permet !)
On se sert de notre div class="encadre"> Vous commencez là encore à connaitre le principe (je fais un gabarit, je redimensionne l’image de départ....), pour krilin ça donne par exemple (le rose étant toujours la couleur transparente !) :

Créer son screenpack Mugen : Spécial Version Mugen 1.0 - Image33

On rajoute ces images à la fin (très important !) du fichier sff de nos personnages.
Et dans notre system.def il faut changer quelques lignes :

;Big portraits
p1.spr = 9000, 2
p1.offset = 0,29
p1.facing = 1
p1.scale = .5,.5
p2.spr = 9000, 2
p2.offset = 640,47
p2.facing = -1
p2.scale = .5,.5

Pour les "offset", il suffit de regarder sur notre image "div class="encadre"> Dans Mugen ça donne pour l’instant :

Créer son screenpack Mugen : Spécial Version Mugen 1.0 - Image34

Remarque : il se peut qu’un perso que vous souhaitez mettre dans votre mugen possède déjà une image 9000,2 (normalement non mais ça peut arriver), deux cas :
 Elle n’est jamais utilisée par le perso---> vous pouvez la changer par la votre
 Elle est utilisée dans une anim ---> renommez cette image dans le sff du perso et dans les anims qui l’utilisent puis rajouter votre image 9000,2 !

4.L’animation du Versus

On va créer une petite animation qui nous fera afficher le mot "VERSUS" entre nos personnages !
Pour la taille on fait au mieux avec notre image "div class="encadre"> Moi je crée cette image :

Créer son screenpack Mugen : Spécial Version Mugen 1.0 - Image35

Je la rajoute à mon system.sff en lieu et place de l’image 200,0 (et je supprime toutes les autres images 200,....)
Et pour mon animation, je choisi qu’elle s’affichera tous doucement en partant de la transparence, ce qui dans notre fichier system.def donne :

[VersusBG 3] ;VS Logo
type = anim
actionno = 200
layerno = 1 ; Front
start = 0,85

[Begin Action 200]
-1,1, 0,0, 15,
200,0, 0,0, 6, , AS0D256
200,0, 0,0, 6, , AS30D256
200,0, 0,0, 6, , AS60D256
200,0, 0,0, 6, , AS90D256
200,0, 0,0, 6, , AS120D256
200,0, 0,0, 6, , AS150D256
200,0, 0,0, 6, , AS180D256
200,0, 0,0, 6, , AS210D256
200,0, 0,0, 6, , AS240D256
200,0, 0,0, 6, , AS256D256
200,0, 0,0, 6, , AS256D240
200,0, 0,0, 6, , AS256D224
200,0, 0,0, 6, , AS256D208
200,0, 0,0, 6, , AS256D192
200,0, 0,0, 6, , AS256D176
200,0, 0,0, 6, , AS256D160
200,0, 0,0, 6, , AS256D144
200,0, 0,0, 6, , AS256D128
200,0, 0,0, 6, , AS256D112
200,0, 0,0, 6, , AS256D96
200,0, 0,0, 6, , AS256D80
200,0, 0,0, 6, , AS256D64
200,0, 0,0, 6, , AS256D48
200,0, 0,0, 6, , AS256D16
200,0, 0,0, 6, , AS256D0
200,0, 0,0, -1,

5.Name & match n°

Il me reste maintenant à placer correctement les noms des players 1 et 2, ainsi que le numéro du match !
Dans sytsem.def je modifie donc :

;Names
p1.name.offset = 40,450
p1.name.font =  3,0,0
p2.name.offset = 440,30
p2.name.font =  3,0,-1

Pour match n° :
match.offset = 40, 16

Les offset sont pour l’instant approximatifs, on modifiera au moment de choisir les fonts !

On pourrait se dire qu’on a fini, mais on va ajouter une petite animation "loading" en bas à droite !

6.Animation "loading"

En partant de cette image :

Créer son screenpack Mugen : Spécial Version Mugen 1.0 - Image36

Je crée 13 images pour avoir cette animation :

Créer son screenpack Mugen : Spécial Version Mugen 1.0 - Image37

J’ajoute mes images à system.sff en les numérotant 210,0 à 210,12 !
Et dans system.def, je rajoute :

[VersusBG 4] ;Loading
type = anim
actionno = 210
start = 130,460
mask=1

[Begin Action 210]
210,0, 0,0, 6
210,01, 0,0,6
210,02, 0,0, 6
210,03, 0,0, 6
210,04, 0,0, 6
210,05, 0,0, 6
210,06, 0,0,6
210,07, 0,0, 6
210,08, 0,0, 6
210,09, 0,0, 6
210,10, 0,0, 6
210,011, 0,0,6
210,012, 0,0, 6

Et dans mugen maintenant j’ai :

Créer son screenpack Mugen : Spécial Version Mugen 1.0 - Image38

V- L’écran Options

On va aller très vite, c’est pas un écran très important (en tous cas pour moi !). On va juste mettre une image de fond :

Créer son screenpack Mugen : Spécial Version Mugen 1.0 - Image39

On la redimensionne, on la transforme en pcx 256 couleurs.........
On la place dans notre fichier system.sff comme l’image n° 300,0 et en position : 320,0

Dans notre fichier system.def on rajoute :

[OptionBG 1]
type = normal
spriteno = 300,0
start = 0,0
mask = 0

Et dans mugen, ça nous donne :

Créer son screenpack Mugen : Spécial Version Mugen 1.0 - Image40

VI- L’écran Victory

Passons maintenant à un nouvel écran apparu avec la nouvelle version de mugen.
Comme son nom l’indique, cet écran apparaît à la fin d’un combat pour afficher une image du vainqueur ainsi qu’une phrase (propre au personnage ou pas !).

Pour nous, on va se servir du cadre de l’écran versus pour créer notre écran victory !

1.L’image de fond

On va choisir celle là, qu’on mettra en mouvement :

Créer son screenpack Mugen : Spécial Version Mugen 1.0 - Image41

On transforme notre image en pcx 256 couleurs, on la place dans system.sff comme l’image n° 400,0 et en position : 128,128

Dans notre fichier system.def on rajoute après [VictoryBGdef] :

[VictoryBG 1];fond
type = normal
spriteno = 400,0
start = 0,0
velocity = .15,-.25
tile =1,1
mask = 0

2.Cadre portrait

On part de notre image du versus :

Créer son screenpack Mugen : Spécial Version Mugen 1.0 - Image42

On remplie le côté droit en noir, ça nous donne :

Créer son screenpack Mugen : Spécial Version Mugen 1.0 - Image43

On rajoute cette image à system.sff : N°400,2, position : 320,0

Dans system.def, on ajoute :

[VictoryBG 2];cadre
type = normal
spriteno = 400,2
start = 0,0
mask = 1

Ensuite on rajoute notre petite animation "loading" en bas à droite :

[VictoryBG 3] ;Loading
type = anim
actionno = 310
start = 130,460
mask=1

[Begin Action 310]
210,0, 0,0, 6
210,01, 0,0,6
210,02, 0,0, 6
210,03, 0,0, 6
210,04, 0,0, 6
210,05, 0,0, 6
210,06, 0,0,6
210,07, 0,0, 6
210,08, 0,0, 6
210,09, 0,0, 6
210,10, 0,0, 6
210,011, 0,0,6
210,012, 0,0, 6

Puis on modifie victory screen de telle sorte que l’image du perso apparaisse et que le texte soit placé à droite :

[Victory Screen]
enabled = 1
time = 500        ;Time to show screen
fadein.time = 8
fadeout.time = 15
;Winner's portrait and name
p1.offset = 0,29
p1.spr = 9000,2
p1.facing = 1
p1.scale = .5,.5
p1.window = 0,0, 640,480
p1.name.offset =560,120
p1.name.font = 3,0,-1
;Win quote text
winquote.text = "is the Winner !" ;Default win quote text to show
winquote.offset = 390,240
winquote.font = 3,0,1
winquote.window = 180,100, 624,470
winquote.textwrap = w   ;Word wrap

Et dans mugen ça donne :

Créer son screenpack Mugen : Spécial Version Mugen 1.0 - Image44

VII- les Fonts

Les fonts se sont les polices d’écritures qui s’affichent dans mugen, ils en existent des milliers et on peut en créer de toutes sortes ! Quand ils sont bien choisis, ils permettent de donner un aspect "plus pro" à notre mugen !

Pour les visualiser le plus simplement du monde il existe un petit programme appeler "FntEditor" (une petite recherche google vous permettra de le trouver !).

Pour les ajouter c’est trés simple, il faut placer le fichier .fnt dans le dossier font de votre mugen, puis rajouter une ligne à la suite de ça dans system.def :

[Files]
spr = system.sff     ;Filename of sprite data
snd = system.snd     ;Filename of sound data
logo.storyboard =     ;Logo storyboard definition (optional)
intro.storyboard =    ;Intro storyboard definition (optional)
select = select.def    ;Character and stage selection list
fight = fight.def     ;Fight definition filename
font1 = f-4x6.def     ;System fonts
font2 = f-6x9.def     ;System fonts
font3 = jg.fnt      ;System fonts

1. Pour l’écran titre

Il faut choisir les deux fonts du menu, j’en choisi un blanc et l’autre plus sombre et ça donne :
Dans system.def :

font4 = menu1.fnt
font5 = menu2.fnt

Et :

menu.item.font = 5,0,0     <----- pour dire que j'utilise le font numéro5 !
menu.item.active.font = 4,0,0

Dans mugen :

Créer son screenpack Mugen : Spécial Version Mugen 1.0 - Image45

2.Pour l’écran select

Là il faut choisir pour les noms des personnages, pour la sélection du stage, pour le mode de jeu, et pour savoir si on joue en simul, turn....
Pour moi ça donne :

Créer son screenpack Mugen : Spécial Version Mugen 1.0 - Image46

3.Pour l’écran Versus

On doit choisir les fonts pour : les noms des persos et le numéro du match en mode arcade !
Pour moi ça donne :

Créer son screenpack Mugen : Spécial Version Mugen 1.0 - Image47

4.Pour l’écran Victory

Il faut choisir pour l’affiche du nom du vainqueur et pour la phrase de victoire ! (comme on est limité à 9 fonts dans mugen on reprend souvent les mêmes ! ;))
Pour moi ça donne :

Créer son screenpack Mugen : Spécial Version Mugen 1.0 - Image48

VIII- Derniers petits conseils

Il nous reste quelques petits détails à régler, notamment dans l’écran select, placer correctement la sélection du "team mode" :

;Team menu
teammenu.move.wrapping = 1
p1.teammenu.pos = 30, 46
;p1.teammenu.bg.spr =
p1.teammenu.selftitle.font = 8,0, 1
p1.teammenu.selftitle.text = Select team mode
p1.teammenu.enemytitle.font = 8,0, 1
p1.teammenu.enemytitle.text = Opponent team mode
p1.teammenu.move.snd = 100,0
p1.teammenu.value.snd = 100,0
p1.teammenu.done.snd = 100,1
p1.teammenu.item.offset = 44,24
p1.teammenu.item.spacing = 0,22
p1.teammenu.item.font = 8,0, 1
p1.teammenu.item.active.font = 8,2, 1
p1.teammenu.item.active2.font = 8,0, 1 ;Second font color for blinking
p1.teammenu.item.cursor.offset = -10, -2
p1.teammenu.item.cursor.anim = 180
p1.teammenu.value.icon.offset = 60,-1
p1.teammenu.value.icon.spr = 181,0
p1.teammenu.value.empty.icon.offset = 60,-1
p1.teammenu.value.empty.icon.spr = 182,0
p1.teammenu.value.spacing = 6,0
;p2 team
p2.teammenu.pos = 610, 46
;p2.teammenu.bg.spr =
p2.teammenu.selftitle.font = 8,1, -1
p2.teammenu.selftitle.text = Select team mode
p2.teammenu.enemytitle.font = 8,1, -1
p2.teammenu.enemytitle.text = Opponent team mode
p2.teammenu.move.snd = 100,0
p2.teammenu.value.snd = 100,0
p2.teammenu.done.snd = 100,1
p2.teammenu.item.offset = -44,24
p2.teammenu.item.spacing = 0,22
p2.teammenu.item.font = 8,1, -1
p2.teammenu.item.active.font = 8,2, -1
p2.teammenu.item.active2.font = 8,1, -1 ;Second font color for blinking
p2.teammenu.item.cursor.offset = 10, -2
p2.teammenu.item.cursor.anim = 190
p2.teammenu.value.icon.offset = -60,-1
p2.teammenu.value.icon.spr = 191,0
p2.teammenu.value.empty.icon.offset = -60,-1
p2.teammenu.value.empty.icon.spr = 192,0
p2.teammenu.value.spacing = -6,0

Ca donne :

Créer son screenpack Mugen : Spécial Version Mugen 1.0 - Image49

on peut aussi régler le "win screen" quand on termine le mode arcade.......

Commentaires (1)

Qui êtes-vous ?
Votre message

Message de slash
slash
#1

Merci pour ton tuto mais j’aurai voulu en savoir plus sur les .font j’aimerais changer la police de mes menus et comme je suis un gros noob j’ai besoin d’un tuto précis. Est il envisagé d’en faire un à ce sujet ?

Dans la même section