Créer ses skins pour l'EOS Tuto par Alfadir

Voir le sujet précédent Voir le sujet suivant Aller en bas

Créer ses skins pour l'EOS Tuto par Alfadir

Message  fl96 le Mer 28 Avr - 15:20

1 - La création de skin en utilisant le programme Skin Editor


La méthode la plus simple pour créer un skin pour l'EOS est d'utiliser le programme EOS Skin Editor fait par Blastar.



Lien vers le topic officiel (anglais) :
http://forum.supercard.sc/thread-5448-1-1.html
Lien vers le topic de ce forum (français) :
http://fr.supercard.sc/forum/editeur-de-skin-pour-l-eos-vt11775.html

Grace à ce programme vous allez pouvoir de manière assez simple et instinctive créer vos propres skins.

* Téléchargez le programme sur le topic officiel ou sur le topic de ce forum.
* Décompressez l'archive dans un répertoire.
* Lancer le fichier SC-EOS-SkinEditor.exe

Ca c'est pour le coté facile.

Ce programme ne vous dispense pas d'avoir à créer vos images.

Pour commencer je vous conseil de copier le skin par défaut de l'EOS sur votre disque dur et d'utiliser les images de ce skin comme exemple pour avoir des tailles d'images compatibles.

A vous de choisir les images qui remplaceront les images de ce skin pour aller au mieux sur celui que vous créer.

Enregistrez les images ainsi modifiées en BMP en gardant le même nom (ne vous souciez pas du format, EOS Skin Editor converti vos images de manière automatique dans le bon format).

Charger ce nouveau skin avec EOS Skin Editor, modifiez les couleurs des textes, les positions des éléments et faite vos retouches sur les images si nécessaire (et rechargez l'image corrigée).

Remplisser la rubrique Information (Titre du skin, Auteurs, eMail, site).

Enregistrez le skin une foi fini sous un nouveau répertoire.

Si vous voulez le partager, faite une archive en zip du répertoire que vous venez de créer, générez un aperçu avec EOS Skin Editor et créer un topic sur cette partie du forum :
Skins EOS Supercard DS One

Hébergez directement l'archive et l'image de présentation sur le forum (ça se trouve en bas quand on créé un topic, partie Ajouter des fichiers joints).


2 - Installation de skins avec l'EOS

Pour l'instant l'EOS est limité à 4 skins.
Pour utiliser un nouveau skin il faut écraser un des skins existant.

Il existe deux façons d'installer de nouveaux skins :
a - Manuellement
b - En utilisant EOSTools


a - Manuellement

Commencez par télécharger le skin qui vous plais.
Décompresser le contenu de l'archive dans un des 4 répertoires disponibles en écrasant l'ancien skin.

Ces répertoires disponibles sont :
-_dsone/skin/black
-_dsone/skin/christmas
-_dsone/skin/default
-_dsone/skin/pink

A partir de là le skin que vous venez de copier sera disponible en choisissant dans l'EOS le nom du skin que vous avez écrasé.


b - En utilisant EOSTools



EOSTools est un homebrew (un programme pour Nintendo DS) utilisant le wifi de votre DS (pas de wifi pas de chocolat !).

Ce programme en plus d'autres fonctions, permet de télécharger directement sur internet des skins et de les installer automatiquement sur votre linker.

En premier lieux allez télécharger EOSTools sur le topic officiel :
EOSTools - Skin UP et Data UP

Copiez le fichier EOSTools.nds contenu dans l'archive où vous voulez sur votre micro SD.

Remettez la µSD dans la DS One et la DS One dans la DS.
Pour démarrer ce programme il suffi de le lancer comme vous le faire pour un jeu.

Pour son utilisation référez vous au topic officiel de cet homebrew.

Il est à noter que non seulement il télécharge les skins sur le net parmis une grande base de données mais en plus il modifie les fichiers pour que les noms skins soient répercutés dans l'EOS.

N.B. : le wifi de votre DS doit déjà être configuré, si ce n'est pas le cas, faite le à partir d'un jeu (n'importe quel jeu utilisant le multijoueur par wifi internet fera l'affaire, genre mariokart).

En tout cas merci Fef51.



3 - Les astuces pour avoir un "beau" skin


Bon commençons par ce qui fait mal ^^

Si vous n'avez aucun tallent ce n'est pas en lisant ces lignes que ça vous viendra par magie MAIS (ouf il y a un mais) en suivant les conseilles qui suivent vos skins ressembleront à quelque chose (voir même quelque chose d'agréable Wink) ).

Déjà les principes de base :
1 - choisissez un thème et tenez vous y !!
2 - faites qu'il y ai une cohérence de couleur dans votre skin.
3 - ne mettez pas des images chargées sur les fonds qui servent à l'affichage du texte ou des icones !
4 - dans la mesure du possible faites que toutes les images de votre skin intègre le thème que vous avez choisi.

IMPORTANT : Une skin ce n'est pas choisir 4 images que vous aimez pour les mettre à la place des anciennes images dans un ancien skin !
Un skin c'est choisir/créer/modifier au mieux les images, les boutons, les barres de défilement, les couleurs des textes... pour avoir une visibilité parfaite quand on utilisera ce skin tout en gardant toujours en ligne de mire le thème que vous avez choisi.




4 - Les images qui composes un skin en détail

Toutes les images des skins pour EOS doivent être au format BMP 16bit.

Aucun autre format de BMP n'est compatible. Si votre image n'est pas en 16bit elle sera mal affichée par l'EOS (image avec des pixels complétement brouillés).

The Gimp ou Photoshop (ou d'autres programmes de dessin peuvent enregistrer en BMP16bit).


Les dimensions des images de la liste qui suis sont celles du skin par défaut.

Mais il faut savoir que les dimensions ne sont pas fixes, c'est au créateurs de skin de voir ce qui conviens le mieux pour son skin et ce qui passe sur l'EOS.

Par exemple savebtn, cheatbtn et setbtn peuvent avoir des dimensions toutes autres que celles du skin par défaut (j'utilise pour mes skins des dimensions bien plus grande que celle du skin par défaut).

L'auteur de skin pourra donc adapter librement en fonction du rendu qu'il veut donner à son skin.


Voici la liste des images (merci à tuti pour l'upload).

[highlight=#FFFF80]
Répertoire : _dsone\SKIN\*nomduskin*\[/highlight]

[highlight=#FF0000]Nom Fonction Dimension Commentaire[/highlight]

[size=150]Wallpaper[/size]

cheatbg ........... 256*192 ..............



lowerbg ..................... 256*192 ..............


upperbg ..................... 256*192 .......................



[size=150]Barre de défilement verticale[/size]


sg_bg ..................... 8*8 .......................


sg_body .............. 8*8 .........................


sb_part1 ................ 8*8 ........................


sb_part2 .............. 8*8 ............................



[size=150]Autres images[/size]

nextbtn ................ 8*14 ...............


activeitem ........ 12*12 .............


btn ....... 47*14 ................


cheatbtn ............... 20*21 ....................


cheatmenubtn ............. 70*14 ...............


cheatselectbar ................ 248*19 ............


close .............. 10*10 ................


fathernode ............. 14*11 ..............


linebar ................. 231*1 .............


onehotdown .............. 14*11 .....................


onehoton .................. 14*11 ...............................


pitchdown ................ 14*11 ..........................


pitchon ...................... 14*11 ...........................


popsubbar ............. 1*12 .....................


prevbtn ..................... 8*14 ........................


savebtn .................... 23*21 ......................


scmenu ................. 256*26 ........................


setbtn .................... 19*21 .........................


stratebar ................ 256*14 .........................


title_bg .................. 2*23 ...........................


title_left .................. 14*23 .......................


title_right ................ 14*23 ............................


triangle ............... 4*7 ..............................



[highlight=#FFFF80][size=200]
Répertoire : _dsone\SKIN\*nomduskin*\icon[/size][/highlight]


path ................... 32*32 .............................


back ..................... 32*32 ......................


bmp .................... 32*32 .......................


dpg ................. 32*32 .......................


gba ................32*32 .....................


nds .................. 32*32 .................


plg ................ 32*32 ...................


sav ............... 32*32 ......................


txt ............... 32*32 .....................


unknown .............. 32*32 ...............



[highlight=#FFFF80]
Répertoire : _dsone\SKIN\*nomduskin*\realtime[/highlight]


mainbg ............... 256*192 ...................


textbg ............. 256*192 .......................


processbg .............. 198*99 ...................


processbar ............. 102*12 ..................




5 - Les réglages d'un skin en détail


Après les images il faut savoir aussi paramétrer les couleurs des textes, la taille des fenêtre et les dimensions des zones de contact.

Tout est centralisé dans le fichier uisetting.txt situé ici :
_dsone\SKIN\*nomduskin*\uisettings.txt

Pour adapter le skin à vos images vous aller donc pouvoir paramétrer chaque couleur et position.

Voici le contenu de ce fichier :
Spoiler:
[global settings]
formFrameColor=0xf380
formBodyColor=0xda65
formTextColor=0xffff
formTitleTextColor=0xffff
buttonTextColor=0xffff
fileNameColor=0xffff
listTextBgColor=0x823b
listTextColor=0xbb1f
listTextHighLightColor=0xfb48
listSelectBarColor=0xd660
vTextColor=0x80a8
vTextHighLightColor=0xffff
HTextColor=0x0
HTextHighLightColor=0xffff
logoFrameColor=0x829f
popMenuBarColor=0xcd60
popMenuTextColor=0xbb1f
popMenuTextHighLightColor=0xffff
popMenuBodyColor=0x8422
popSubMenuTextColor=0xce05
popSubMenuTextHighLightColor=0xffff
popSubMenuBodyColor=0xffff
popSubMenuBody1Color=0xde85
popSubFrameColor=0xf380
spinBoxNormalColor=0xfb99
spinBoxFocusColor=0xf663
spinBoxFrameColor=0x35ad
spinBoxTextColor=0xcd40
spinBoxTextHighLightColor=0xffff
romInfoBodyColor=0xf7bd
romInfoFrameColor=0xee65
romInfoTextColor=0xce05
startTextColor=0xffff
startHighTextColor=0xa502
cheatTitleTextColor=0xffff
cheatTextColor=0xa922
cheatHighTextColor=0xd1a0

relListViewBarColor=0xef72
relListViewTextColor=0xffff
relListViewTextHighLightColor=0xbdc4
relListViewTitleTextColor=0xffff
relListViewDarkTextColor=0xa94a
relTxtTextColor=0xa922
relmsgTextColor=0xffff
relmsgTitleTextColor=0xffff

[start button]
x=102
y=173
w=58
h=20
textColor=0x7FFF
file=none

[cheat button]
x=160
y=0
w=55
h=22

[cheat close btn]
x=214
y=2
w=22
h=22

[saver button]
x=100
y=0
w=55
h=22

[set up button]
x=43
y=0
w=55
h=22


[start menu]
x=0
y=9
itemX=7
itemY=10
subMenuItemHeight=16
setupItemHeight=16
setupMenuItemHeight=14
itemHeight=15
itemWidth=54

[pop close btn]
x=189
y=15
w=20
h=20

[list bar]
x=247
y=20
w=8
h=159

[main list]
textColor=0x2d6b
textColorHilight=0x7fff
selectionBarColor1=0x5c00
selectionBarColor2=0x2d60

[calendar]
x=86
y=116
show=1

[cheat title]
x=76
y=5
w=130
h=16

[saver text]
x=127
y=6
w=40
h=16

[set up text]
x=67
y=6
w=40
h=16

[cheat text]
x=184
y=6
w=40
h=16

[file name text]
x=55
y=176
w=170
h=16
show=1

[time text]
x=67
y=179
w=150
h=16
color=0x5a80

[file menu]
x=93
y=48
w=84
h=98

[cheat menu]
x=175
y=24
w=84
h=44

[brightness menu]
x=93
y=50
w=84
h=74

[ui type menu]
x=35
y=40
w=100
h=74

[language menu]
x=30
y=40
w=237
h=138

[setup menu]
x=45
y=24
w=100
h=100

[sd speed menu]
x=52
y=33
w=100
h=90

[run mode menu]
x=52
y=33
w=100
h=44

[archive menu]
x=52
y=33
w=100
h=74

[save menu]
x=115
y=24
w=100
h=74


Pour les réglages il y a quelques informations à connaitres.


Pour les couleurs des textes :

Les couleurs sont en codage 16 bits, les logiciels de dessin donnant les couleurs au format 24bits il va falloir convertir ce format.

On doit donc transformer du codage de type hexadecimal 24 bits (000000 à ffffff) en codage hexadecimal 16 bits (0x0000 à 0xffff).

Vu que l'algèbre booléenne ne doit pas être votre tasse de thé voici une page web qui vous fera ça en un click :
http://codeone.fr.nf/conversion.php

Il vous suffi de rentrer le code couleur 24bits et hop hop hop ça vous calculera le code couleur 16bits.
Merci à Carré pour cette page (il faudra que je pense à lui demander de faire ça en programme hors ligne).

Voilà pour les couleurs.


Maintenant pour les positions :

x= position horizontale
y= position verticale
w= largeur
h= hauteur

Tout ceci est exprimé en pixel.

Donc par exemple
x=20
y=50
w=80
h=40

désigne une fenêtre de 80 pixels de large sur 40 de haut dont le point de départ est situé au point x20y50



6 - Modifier l'écran de chargement avec SC-EOS-SCFW-Tool

Le topic officiel de ce programme fait par Blastar (et oui encore lui et encore merci à lui donc ^^) :
http://forum.supercard.sc/thread-5581-1-1.html




Ce programme permet de changer l'écran de chargement.
Cet écran n'est pas une image BMP du skin, cette image est incluse dans le fichier scfw.sc
Il faut donc editer ce fichier pour remplacer l'ancienne image par la nouvelle.
C'est faisable en connaissant les adresses offset de l'image et en passant par un editeur hexadécimal mais c'est bien plus simple en utilisant SC-EOS-SCFW-Tool qui fait tout, tout seul comme un grand.

1 - télécharger SC-EOS-SCFW-Tool sur le topic officiel
2 - faire une copie du fichier scfw.sc à modifier (fichier se trouvant dans l'EOS1SP2)
3 - créer une image en bmp (peu importe le format 24 ou 16 bit) de dimension 256x192
4 - décompresser l'archive de SC-EOS-SCFW-Tool dans un répertoire
5 - Lancer SC-EOS-SCFW-Tool.exe

Vous arrivez sur l'interface en photo au dessus :

1 - choisir file
2 - choisir open 'SCFW.SC'
3 - sélectionner le fichier scfw.sc que vous avez copier et que vous voulez modifier

Le programme va directement charger l'image contenu dans le scfw.sc


4 - choisir edit
5 - choisir import.. from disk
6 - sélectionner l'image que vous voulez insérer dans le scfw.sc
7 - choisir file
8 - choisir save

Voilà vous avez un nouveau scfw.sc, il ne vous reste plus qu'à copier ce fichier sur votre microSD en remplaçant l'ancien.

Votre photo apparaitra maintenant à la place de l'écran de chargement par défaut.

Ca le fera pour tous les skins, peut importe lequel vous avez choisi.


IMPORTANT : SC-EOS-SCFW-Tool ne fonctionne qu'avec l'EOS1SP2,si une nouvelle mise à jour sort, ilfaudra attendre que Blastar fasse les changement dans son programme pour réitérer la manoeuvre (à moins que supercard sorte cet écran de chargement du scfw.sc).

Le Tuto d'Alfadir
avatar
fl96

Messages : 4
Date d'inscription : 01/11/2009

Voir le profil de l'utilisateur

Revenir en haut Aller en bas

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

 
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum