Comment créer un screenpack ? [A LIRE IMPERATIVEMENT !]

Les paroles de Misterr07:

Bonjour tous le monde !

Comme promis voici un tutoriel sur la création d'un screenpack mugen. Mais un tutoriel un peu particulier dans le sens où je vais tenter de vous expliquer comment mon esprit tordu fonctionne pour créer un screenpack mugen !

En gros, et pour simplifier, je vais vous montre sur un exemple comment je crée un screenpack... étape par étape...

Où je vais chercher les idées, les images... d'où me viens l'inspiration quoi !

Deuxièmement, les outils qui nous seront utiles :

- Gimp pour tous ce qui est retouche d'images !
- fighter factory
- BlockNote

Enfin pour terminer cette présentation du tutoriel, je n'ai jamais dit que ma méthode pour créer un screenpack était la bonne ou la meilleur, cela en est une parmi tant d'autres... et disons quelle a fait ses preuves !

1) Choisir le thème du screenpack !

Et oui ! ça paraît bête mais avant de se lancer dans la création d'un screenpack.. autant savoir où l'on va !

Mon premier conseil sera : choisissez un thème que vous connaissez très bien !

Pour mon cas : ne connaissant absolument rien à Naruto, vous ne me verrez jamais créer un screenpack Naruto !

Mon deuxième conseil : évitez les mélanges ! Gardez un thème fixe !

"Saint Seiya Versus Dragon Ball" ça sonne bien, mais les différences entre les persos mugen de ces deux univers sont tellement grandes que le résultat pourrait être.. étrange !

Néanmoins je vous donne un troisième conseil qui va un peu contredire le deuxième : En premier lieu, faîtes ce qu'il vous plaît !
Mugen c'est avant tout un jeu fait pour s'amuser.. et ça ne l'oubliez jamais !

Bien, il va donc être temps de choisir notre thème pour ce screenpack qui sera notre fil rouge sur ce tutoriel :

Tout bêtement étant un fan de Dragon Ball comme beaucoup ici, je vais choisir de créer un screenpack sur l'univers de sangoku et ses amis !

2) La résolution du screenpack

je vous ici rappelle que mugen a plusieurs résolution :

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
et enfin pour le nouveau moteur mugen 1.0 : c'est une autre histoire dont je ne parlerai pas ici mais qui fera sans doute l'objet d'un autre tutoriel plus tard !

comment choisir la résolution du screenpack ?

et bien la réponse tient en une ligne : ça dépend de ce que vous voulez y mettre dedans !

Si vous souhaitez pouvoir y jouer avec des persos HR : alors un screenpack pour winmugen HR !
Si vous souhaitez pouvoir y jouer avec des persos LR : alors un screenpack pour winmugen !

Vu qu'il n'existe aucun char HD digne de ce nom, je vous conseil fortement d'éviter un screenpack HD !

On peut néanmoins très bien utiliser un screenpack HR avec des chars LR, surtout s'il on veut par exemple un écran select plus grand pour y faire plus de chose !

Pour mon exemple (et vu que 99% des persos dragon ball sont LR) j'ai opté pour un screenpack classique pour winmugen !

Tous nos écrans seront donc au format 320 par 240 !
Maintenant que nous connaissons le thème de notre screenpack, il faut partir à la pêche aux idées et aux images qui nous serviront de base pour créer notre screenpack.

Où allez chercher tous ça ? me direz-vous.
ben pas très loin !

1) La première mine d'or de ressources et d'idées vous la trouvez dans les jeux commerciaux existants sur le thème que vous avez choisi !

Deux choix s'offre à vous :

- soit vous possédez déjà un certain nombres de jeux et à l'aide d'un émulateur et d'un bon logiciel de capture d'image (fraps, capturino ou autres !) vous pouvez récupérer les images qui vous intéressent...

-soit vous allez sur les sites de jeux vidéos (types jeuxmangas, jeuxvideo.com...) et avec la plupart des test de vos jeux préférés vous trouverez également des capture d'écran de ses jeux (de plus ou moins bonnes qualités) !

2) Le deuxième endroit où chercher et c'est surtout valable si vous avez choisis un thème issu d'un dessin animé :

Ce sont les menus des dvds de ces dessins animés, ils foisonnent souvent d'idées géniales et d'images sympathiques !

Pour récupérer ces images, il vous suffit de récupérer d'abord un fichier vidéo contenant les images que vous souhaitez puis d'utiliser virtualdub

3) Et enfin ne pas oublier que google est notre ami et qu'une recherche d'images ce n'est jamais une perte de temps !

Si vous pensez avoir d'autres idées pour trouver des images, n'hésitez pas à nous en faire par dans se topic !
Passons donc maintenant au tutoriel proprement dit !

1) L'écran Titre :

l'écran titre comme son nom l'indique est le premier écran de votre screenpack mugen que verra un joueur !
Il en est bien souvent le symbole de votre screenapck, il faut donc le choisir avec grand soin !

Premier conseil : dès la vue de l'écran titre on doit savoir où l'on est ! à quel thème nous renvoie le screenpack !

En gros si vous souhaitez faire un screenpack sur naruto ne mettait pas une image de dbz ! (je sais c'est bête mais je suis presque sur de l'avoir déjà vu ! )

Deuxième conseil :
il ne faut pas oublier qu'un écran titre comprend impérativement deux choses :
- le titre de votre screenpack (ou compil)
- le menu !
Donc ne choisissez pas une image (ou plusieurs images) trop fourni si vous ne voulez pas que ce soit le foutoir dés le début !

Attaquons notre screenpack dbz :

Il y a quelque temps j'étais tombé sur le menu d'un dvd de dbz et je m'étais dit qu'il ferait un bon écran titre pour mugen, voilà à quoi il ressemblait au départ :

pourquoi il m'inspire : car il est plutôt simple, en un coup d'oeil on sait dans quel univers on se trouve ! et la boule m'inspire pour le menu de notre mugen !

Première modification je ne vais garder de l'image que ce qui m'intéresse ! en gros je vais enlever le bas !

Deuxième étape il faudrait diminuer la taille de l'image pour la passer en 320 par 240, seulement la taille de cette image n'est pas proportionnelle à 320 par 240, si je le fais brutalement je vais déformer l'image !

ce que je vais donc faire c'est de changer la longueur en 320 et voir ce que ça me donne pour la hauteur !
J'obtiens donc une image de 320 par 208 :

Il me manque donc 32 pixel en hauteur. C'est pas grave je vais créer une image vierge en 320 apr 240 et je placerai mon image de telle sorte à laisser un peu de place en haut et en bas (un peu plus en bas !) et je remplirai ce vide par la couleur du bord haut de mon image pour le haut et du bord bas de mon image pour le bas !
et si c'est bien fait, on ne voit pas la tricherie


Maintenant je remarque en regardant de plus près que ma boule sur l'image n'est pas si intéressante que ça, les bords ne sont pas très nette et y a un dessin à l'intérieur !
Je vais donc la faire disparaître ! Pour cela je sélectionne une morceau "propre" de l'image juste à côté de la boule puis je le colle au-dessus de la boule et ainsi de suite jusqu'à ce qu'on ne la voit plus !

A mi parcours ça donne ça :


Et à a fin:

testons ça sous mugen :
D'abord transformons notre image en pcx 256 couleurs !
Puis on ouvre system.def et sytem.sff !

Dans system.sff on remplace l'image 0,0 par la notre, puis dans sytem.def on cherche la ligne :
on rempalce tous les TitleBG par :

[TitleBG 0]
type = normal
spriteno = 0, 0
start = 0, 0
mask=0

On enregistre et si on lance mugen on voit :


Plutôt pas mal pour un début, non ?

La première chose qu'on remarque c'est que notre menu est mal placé !
Il est trop bas et trop au centre, pour arrangeait cela il suffit de changer ses coordonnées (X,Y) dans le fichier system.def :

Par défaut on a : menu.pos = 159,158

Pour le décalé à droite il faut augmenté X, et pour le remonter diminuer Y.
Après quelques essais je choisis : menu.pos = 250,110

Mais bon le menu ne rend pas bien sur les bandes jaune et orange !
Et l'idée de la boule qui encadre mon menu revient à la surface, reste plus qu'à trouver une image qui fasse l'affaire !
J'ai la chance d'avoir un bon stock d'image en tout genre sur dbz (en fait chaque fois que je vois une image qui pourrait m'aider pour un screenpack je la garde... d'où le stock ! ) et je finis par trouver ce que je cherche :

Grâce à l'outil "sélection elliptique" je ne conserve que ma boule, malheureusement elle est trop grande et je vais devoir la réduire.
Après quelques essais (je fais des copier-coller sur l'image de l'écran titre de mon screenpack jusqu'à ce que j'encadre à peu près mon menu) j'obtiens la taille voulu !

comme pour la première image je la transforme en pcx 256 couleurs, mais cette fois-ci il va falloir que je laisse transparent ce qu'il y a autour de ma boule. Pour cela je rajoute sur mon image une couleur voyante (vert fluo, rose fushia) avant de la passer en 256 couleurs :


Puis une fois en 256 couleurs je réorganise ma palette des couleurs pour mettre le vert fluo en indice 0 ! (dans Gimp c'est : couleur-->carte--> réorganiser la palette des couleurs !) puis je remplace ma transparence par le vert fluo :

Une fois enregistré en pcx je la place dans le fichier system.sff en lieu et place de l'image : 5,0 en la centrant !
Puis dans sytem.def à la suite de notre premier [TitleBG 0] je rajoute :

[TitleBG 1]
type = normal
spriteno = 5, 0
start = 90, 82
mask=1

Quelques explications :

start = 90, 82 ---> avec un peu d'expérience et quelques essais on trouve vite les valeurs adéquates !

mask=1 ---> pour que ma couleur vert fluo (d'indice 0) soit transparente !

Et ça nous donne :

C'est pas parfait mais pour l'instant on va s'arrêter là pour notre menu titre !
On verra à la fin du tuto comment rajouter quelques trucs sympa !

2) L'écran select :

passons donc maintenant à notre écran select, c'est celui où on sélectionne les personnages avec lesquels on va jouer...

Deux règles fondamentales ici :
1) Un écran select doit être bien organisé pour pouvoir si retrouver rapidement... (ne pas mettre une heure à chercher un perso... )
2) Il est inutile de mettre un image de fond trop "chargé, vu que pratiquement 80 % de sa surface va être recouvert par les portraits, big portraits et autres éléments de notre écran...

exemple :

On peut trouver très sympa cette image :

Seulement une fois placé dans notre écran select avec les cases et autres voilà à quoi ça ressemble :

Et oui, on ne voit plus l'image....
D'où mon conseil : pour l'image de fond choisissez une image pas trop "chargée" !

Ensuite deux cas peuvent se présenter quand vous créer un screenpack :
1) Soit vous le faîtes pour une compil et vous connaissez donc d'avance le nombre de persos (de stages) qui feront partis de votre mugen...
2)Soit vous souhaitez créer un screenpack plus traditionnel et qui doit s'adapter alors aux caractéristiques usuelles des persos mugen... (taille des portraits et big portraits...)

Dans le premier cas on peut faire un peu plus de folie mais ça demande plus de travail, alors que le deuxième cas est plus fonctionnel et peut aussi très bien être utilisé pour une compil !

Nous allons nous placer dans le deuxième cas.

Je vais d'abord rappeler ici tous ce qui s'affiche dans l'écran select :
- les cases où prendront place les portraits des personnages
- 2 big portraits (celui du joueur 1 et celui du joueur 2)
- les noms des persos choisi par le joueur 1 et le joueur 2
- les nom des stages...
- et le mode de jeu dans lequel on se trouve : arcade, versus, training...

Pour créer un écran select, il faut donc partir d'un de ces éléments que l'on place à un endroit précis, et ensuite construire le reste autour !

Et pour savoir dans quel direction partir, que faire et où placer quoi.. rein ne vaut une feuille de papier et un crayon !
Dessinez grossièrement votre écran select de 320 par 240 puis faites plusieurs essais avant de trouver quelque chose qui vous plait !

voici mon idée de départ (les tailles des cases ne sont pas encore bien précises, c'est juste pour donner une idée de la forme de l'écran select) :

Je suis parti de l'endroit ou je souhaitais voir s'afficher les stages, j'ai rajouter des cases autour et j'ai laissé un peu de place pour les bigs portraits et les noms des persos !
Bien maintenant, il va falloir faire des maths !
et oui, pour que tous ça rentre convenablement dans notre fenêtre de 320 par 240 il va falloir choisir des bonnes tailles pour les cases des portraits et pour les cases des big portraits !
En sachant que : un portrait standard d'un persos mugen a une taille de 25 par 25, et son big portrait 120 par 140, il nous faudra donc choisir des tailles proportionnels à ses mesures pour nos cases.. (j'espère que j'ai perdu personne jusque là... si vous avez un soucis pour comprendre ça, ça ira mieux quand on le mettra en pratique !)

On commence par choisir la taille des bigs portraits : 96 par 112 (soit 80% de la taille normal !)
et pour les cases qui les contiendront : 100 par 116 (je rajoute 2 pixel en haut, en bas, à gauche et à droite! soit 4 en hauteurs et 4 en largeurs !)
Donc une fois que je place mes cases de big portraits il me reste 120 en largeur pour le haut, et 124 en hauteur sous les big portraits ! (C'est très important de le savoir pour plus tard)
Ensuite je choisis la taille des portraits : 18 par 18 (soit 72% de la taille normal)
et mes cases elles devront faire : 22 par 22 !

Il me reste maintenant à les placer corectement pour que tout rentre :
Première chose je place mes big portraits en laissant une marge de 3 aux bords : (j'ai agrandi l'image pour que ça se voit mieux)

Je décide de laisser une marge de 2 en haut et de placer mes premières cases à 20 pixels du haut : (car 20 + 10 x 22 (taille de ma case) = 240 ! et oui je vous avais dit qu'on allait faire des maths ! )

Et donc mon écran sélect ressemblera à ça (ne tenez pas compte des tailles et du nombre de cases, c'est un croquis !)


Bien maintenant il nous reste à choisir une image de fond, créer nos cases pour les big portraits et pour le portrait et on pourra voir ce que ça donne dans mugen ! (c'est long je sais, mais pour faire quelque chose de propre !)

Comme image de fond je choisis :

Comme case pour les portraits :


Et pour les big portraits :


Pour les deux dernières images, les couleurs voyantes représentent bien évidement un fond transparent !

Je transforme mes images en pcx 256 couleurs (vous devez être habitué maintenant !) et je remarque que mon image de fond devient très moche en 256 couleurs, un peu pâteuse.. bref ça le fait pas !
Mais rien n'est perdu il existe plusieurs trucs pour remédier à cela :
l'un d'eux consiste à séparer mon image ne plusieurs morceaux !
je décide de séparer mon image en deux (je coupe à la moitié!) et là ça va mieux !

On rentre tous ça dans le fichier sff :
notre première image de fond en 100, 0 (toujours centré !)
notre deuxième image en 100,1 (centré et descendu de 120 !)
notre case en 150,0 (position :0,0)
notre case pour les bigs portraits en 110,0 (position : 0,0)

Puis dans le fichier system.def on enlève tous les [SelectBG ] et on les remplace par :

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

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

[SelectBG 2] ;case big portraits joueur 1
type = normal
spriteno = 110,0
start = -157,2
mask=1

[SelectBG 3] ;case big portraits joueur 2
type = normal
spriteno = 110,0
start = 57,2
mask=1

Seulement on a pas fini avec notre sytem.def, il nous faut rentrer : la taille nos cases (22,22) , la position de départ et le nombre de colones et de lignes !

on a :

rows = 10
columns = 14

pos = -5,20 ;Position to draw to

cell.size = 22,22 ;x,y size of each cell (in pixels)
cell.spacing = 0

Bien on enregistre et on lance mugen et.... oups... y a un souci effectivement tous les cases s'affichent

Pour arranger cela, deux choses :

1) dans system.def : on change showemptyboxes = 1 par showemptyboxes = 0 (comme ça mugen n'affichera pas les cases vides!)

2) et le plus important dans notre select.def on va "tracer" notre écran select, pour cela on va mettre des "blank" pour les cases qu'on ne veut aps voir (celles sur les big portraits) et des randoms slects sur les caes qu'on veut voir !

notre select.def devient :

Spoiler:

C'est long, hein ? mais on a dix lignes et quinze colonnes !
Après il nous faut changer l'image de notre random select (trop grande !) pour cela on va la remplacer par une image de taille 18 par 18 (position -2,-2; et oui il faut qu'elle entre dans nos cases !)

Et dans mugen ça donne :

il ne nous reste encore à changer le curseur des joueurs 1 et 2, et à indiquer à mugen que la taille des portraits des joueurs change, et à placer correctement les bigs portraits ! et à laisser une palce pour l'affichage des stages !

Commençons par changer la taille des portraits :

portrait.offset = 2,2 <--- puisqu'on rajoute ça il faut absolument changer la position du random (image 150,0) dans le system.sff en 0,0 !
portrait.scale = 0.72,0.72

Puis celle des big portraits et profitons en pour les placer :

;Big portraits
p1.face.offset = 5,4 ;Position to put big portrait
p1.face.scale = 0.8,0.8
p1.face.facing = 1
p2.face.offset = 315,4
p2.face.scale = 0.8,0.8
p2.face.facing = -1

Ensuite il nous faut créer nos curseur de sélection, un pour le joueur 1 et un pour le joueur 2, encore une fois à votre imagination de parler !
Il faut changer les images 160,0 et 170,0 ainsi que les 161,0 et les 171,0 ! (généralement je pars de l'image de ma case et je créée le curseur avec, comme ça les dimensions sont bonnes !)

Et ça nous donne :

Ensuite on place les noms des persos au bon endroit :

p1.name.offset = 4,127 ;Position to put name
p1.name.font = 3,4,1 ;Set to -1 for no display
p2.name.offset = 316,127
p2.name.font = 3,1,-1

Et on laisse un peu de place pour nos stages, pour cela on va remplacer 11 randomselect par 11 blank dans notre avant dernière "ligne" du select.def ! Puis placer modifier la position des stages pour qu'ils apparaissent au bon endroit !

et voilà le travail :

Encore une fois on laisse nos fonts comme ça on verra à la fin !

Dernier conseil : vous pouvez remarquez que mes curseurs ne sont pas n'importe où sur l'image !
pour les placer au démarrage de mugen il faut changer les valeurs de :
p1.cursor.startcell =
p2.cursor.startcell =
3) L'écran Versus :

L'écran versus est celui où apparaissent les deux personnages qui vont combattre...
Il contiendra donc obligatoirement les deux bigs portraits de ces personnages, et leurs noms.

Commençons comme d'habitude par trouver une image de fond :

Cette fois-ci je choisis une animation, c'est à dire plusieurs images qui vont défiler les unes après les autres et voilà à quoi ça ressemblera :


J'ai donc quinze images pcx en 256 couleurs (vous connaissez la chanson maintenant ), que je place dans mon fichier sytem.sff (numéros : 300,0 à 300,14) toujours centré (position :160,0).

Puis j'ouvre mon fichier system.def, je me rang à l'endroit du versus ( en dessous de [VersusBGdef]) et comme d'habitude je supprime tous les VersuBg qui existe et je vais écrire les miens :


Citation
[VersusBG 1] ;anime de fond
type = anim
actionno = 300
start = 0,0
mask=0

Quelques changements par rapport à ce qu'on a écrit avant :

type =anim ---> puisque mon "background" va être une animation !
actionno = 300 ---> je ne précise plus le sprite que j'utilise mais l'action !
Et donc il me faut créer cette action 300, en dessous de mon [VersusBG 1] je rajoute :


Citation
[Begin Action 300]
300,0, 0,0, 10
300,1, 0,0, 10
300,2, 0,0, 10
300,3, 0,0, 10
300,4, 0,0, 10
300,5, 0,0, 10
300,6, 0,0, 10
300,7, 0,0, 10
300,8, 0,0, 10
300,9, 0,0, 10
300,10, 0,0, 10
300,11, 0,0, 10
300,12, 0,0, 10
300,13, 0,0, 10
300,14, 0,0, -1


Quelques explications :
il s'agit donc de mes quinze images les unes à la suite des autres, chacune s'affichant pendant une durée de 10 ticks (pour rappels : 60 ticks = 1 seconde !), sauf la dernière qui s'affichera jusqu'à la fin de l'écran versus (ça permet d'éviter que l'animation reprenne au début et soit saccadé comme dans le gif !)

Bon j'enregistre le tout, je le teste dans mugen et ça marche:


Deuxième étape je vais créer des cadres pour les big portraits (ça fait toujours plus propres !), cette fois-ci pas besoin de redimensionner mes bigs portraits je les laisse à leur taille normale (120 par 140), avec un bord de 2 pixels mes cadres mesurent donc : 124 par 144 !

Je place mon image dans le sff, numéro : 350,0 et position : 62,0.

Puis je rajoute deux versusbg dans le sytem.def et je choisi de décaler un peu mes big portraits vers le bord de l'écran pour laisser un peu de place entre les deux pour une animation du "versus" :


Citation
[VersusBG 2]; cadre big portrait J1
type = normal
spriteno = 350,0
start = -96,28
mask=1

[VersusBG 3]; cadre big portrait J2
type = normal
spriteno = 350,0
start = 96,28
mask=1

et je n'oublie pas de modifier la position des bigs portraits :


Citation
;Big portraits
p1.pos = 4,30
p1.facing = 1
p1.scale = 1,1
p2.pos = 316,30
p2.facing = -1
p2.scale = 1,1

Dans mugen :


Enfin je crée mon animation "versus". Je pars de cette image :


Pour arriver à cette animation :


Très simplement en créant 6 images intermédiaires (je vous conseille de télécharger la gif et de l'ouvrir avec gimp pour voir les différents calques du gif).

J'enregistre ses 7 images (les 6 intermédiaires plus l'originale) en pcx 256 couleurs avec un fond transparent, je les place dans sytem.sff en lieu et place du groupe 200 (en choisissant pour l'image originale le numéro : 200,0).

Ensuite je crée un nouveau versusbg dans sytem.def :


Citation
[VersusBG 4]
type = anim
actionno = 200
start = 0,125
layerno=1
mask=1

[Begin Action 200]
200,1, 0,0, 10
200,2, 0,0, 10
200,3, 0,0, 10
200,4, 0,0, 10
200,5, 0,0, 10
200,6, 0,0, 10
200,0, 0,0, -1


Quelques explications :

layerno=1 ---> pour que l'animation s'affiche au-dessus de tout le reste !

Dans mugen :

Et voilà notre écran versus est fini ! On verra comme pour les autres écrans comment changer les fonts à la fin !

4) L'écran Option :

Notre dernier écran est l'écran option, celui où on va allait le plus vite, on peut y faire aussi plein de chose mais c'est quand même l'écran le moins important donc...

On va tout simplement placer une unique image de fond :


Dans system.sff je la place au numéro : 500,0 ; position : 160,0.
Dans system.def je vais à :

;Options screen background
[OptionBGdef]

Et je remplace le OptionBG par :


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

Dans mugen :


Et voilà, c'est fini pour les écrans de notre screenpack, la prochaine fois nous verrons comment changer et choisir les fonts de notre screenpack !

Se tuto pourrait vraiment vous aider ^^

J'ai un problème avec le le fichier system.sff quand je l'ouvre cela me met :

Spoiler:

En beaucoup plus long donc avec quel logiciel doit-je l'ouvrir?

Je ne sais pas quesque sait, moi sa me fait pas sa

Ah et tu l'ouvre avec le bloc note?
ET c'est bien le system.ssf qui est dans data?

Normalement le fichier "System.sff" faut l'ouvrir avec Fighter Factory

Ah ok ba j'ai l'air d'un "c*n" là (désolé pour l'expression)

Probleme resolu

Pas grave, eh oui probleme résolue ^^

Si tu veux mon avis,pour voir le systeme du jeu,il faut aller dans "system.def".

Mais bon,PROBLEME RESOLU





Cordialement,LPG

Merci d'avoir résolue le probleme ;D

J'ai une question, est-il possible de laisser un espace entre les carrés de sélection dans un sans plus que dans l'autre ??

C'est possible...oui