Créer ses thèmes pour Dream Inducer

Tutorial crée par Nyarlathotep
Traduit de l'anglais par Dakey!!!

Vous venez juste de finir votre Disque DreamInducer et vous pensez qu'il est parfait, vous avez tous les programmes que vous vouliez gravez, et vous êtes prêt a l'utilisez: il y a juste un problème, tous les thèmes que vous avez trouvez sont nuls ou ne correspondent pas avec ce que devrait être le disque DreamInducer parfait.
Bien, cette page est là pour vous aidez a régler ce problème, en réalisant rapidement et facilement votre thème DreamInducer qui vous tiens tant a coeur.
Nous allons commencer par un style très simple, vous avez donc a comprendre les bases avant de vous lancez dans les paramètres avancés que DreamInducer inclus, comme l'heure chargé a partir de la mémoire système de la Dreamcast, les multiples effets graphique, et même les intros.

Un programme graphique capable de gérer des PNG de 24 bits (Gimp ou Paint Shop Pro sont deux bons choix pour ceux qui n'ont pas accès a des applications de design professionnels)

C'est quand même mieux si votre programme possède “an onscreen pixel” (j'y reviendrai plus tard) comme ça vous savez exactement ou votre curseur se trouve sur l'axe des X et des Y.

Un éditeur de Texte. (Bloc Note est plus qu'adéquate pour cela)

Un sens du design

Les utilisateurs avancés voudront sûrement avoir un logiciel d'édition vidéo (je vous suggérerai Virtual Dub et le codec divx)
KRYPTS DI Theme Preview Tool. A télécharger ICI.

Avant tout vous devez pensez a l'aspect général de votre thème. L'image de l'arrière plan doit être au format PNG avec une taille de 640×480, mais c'est pratiquement votre seule limitation.

Bien que les images avec beaucoup de couleurs paraissent laides sur une télévision même avec une petite résolution, il est préférable de fixer l'image a 16 bits.

Après c'est a vous de voir a quoi voulez que ressemble votre thème, mais il y a un composant essentiel, c'est la liste de vos programmes que vous aurez sur le CD, malgré tous la majorité des thèmes utilise trois composants:

• Aperçus (Screenshots)

• Description (Descriptions)

• Liste (File list)

Rappelez vous que toutes les images que vous utiliserez dans DreamInducer devront être au format PNG donc votre logiciel graphique devra gère ce format (la plupart le supporte).

La majorité des gens, pour leur premier thème, modifie juste un thème déjà existant sans se soucier du theme.dxt et autres fichiers DreamInducer. Si c'est ce que vous voulez faire (franchement, si c'est ça vous n'avez pas besoin de lire ce tutorial) alors cela fonctionne comme ceci: Voici la disposition de mon thème original

Ouvrez ainsi votre éditeur de photo préféré et marquez quelles parties du thème font quoi. Ceci vous laissera avec quelque chose qui ressemble a ça.

Les bons programmes de graphiques tels que Photoshop vous laisseront employer “as a guide layer” et mettre l'image de votre choix en arrière plan pour un rendu assez bien mais il n'est pas nécessaire de dire que cette une très mauvaises méthodes pour faire cela, et tout le monde verra que c'est juste une mauvaise modification, alors que vous pouvez obtenir un excellent résultat avec un peu plus d'effort.

Je suggère fortement que vous n'employiez pas un theme.dxt existant avec la moitié de modifié, mais utilisez la manière entière et réalisez vos propres thèmes à partir de zéro.
Alors c'est partir pour faire un thème qui emploie chacun des trois éléments (liste, screenshots et descriptions)

La première chose que vous devriez faire est d'ouvrir theme.dxt du thème “Javex” qui est fourni avec DreamInducer (pendant qu'il contient tous les éléments vous êtes susceptibles pour employer) de sorte que vous puissiez voir ce que vous faites avec lui: il devrait ressembler a ça:

<?xml version='1.0' encoding='UTF-8'?>
 
<THEME>
 
<INFO>
 
<AUTHOR VALUE="Javex"/>
 
<TITLE VALUE="Greencast"/>
 
</INFO>
 
<FONT SRC="/cd/images/font.png"/>
 
<LAYOUT ELEMENTS="7">
 
<IMAGE X="0" Y="0" Z="8" W="640" H="480" SRC="/cd/images/back.png"/>
 
<IMAGE X="0" Y="46" Z="16" W="231" H="44" SRC="/cd/images/time.png"/>
 
<TIME X="48" Y="56" Z="32" FONT="24" R="136" G="184" B="100"/>
 
<IMAGE X="0" Y="0" Z="24" W="640" H="480" SRC="/cd/images/fore.png"/>
 
<DESC X="154" Y="348" Z="32" W="288" H="72" R="136" G="184" B="100" FONT="18"/>
 
<SCREENSHOT X="52" Y="150" Z="16" W="210" H="140"/>
 
<LIST X="312" Y="136" Z="32" W="228" H="168" R="136" G="184" B="100"/>
 
</LAYOUT>
 
</THEME>

Maintenant vous pourriez penser - diable qu'est ce que tous ça signifient ? Si vous avez des bases en HTML, XML ou CSS ceci devrait vous paraître assez explicite, et si vous ne l'êtes pas, il ne faut pas vous inquiéter plus que ça.

Pour votre premier thème, les seules choses que vous allez avoir besoin pour employer sont:

<AUTHOR VALUE> vous mettrez votre propre nom ici pour que le monde vous admire.

<TITLE VALUE> Ici vous mettez le nom de votre de thème, même si personne ne le verra car il n'apparaît que dans theme.dxt.

<IMAGE> Pour votre premier thème ceci seulement sera employé une fois, comme 'papier peint ', mais comme vous devenez plus avancé vous pouvez employer cette étiquette pour des recouvrements, milieux posés, quelque chose que vous pouvez penser.

<DESC> C'est la où les descriptions du SBIs iront: idéalement il devrait être long ou assez grand de sorte que les gens puissent facilement lire les descriptions, mais c'est à vous de voir. *OPTIONNEL*

<SCREENSHOT> Ceci définit la taille et le placement de tous les screenshots que vous voulez employer. *OPTIONNEL*

<LIST> La seule chose *ESSENTIELLE* que vous aurez besoin dans votre thème. Screenshots et descriptions vous permettent de faire un bon thème pour DREAM INDUCER, mais à la fin ils sont totalement facultatifs car vous allez juste vouloir admirer votre fond et avoir un chargeur de programme simple. Vous aurez vraiment *besoin* de la liste pour un CD DreamInducer.

C'est parti pour le travail.

Avant tout enlever tous les éléments prédéfinis du thème, donc ça devrait ressembler a ça:

<?xml version='1.0' encoding='UTF-8'?> 
<THEME> 
 
<INFO> 
 
<AUTHOR VALUE=""/> 
 
<TITLE VALUE=""/> 
 
</INFO> 
 
<FONT SRC="/cd/images/font.png"/> 
 
<LAYOUT ELEMENTS=""> 
 
<IMAGE X="0" Y="0" Z="8" W="640" H="480" SRC="/cd/images/back.png"/> 
 
<DESC X="" Y="" Z="" W="" H="" R="" G="" B="" FONT=""/> 
 
<SCREENSHOT X="" Y="" Z="" W="" H=""/> 
 
<LIST X="" Y="" Z="" W="" H="" R="" G="" B=""/> 
 
</LAYOUT> 
 
</THEME>

Maintenant vous devriez avoir déjà sélectionner votre image de fond.

Votre fond devrait avoir une taille de 640 x 480 et au format PNG, et devrait être appelé “back.png”. Si vous regardez dans l'étiquette < IMAGE >, vous pouvez voir pourquoi. Si votre image se nomme différemment vous devriez faire des modifications dans SRC=”/cd/images/back.png et le changer en SRC=”/cd/images/votre_nom_de_fichier.png.

De même si vous ne mettez pas votre image de fond dans un sous-dossier appelé l'images (bien que je vous le recommande) alors vous devrez changer le SRC.

Assurez-vous que vous n'avez enlever ”/CD” de votre chemin, il est nécessaire pour que tous fonctionne correctement.

On en a fini avec le plus facile passons aux choses sérieuses.

Pour chacune des étiquettes < DESC >,< SCREENSHOT >,< LISTE > vous pouvez voir un certain nombre de variables: X, Y, Z, W, H, R, G, B et POLICE. C'est ce qui configure votre thème avec précision.

X - est le nombre de Pixel de gauche à droite entre le bord de l'écran et le début votre élément, donc avec une image de 640 x 480, une valeur X de 0 sera tout a gauche de l'écran, une valeur d'élément de 640 sera tout a droite de l'écran.

Y - est le nombre de Pixel de haut en bas entre le bord de l'écran et le début votre élément, donc sur une image de 640 x 480, une valeur Y de 0 sera en haut de l'écran, une valeur de 480 sera en bas de l'écran.

Z - cela correspond comment l'élément sera “près” de l'écran, plus le nombre est élevé plus l'élément sera en haut de l'écran mais pour réaliser votre thème vous n'avez pas besoin de vous en soucier.

* ATTENTION * ces valeurs sont pour le coin gauche supérieur de votre image ou élément.

W - indique la largeur de votre élément en Pixel.

H - indique la taille de votre élément dans les Pixel.

R, G et B - spécifie la couleur de votre texte en valeurs standard de RVB - ainsi une valeur de R=“0” G=“0” B=“0” vous donneront le texte noir, une valeur de R=“255” G=“0” B=“0” vous donneront le texte rouge, une valeur de R=“0” G=“255” B=“0” vous donneront le texte vert, une valeur de R=“0” G=“0” B=“255” vous donnera le texte bleu et une valeur de R=“0” G=“0” B=“0” vous donnera le texte blanc. Vous pouvez choisir n'importe quelle couleur que vous voulez en changeant ces valeurs en conséquence.

FONT - Spécifie la taille de votre police.

Ainsi. J'ai un arrière plan qui est un png 24bit de 640 x à 480, j'ai un groupe de screenshots qui sont de 100 x 100, et je veux avoir ma liste de dossier dans le blanc et mes descriptions en jaune. J'ai également décidé que je voudrais la disposition de mon thème comme suit.

Notez que les marques rouges ne sont pas réellement sur mon png - elles sont justes là pour représenter là où iront mes rubriques, de sorte que je puisse voir exactement où mes descriptions, screenshots et liste de dossier apparaîtront.

Si votre programme graphique gère « les couches » c’est une bonne idée de créer une nouvelle couche, de sorte que vous puissiez tordre votre contenu - mais c'est juste un exemple il ne faut pas passer trop de temps en s'inquiétant de la disposition; il faut quand même faire la différence entre un thème soigné et un thème de paresseux sans intérêts. Ainsi laissez ouvert theme.dxt pour le changer en conséquence.

<?xml version='1.0' encoding='UTF-8'?> 
 
<THEME> 
 
<INFO> 
 
<AUTHOR VALUE=""/> 
 
<TITLE VALUE=""/>
 
</INFO> 
 
<FONT SRC="/cd/images/font.png"/> 
 
<LAYOUT ELEMENTS=""> 
 
<IMAGE X="0" Y="0" Z="8" W="640" H="480" SRC="/cd/images/back.png"/> 
 
<DESC X="" Y="" Z="" W="" H="" R="" G="" B="" FONT=""/> 
 
<SCREENSHOT X="" Y="" Z="" W="" H=""/> 
 
<LIST X="" Y="" Z="" W="" H="" R="" G="" B=""/> 
 
</LAYOUT> 
 
</THEME>

Maintenant, je sais que ma fenêtre d’aperçu (screenshot) a une taille de 100 x 100, je sais comment je vais l’appeler, je connais le nom et la taille de mon image d’arrière plan et je connais l’auteur (moi). Je sais aussi que je veux ma liste en couleur blanche (R=“255” G=“255” B=“255”), et ma description en jaune (R=“255” G=“255” B=“0”). Alors marquons le dans “Theme.dxt”.

Je ne me suis pas tracassé sur la taille de la police de mes descriptions, donc je vais enlever cette étiquette (Tag) de mon theme.dxt, et je sais que j’aurais seulement 4 éléments qui apparaîtront (fond d’image, description, aperçu, liste) donc je complète ce qu’il faut. En outre tous mes éléments sont sur la même couche donc ils auront tous la même valeur en Z (je leurs mettrai 1 de plus que le fond pour qu’ils soient bien visibles).

<?xml version='1.0' encoding='UTF-8'?> 
 
<THEME> 
 
<INFO> 
 
<AUTHOR VALUE="Nyarlathotep"/> 
 
<TITLE VALUE="Tutorial Theme 1"/> 
 
</INFO> 
 
<FONT SRC="/cd/images/font.png"/> 
 
<LAYOUT ELEMENTS="4"> 
 
<IMAGE X="0" Y="0" Z="8" W="640" H="480" SRC="/cd/images/back.png"/> 
 
<DESC X="" Y="" Z="9" W="" H="" R="255" G="255" B="0"/> 
 
<SCREENSHOT X="" Y="" Z="9" W="100" H="100"/> 
 
<LIST X="" Y="" Z="9" W="" H="" R="255" G="255" B="255"/> 
 
</LAYOUT> 
 
</THEME>

Exécutez ensuite votre programme graphique ou chacun de vos éléments sont placés sur une couche. Regardez les références en pixels que vos éléments ont. C’est une bonne idée d’afficher une grille qui vous facilitera la lecture. Voici à quoi ressemble mon image avec une grille :

Si vous ne voyez pas comment j’ai trouvé ces chiffres, regardez bien l’image ci-dessus et notez d’où ils viennent. En général, pour obtenir la taille d’un élément, il faut prendre le point le plus loin de l’élément et le soustraire avec le plus petit point de l’élément.

Par exemple dans le cas des descriptions, mon éléments fini aux pixel n° 600 et commence au pixel n° 250 donc la taille est de 600-250.

Ajoutons désormais ces chiffres !

<?xml version='1.0' encoding='UTF-8'?> 
 
<THEME> 
 
<INFO> 
 
<AUTHOR VALUE="Nyarlathotep"/> 
 
<TITLE VALUE="Tutorial Theme 1"/> 
 
</INFO> 
 
<FONT SRC="/cd/images/font.png"/> 
 
<LAYOUT ELEMENTS="4"> 
 
<IMAGE X="0" Y="0" Z="8" W="640" H="480" SRC="/cd/images/back.png"/> 
 
<DESC X="" Y="" Z="9" W="" H="" R="255" G="255" B="0"/> 
 
<SCREENSHOT X="" Y="" Z="9" W="100" H="100"/> 
 
<LIST X="" Y="" Z="9" W="" H="" R="255" G="255" B="255"/> 
 
</LAYOUT> 
 
</THEME>

Vous venez juste de créer votre thème Dream Inducer! Bravo! Vous pouvez utiliser le logiciel KRIPTS pour pré visualiser votre thème. Créons ensuite votre *.sbt: vous devez avoir en tête que les fichiers *.sbt sont simplement des fichiers zip renommés donc quand vous avez créez votre thème, vous devez organisez la structure des répertoires, le compresser et renommer votre *.zip en *.sbt. Je vous suggère de convertir des *.sbt en *.zip pour vous faire une idée de la structure.

Si vous voulez utiliser ce tutorial comme thème, tout ce que vous avez à faire est de copier et coller dans notepad le cadre ci dessus, de le sauvegarder comme theme.dxt et de mettre font.png et back.png dans un répertoire image.

L'auteur prévoit de nous faire voir dans un prochain tutorial des caractéristiques avancés comme la création des écrans de chargement, l'insertion de vidéo…