Concrètement cela signifie que vous n'aurez qu'une image pour le fond et qu'une image pour le bouton, aux dimensions uniques et qui seront soit affichées totalement en 16:9, soit rognées en 4:3. Donc aucun écrasement ou étirement à rendre un rond ovale.

Voici un aperçu en vidéo de ce que vous obtiendrez (avec vos images à la place (et les figurines en moins =p)) :
(Note: La présence des bandes noires en 16:9 est due à mon écran 16:10. Vous ne verrez pas cela sur un écran 16:9)

TUTORIEL de Niveau 2 :

1. Modifications simples d'un fichier .brlyt (ou plus exactement d'un .xmlyt).
2. Création d'images compatibles 4:3 et 16:9.
3. Réalisation d'un thème .csm
   
   La procédure semble longue, mais est en réalité très rapide. Elle est simplement très didactique et détaillée.

Les TUTOS à maîtriser avant de débuter ce tutoriel :

1. [TUTO Niv.1] Fabriquer son propre écran d'accueil Wii !
2. [TUTO Niv.1] Utiliser Benzin (Editer les Brlyt et Brlan)
   
   Si vous avez bien suivi les tutos ci-dessus vous devriez avoir ThemeMii et Benzin sur votre ordinateur ainsi qu'un logiciel graphique tel que Photoshop, et ça tombe très bien car ils sont nécessaires pour suivre celui-ci.

Egalement, un éditeur de texte avancé est préférable :

• comme Programmer's Notepad (celui que j'utiliserai dans ce tuto)
• ou bien Notepad++
  
  Installez celui de votre choix. Pour les utiliser nul besoin de tuto, nous n'allons nous servir ici que de fonctions (très) basiques.
  (Note: Dans l'absolu nous pourrions utiliser le Notepad classique, mais c'est très moche et surtout vous ne comprendriez rien à la structure du fichier, ce qui n'est pas dans votre intérêt)

Voilà, maintenant que vous avez tout ce qu'il vous faut, nous pouvons commencer.

¤ ¤ ¤ INTRODUCTION ¤ ¤ ¤

Rappel des épisodes précédents :

Après avoir exécuté ThemeMii la première fois, vous téléchargiez le fichier correspondant au Firmware dont vous aviez besoin pour travailler (000000xx.app).
Ce faisant, ThemeMii décompressa ce fichier sur votre disque dur à l'emplacement suivant "..\ThemeMii\ExtractedBaseApp\".
Vous en connaissez depuis un peu l'arborescence pour être allé y chercher les images .TPL que vous vouliez remplacer par vos créations .PNG, en l'occurrence les fichiers "Root\layout\common\health_ash_out\arc\timg\it_Has_a_EU_FRA.tpl" et "it_Has_b_EU_FRA.tpl".
Jusque là, vous aviez navigué dans cette arborescence via l'explorateur de ThemeMii.

Entrons dans le vif du sujet :

Pour Benzin il va nous falloir récupérer le fichier .brlyt qui nous intéresse mais en passant par l'explorateur Windows, afin de personnaliser le HealthScreen un peu plus en profondeur avant de l'importer dans ThemeMii.
Le fichier en question se trouve tout près des images, dans le dossier "..\ThemeMii\ExtractedBaseApp\layout\common\health_ash_out\arc\blyt\it_Has_a.brlyt".

Vous l'aurez compris, le dossier "Root" dans ThemeMii correspond au dossier "ExtractedBaseApp" sur le disque dur.

Mieux s'organiser pour mieux travailler :

Afin d'optimiser notre productivité nous allons préparer un peu le terrain.

Ouvrez votre Explorateur Windows,
Dans le dossier "ThemeMii", créez un sous-dossier "MyM et cSM".
Dans le dossier "MyM et cSM", copiez le dossier "Benzin", puis créez un sous-dossier "ModFiles".

Comme ceci :

Le dossier "MyM et cSM" vous servira à enregistrer et stocker vos propres fichiers .mym et .csm générés par ThemeMii.
Le dossier "ModFiles" vous servira à y stocker les fichiers récupérés de "ExtractedBaseApp" après les avoir modifiés.

Ces fichiers récupérés justement, nous les renommerons de façon à ajouter des informations sur les modifications apportées, le tout entre parenthèses devant le nom original.
J'utiliserai la syntaxe suivante "(32e-healthscreen43.169) it_Has_a.brlyt" dans laquelle :

• 32 = firmware de la Wii cible
• e = région de la Wii cible
• healthscreen = éléments modifiés
• 43.169 = formats compatibles. Ici le 4:3 et le 16:9
• it_Has_a.brlyt = nom du fichier original

Vous pouvez bien sûr personnaliser le contenu des parenthèses, mais soyez suffisamment explicite pour vous y retrouver plus tard, car vous serez probablement amenés à vous en resservir (le but étant de ne pas avoir à refaire les modifications à chaque création d'un thème les nécessitant).

Passons enfin à l'action :

Nous y voici donc. Ce moment tant attendu et si excitant qu'est celui de la création d'un fichier opérationnel réalisé de vos propres mains et vous procurant un sentiment de fierté non dissimulé devant les grands yeux admiratifs de vos enfants... haaa... c'est beau !

Bon ! Puisqu'il est le fichier régissant l'effet que je vous présente là, qu'il deviendra un fichier commun à vos prochaines créations, et que nous venons juste d'en parler et bien nous allons débuter par.... (*roulements de tambours*)...

¤ ¤ ¤ La MODIFICATION du .BRLYT ¤ ¤ ¤

Allez, modifions ce fichier une fois pour toutes.

Conversion :

Pour ce faire ouvrez le dossier "..\ThemeMii\ExtractedBaseApp\layout\common\health_ash_out\arc\blyt\", copiez le fichier "it_Has_a.brlyt" et collez-le dans le dossier Benzin.
Renommez cette copie selon la syntaxe établie plus haut, puis double-cliquez sur "Lire.bat".
Le fichier .xmlyt est alors créé ; c'est lui que vous allez devoir éditer.

A ce stade vous devriez avoir ceci (si ce n'est pas le cas, faites en sorte que cela le devienne) :

Edition :

Lancez l'éditeur de texte avancé que vous avez installé, et glissez le fichier "(32e-healthscreen43.169) it_Has_a.xmlyt" dedans pour l'ouvrir.

A la ligne #6 vous pouvez lire ceci :

CODE

608.000000

608 !! Tiens tiens... ?‡a ne vous rappelle rien ?
Et bien oui, c'est la largeur des images que vous aviez créées pour réaliser vos premiers HealthScreens.
Cette largeur correspond à celle d'un HealthScreen au format 4:3 (608x456).

Nous, nous voulons afficher une image au format 16:9 maintenant. La proportion normale serait de 812x456, mais nous allons ajouter 10 pixels de chaque côté pour que les bords de l'écran soient propres et nets, et la résolution maximale.
Vous travaillerez donc avec une image de 832x456, ce qui correspond aux dimensions du Bureau Wii en 16:9.

Ceci étant il va nous falloir remplacer la valeur 608.000000 par la valeur 832.000000. Toutefois cette valeur n'apparait pas uniquement à la ligne #6, mais à 22 endroits (26 pour les 4.x) dans tout le fichier.
L'astuce, aussi basique que pratique, que vous allez utiliser est la fonction "remplacer" (ou "replace" en anglais). Elle va vous permettre de changer chaque 608 en 832.

Cependant, "608" pourrait être à certains endroits sans aucun rapport avec la largeur de l'image que vous voulez modifier. Bien que ce ne soit pas le cas ici, je vais vous demander de prendre l'habitude d'être prévoyant avec ceci en choisissant de rechercher et remplacer uniquement ce qui est identique à "608.", ainsi il ne touchera par exemple pas à un éventuel "608.".

Surlignez donc "608.", puis dans le menu Edition cliquez sur Remplacer (Ctrl+H) comme illustré sur cette image :

Ici dans Programmer's Notepad.
(Dans Notepad++ il faut utiliser le raccourci-clavier ou cliquer sur l'icône des jumelles puis l'onglet "remplacer")

S'affichera alors la fenêtre dans laquelle vous pourrez définir par quoi remplacer votre sélection.
Demandez-lui de remplacer "608." par "832." comme cela :

... et cliquez sur le bouton "Remplacer tout" ("Replace All") !
Le programme vous affichera le nombre de remplacements effectués.Si tout va bien vous devez avoir 22 occurrences (26 pour les 4.x) :

Vérifiez votre ligne #6 et vous verrez que le changement a bien eu lieu.

Vous pouvez maintenant enregistrer le fichier et quitter votre éditeur.

De retour dans le dossier Benzin, double-cliquez sur "Ecrire.bat". Comme vous le savez désormais, cela aura pour effet de convertir votre .xmlyt en .brlyt.

Conservation :

Attrapez le fichier (32e-healthscreen43.169) it_Has_a.brlyt et déplacez-le au chaud dans le dossier ModFiles, vous n'aurez plus à y toucher.
Nous l'importerons plus tard dans ThemeMii.

Vous pouvez passer à l'étape suivante. Etape plus personnelle que jusqu'alors.

¤ ¤ ¤ La CREATION des IMAGES ¤ ¤ ¤

Lors de cette phase, je ne vais naturellement pas réaliser d'image à votre place. Il va falloir vous en remettre à votre créativité.

Pour ma part, je vais simplement vous évoquer une particularité à prendre en considération pour composer une image compatible 4:3 et 16:9. Rien de bien compliqué, c'est une question de logique mais je me dois de vous le mentionner.

Photoshop sera le logiciel dont je me servirai pour vous expliquer comment procéder, mais pas d'inquiétude ; c'est facilement adaptable à d'autres lorsqu'on a compris le principe. Principe que voici.

La Théorie :

Récapitulatif :

• Dimensions du bureau Wii au format 4:3 = 608x456 pixels.
• Dimensions du bureau Wii au format 16:9 = 832x456 pixels.
• En mode 4:3, l'image au format 16:9 sera rognée (c'est à dire que certains côtés seront masqués par le cadrage de l'écran, ou plus précisément par la différence de résolution entre l'image et l'affichage).
• Par défaut les images du fond et du bouton sont centrées horizontalement à l'écran (ça vous ne le saviez pas, hein ?). Pour l'instant le positionnement vertical des images ne nous concerne pas. Je vous en parlerai plus tard.

Forts de ces informations, nous pouvons facilement déduire de combien de pixels l'image sera rognée.

Une petite soustraction pour calculer la différence entre les deux formats : 832 - 608 = 224 px
La différence est de 224 pixels. Oui, mais l'image étant centrée à l'écran (nous pourrions changer cela mais ça ne nous intéresse pas pour le moment) elle sera rognée de 2 côtés ; à droite et à gauche.
Une petite division s'impose alors : 224 / 2 = 112 px à droite et 112 px à gauche.
Vous savez dorénavant que vous devrez prendre en compte le fait que 112 pixels à droite comme à gauche seront invisibles sur votre image de 832 px lorsque la console sera en mode 4:3.

Ce "douloureux" passage mathématique glorieusement franchi, poursuivons avec...

La Pratique :

Maintenant que vous avez compris la théorie, la pratique coule de source et je ne vous en parle qu'à titre de concrétisation.

Lancez le logiciel graphique de votre choix (enfin... évitez Paint quand même, faut pas déconner non plus) et créez un nouveau document d'une largeur de 832px et d'une hauteur de 456px.

Définissez la zone de rognage en créant 2 repères, un à 112px du bord gauche et un à 720px (832 - 112).
Ces repères vous permettront de composer votre image en visualisant ce qui sera masqué ou affiché en 4:3.
Tout ce qui se trouvera entre les deux repères sera visible en 4:3 et en 16:9, tandis que le reste ne le sera qu'en 16:9.

Sur cette capture d'écran la zone de rognage est représentée par les parties hachurées :

Sur cet exemple, le petit nuage à droite sera visible entièrement en 16:9, mais qu'à moitié en 4:3.

Avant de vous laisser créer votre image tranquillement je vais vous parler d'un détail qui a son importance.
Vous avez peut-être remarqué que depuis le début de ce tuto j'ai le plus souvent employé le singulier en parlant des images constituant le HealthScreen. La raison est que la largeur de l'image du fond et celle de l'image du bouton étaient identiques, et que nous n'avons changé que la largeur d'image dans le fichier .brlyt/.xmlyt.

En revanche leurs hauteurs elles, diffèrent. Et il en est de même pour leurs positions. Un petit mot à ce sujet...

Puisque nous n'y avons pas touché, la hauteur et la position des images restent celles par défaut.
Vous connaissez déjà celles de l'image de fond :

• Hauteur : 456 pixels
• Positionnement horizontal : Centré
• Positionnement vertical : Centré

Alors voyons plutôt celles de l'image du bouton :

• Hauteur : 88 pixels
• Positionnement horizontal : Centré
• Positionnement vertical : Aligné en bas

La modification de ces valeurs est tout à fait possible et je vous expliquerai comment, mais plus loin, car c'est un peu plus délicat. Patience.
Pour le moment contentez-vous de créer un repère à 88px du bord inférieur afin de délimiter l'image de votre bouton.

Comme cela :

Voilà, l'heure est arrivée pour vous de composer votre propre image de HealthScreen 16:9 !
Revenez poursuivre ce tuto lorsque vous aurez terminé votre oeuvre.

Bonne création !

¤ ¤ ¤ La CREATION du .CSM ¤ ¤ ¤

Maintenant que tous vos fichiers sont édités et créés nous pouvons passer à la réalisation du thème CSM.
Pour cela il faut importer ces fichiers dans ThemeMii.

Lancez ThemeMii et vérifiez le firmware coché dans Options/Standard System Menu/"x.x"/"région", puis menu File/New pour créer un nouveau thème vierge.

1) Avec le bouton + >> ajoutez une "Static Image" pour l'image de fond et donnez-lui les valeurs suivantes : [simg1]

• File : Root\layout\common\health_ash_out\arc\timg\it_Has_a_EU_FRA.tpl
• Filepath : l'image de fond que vous venez de créer
• Width : 832
• Height : 456
• Format : RGBA8 (24bits)

2) Ensuite bouton + >> ajoutez une "Static Image" pour l'image du bouton : [simg2]

• File : Root\layout\common\health_ash_out\arc\timg\it_Has_b_EU_FRA.tpl
• Filepath : l'image du bouton que vous venez de créer
• Width : 832
• Height : 88
• Format : RGBA8 (24bits)

3) Et maintenant pour ajouter le fichier .brlyt nous n'utilisons pas le "Static Image", mais le "Static Data" : [sdta1]

• File : Root\layout\common\health_ash_out\arc\blyt\it_Has_a.brlyt
• Filepath : le fichier .brlyt modifié (ici "ThemeMii\ModFiles\(32e-healthscreen43.169) it_Has_a.brlyt")

Voilààà ! Vous pouvez enfin créer votre CSM en lui donnant un nom explicite avec impérativement le firmware et la région.

Sauvez également le fichier MYM, vous pourrez le charger à chaque fois que vous voudrez refaire un HealthScreen 16:9. Vous n'aurez qu'à remplacer les images PNG.

Il ne vous reste plus qu'à installer votre thème .csm sur la Wii via MyMenuify.

ENJOY !


(La partie concernant la modification de la taille et de la position de l'image du bouton que je vous ai promise sera développée très bientôt ici-même. Restez à l'écoute !)