Ce post sera dédié a la mise en place de plusieurs tutorials pour aider certain d'entre nous a créer des thèmes pour FSD.
Pour son téléchargement, je n'ai pas le droit de vous le fournir, utilisez GOOGLE pour cela.
Vous voila donc en possession du SDK il faut alors l'installer.
Lancez le setup.exe
pour rappel j'utilise la version "11164" d'autre version peuvent différer mais les fonctions seront les mêmes.
Vous aurez alors la partie installation
Faite alors suivant et vous aurez la fenêtre suivante
La alors vous aurez le choix ( seulement si vous possédez les logiciels alternatifs installés visual C++ et... ) qui déverrouilleront la méthode FULL
Sachez juste que la méthode d'installation Minimum suffira dans la créations de thème pour FSD.
Suivant et la alors laissez le logiciel s'installer.
Voila vous avez donc installé le SDK Microsoft.
Cliquez enfin sur terminé.
Alors sachez en premier que FSD ne lira un thème pour lui que dans un package au format ".XZP"
Le XZP est un "pack" contenant l'arborescence, les fichiers et les dossiers contenant( images, sons, polices d'écritures, xml et plein d'autre ).
-Premièrement nous allons extraire un thème fsd pour mieux comprendre leur contenu.
-Plusieurs logiciel sont à disposition pour nous aider à la compression et décompression des format .XZP
La Décompréssion :
Nous avons Altus Disponible ICI
Nous avons aussi XzpTool Disponible ICI
Lancez Altus
Puis faite FILE et OPEN et allez chercher un thème FSD au format .XZP
Maintenant faite clic droit sur Default ( ce nom peut varier suivant le nom de votre theme xxx.xzp chargé ), et choisissez EXTRACT.
Creez alors un nouveau dossier ou vous voulez ( moi je l'ai crée sur le bureau ) et appelez le "Default" sans les guillemet bien entendu et faite OK.
Voila vous avez tout extrait de votre theme en .XZP ouvrez alors votre dossier sur le bureau
ou vous allez pouvoir en contempler son contenu.
Avant de passer a la créations de votre thème nous allons dabort apprendre les bases pour mieux comprendre
Faisons un bref arrêt sur le contenu que je vous explique comment il fonctionne.
le dossier Audio contient tout les sons au thème au format .xma ( nous reviendront plus tard comment créer un sons au format .xma et linsérer au thème).
le dossier Font contient les polices décritures du thème ( nous reviendron plus tard sur le changement de polices et l'intégrations de ces polices).
le dossier Images contient toutes les images du thème ( nous reviendront plus tard comment changer ces images et les insérer au thème).
le dossier Settings contient des .xml qui contienne les couleurs et les noms des menus y compris quelques réglages ( nous reviendront plus tard comment les changer ).
le dossier wwwroot contient des fichiers et dossiers y compris des images de la fonction FTP sur le pc ( nous reviendront plus tard comment les changer ).
le dossier XML contient des fichiers .XML qui eux contiennent le chargement des fond décrant, des icones, des stages( nous reviendront plus tard comment les changer ).
tout les fichiers en .XUR contiennent eux les réglages, animations, menus, au thème.
le skin.xml Contient quelques informations relatives au thème comme son titre, sa version, le nom l'auteur du thème etc.... ( nous reviendront encore un peut plus tard comment les changer ).
la preview.png et devIcon.png elle est simplement laperçus qu'aura le thème lors de sa sélection sous FSD ( sélectionneur de thème ).
Revoyons nos outils à la conception de votre thème
LE SDK ( normalement eu plus haut ).
LES OUTILS A LA DÉCOMPRESSION ET COMPRESSION DES .XZP
LES OUTILS NÉCESSAIRE A LA MODIFICATION DES .XML, prenez notepad ++ il fera l'affaire.
LA MODIFICATIONS DE VOS IMAGES ( la il en existe plusieurs comme, photoshop, paint, photofiltre etc...).
Nous partons du principe que vous avez tout les outils nécessaires et les fichiers en main installé et prêt a l'emploi.
Dans votre dossier Default, ouvrez le fichier skins.xml nous allons donner un nom a notre skin et les informations.
<Skin Min='2' Max='2'>Nom du theme</Skin> ( mettez ce que vous voulez mais attention aux accents )
<Author>Nom de l'auteur</Author> ( idem aux accents )
<Version>2.0</Version> ( reste 2.0 habituellement ).
Faite fichier et enregistrer ou CTRL + S pour sauvegarder.
Ouvrez le fichier skins.xml
Attention tout dépendra sur la base de quel thème vous partez ( les nouveaux thème de base de FSD ne comporte plus le code ), donc
il va falloir le remettre en place.
voila le code :
<fonts>
<font default="true" file="Font/police.ttf" name="police"></font>
</fonts>
cette ligne comporte l'emplacement de la police décriture
file="Font/police.ttf" ( cet a dire dans le dossier Font sous le nom police.ttf
et la ligne name="police" comporte le nom employé.
une fois le code réinséré vous aurez ceci
Faite fichier et enregistrer ou CTRL + S pour sauvegarder.
Placez alors vôtre nouvelle police dans le fossier "Font" comme nom police.ttf
exemple pour le changement par une autre : je veut mettre la police arial.ttf que je place alors dans le dossier "Font"
et j'apporte les modifications necessaire dans le skins.xml
<fonts>
<font default="true" file="Font/arial.ttf" name="arial"></font>
</fonts>
Faite fichier et enregistrer ou CTRL + S pour sauvegarder.
Voila nous allons donc mettre les images en place, dans un premier temps on va mettre un fond d'écrant et sa preview.
Rendons nous dans notre dossier Images et rentrons dans le dossier Backgrounds et dans Wallpapers.
tout ce passera donc ici, nous allons créer un fond decrant et une preview ( la preview sera simplement la même image que le fond d'écrant mais en plus petite, elle servira d'aperçus ).
Modèle: Fond d'écrant dimentions de 1280 x 720 en résolution
image pour preview de 320 x 180 en résolution
une fois vôtre fond et votre preview réalisé sous photoshop ( ou autre ) nous allons le placer.
exemple: j'ai créer un fond de 1280 x 720 wallpaper.png je place donc mon fond dans Images/Backgrounds/Wallpapers
il me reste donc la preview moi elle sappel wallpapermini.png( 320 x 180 )que je met donc ici Images/Backgrounds/Wallpapers/Previews
edit: tout les noms peuvent différer ainsi que leurs emplacement, mais il faudra s'en souvenir pour pouvoir les charger.
Nous allons donc regler les .xml qui nous chargerons notre fond aisi que notre preview.
Pout cela revenez a la racine de votre dossier default et ouvrez le dossier XML et ouvrez avec notepad++ le xml suivant : BkgListA.xml
je vous explique son contenu :
Pour un seul fond :
balise contenant le groupe d'image, qu'il y ai une seule ou plusieurs images, elle doivent etre chargé entre ces balises.
<backgroundlist> </backgroundlist>Contient le nom
<Background name="Nom du fond">
Contient l'emplacement du fond d'écrant
<FILEPATH>Images\Backgrounds\Wallpapers\wallpaper.png</FILEPATH>Contient l'emplacement de la preview
<PREVIEWPATH>Images\Backgrounds\Wallpapers\Previews\wallpapermini.png</PREVIEWPATH>Et la balise de fermeture de l'image
</Background>
Pour ajouter un fond vide il faudra faire comme ceci :
<backgroundlist> <Background name="Skin Default"> <FILEPATH>Images\Backgrounds\Wallpapers\wallpaper.png</FILEPATH> <PREVIEWPATH>Images\Backgrounds\Wallpapers\Previews\wallpapermini.png</PREVIEWPATH> </Background> <Background name="No Background"> <FILEPATH></FILEPATH> <PREVIEWPATH></PREVIEWPATH> </Background> </backgroundlist>
Pour ajouter encore un fond d'écrant avec sa preview il faut faire aisi :
<backgroundlist> <Background name="Skin Default"> <FILEPATH>Images\Backgrounds\Wallpapers\wallpaper.png</FILEPATH> <PREVIEWPATH>Images\Backgrounds\Wallpapers\Previews\wallpapermini.png</PREVIEWPATH> </Background> <Background name="No Background"> <FILEPATH></FILEPATH> <PREVIEWPATH></PREVIEWPATH> </Background> <Background name="fond 2"> <FILEPATH>Images\Backgrounds\Wallpapers\wallpaper2.png</FILEPATH> <PREVIEWPATH>Images\Backgrounds\Wallpapers\Previews\wallpapermini2.png</PREVIEWPATH> </Background> </backgroundlist>
La méthode reste identique autant qu'il y aura de fond d'écrant.
Bien entendu il faudra que les fond ajouté ici soit présent dans les dossiers des images.
Enregistrez BkgListA.xml en faisant fichier enregistrer ou CTRL + S pour sauvegarder, vous savez a présent ajouter ou retirer des fond a votre thème.
Passons maintenant aux icônes, ouvrez le dossier Default et entrez dans le dossier XML.
Vous verrez que vous aurez une liste de .xml comme ceci
il va falloir supprimer ceux en trop et gardez seulement :
BkgListA.xml
BkgListB.xml
VisualList.xml
KinectVisual.xml
Vous pouvez voir que les autres xml sont des couleurs etc... gardez en un seul ( KinectVisual.xml ) et appelez le NormalVisual.xml au final vous aurez plus que ceux la :
BkgListA.xml
BkgListB.xml
VisualList.xml
NormalVisual.xml
Maintenant nous allons devoir activer notre NormalVisual.xml pour cela ouvre le VisualList.xml sous notepad++
vous aurez ceci :
<visuallist> <visual path='XML\BlueVisual.xml' /> <visual path='XML\DarkGreyVisual.xml' /> <visual path='XML\GreenVisual.xml' /> <visual path='XML\LightGreyVisual.xml' /> <visual path='XML\OrangeVisual.xml' /> <visual path='XML\RedVisual.xml' /> <visual path='XML\BlackVisual.xml' /> <visual path='XML\KinectVisual.xml' /> <visual path='XML\KinectBlueVisual.xml' /> </visuallist>
Supprimez tout et gardez que le notre comme ceci :
<visuallist> <visual path='XML\NormalVisual.xml' /> </visuallist>
Voila a ce stade nous chargeront q'une sorte d'icone
( PERSONNELLEMENT JE PRÉFÈRE CHARGER QU'UN TYPE DICONE SIMPLEMENT CAR CA ALLÈGE LE THÈME )
Imaginez un thème avec 300 fond d'écrant et 300 sortes d'icones >< ça pèse tout ça.
Maintenant que notre type d'icone est chargé on va changer les chemins pour bien " placer " nos icones proprement.
ouvrez le NormalVisual.xml sous notepas++
le principe reste le même que pour les fonds et les previews
la en nom nous avons kinect
<visualname>Kinect</visualname> <visualdesc>Kinect Slots</visualdesc>
et en chemin nous avons
<iconpath>Images/Interface/Content Tabs/ContentTabData/Visuals/Kinect/Icons
Spoiler
Changez alors les noms et les chemins comme ceci :
la en nom nous avons kinect remplacez le par Normal
<visualname>Normal</visualname> <visualdesc>Normal Slots</visualdesc>
et en chemin nous avons kinect qu'il faut remplacer par Normal pour toutes les icônes associé
<iconpath>Images/Interface/Content Tabs/ContentTabData/Visuals/Normal/Icons
Spoiler
La derniere étape consistera a modifier les dossiers pour que les xml puissent charger correctement les images
Rendez vous ici dans votre dossier Default\Images\Interface\Content Tabs\ContentTabData\Visuals et la vous aurez tout les dossiers de toutes les couleurs
Supprimez tout et gardez que kinect que vous renommerez en Normal comme ceci :
voila nous auront seulement un seul groupe d'image.
Suite a venir en vidéo.
Modifié par sagitairedudu, 19 juin 2011 - 13:55.
