Pour rappel : ce qu’on appelle des lifebars dans mugen ce n’est pas que "les barres de vie" des personnages qui apparaissent dans un combat mais en fait tous ce qui apparaît dans l’écran de combat : "les barres de power", le temps, les anims de fight, KO,.....
Les lifebars se composent de trois fichiers principaux :
– fight.def (le code proprement dit)
– fight.sff (les images)
– fight.snd (les sons qui sont joués durant le combat : round, fight....)
Nous allons scinder ce tuto en deux parties :
– 1) Une partie graphique : c’est là que nous créerons toutes les images dont nous aurons besoins (vous verrez qu’il y a du boulot !)
– 2) La créations des fichiers fight.def, fight.sff et fight.snd !
I- La partie graphique
Il existe (en gros) deux manières de créer des lifebars :
– soit à partir de lifebars existantes dans un jeu commercial (que l’on peut ripper de différentes manières)
– soit en les créant à partir de rien (dans ce cas là mieux vaut avoir un certain talent artistique !)
Pour ce tutoriel nous allons partir de cette image (issu du jeu "dragon-ball-z-tenkaichi-tag-team" sur psp !) pour créer notre lifebar !
Comme déjà expliqué dans le tuto sur le screenpack, pour mugen 1.0 il faut définir les "localcoord" pour lesquels seront définies notre lifebar, pour nous ce sera : 640,480 comme pour le screenpack !
1.Création de la lifebar
On ne garde que la lifebar, on nettoie tout autour et on obtient ça :
On nettoie encore une fois pour ne garder que la structure.
Enfin on redimensionne pour que la lifebar rentre dans notre écran, on la "colore" pour lui donner un aspect plus pro, on lui rajoute quelques petit trucs (notamment l’endroit ou s’afficheront les icônes de victoire !) et ça donne :
Dans mugen il existe trois "mode" de jeu : solo, simul ou turn.
Pour les mode solo et turn se sont les mêmes lifebars, mais pour le mode simul il faut deux "barres de vie" et deux portraits par équipe ! il faut donc créer une nouvelle lifebar pour ce mode ;
Le plus simple, c’est de partir de notre lifebar pour créer cette nouvelle lifebar, pour nous ça va donner :
Remarques : Dans notre cas j’ai choisi de garder les mêmes dimensions pour la barre de vie et les portraits, ce n’est pas une obligation, loin de là !
2.La jauge de vie
C’est ce qui représente la vie restante du personnage !
Pour ses dimensions et sa forme on se sert de notre lifebar, et pour sa couleur et sa "texture" on laisse parler son imagination :
De même il nous faut une image pour représenter la vie perdue :
Et enfin une autre pour le fond qui simulera une semi transparence :
3.La powerbar
C’est là où s’affiche le power du personnage, pour c’est déjà intégrer à notre lifebar il nous faut juste créer la jauge de power !
Comme pour la jauge de vie on se sert du "squelette" de la lifebar pour la créer, pour nous ça donne :
De même on crée un fond pour simuler la transparence :
4.Les icônes de victoire
Ce sont les icônes qui s’affichent quand un personnage gagne un round, vu qu’on est dans l’univers de dbz, j’ai choisi ça :
5.Le deuxième portrait en mode turn
Lors du mode turn en combat, le portrait du coéquipier s’affiche dans l’écran, il faut donc prévoir un cadre pour cela, pour nous j’ai choisi de garder le même que dans la lifebar :
Et il faut aussi une image qui s’affiche sur ce portrait lorsque le joueur est éliminé en mode turn :
6.L’affichage du temps
On peut si on le souhaite rajouter une image (et même une animation) entre les deux lifebars de P1 et P2, pour nous je vais rajouter le célèbre "dragon radar" sous forme d’une courte animation :
7. Les différentes animations
Là c’est l’imagination qui parle :
a) Le fight
L’animation qui est jouée au début du combat !
b) Le KO
L’animation qui est jouée quand l’un des joueurs perd (autrement que par le temps) :
On peut créer des animations pour pratiquement tous ce qui s’affichent dans l’écran de combat (round, time over, draw game....) mais pour nous nous arrêterons là, le reste sera affiché grâce à des fonts !
II- La création du fichier fight.sff
Une fois qu’on a tous nos éléments graphiques il faut les placer dans le fichier fight.sff, plutôt que dans créer un nous même on va partir de celui fournit avec mugen et qui se trouve dans le dossier data de mugen !
1.Les lifebars
On commence par remplacer l’image de nos lifebars (l’image 11,0 dans le sff), et on la place en position : 319,0 (on ne veut pas qu’elle touche complêtement le bord de l’écran !).
Ensuite on place le fond transparent, la vie et la perte de vie, ces images là : (respectivement les images 10,0 ; 13,0 et 12,0)
Pour calculer leurs positions :
– Positions X
position life = longueur life + (position lifebar - longueur lifebar) + distance entre fin de lifebar et fin life (à regarder sur l’image de notre lifebar)
Soit pour nous :
position life = 184 + (319-276) + 4 = 231
– Positions Y
On regarde sur l’image de notre lifebar à quelle hauteur (en partant du haut) commence la life : pour nous 22 !
On choisit donc comme hauteur : -22 !
On place les simuls lifebars (image 20,0) à la même position que les lifebars : 319,0.
Puisqu’on utilisera les mêmes images pour la vie, la perte de vie et le fond transparent on peut supprimer les images :21,0 ; 22,0 et 23,0 !
2.Le powerbar
Pour nous le powerbar est directement intégré à la lifebar donc pas d’image du powerbar, on peut supprimer l’image 41,0 !
Maintenant il nous faut placer l’image du power le fond transparent du power (images 40,0 et 43,0) :
(attention cette méthode ne marche que si l’image du powerbar est à l’intérieur de celle de notre lifebar)
– Positions X
– position power = position lifebar - (distance entre début lifebar et début power)
– position power = 319 - 12 = 307
– Positions Y
On regarde sur l’image de notre lifebar ? quelle hauteur (en partant du haut) commence le power : pour nous 8 !
On choisit donc comme hauteur : -8 !
On place donc ces images ne positions : 307,-8 !
3.Mode turn
En mode turn il faut afficher l’image du partenaire, pour cela nous avons créer deux images, un cadre pour le portrait et une croix pour signaler quand un joueur est éliminé, ce sont les images 70,0 et 71,0 de notre fichier fight.sff !
Pour les positionner : le plus simple c’est de placer l’image 70,0 (le cadre) en position : 0,0 (on verra ensuite dans le fight.def comment la placer où l’on veut !) puis de placer l’image 71,0 de telle sorte qu’elle recouvre le portrait, pour nous ce sera : -3,-3.
4.Les animations
On va rajouter ici les images des animations du "fight" et du "KO" !
Le plus simple c’est de supprimer celles existantes puis de rajouter les nôtres, par convention (mais vous pouvez très bien changer !), le groupe 80 correspond à l’animation du fight et le groupe 200 à celle du KO !
On place ces images en position : 0,0 en gardant l’ordre de notre animation !
5.Les icones de victoire
Ce sont nos 7 boules de cristal !
Encore une fois on va supprimer celles existantes, c’est à dire les images 100,0 et suivantes !
Sauf la 110,0 qui correspond à l’icône perfect (qui s’affiche quand un personnage gagne sans être touch ? !), pour celle là moi je ne veux pas qu’elle s’affiche le plus simple alors c’est de changer la position de cette image de telle sorte qu’on en la voit plus dans l’écran de combat : -3, 250 par exemple !
Ensuite on rajoute nos icônes de victoire en position 0,0 et j’ai décider de leur donner les noms : 100,0, 100,1 et suivant !
6.Le Chrono
Il nous reste à ajouter à la fin du fichier fight.sff les deux images de notre animation du chronomètre :
Ce seront les images 300,0 et 300,1, !
Pour les placer :
– Positions X : Je prend la moitié de l’image, soit pour nous : 43 !
– Positions Y : Je place la première image en position 0 et je règle la position de l’autre pour bien voir l’animation !
Et finalement pour nous : l’image 300,0 est en position : 43,0 et l’image 300,1 en position : 43,6 !
Et voilà on ne a fini avec notre sff, il nous reste le fichier fight.def !
III - La création du fichier fight.def
Une fois qu’on a créé notre fichier fight.sff, il nous faut créer le fichier fight.def, de même on va partir de celui existant das le dossier data de mugen !
1.Les lifebars
Dans le cas 1 contre 1 :
Voilà à quoi ressemble le "code" de la lifebar pour le player 1 :
[Lifebar]
;Player 1
p1.pos = 140,12
p1.bg0.anim = 10
p1.bg1.spr = 11,0
p1.mid.spr = 12,0
p1.front.spr = 13,0
p1.range.x = 0,-127– p1.pos : c’est la position de la lifebar, pour nous ça va devenir : p1.pos = 319,2
– p1.bg0.anim : c’est l’anim de la transparence
Normalement c’est :
[Begin Action 10] ;Darkened lifebar background
10,0, 0,0, 1, , SPour nous :
[Begin Action 10] ;Darkened lifebar background
10,0, 0,0, 1, ,AS140D112– p1.bg1.spr : c’est le sprite de la lifebar !
– p1.mid.spr : c’est le sprite de la perte de vie !
– p1.front.spr : c’est le sprite de la vie !
– p1.range.x =x1,x2 : c’est l’amplitude de notre vie (où elle commence (x1) et où elle finit (x2) !)
Pour calculer ça il faut ce rappeler les positions dans le sff ! Pour x2 :
– Pour x2 : x2 = - (position de la vie dans le sff)
– Soit pour nous : x2 = -231 !
– Pour x1 : x1 = - (x2 - taille de la vie)
– Soit pour nous : x1 = -(231 - 184) = -47
– Soit pour nous : p1.range.x = -47,-231
Soit finalement pour nous :
[Lifebar]
;Player 1
p1.pos = 319,2
p1.bg0.anim = 10
p1.bg1.spr = 11,0
p1.mid.spr = 12,0
p1.front.spr = 13,0
p1.range.x = -47,-231Pour P2 il faut juste rajouter des facing pour retourner horizontalement les images des lifebars, vie, perte de vie... et prendre l’opposé pour le p2.range.x !
Soit :
;Player 2
p2.pos = 319,2
p2.bg0.anim = 10
p2.bg0.facing = -1
p2.bg1.spr = 11,0
p2.bg1.facing = -1
p2.mid.spr = 12,0
p2.mid.facing = -1
p2.front.spr = 13,0
p2.front.facing = -1
p2.range.x = 47,2312.Pour les simuls lifebars
On ne touche rien à P1 et P2 puisque les lifebars ne changent pas pour ces joueurs là !
– Pour P3 et P4 :
Il suffit de lire sur l’image de notre simulifebar la positions de la nouvelle lifebar et après plusieurs essais s’il le faut), on trouve :
;Player 3
p3.pos = 308,63
p3.bg0.anim = 10
p3.mid.spr = 12,0
p3.front.spr = 13,0
p3.range.x = -47,-231
;Player 4
p4.pos = 330,63
p4.bg0.anim = 10
p4.bg0.facing = -1
p4.mid.spr = 12,0
p4.mid.facing = -1
p4.front.spr = 13,0
p4.front.facing = -1
p4.range.x = 47,2313.Mode Turn
Il suffit de faire un copie-coller de ce qu’on a écrit pour le "1 contre 1", puisque ce sont les mêmes lifebars !
4.Le powerbar
Ca ressemble beaucoup aux lifebars :
[Powerbar]
;Player 1
p1.pos = 140,22
p1.bg0.anim = 40
p1.bg1.spr = 41,0
;p1.mid.spr = 42,0
p1.front.spr = 43,0
p1.range.x = 0,-107
p1.counter.offset = -108,6
p1.counter.font = 1,0, 0– p1.pos : on choisit la même position que notre lifebar : p1.pos = 319,2
– p1.bg1.spr : c’est normalement le sprite de notre powerbar mais il n’y en a pas pour nous vu que le powerbar est dans la lifebar !
– p1.range.x : on calcule de la m ?me façon que pour la life ! et on trouve pour nous :p1.range.x = -307,-178
– p1.counter.offset : c’est la position du font indiquant le niveau de power ! (on le trouve facilement quand on a crée ce font !)
Au final pour nous ça devient :
;Player 1
p1.pos = 319,2
p1.bg0.anim = 40
p1.front.spr = 43,0
p1.range.x = -307,-178
p1.counter.offset = -236,66
p1.counter.font = 8,0, 0Et pour P2 :
p2.pos = 319,2
p2.bg0.anim = 40
p2.bg0.facing = -1
p2.front.spr = 43,0
p2.front.facing = -1
p2.range.x = 307,178
p2.counter.offset = 238,66
p2.counter.font = 8,0, 0Ensuite il faut créer notre animation de semi transparence :
[Begin Action 40] ;Darkened powerbar background
40,0, 0,0, 1, , AS180D2525.Les faces
Ensuite il faut indiquer où placer les portraits des personnages ! Il existe plusieurs méthode (tâtonnement avec plusieurs essais, ou regarder sur l’image de notre lifebar....).
Pour nous ça va donner :
[Face]
;Player 1
p1.pos = 3,3
p1.face.spr = 9000,3
p1.face.scale = 0.5,0.5
p1.face.facing = 1
p1.face.offset = 0,2
;Player 2
p2.pos = 635,3
p2.bg.facing = -1
p2.face.spr = 9000,3
p2.face.scale = 0.5,0.5
p2.face.facing = -1
p2.face.offset = 0,2
[Simul Face]
;Player 1
p1.pos = 3,3
p1.face.spr = 9000,3
p1.face.scale = 0.5,0.5
p1.face.facing = 1
p1.face.offset = 0,2
;Player 2
p2.pos = 635,3
p2.bg.facing = -1
p2.face.spr = 9000,3
p2.face.scale = 0.5,0.5
p2.face.facing = -1
p2.face.offset = 0,2
;Player 3
p3.pos = 3,71
p3.face.spr = 9000,3
p3.face.scale = 0.5,0.5
p3.face.facing = 1
;Player 4
p4.pos = 635,71
p4.bg.facing = -1
p4.face.spr = 9000,3
p4.face.facing = -1
p4.face.scale = 0.5,0.5
[Turns Face]
;Player 1
p1.pos = 3,3
p1.face.spr = 9000,3
p1.face.facing = 1
p1.face.scale = 0.5,0.5
p1.teammate.pos = 1,68
p1.teammate.spacing = 13,0
p1.teammate.bg.spr = 70,0
p1.teammate.ko.spr = 71,0
p1.teammate.face.spr = 9000,3
p1.teammate.face.scale = 0.5,0.5
p1.teammate.face.facing = 1
p1.teammate.face.offset = 3,3
;Player 2
p2.pos = 635,3
p2.bg.facing = -1
p2.face.spr = 9000,3
p2.face.scale = 0.5,0.5
p2.face.facing = -1
p2.teammate.pos = 638,68
p2.teammate.spacing = -13,0
p2.teammate.bg.spr = 70,0
p2.teammate.bg.facing = -1
p2.teammate.ko.spr = 71,0
p2.teammate.ko.facing = -1
p2.teammate.face.spr = 9000,3
p2.teammate.face.scale = 0.5,0.5
p2.teammate.face.facing = -1
p2.teammate.face.offset = -3,3On remarque qu’on peut indiquer à mugen un numéro particulier de sprite à afficher (pour nous ce sera le 9000,3), pour créer ces images on procède comment dans mon tutoriel sur les screenpack (un gabarit....) !
Pour tous les offset et pos, il suffit de fait plusieurs essais jusqu’à que tous aille bien !
6.Le chrono
Ensuite il faut placer notre chrono et déclaré notre animation :
7.Animations
Ensuite il faut déclarer nos animations de "fight" et "KO", dans la rubrique [Round].
Pour nous ça donne :
;"Fight!" Animation
[Begin Action 80]
80,0, 0,0, 4
80,1, 0,0, 4
80,2, 0,0, 4
80,3, 0,0, 6
80,4, 0,0, 6
80,5, 0,0, 6
80,6, 0,0, 6
80,7, 0,0, 6
80,8, 0,0, 8
80,9, 0,0, 8
80,10, 0,0, 8
80,11, 0,0, 40
;"K.O." Animation
[Begin Action 200]
200,1, 0,0, 6
200,2, 0,0, 8
200,3, 0,0, 8
200,4, 0,0, 8
200,5, 0,0, 9
200,6, 0,0, 9
200,7, 0,0, 9
200,0, 0,0, 14
-1,0, 0,0, 6
200,0, 0,0, 12
-1,0, 0,0, 6
200,0, 0,0, 12
-1,0, 0,0, 6
200,0, 0,0, 12
-1,0, 0,0, 6
200,0, 0,0, 60 8.Icônes
Ensuite il faut placer nos icônes de victoire :
[WinIcon]
p1.pos = 255,45
p2.pos = 383,45
; Offset for next icon (x,y)
p1.iconoffset = -23,0
p2.iconoffset = 23,0
; Counter text font and offset for representing wins
p1.counter.offset = -60,16
p1.counter.font = 2,1
p2.counter.offset = 60,16
p2.counter.font = 2,1
; Win by normal
p1.n.spr =100,0
p2.n.spr =100,0
p2.n.facing = -1
; Win by special
p1.s.spr =100,1
p2.s.spr =100,1
p2.s.facing = -1
; Win by hyper (super)
p1.h.spr =100,2
p2.h.spr =100,2
p2.h.facing = -1
; Win by normal throw
p1.throw.spr =100,3
p2.throw.spr =100,3
p2.throw.facing = -1
; Win by cheese
p1.c.spr =100,4
p2.c.spr =100,4
p2.c.facing = -1
; Win by time over
p1.t.spr =100,7
p2.t.spr =100,7
p2.t.facing = -1
; Win by suicide (here's a fun one)
p1.suicide.spr = 100,5
p2.suicide.spr = 100,5
p2.suicide.facing = -1
; Opponent beaten by his own teammate (another fun one)
p1.teammate.spr =100,6
p2.teammate.spr =100,6
p2.teammate.facing = -1
; Win by perfect (overlay icon)
p1.perfect.spr = 110,0
p2.perfect.spr = 110,0
; Use icons up until this number of wins
useiconupto = 3Pour les p1.pos il suffit de calculer avec notre image de lifebar ! Idem pour l’offset (c’est à dire quelle distance il y a entre deux icônes de victoire !)
9.Derniers détails
Il faut encore rajouter de nouveau font qui "ne jureront"" pas trop avec nos lifebars !
Placer ces fonts...
On peut également changer les sons de bases que l’on entend lors des combats : le fight, round, Ko................en modifiant le fichier fight.snd !
Et finalement dans mugen ça nous donne pour nos trois modes de combat :
