Pour suivre ce tutoriel, je vous conseille d’avoir pris connaissance de la première partie et de la deuxième partie; je ferai en effet directement référence a ces deux premières parties, et vous risquez de décrocher si vous ne les avez pas consultées avant. Vous voilà prévenus !
PARTIE III – ATTRACT-MODE : CONCEPTS AVANCÉS (SKRAPER)
TABLE DES MATIÈRES
- INTRODUCTION
- COMPRENDRE ET UTILISER LES ARTWORKS
- STRUCTURER SON LAYOUT AVEC DES ARTWORKS
- PEUPLER ATTRACT-MODE AVEC SKRAPER
- CONCLUSION
INTRODUCTION
Comme on l’a vu, Attract-Mode permet d’aspirer automatiquement les données relatives aux jeux de la liste de ROMs, ce qui permet d’obtenir assez facilement des fiches plus ou moins complètes. Bien qu’il soit très pratique, ce système ne me convient pas pour plusieurs raisons. Premièrement, il n’est pas possible de décider du dossier de stockage des données téléchargées, ce qui pose un problème de gestion et d’organisation sur le long terme. Ensuite, les médias téléchargés sont limités à cinq types, et la base de données par défaut ne dispose pas nécessairement des meilleurs visuels. Enfin, il n’est pas possible de déterminer la région des ROMs, et donc des visuels téléchargés. Vous avez sûrement remarqué que les jaquettes récupérées étaient les versions US…
Heureusement, Attract-Mode permet d’organiser très librement sa bibliothèque de médias, et de définir plus de catégories de visuels. Il est même possible de tout compléter avec ses propres médias, « à la main ». Mais comme le Net regorge de ressources de qualité, il vaut mieux en profiter – et participer à la maintenance et au développement de ces ressources à l’occasion. Outre le fait d’avoir un meilleur contrôle et une meilleure personnalisation de sa collection, mettre en place une organisation personnelle permet de s’assurer que tout le travail effectué sera utile même si Attract-Mode disparaît et qu’il est nécessaire de migrer sur un autre frontend.
La clef de l’organisation personnalisée des médias dans Attract-Mode a un nom : l’artwork.
COMPRENDRE ET UTILISER LES ARTWORKS
Si vous avez bien suivi la première partie de ce tutoriel, vous disposez d’un dossier « ATTRACT » contenant l’archive décompressée d’Attract-Mode et trois dossiers : « MEDIAS », « EMULATEURS » et « ROMS ». Une bonne organisation consiste en effet – selon moi – a stocker tous les fichiers médias dans un dossier spécifique, indépendant du dossier d’Attract-Mode : ainsi, le dossier sera exploitable avec un autre frontend ou une autre version d’Attract-Mode.
Nous avons vu deux fonctions permettant d’afficher des médias dans Attract-Mode : add_image et add_artwork; je vous ai expliqué que add_image permet d’afficher une image située à une adresse explicitement définie, tandis que add_artwork permet d’afficher un média appartenant à une catégorie définie : le média affiché s’adaptera directement au jeu sélectionné (et sans qu’il soit nécessaire de préciser son type : Attract-Mode se débrouillera tout seul, dès lors qu’il s’agit d’un type de média géré).
Mais comment cela fonctionne-t-il ? C’est très simple : Attract-Mode recherche pour le système en cours (en fait, pour l’émulateur en cours) le dossier dans lequel sont stockés les médias de la catégorie d’artwork appelée, et dans ce dossier, il recherche un fichier qui a précisément le nom de la ROM correspondant au jeu visualisé (hormis l’extension, cela va de soi). Si Attract-Mode trouve ce fichier, il l’affiche; sinon, il n’affiche rien, mais le frontend continue de fonctionner normalement. Pour rappel, Attract-Mode ne « connaît » que les ROMs listées (voir partie I); si vous copiez une nouvelle ROM dans le dossier des ROM, il ne faut donc pas oublier de générer une nouvelle liste.
Par défaut, l’aspirateur (scraper dans le jargon des frontends) d’Attract-Mode télécharge cinq catégories d’artworks, les médias étant stockés dans un sous-dossier au nom de l’émulateur du dossier « scraper ». Attract-Mode permet cependant de modifier le chemin par défaut des catégories et même de créer de nouvelles catégories ? Comment fait-on ? On modifie le fichier de configuration de l’émulateur, pardi ! Pour rappel, vous trouverez ce fichier dans le dossier « emulators » d’Attract-Mode. Pour moi, il s’agit de Snes-9X.cfg
# Generated by Attract-Mode v2.6.1
#
executable "..\EMULATEURS\SNIN\Snes_9X\snes9x-x64.exe"
args "[romfilename]" -fullscreen
romext .zip;.7z;.bin;.fig;.mgd;.sfc;.smc;.swc
system Super Nintendo (SNES)
info_source thegamesdb.net
artwork marquee ../MEDIAS/SNIN/marquee
artwork snap ../MEDIAS/SNIN/snapLes deux dernières lignes – modifiées en partie 1 du tuto – pointent vers des sous-dossiers du dossier MEDIAS. Les plus attentifs auront remarqué que les artworks « marquee » et « snap » font partie des artworks par défaut que nous avons aspiré. Il n’existe cependant pas de sous-dossiers « marquee » et « snap », mais ces médias sont affichés dans notre layout. Mystérieux. Ou pas !
Les catégories personnalisées d’Attract-Mode viennent en effet en remplacement (le terme exact serait en surcharge) des catégories par défaut; si Attract-Mode ne trouve pas les sous-dossiers spécifiés ou ne trouve pas les médias recherchés, il se rabattra sur les chemins par défaut. Et l’aspiration par défaut pointe vers ces chemins par défaut : nos médias ne sont donc pas dans les sous-dossiers personnalisés, et Attract-Mode peut afficher quelque chose malgré tout !
Tentons une petite expérience : créez le dossier SNIN et le sous-dossier snap; dans ce dossiers, collez une image de votre choix. Je vais y mettre l’image d’illustration de ce tutoriel. Donnez-lui le nom exact d’une de vos ROMs (pour moi : Street Fighter II Turbo (Europe). Lancez Attract-Mode et visualisez la ROM :
L’image est bien affichée dans les deux emplacements prévus pour les artworks de la catégorie « snap ». Supprimez-les du dossier et relancez.
Les images contenues dans le dossier par défaut s’affichent; Bob avait (une fois encore) raison ! Maintenant que le concept est clair pour tout le monde, nous allons l’utiliser pour améliorer notre organisation et notre layout. Reprenez le dossier de configuration de votre émulateur et modifiez les dernières lignes pour ajouter de nouvelles catégories d’artworks :
# Generated by Attract-Mode v2.6.1
#
executable "..\EMULATEURS\SNIN\Snes_9X\snes9x-x64.exe"
args "[romfilename]" -fullscreen
romext .zip;.7z;.bin;.fig;.mgd;.sfc;.smc;.swc
system Super Nintendo (SNES)
info_source thegamesdb.net
artwork logo ../MEDIAS/SNIN/logo
artwork boite ../MEDIAS/SNIN/boite
artwork capture1 ../MEDIAS/SNIN/capture1
artwork capture2 ../MEDIAS/SNIN/capture2
artwork video ../MEDIAS/SNIN/videoJ’ai décidé d’utiliser 5 types de médias : « logo » pour remplacer « wheel », « boite » pour remplacer « flyer », « capture1 » et « capture2 » pour remplacer « snap » (qui est utilisé deux fois avec un risque d’affichage de la même image en doublon) et enfin « video » qu’il va falloir ajouter à notre layout.
N’oubliez pas de créer les sous-dossiers correspondants dans le dossier /MEDIAS/SNIN (et vous pouvez au passage supprimer le sous-dossier « snap » utilisé pour notre expérience.
Il faut désormais modifier le layout créé dans la partie 2 du tutoriel.
STRUCTURER SON LAYOUT AVEC DES ARTWORKS
Je vais être très succinct et vous invite à reprendre la partie 2 du tutoriel en cas de problème.
Les modifications vont être très simples : il suffit de remplacer les noms des anciennes catégories utilisées (wheel, flyer et snap) par les noms des nouvelles catégories (personnalisées : logo, boite, capture1 et capture2) dans la partie « Sélection du jeu ».
//##########
//SELECTION DU JEU
//Liste des jeux en bas à gauche, un tiers de la hauteur texte aligné à gauche, noir, blanc sur fond noir si sélection
local list = fe.add_listbox (marge, fe.layout.height - (fe.layout.height / 3) - marge, logo_console.width, fe.layout.height / 3)
list.align = Align.Left
list.set_rgb(0,0,0)
list.set_sel_rgb(255,255,255)
list.set_selbg_rgb(0,0,0)
//Logo du jeu entre le logo de la console et la liste, même largeur
local i_logo_jeu = fe.add_artwork("logo")
i_logo_jeu.width = logo_console.width
i_logo_jeu.preserve_aspect_ratio = true
i_logo_jeu.x = marge
i_logo_jeu.y = 200
// Jaquette du jeu, 1/3 de la largeur de l'écran, centrée
local i_jaquette_jeu = fe.add_artwork("boite", 440, 213, 400, 293)
//Affichage de 2 captures d'écran au ratio 8:7 en colonne dans le tiers droit
local largeur_aff = fe.layout.width / 3 - (marge*2)
local hauteur_aff = fe.layout.height - ill_console.width - (marge*3)
local hauteur_cap = hauteur_aff / 2
local largeur_cap = hauteur_cap / 7 * 8
local x_cap = fe.layout.width - marge - (largeur_cap / 2) - (largeur_aff / 2)
local y_cap2 = fe.layout.height - marge - ill_console.width - hauteur_cap
local i_capture1 = fe.add_artwork("capture1", x_cap, marge, largeur_cap, hauteur_cap)
local i_capture2 = fe.add_artwork("capture2", x_cap, y_cap2, largeur_cap, hauteur_cap)Si vous lancez Attract-Mode maintenant, rien ne va plus : il n’y a aucun média dans les dossiers créés, et les catégories par défaut ne sont pas utilisées; c’est tout à fait normal et sans importance, car nous allons bientôt aspirer les médias dans les nouveaux dossiers.
Il reste une modification importante à apporter au layout : l’insertion de la vidéo. J’ai décidé de l’afficher au centre, au-dessus de l’illustration de la boîte de jeu, qui sera affichée en bas de l’écran. Et c’est là que je regrette d’avoir codé salement l’affichage de ma jaquette. Je vais donc devoir faire un petit effort pour obtenir un résultat convenable… Morale de l’histoire : on finit toujours par payer sa fainéantise !
Heureusement (et c’était en fait presque prévu !), le reste du code est propre et je connais les seules informations dont j’ai besoin : la largeur et la hauteur de mon écran de référence, les largeurs des affichages de gauche (logo + liste : largeur du logo de la console) et de droite (captures d’écran).
Commençons par déterminer la largeur dont je dispose pour afficher la boîte et la vidéo : il suffit de retirer de la largeur de mon écran les largeurs de mes deux affichages périphériques (sans oublier de rajouter deux marges à la largeur de l’affichage de droite – ces marges ont été rajoutées au logo de la console dans l’affichage).
local largeur_centre = fe.layout.width - (logo_console.width + (marge*2)) - largeur_affDes marges ayant été rajoutées à droite de mon affichage et gauche et à gauche de mon affichage de droite, il n’est pas nécessaire d’en ajouter au milieu : la boite et la vidéo s’afficheront sur toute la largeur.
Concernant la hauteur, il est nécessaire pour un positionnement correct qui évite les débordements et les chevauchements de connaître la hauteur d’au moins un des deux éléments. Le plus simple va être de se baser sur la vidéo, qui sera normalement au format 4:3 (qui est le format d’image de l’époque de la SNIN, format repris par les vidéos qui seront aspirées par la suite).
Le calcul de la hauteur de la vidéo fait appel à un simple produit en croix : largeur_centre/4*3.
Je sais – parce que le layout a été codé comme cela – que la partie centrale fait normalement 5/12 de la largeur de mon écran de référence (12/12 – 3/12 à gauche et 4/12 à droite, sans les marges) soit environ 533 pixels. Si j’affiche ma vidéo sur toute la largeur disponible, elle fera donc approximativement 400 pixels de haut, soit un peu plus de la moitié de la hauteur de ma fenêtre.
Les jaquettes de la SNIN on a ratio d’approximativement 210:154 : affichée sur toute la largeur disponible, la jaquette fera donc environ 313 pixels de haut, soit un peut moins de la moitié de la hauteur.
Si j’additionne les deux hauteurs, j’obtiens 713 pixels de haut, sans les marges (il y en aura 3 : en haut, en bas et entre les deux) : les deux éléments se chevaucheront donc si je les affiche sur la totalité de la largeur disponible. Pour éviter cela, je vais afficher mes éléments sur 80% de la largeur disponible, en rajoutant une marge de 10% de chaque côté. Pour une meilleure lisibilité du code, je vais placer la largeur disponible dans une variable, ainsi que la marge de 10% :
local largeur_centre = fe.layout.width - (logo_console.width + (marge*2)) - largeur_aff
local marge_centre = largeur_centre / 100 * 10Je suis désormais en mesure de finaliser mon code :
//Affichage de la boîte et de la vidéo en partie centrale, en colonne
local largeur_centre = fe.layout.width - (logo_console.width + (marge*2)) - largeur_aff
local marge_centre = largeur_centre / 100 * 10
local v_video = fe.add_artwork("video")
v_video.width = largeur_centre
v_video.height = v_video.width/4*3
v_video.x = logo_console.width + marge_centre
v_video.y = marge
local i_boite = fe.add_artwork("boite")
i_boite.width = largeur_centre
i_boite.preserve_aspect_ratio = true
i_boite.x = logo_console.width + marge_centre
i_boite.y = v_video.y + marge + v_video.heightAprès avoir enlevé les parties de code inutiles, mon nouveau code est donc :
//##########
//SELECTION DU JEU
//Liste des jeux en bas à gauche, un tiers de la hauteur texte aligné à gauche, noir, blanc sur fond noir si sélection
local list = fe.add_listbox (marge, fe.layout.height - (fe.layout.height / 3) - marge, logo_console.width, fe.layout.height / 3)
list.align = Align.Left
list.set_rgb(0,0,0)
list.set_sel_rgb(255,255,255)
list.set_selbg_rgb(0,0,0)
//Logo du jeu entre le logo de la console et la liste, même largeur
local i_logo_jeu = fe.add_artwork("logo")
i_logo_jeu.width = logo_console.width
i_logo_jeu.preserve_aspect_ratio = true
i_logo_jeu.x = marge
i_logo_jeu.y = 200
//Affichage de 2 captures d'écran au ratio 8:7 en colonne dans le tiers droit
local largeur_aff = fe.layout.width / 3 - (marge*2)
local hauteur_aff = fe.layout.height - ill_console.width - (marge*3)
local hauteur_cap = hauteur_aff / 2
local largeur_cap = hauteur_cap / 7 * 8
local x_cap = fe.layout.width - marge - (largeur_cap / 2) - (largeur_aff / 2)
local y_cap2 = fe.layout.height - marge - ill_console.width - hauteur_cap
local i_capture1 = fe.add_artwork("capture1", x_cap, marge, largeur_cap, hauteur_cap)
local i_capture2 = fe.add_artwork("capture2", x_cap, y_cap2, largeur_cap, hauteur_cap)
//Affichage de la boîte et de la vidéo en partie centrale, en colonne
local largeur_centre = fe.layout.width - (logo_console.width + (marge*2)) - largeur_aff
local marge_centre = largeur_centre / 100 * 10
local v_video = fe.add_artwork("video")
v_video.width = largeur_centre
v_video.height = v_video.width/4*3
v_video.x = logo_console.width + marge_centre
v_video.y = marge
local i_boite = fe.add_artwork("boite")
i_boite.width = largeur_centre
i_boite.preserve_aspect_ratio = true
i_boite.x = logo_console.width + marge_centre
i_boite.y = v_video.y + marge + v_video.heightBonne nouvelle pour les allergiques au code : on s’arrête là. Maintenant, tout se fera avec une zolie interface graphique : il s’agit de Skraper.
PEUPLER ATTRACT-MODE AVEC SKRAPER
Skraper est un aspirateur de données pour les frontends comme Attract-Mode. Il est gratuit, simple d’utilisation, permet de personnaliser les données aspirées et les dossiers de réception et s’appuie sur la base de données en lignes Screenscraper. Bref, c’est la solution idéale pour récupérer simplement et efficacement les visuels de noS ROMs.
Pour commencer, allez sur le site de Screenscraper situé à l’adresse réticulaire suivante : https://www.screenscraper.fr/ Inscrivez-vous sur le site, c’est simple, gratuit et rapide; conservez bien vos identifiants qui vous seront nécessaires pour Skraper.
Allez ensuite télécharger Skraper à cette adresse : https://www.skraper.net/
Sélectionnez la version qui correspond à votre OS. Sous Windows, vous obtenez une archive que je vous conseille de télécharger dans le dossier ATTRACT créé auparavant, qui contient l’archive décompressée d’Attract-Mode ainsi que les dossiers EMULATEURS, ROMS et MEDIAS. Lancez l’exécutable SkraperUI.exe présent dans cette archive. Renseignez vos identifiants Screenscraper, validez et cliquez sur suivant; Skraper va alors télécharger des ressources et s’ouvrir (le téléchargement initial peut prendre plusieurs minutes, pas de panique même si ça dure un petit quart d’heure, c’est normal, allez boire un café…)
 |  |
Une fois le téléchargement terminé, Skraper vous demande de choisir un modèle de frontend; Attract-Mode n’étant pas prévu par défaut, choisissez « émulation générique ».
Passez ensuite les étapes de l’assistant de configuration sans vous souciez de ce que vous répondez, car nous allons tout modifier après !
 |  |
Après toutes ces étapes, Skraper s’affiche enfin dans toute sa splendeur !
La meilleure façon d’utiliser Skraper, c’est de créer un profil pour chaque système défini dans Attract-Mode. De cette façon, il suffira de lancer ce profil après chaque ajout de ROM (notez que Skraper n’utilise pas le fichier « romlist » généré par Attract-Mode mais parcourt le dossier contenant les ROMs qui lui a été indiqué : il faudra donc à chaque ajout de ROM générer une nouvelle liste dans Attract-Mode et lancer le profil Skraper).
Si vous avez suivi mon exemple, le système configuré dans Attract-Mode est une SNIN : il faut donc créer un nouveau profil SNIN dans Skraper. Cliquez sur le + en bas à gauche et choisissez votre système dans la (grande) liste proposée (pour moi, ce sera donc la Super Nintendo).
Skraper propose alors une configuration par défaut pour la Super Nintendo (qui reste à gauche et conserve les changements apportés; pas besoin de tout reconfigurer à chaque mise à jour de la liste !).
Il faut bien évidemment personnaliser tout ça pour que Skraper réponde exactement à nos besoins ! C’est parti !
Sur le premier onglet, indiquez le chemin de votre dossier de roms Super Nintendo. Ne touchez à rien d’autre.
L’onglet suivant sert à renseigner vos identifiants Screenscraper; ces identifiants sont normalement renseignés par défaut, mais en cas de problème, c’est ici qu’il faut venir.
Je vous conseille de ne pas modifier les deux onglets suivants.
 |  |
L’onglet MÉDIAS est celui sur lequel nous allons intervenir le plus, cochez donc la case « Utiliser une configuration spécifique pour SUPER NINTENDO ».
Commencez par supprimer les deux médias par défaut (avec le – à gauche).
Nous allons maintenant déterminer les médias que Skraper devra récupérer pour le profil « Super Nintendo », ainsi que les dossiers dans lesquels placer ces médias, qui devront correspondre aux dossiers définis pour nos artworks (voir supra).
Pour cela, cliquez sur le + à gauche (1), sélectionnez une vidéo (2) et renseignez le chemin qui pointe vers le dossier défini pour l’artwork « videos » (3). Si vous avez suivi ce tutoriel, le chemin devrait être (dans le dossier ATTRACT) : MEDIAS\SNIN\video. Skraper récupérera donc une vidéo de présentation pour chaque ROM présente dans le dossier renseigné dans le premier onglet, et la copiera dans le dossier de l’artwork (vous pouvez évidemment créer vos propres vidéos, mais celles de Screenscraper sont légères et de bonne qualité, et l’idée globale de ce tutoriel est d’automatiser les choses et d’utiliser les ressources disponibles en ligne !).
Les autres médias de notre layout sont toutes des images : il faut donc sélectionner la catégorie « IMAGE », puis l’image que vous souhaitez obtenir : le logo, la jaquette (j’ai choisi la boîte 3D) et deux captures d’écran.
Bien sûr, vous devez adapter la sélection au layout utilisé, mais Skraper dispose d’une interface assez intuitive, il ne me semble pas utile de détailler plus avant.
Je vous conseille de ne rien modifier dans l’onglet suivant.
Une fois la configuration du profil « Super Nintendo » terminée, cliquez sur le bouton lecture en bas à droite. Skraper va alors se mettre à « aspirer » les médias, ce qui peut prendre plusieurs minutes en fonction de la vitesse de votre connexion, et du nombre de ROMs (et de médias par ROM !). Une petite musique est jouée quand l’opération est terminée.
Si vous allez maintenant dans les dossiers renseignés pour vos artworks, vous constaterez que les médias sont bien présents (dans le cas contraire, revoyez votre configuration).
Notez que vous n’obtiendrez pas toujours 100% de réussite : en fonction du type de média et de la ROM, il peut arriver que rien n’existe dans Screenscraper. Dans ce cas, Skraper ne téléchargera rien et vous devrez ajouter un média manuellement (ou laisser tel quel : Attract-Mode fonctionnera normalement, mais n’affichera rien). Si vous devez créer un média manuellement, soyez altruistes téléversez-le sur Screenscraper !
Lancez une nouvelle fois Attract-Mode et contemplez !
Le layout est rempli, les boîtes sont bien les versions françaises et une jolie vidéo vous fait la démo du jeu (pour votre culture personnelle, lorsqu’un jeu n’est pas utilisé et qu’il affiche une vidéo de son gameplay, ce mode s’appelle… l’attract-mode. CQFD !).
Bon, le logo de Zelda ALTTP est la version japonaise. Il me suffira de le remplacer par le logo européen.
CONCLUSION
Nous voici à la fin de ce tutoriel en trois parties. Je n’ai pas la prétention d’avoir été exhaustif, mon objectif était juste d’exposer la logique de fonctionnement d’Attract-Mode et de vous donner l’impulsion de départ. A vous d’aller plus loin, d’expérimenter, de vous planter et de recommencer !
Bob Dupneu