Ce tutorial écrit par Kyo va vous permettre d'apprendre à créer vos premiers stages.
On commencera
par des stages simples statiques puis, peu à peu, vous pourrez faire des stages
plus complexes.
Dans ce tutorial, je ne reviens pas sur la méthode à suivre pour capturer vos sprites, lisez avant le Tutorial 1 (La capture de sprites comment ça marche ?).
A noter que pour suivre au mieux ce tutorial il faut télécharger les sources. Ce choix s'explique car je trouve que c'est plus facile d'apprendre par l'exemple. De plus en utilisant les sources ça vous dispense d'utiliser certain outils et ça permet de se concentrer sur l'essentiel "savoir comment faire un stage".
Comme vous le savez sûrement un stage est composé de 2 fichiers, l'un portant l'extension *.sff qui contient toutes les images de votre stage et l'autre avec l'extension *.def qui contient toutes les commandes pour que votre stage fonctionne correctement dans Mugen.
Le fichier *.sff ne présente pas de difficulté puisque qu'il est créé automatiquement par MCM. Par contre le fichier *def, c'est vous qui devez le créer.
Le fichier qui vous servira de base pour ça, est le fichier stage0.def qui se trouve dans le répertoire stage de Mugen. Examinez sa structure mais ne vous attardez pas ici, c'est juste à titre indicatif car on reviendra sur chaque élements dans la suite du tutorial.
Tout d'abord nous allons créer un décor statique simple de taille 320*240. Arriver à ce stade, vous devez savoir ripper des sprites donc allez capturer une image dans un jeu, sachant que ces caractéristiques doivent être les suivantes :
Si vous ne savez pas comment faire voici un exemple. Je viens de capturer une image avec Kawaks qui fait 384*224 au format *.png.
Ensuite j'utilise le logiciel (gratuit !) XnView, pour changer les caractéristiques de l'image.
Si vous voulez aller plus vite vous pouvez utilisez le fichier stage1.pcx (founi dans les sources) et créer le fichier sff à partir de cette image.
Voilà donc maintenant vous avez une image prête à être insérée dans MCM pour créer le SFF.
Ouvrez MCM dans le menu SFF, faites Nouveau puis Ok. Ensuite chargez votre image en cliquant sur Ajouter Sprite et sauvegardez votre SFF sous stage1.
Nous allons maintenant créer le fichier *.def. Ouvrez le fichier stage0.def avec votre éditeur de texte et allez voir dans les sources le fichier stage1.def commenté.
Faites les modifications à partir de stage0.def afin d'optenir la même résultat que le fichier stage1.def founi dans les sources.
Enregistrez le fichier sous stage1.def, faites attention à pas écraser le fichier source qui porte le même nom ( pensez à créer un sous-répertoire avec vos créations) puis allez tester dans Mugen.
Nous allons maintenant créer un autre décor, toujours statique, mais avec des mouvements de camera latéraux comme dans un vrai stage.
Pour ça il vous faut cette fois une image avec une largeur de plus de 320. La hauteur restera pour l'instant de 240.
Allez ripper tout le fond d'un stage puis faites le montage avec Photoshop ou un autre outil de retouche d'image. Si vous ne savez pas comment faire je vous explique la procédure au chapitre 8, mais pour le moment, ce qui compte c'est de comprendre le principe donc vous pouvez utilisé l'image d'exemple fournie dans le fichier source.
Insérez ensuite votre image dans MCM selon le même principe que le stage 1, puis enregistrez le fichier sous stage2.sff. Voilà la partie SFF est réglée.
En qui concerne le fichier DEF, très peu de chose vont changer par rapport au fichier stage1.def donc vous pouvez répartir du fichier que vous avez crée en faisant juste les modifications.
Comme il s'agit d'un décor avec mouvements latéraux de caméra il va
falloir configurer les variables boundleft et boundright de la rubrique [Camera].
Pour configurer ces variables c'est très simple il faut faire un petit calcul (désolé pour ceux qui n'aime pas les maths) :
Dans notre cas, la largeur du décor est de 672, ce qui nous donne (672-320)/2=176 mais le boundleft doit toujours être négatif pour un décor avec déplacements de caméra.
Ce qui nous donne au final :
Boundleft = -176 Boundright = 176
Le paramètre Start qui se trouve dans la rubrique [BG fond] doit également être modifié. Lorsque les coordonnées de l'image dans le SFF sont celles par défaut (ce qui est toujours notre cas pour le moment) on prend toujours la moitié de la largeur du décor en valeur négative, ce qui donne dans notre cas 672/2 = 336 donc -336 en X, pour la valeur Y elle reste à 0 puisque la hauteur du stage ne dépasse pas 240.
Voilà vous pouvez maintenant créer le fichier stage2.def.
Voilà il ne reste plus qu'à tester dans MUGEN.
Tout d'abord, il vous faut un décor avec une hauteur supérieure à 240 et une largeur supérieure à 320 puisque que nous allons faire un stage dont la caméra pourra suivre les déplacements des personnages de gauche et de droite, mais également les déplacements vers le haut lors des sauts.
Pour l'exemple j'ai choisi une image de 648*260 (ripper d'un petit jeu Neogeo pour changer !). Comme d'habitude vous pouvez utiliser l'image founie dans les sources ou bien ripper un image vous même.
La partie SFF ne devrait plus poser de problème pour vous à présent, donc créez le fichier et enregistrez le sous stage3.sff.
Voyons maintenant la partie *.DEF qui se complique un peu. Pour la configuration des variables boundleft et boundright de la rubrique [Camera] ça ne change pas par rapport à ce que nous avons vu précédemment. Par contre, on introduit deux nouvelles variables boundhigh et boundlow étant donné que l'on veut que les déplacements vers le haut lors des sauts soient également gérés par la caméra. Pour trouver la valeur de boundhigh il faut utiliser la formule ci dessous.
Ce qui fait -20 pour notre décor de 260. A noter que cette formule n'est valable que dans le cas où votre décor dans MCM a les coordonnées 0,0 (ce qui est toujours notre cas depuis le début du tutorial). Pour la variable boundlow, en général sa valeur est de 0 sauf dans le cas d'un décor en ascenseur type stage Xmen ou Mavel vs.
Voilà vous pouvez maintenant crée votre fichier stage3.def.
Faites ensuite l'inévitable test sous MUGEN.
Dans ce chapitre, je vais vous montrer comment animer vos stages mais le principe sera valable pour n'importe quelle animation de vos décors.
Pour simplifier l'exemple, je vais utiliser un décor de taille 326*240 (décor volontairement réduit et simplifié) : voici ce que nous obtiendrons au final.
L'animation se compose de 5 sprites, qu'il va falloir intégrer dans MCM selon la même méthode que précédemment en veillant à ce que :
Pensez aussi à décocher l'option "Used shared palette" et à bien changer les groupes (voir image).
Enregistrez votre fichier SFF sous stage4.sff.
Pour le fichier DEF je ne vais pas tout vous réexpliquer depuis le début puisque qu'il n'y a rien de nouveau à part la partie [BG] et une nouvelle section [Begin ] qui va définir notre animation.
[BG fond anim] ;Le décor est maintenant animé ;donc le type n'est plus normal mais anim type = anim ;ici on indique le numéro de l'action déclarer plus bas actionno = 1 spriteno = 0, 0 layerno = 0 start = -163, 0 delta = 0.65, 1 trans = none mask = 0 tile = 0, 0 tilespacing = 0,0 window = 0,0, 319, 239 [Begin Action 1] ;ici on va décomposer notre animation : ;les 2 premiers chiffres ;indiquent le numéro de Group et d'Image ;les deux chiffres suivant indiquent; ;les coordonnées en X et Y donc 0,0 ici ;enfin le dernier chiffre ;indique la vitesse de l'animation 0,0, 0,0, 50 0,1, 0,0, 50 0,2, 0,0, 50 0,3, 0,0, 50 0,4, 0,0, 50
Enregistrez votre fichier .def sous stage4.def et allez tester sous MUGEN.
Pour clôturez ce tutorial, je vais vous montrer comment créer un décor sur 2 plans c'est à dire : un 1er plan puis un paysage en fond.
J'en profiterai pour vous montrez en détail la procédure pour faire le montage (avec
Photoshop) des captures de sprites afin d'obtenir un décor complet.
Le stage d'exemple que j'ai choisi est tiré du jeu RB Fatal Fury Spécial. J'ai rippé tous les sprites du stage avec NeorageX selon la méthode expliquée dans le tutorial
consacré à la capture de sprite (en mettant de coté les animations pour simplifier une fois de plus ).
A noter qu'il n'y a plus de sources pour ce chapitre car ce stade vous étes capable de tout faire (Fichier .sff et .def).
Passons au montage de vos captures.
Toutes les images rippées avec NeorageX se présentent sous cette forme :
Il va donc valoir les travailler avant de faire le montage. Tout d'abord on va supprimer le rectangle noir tout au tour de l'image en utilisant la fonction image/rogner.
Ensuite on va redéfinir les dimensions des images (par défaut elles sont en 640*480 la résolution de NeorageX), on va donc définir une hauteur de 260 en conservant le ratio de proportion entre la hauteur et la largeur, étant donnée que l'on ne connaît pas encore la largeur finale du décor.
Voilà, maintenant toutes nos images sont prêtes à être assemblées, ouvrez un nouveau fichier de taille 900*260 par exemple (on ajustera si besoin après).
Le bannière est maintenant prête à recevoir vos images. Ouvrez la 1er image qui correspond à la partie extrême droite du décor et avec la fonction déplacement (v) glissez cette image sur la bannière.
Répétez l'opération avec l'image qui suit en veillant à bien coller les parties entre elle pour que les séparations entre chaque images soit invisibles. Ensuite répétez une fois de plus la même opération pour l'arrière plan.
Le montage est terminé, il ne reste plus qu'à intégrer vos images dans MCM pour faire votre SFF en respectant les 2 contraintes que vous connaissez bien maintenant (format PCX en 256 couleurs). La partie DEF n'est pas plus compliquée: il vous suffit de déclarer le 1er plan et l'arrière plan séparément comme suit :
[BG horizon] type = normal spriteno = 1, 0 layerno = 0 start = -450, 0 delta = 1, 1 trans = none mask = 0 tile = 0, 0 tilespacing = 0,0 [BG sol ] type = normal spriteno = 0, 0 layerno = 0 start = -450, 0 delta = 1, 1 trans = none mask = 1 tile = 0, 0 tilespacing = 0,0
Voilà ce tutorial est terminé. Bien sûr il ne s'agit que de la première partie, puisqu'il me reste encore à vous expliquer les parallaxes, effets d'ombre, effets de lumière, superposition de plusieurs plans de taille différents et j'en passe, mais vous pouvez déjà réaliser de beaux stages avec tous ce qui est décrit ici : entraînez-vous, il n'y a que comme ça que l'on progresse !!!
Sources du tutorial