Sebraki
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.


Forum Officiel SebraKi
 
AccueilDernières imagesRechercherS'enregistrerConnexion
-34%
Le deal à ne pas rater :
-34% LG OLED55B3 – TV OLED 4K 55″ 2023 – 100Hz HDR 10+, ...
919 € 1399 €
Voir le deal

 

 FAQ : comment créer son skin

Aller en bas 
AuteurMessage
Innomable
Admin
Innomable


Masculin
Nombre de messages : 975
Age : 30
Localisation : en train de te couler ...
Date d'inscription : 30/06/2007

FAQ : comment créer son skin Empty
MessageSujet: FAQ : comment créer son skin   FAQ : comment créer son skin I_icon_minitimeDim 31 Jan - 13:46

Alors je vais essayer de développer un petit peu plus ici, en essayant de rester clair Razz . En espérant que cela pourra répondre aux questions de quelques joueurs sur la création de skin.

Comme le sujet semble intéresser du monde, je vais essayer de développer en plus la signification des différents éléments présents dans le fichier css et essayer de proposer un pas à pas pour réaliser ce fichier en partant de zéro.

* Généralités
* Structurede la page Ogame
* Pas à pas
* Mise à jour des dernières versions
* Utiliser un skin perso + quelques liens utiles




Généralités

Dans cette partie nous allons d'abord voir les bases, quelle est la structure du dossier contenant le skin, comment modifier les images et quelques instructions.

Qu'est-ce qu'un skin ?

Un skin c'est l'apparence de l'interface de jeu. L'ensemble des vaisseaux, bordures, polices de textes, ... Bref le visuel.

Principe

Quel est le principe pour modifier ou créer un skin ?

En fait le jeu, le serveur, .... (comme vous voulez) va donner des "petits noms" aux différents éléments visuels. Par exemple il va nous dire en face de la descritption des petits transports se trouve une image qui se trouve dans chemin_de_graphisme/gebauede/202.gif. A cet emplacement vous verrez donc l'image qui se trouve dans le dossier chemin_de_graphisme/gebauede et appelée 202 et qui est au format gif. Donc pour choisir l'image que vous voudrez pour ce transport, il suffit de trouver un image gif que vous appellerez 202 et que vous mettrez dans le répertoire chemin_de_graphisme/gebauede.
Il pourra aussi dire que des cases de la page de ressources s'appellent th (pas très explicite). Et si vous voulez par exemple que le fond de ces cases soit rouge, c'est là que ça se complique, il vous faudra taper


Code source

Citation :
th
{
background-color : #FF0000 ;
}




Ok, c'est vraiment laid là. Au passage, petite astuce, vous connaissez les codes couleurs html qui ressemblent à #rrggbb (disponibles www.espace2001.com/espace/couleurs.htm+code+couleur+html&hl=fr&lr=lang_fr]ici[/url]) , sachez que transparent (sans #) est aussi un code couleur recevable qui est très pratique quand vous voulez de la transparence.
Comme vous le voyez, quand on commence à toucher à la mise en forme, ce n'est plus la même chose.

Mais avant de créer votre skin, je vous conseille d'abord de télécharger un "skin" existant par exemple www.ogame.ch/%3Fpage%3Dskins.php+skin+ogame&hl=fr]ici[/url] (lien de la FAQ) ou ici (site allemand regrroupant de nombreux skins) ou encore ici (lien de skins sur le forum anglais).

Vous pouvez voir que tous ont la même structure.


Structure

Une fois l'archive dézippée vous pouvez voir ceci :un dossier mon_skin qui contient les répertoires suivants

* Un répertoire gebauede qui contient les images des bâtiments, recherche et vaisseaux
* Un répertoire gfx qui contient les barres de séparation pour la barre latérale
* Un répertoire planeten qui contient les images des planètes avec le sous répertoire small qui contient leur miniatures
* Un répertoire images qui contient les petites icônes pour les ressources en haut
* Un répertoire pic qui contient les différents pictogrammes qui sont visibles dans les pages du sous menu alliance
* Un répertoire img qui est un fourre tout
* Un fichier css appelé formate


Il y a donc beaucoup de choses qui sont toutes indispensables (sauf le dossier img)

Pour votre skin, cette structure est absolument à respecter.

Les dossiers images

Alors les dossiers images sont comme vous pourrez le constater identiques quelques soit le skin. Cela est normal car c'est là dedans que se trouve les images qui correspondent aux éléments auxquels le jeu a attribué la propriété "ton image s'appelle bidule" (pour faire simple). Il faut donc qu'il y aie correspondance entre le jeu et les images du répertoire.
Il faut donc respecter scrupuleusement les noms de ces éléments sous peine de voir une croix blanche s'afficher.

Une particularité des images de ces dossiers est qu'elles peuvent avoir n'importe quelle taille, vous les verrez automatiquement redimensionnées dans le jeu.

Maintenant une petite question qui est souvent posée : j'ai 2 planètes qui ont la même image, puis-je arranger cela ?
Voyons ça. Les 2 planètes ont la même image donc soit le jeu a dit vous aurez toutes les 2 l'image qui se trouve à chemin_de_graphisme/planeten/eisplanet10.jpg et dans ce cas, on ne peut y remédier. Soit vous avez 2 fois la même image dans votre répertoire et là ça peut se changer, mais c'est rarement le cas.
Donc la réponse est non, on ne peut rien faire.
2 planètes identiques le reste

Maintenant vous voulez changer une image, par exemple votre petit transporteur qui s'est vu attribué l'image appelée 202.gif qui se trouve dans le répertoire chemin_de_graphisme/gebauede. Pour cela rien de plus simple :

* prenez une image n'importe laquelle et de n'importe quelle taille
* mettez la au format gif
* appelez là 202
* déplacez l'image qui se trouve à l'emplacement chemin_de_graphisme/gebauede/202.gif
* mettez y à la place votre nouvelle image
* le tour est joué.



Pour voir le nom de l'image que vous voulez modifier, c'est simple, il suffit de faire clic droit sur l'image et propriétés.

La méthode est ici détaillée pour une image du répertoire gebauede mais pour changer une image de n'importe quel autre répertoire, la méthode est la même (notamment pour le fond qui se trouve dans le répertoire img) à ceci près que pour les images du rèpertoire img, il n'y a pas de redimensionnement automatique.
Il y a une petite particularité si vous voulez changer l'image d'une planète, vous devez le faire pour l'image qui se trouve dans le répertoire planeten mais aussi pour celle qui se trouve dans le sous-répertoire small.

Donc la seule chose pour créer ces répertoires, ce sera des images, et beaucoup d'images même, plus d'une centaine, je vous laisse faire le compte exact.


Le dossier img

Comme je l'ai dit c'est un fourre tout et il ne sert donc à rien à proprement parler. Juste à ranger un peu ses images. Dedans vous y mettrez donc toutes les images qui sont "falcutatives" comme votre fond, le fond de la barre latérale, si vous voulez un fond pour la description des bâtiments, un fonc lorsque vous écrivez un message, .... bref pas mal de choses en fin de compte.

En fait le jeu ne donnera pas de nom à ces images mais aux éléments qui les contiennent comme td.l ou th, ... celles-ci seront utilisées lors de la création du fichier formate.css lorsque vous attribuerez les propriétés aux différents éléments.

Petite remarque : pour ces images, aucun redimensionnement automatique, si l'image est trop petite, il y aura une mosaïque d'image, si elle est trop grosse, elle sera centrée et tronquée, si elle est à la bonne taille ben y a rien à redire.


Le fichier formate

Alors là ça se complique et je vous conseille d'acquérir quelques connaissances en css avant d'y toucher, par exemple en allant sur ce site qui est très bien fait et très accessible, à conseiller.

Donc pour cette partie, ne connaissant pas le nom de tous les éléments, je ne saurais vous faire une liste exhaustive. Je vous conseille donc de chercher par vous même en téléchargeant différents thèmes commentés de préférence (évitez Epicblue), je vous recommande reloaded qui est commenté mais en allemand, et d'y aller en tatonant.


Donc comme cette partie était plutôt courte, voici quelques exemples de ce que l'on peut faire.

Mon skin (je n'utilise pas les modifications que j'ai donné après, ce sont juste des exemples) :



Pour mettre un fond lorsque vous écrivez un message

Code source

Citation :
textarea
{
background-image : url(img/srgs.jpg);
}




Tout va bien, on est dans le vert !! Ah non une attaque, et la barre latérale est palichonne, la police a changé aussi Smile.



Pour la transparence

Code source

Citation :
body.style table
{
filter : alpha(opacity=10);
-moz-opacity : 0.1;
}



Pour la couleur c'est simple

Citation :
Code source

body
{
color: #00FF00 ;
}


Et puis un dernier pour s'amuser, c'est pas mal le chantier spatial comme ça non ?




Pour le faire

Code source



Citation :
td.l
{
background-image : url(img/galaxie.gif) ;
}


Une dernière instruction pour supprimer les images


Code source



Citation :
table table td img, .style table img
{
visibility : hidden;
width : 0px;
height : 0px;
}



Avec ça on peut avoir des thèmes assez "minimalistes", une image de celui que j'ai en ce moment :



Dans chaque cas, je n'ai affiché qu'un instruction mais il y a en réalité plusieurs, par exemple la taille du caractère, l'écart entre un bord de l'image est la bordure mais celles données sont suffisantes pour obtenir l'effet désiré.
Autre précision, les adresses des images, ne sont valables que chez moi, chez vous, ça ne s'appellera pas forcément galaxie.gif ou srgs.jpg.
Revenir en haut Aller en bas
https://devil.exprimetoi.net
 
FAQ : comment créer son skin
Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» skin

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Sebraki :: La plume et le pinceau :: Créations-
Sauter vers: