Tutorial stage Mugen : Creation d’un stage avec défilement

I- Préliminaires

Avant de vous lancer dans cette série de tutoriaux concernant la création de stage, vous devez récupérez tous les outils nécéssaires :
– Fighter Factory
– Irfranview
– WinMugen Plus

Et vous devez avoir consulté au préalable les tutoriaux sur l’utilisation de Fighter Factory et d’Irfanview.

Avant de vous lancer dans ce tutorial, vous devez impérativement maîtriser le premier tutorial car nous ne reprendrons ici que les sections dont la configuration change.
Nous reprendrons également le même décor, le même fichier de sprite (kamehouse.sff) et le même fichier de configuration (kamehouse.def).

II- Stage avec défilement latéral

I- Modifier votre fichier sprite

Redimensionner le décor

Pour pouvoir créer un stage avec défilement latéral, il vous faut créer une image qui est supérieure en largeur à la résolution de votre jeu Mugen.
Dans ce tutorial, nous travaillons avec la version WinMugen Plus, qui a donc une résolution de 640x480.
De ce fait, il faut que notre décor de fond est une largeur supérieure à 640.

On va donc reprendre notre décor du premier tutorial et on va redimensionner l’image avec Irfanview.

Lancez donc Irfanview et le mode de conversion par lot. Sélectionnez notre décor.

Ensuite, dans les options avancés, cochez la section "Redimensionner" et entrez 800 pixels en largeur et laissez la même hauteur en entrant 480.

IMPORTANT, il est primordial que vous décochiez en bas l’option "Préservez les proportions" parce que sinon, vu que l’on modifie la largeur, le logiciel va modifier du même ordre la hauteur dans le but de préserver l’aspect d’origine de l’image.

Dans notre cas, ce n’est pas une image de qualité qui nous interesse, mais une image qui serve d’exemple pour ce tutorial^^

Une fois redimensionnée, votre image est donc au format 800x480 et ressemble à ca :

Changer le sprite dans Fighter Factory

A présent, il vous faut changer le sprite dans Fighter Factory.

Ouvrez votre fichier kamehouse.sff et changer l’image par celle que l’on vient de redimensionner.
Enregistrez votre nouveau fichier de sprite sous le nom de kamehoused.sff.

II- Configurer votre stage

Maintenant, on va configurer les quelques sections qui changent par rapport à la configuration du stage statique.

Reprenez donc votre fichier de configuration kamehouse.def.
3 sections doivent être modifiées. Les autres, ne touchez rien.

- 1) Section [Info]

Ici, changez le nom de votre stage afin de le différencier du précédent , surtout quand vous aurez besoin de le tester sous MUGEN.

Mettez donc :

[Info]
name = "KameHouse avec defilement"

- 2) Section [Camera]

Voici la section la plus importante à modifier, puisque c’est celles qui définis le défilement de la caméra sur votre stage.

– Startx : Laissez à 0.
– Starty : Laissez à 0.
– Boundleft :
Cette valeur définis le déplacement latéral de la caméra vers la gauche. La valeur est négative.

Pour calculer cette valeur, rien de plus simple, appliquez cette formule :

(Largeur de votre décor - Largeur de la résolution)/2

Dans notre cas, on a donc :

– La largeur de notre décor est donc de 800 pixels.
– La largeur de la résolution est la résoltion dans laquelle se lance votre jeu MUGEN, c’est à dire celle indiqué dans le fichier mugen.cfg.

Pour notre cas, c’est donc 640 de largeur.
Ca donne donc :

(800-640)/2= 80

Boundleft doit être une valeur négative, donc cela donnera -80.

– Boundright

Même valeur que pour BoundLeft mais positive. Donc ici 80.

– BoundHigh

Cette valeur se base sur le même principe que pour les deux précédents mais s’applique à la hauteur.
On abordera cette notion dans la deuxième partie de ce tutorial consacré au défilement vertical.

– Boundlow
Laissez cette valeur toujours à zéro.

– verticalfollow :
Vitesse du déplacement de la caméra lors du saut d’un personnage. A 0, elle ne bouge pas. Valeur par défault : 0.2

– floortension :
Fonctionne de pair avec la valeur "Verticalfollow". Indique à quelle distance du sol doit se trouver le personnage pour que la caméra commence à le suivre vers le haut. Par défault : 0

– tension :

Idem que "floortension" mais horizontalement. Valeur par défault : 50

Au final, la section [Camera] donne ceci :

[Camera]
startx = 0
starty = 0
boundleft = -80
boundright = 80
boundhigh = 0
boundlow = 0
verticalfollow = .2
floortension = 0
tension = 50

3) Section [BGdef]

Tout d’abord, pensez à indiquer notre nouveau fichier de sprite :

[BGdef]
spr = stages/kamehoused.sff
debugbg = 0

Ensuite, il faut modifier la valeur de l’attribut Start.

On a vu dans le tutorial précédent que la première valeur représentait les coordonnées horizontales et devait être égale à la moitié de la largeur de notre décor.

Etant donné que notre décor fait 800 pixels de large, la valeur horizontale doit être de -400.

Quand à la valeur verticale, celle ci reste toujours à 0.

Ce qui nous donne :

[BG 0]
type = normal
spriteno = 0,0
start = -400,0
delta = 1,1
mask = 0
Window = 0,0,639,479

Et voila !
Enregistrez à présent votre fichier de configuration sous le nom de kamehoused.def.
Ajouter votre stage dans MUGEN et admirer le résultat !

III- Stage avec défilement latéral et vertical

Maintenant que l’on a vu comment mettre en place un stage avec défilement latéral, on va à présent voir comment y ajouter un défilement vertical.

Pour mettre en place un défilement vertical, il faut donner à votre image une hauteur supérieure à celle de votre résolution MUGEN, soit supérieur à 480 pixels.

On va donc reprendre notre image de tout à l’heure et on va la redimensionner.
Avec Irfanview, spécifiez une largeur de 800 pixels et une hauteur 500 pixels.

Voila ce que va donner votre image :

1) Modifier le fichier de sprite

Ouvrez le fichier kamehoused.sff dans Fighter Factory et changer l’image avec celle que l’on vient de redimensionner.

Enregistrer ensuite votre nouveau fichier sprite sous le nom de kamehoused2.sff.

2) Configurer le stage

Reprenez à présent le fichier kamehoused.def.

1) Section [Info]

Modifier le titre de votre stage afin de mieux le reconnaître une fois MUGEN lancé :

[Info]
name = "KameHouse avec double defilement"

2) Section [Camera]

Dans cette section, il vous faut calculer la valeur Boundhigh, qui définis le déplacement de la caméra vers le haut.
Pour trouver cette valeur, c’est simple, il suffit d’appliquer la formule :

Largeur de la résolution - largeur du décor

Dans notre cas donc, on a :

480-500=-20

Boundhigh à toujours une valeur négative.

La section [Camera] donne au final :

[Camera]
startx = 0
starty = 0
boundleft = -80
boundright = 80
boundhigh = -20
boundlow = 0
verticalfollow = .2
floortension = 0
tension = 50

3) Section [BGdef]

Indiqué dans cette section le nom de votre nouveau fichier sprite, à savoir kamehoused2.sff.

[BGdef]
spr = stages/kamehoused2.sff
debugbg = 0

Et voila.
Enregistrez votre fichier de configuration sous le nom de kamehoused2.def.
Ajoutez votre stage dans MUGEn et admirer le résultat !