Créer une intro vidéo pour Mugen : Tutorial

Extraire les images d’une vidéo

Une fois que vous avez choisis la vidéo que vous souhaitez ajouter dans votre jeu Mugen, il vous faut en extraire toutes les images qu’elle contient.

Pour ce faire, il vous faut utiliser VirtualDubMod.

Si vous ne savez pas comment faire, consultez notre tuto :
Extraire les images d’une vidéo avec VirtualDubMod

Convertir les images

Les images que vous venez d’extraire de votre vidéo sont au format PNG.
Pour pouvoir les utiliser sous MUGEN, il vous faut les convertir au format PCX.

Pour ce faire, il vous faut utiliser Ifranview.
Si vous ne savez pas comment faire, consultez notre tuto :
Convertir des images par lot avec Irfanview

Création du fichier Texte (Methode de Base)

Maintenant que nous avons extrait notre vidéo tout en image, il nous à présent créer le fameux fichier .sff qui contiendra justement toutes ces images.

Le principe d’un fichier .sff est de décrire dedans le nom et toutes les coordonnées voulues pour toutes les images unes à unes.

La création du fichier sff se fait en deux temps : Il vous faut tout d’abord créer un fichier texte dans lequel vous indiquez toutes les infos nécessaires pour chaques images et ensuite, à partir de ce fichier texte, le logiciel SffExtract compilera le fichier sff.

On commence donc par le fichier texte :

Ouvrez donc un nouveau fichier texte.

Code de Base

En premier lieu, copier coller le code suivant :

; Options
#
; Palette
1
; Individual palette
1
; End of options
;
; Output file
C:\intro\intro.sff

– Pour vous faciliter grandement les choses, je vous conseille de mettre votre projet vidéo dans un dossier directement dans c :. Ca évitera d’avoir des adresses du type c :/users/default/mes_documents/dossierxxx/etc qui vous prendront énormément de temps.

– Pensez à modifier la dernière ligne de ce code, en entrant le nom du fichier sff qui sera créé ultérieurement par le logiciel.

Déclarer les images de votre vidéo

A présent, on va déclarer notre première image 0000.pcx :

C:\intro\pcx\0000.pcx
0
0
0
0

Les explications de ce code :

Toutes les images de votre vidéo doivent appartenir au même groupe. Je vous conseille donc de mettre le N° de groupe 0 pour toutes les images, ainsi que pour les coordonnées X et Y, les laissez à 0.
En résumé, seul le chemin de l’image et le N° de l’image change à chaques images.

Avec ces quelques règles en tête, on peux continuer à compléter notre fichier texte :

C:\intro\pcx\0001.pcx
0
1
0
0
C:\intro\pcx\0002.pcx
0
2
0
0

Et ainsi de suite pour toutes les images extraites de votre vidéo !

Vous l’aurez compris, si votre vidéo s’est extraite en 1600 images, et bien il va vous falloir entrer ce code 1600 fois, en changeant à chaque le n° d’image.

Création du fichier texte (Méthode du "tableur")

Voici une solution que je vous décris ici qui vous permettra de configurer en 5 minutes vos 1600 images sans avoir à recopier le code tout autant de fois.

Le principe de cette méthode repose en fait sur l’utilisation d’un tableur afin d’entrer les données des images sous forme de colonne afin de pouvoir automatiser la tâche.

Pour ce faire, vous aurez besoin de deux logiciels :

– Free Commander

Gratuit et téléchargeable dans la section utilitaires : Free Commander

– Un logiciel de tableur

Excel si vous avez ou alors la suite gratuite Open Office.

A présent équipé de ces deux logiciels, voici comment procéder :

Ouvrez tout d’abord le logiciel Free Commander.

Dans le menu de gauche, sélectionnez le répertoire dans lequel sont stockés les images de votre vidéo.

La liste de toutes les images s’affichent dans le menu central.
Faites ctrl + a pour tout sélectionner.

Puis allez dans le menu :

editer --> copier le nom comme texte dans le presse papier

A présent, ouvrez votre logiciel de tableur et faites ctrl + v dans la première ligne de la première colonne de votre page.

La liste de toutes vos images occupe la première colonne.

En reprenant le schéma du code de base :

C:\intro\pcx\0000.pcx
0
0
0
0

On va répartir chaque ligne du code dans une colonne, et on va séparer chaque colonne par une autre colonne dans laquelle on entrera le code
<br>.
Ce code est une balise html qui déclenche le retour à la ligne sur une page web. Vous comprendrez plus loin son utilité.

Voici donc comment remplir votre tableur :

Dans la deuxième colonne, entrez donc la balise

Dans la colonne suivante, entrez le n° de groupe pour chaque ligne, à savoir 0.

Dans la colonne suivante, entrez la balise <br>

Dans la colonne suivante, entrez le n° de l’image.

Entrez 0 sur la première ligne, 1 sur la deuxième, 2 sur la troisième, 4 sur la suivante et ainsi de suite.

Pour automatiser la tâche, sélectionnez les 4 premières lignes et faites glisser jusqu’en bas de la colonne et cela complètera automatiquement toute la colonne.

Compléter les colonnes suivante par <br>, 0, <br> et 0.

Au final, vous obtenez ceci :

Il vous reste une dernière étapes à faire.
Rajoutez une colonne avant la première dans laquelle on va renseigner l’url de vos images.

Dans mon cas, mes images se trouvent dans le dossier c :\intro\pcx, donc je copie ce chemin dans toutes les lignes de la colonne.

Votre tableur est à présent compléter pour vos 1600 images.
Il vous faut maintenant enregistrer votre page au format CSV.

Modifications dans le csv

Ouvrez votre fichier csv avec le bloc note, en faisant clic droit—> ouvrir avec.

Vous remarquez que toutes vos données s’affichent sous forme de ligne et que les éléments des colonnes sont séparés par des point-virgules.

On va tout simplement supprimer tous ces point-virgules.

Pour ce faire, allez dans le menu :

Edition --> Remplacer

Entrez le point-virgule dans la première case et laissez la deuxième vide.

Cliquez sur OK et vous verrez tous les point-virgules de votre fichier s’effacer.

Enregistrer maintenant votre page modifiée au format html.

Fermez le bloc note et lancez votre page dans votre navigateur.
Et voila !

Il ne vous reste plus qu’a copier tous le code obtenu et le coller dans le fichier texte de tout à l’heure, à la suite du code :

; Options
#
; Palette
1
; Individual palette
1
; End of options
;
; Output file
C:\intro\intro.sff

Le fichier texte de votre vidéo est terminé. Vous allez à présent pouvoir créer le sff !

Créer le fichier SFF

Votre fichier texte est donc prêt, vos images aussi.
Vous pouvez donc créer le fichier sff.

Pour ce faire, il vous faut récupérer le pack d’utilitaires SffExtract dans la section utilitaires : SFFExtract et SPRMaker

Dézipper l’archive dans le même dossier que votre fichier texte.

Double cliquez sur sff2tr.exe.

Si c’est la première fois que vous utilisez ce logiciel, il vous demandera de lui indiquer l’emplacement des trois exécutables :

Passé cette étape, voici à quoi ressemble l’écran de départ :

Il vous faut allez dans l’onglet SFF COMPILATION :

Indiquez le chemin de votre fichier texte et laissez en bas toutes les options cochés.

Lancez ensuite la compilation.
Plus vous aurez d’images, et plus la compilation peut prendre du temps.

Et voila, votre fichier intro.sff est crée.

Création du fichier .def

Maintenant que vous avez votre fichier sff, il vous faut créer le fichier .def qui va déclarer votre vidéo dans Mugen.

Ouvrez donc le bloc note et créez un nouveau fichier.
Voici le code par défault d’un fichier .def.
Recopiez le dans votre bloc note.

[SceneDef]
spr = 

[Scene 0]
fadein.time =     
fadeout.time =   
clearcolor =    
layerall.pos =  
bgm = 
bgm.loop =         
layer0.anim =     
end.time =  


[Begin Action 0]

On va à présent compléter ce code :

[SceneDef]

Dans notre exemple, on va donc mettre :

[SceneDef]
spr = intro.sff

[Scene 0]

– fadein.time : Fondu de l’image en millisecondes
– fadeout.time : Temps que met la fondu de l’image pour disparaître (en millisecondes)
– clearcolor : Couleur du fond en RVB. Les valeurs vont de 0 à 255
– layerall.pos : Définie la position en x et en y
– bgm : Indiquez ici le fichier musique qui sera joué pendant votre video d’intro
– bgm.loop : Nombre de fois que la musique sera jouée (0 pour en boucle)
– layer0.anim : Numéro de l’animation
– end.time : Durée de votre scène

Dans notre exemple, on va donc compléter avec les valeurs suivantes :

[Scene 0]
fadein.time = 30      
fadeout.time = 90   
clearcolor = 0,0,0   
layerall.pos = 0,0  
bgm = intro.mp3
bgm.loop = 1        
layer0.anim =  0   
end.time = 5100 

[Begin Action 0]

Ce dernier menu est le plus long puisque c’est dans celui la que vous allez énumérez un à un tous les sprites qui vont composer votre animation.

Voici le code :

0,0,0,0,7

Ce code signifie :

n°groupe, n°d'image, coordonnée x, coordonnée y, temps d'affichage du sprite

Vous l’aurez compris, si votre fichier sff contient 1600 images, alors votre partie [Begin Action 0] contiendra 1600 lignes !

0,0,0,0,7
0,1,0,0,7
0,2,0,0,7
0,3,0,0,7
0,4,0,0,7
etc...

Dans notre cas présent, seul le n° de l’image est a changé à chaque ligne.
Pour vous éviter de taper 1600 lignes, vous pouvez utilisez de nouveau la technique du tableur utilisé plus haut, sauf que ce coup ci, vous n’aurez pas besoin des balises <br>.
Il vous suffira juste, une fois votre document au format csv, de remplacer les point-virgules par des virgules simples

Une fois votre fichier def complet, il ne vous reste plus qu’à l’enregistrer sous le nom de intro.def.

Voila votre vidéo est terminé !
Il ne vous reste plus qu’a activer votre vidéo dans le fichier system.def