[TUTO] Appel de database dans Zspin

Some tutorials for starting with zspin.

Modérateurs : vik, Modérateurs

Avatar de l’utilisateur
Porko
Modérateur
Modérateur
Messages : 2019
Inscription : 02 févr. 2014 - 00:00
Localisation : 26700
A remercié : 258 fois
A été remercié : 381 fois

[TUTO] Appel de database dans Zspin

Message par Porko » 02 oct. 2015 - 18:47

Alors attention les yeux pour les spécialistes je vais expliquer ça comme je le comprend
Image
Donc le singe savant va expliquer aux autres singes ce qu'il comprend... Je compte sur ceux qui savent pour rectifier mes absurdités.




1) Récupérer les infos
Le but est de récupérer les infos du database pour les afficher dans notre theme

Dans un database il y a des balises, nous allons prendre l'exemple du genre.
Dans chaque jeu on retrouve ceci:

Code : Tout sélectionner

<genre>Sport</genre>
Pour l'appeler dans notre theme il faut créer une div (ne partez pas en courant) entre les balises "body"
Cette div est: zspin-genre

Pour pouvoir lui donner des propriétés css (plus tard dans le tuto) on va lui rajouter un nom "info_genre"

Code : Tout sélectionner

    <body>
         <div class="info_genre"><div class="zspin-genre"></div></div>
    </body>

2) Afficher les infos
Maintenant on va lui donner les instruction d'affichage (zone, police, couleur...)

Il faut pour cela l'appeler dans la zone "style"

Code : Tout sélectionner

    <style>
         .info_genre {
             position: absolute;                          /** laisser en absolute pour le moment le relative viendra avec votre futur skill**/
             top: 10%;                                        /** position par rapport au haut**/
             left: 32.2%;                                     /** position par rapport a la gauche**/
             width: 16.3%;                                  /**largeur de la zone**/
             height: 6%;                                     /** hauteur de la zone**/
             font-family: "Arial";     /** police de caractère**/
             color: #A9A9A9;                              /** couleur police**/
             line-height: 1vw;                            /** Hauteur interligne**/
             font-size: 1.3vw;                             /** Taille de police**/
             background: transparent;                /** couleur du fond**/
             text-align: left;                               /** alignement**/
             z-index: 3;                                      /** position Z c'est à dire devant ou derrière:  0=fond 42=facade**/
             }
    </style>
Il y a pleins d'autre outils pour afficher différemment mais ça je vous laisse chercher^^

Vous remarquez que la fonte est en vw car dans mon exemple je veux que la police ne change de taille que si l'on réduit la largeur
Si je voulais le contraire j'aurais mis vh et la police n'aurait réduit que sur la hauteur

Voila c'est tout pour les infos à afficher!! Déjà ça doit marcher


3) Afficher dans un tableau
Là ça se corse donc on va rester concentré!

On va prendre 1943 de la PC Engine (seul database à jour sur la HFSBox synchro pour le moment)

Code : Tout sélectionner

<game name="1943 Kai (Japan)" index="True" image="">
		<description>1943 Kai</description>
		<cloneof>...</cloneof>
		<crc>...</crc>
		<systems>PCE, ARC</systems>
		<manufacturer>Naxat Soft</manufacturer>
		<developer>Capcom</developer>
		<year>1991</year>
		<genre>Shoot them up</genre>
		<rating>CERO - NR</rating>
		<score>14</score>
		<players>2 joueurs</players>
		<language>JAP</language>
		<synopsis>Vous êtes un pilote du Stearman, un avion de chasse biplan, pendant la Seconde Guerre Mondiale, plus précisément pendant la Guerre du Pacifique. Vous avez pour mission de détruire des vagues d&apos;avions de chasse ennemis ,des bombardiers et des navires de guerre de grande taille de la force aérienne japonaise.</synopsis>
		<enabled>yes</enabled>
</game>
Appel des div dans le body
Chaque "tr" est une ligne et chaque "td" est une colone

Dans cet exemple je vais afficher dans la première colonne l'intitulé et dans la 2ème colonne les infos du database

Toujours dans le body on va ajouter une table (un tableau quoi) et lui donner un nom: position_tab

Code : Tout sélectionner

</body>
  <table class="position_tab"> </tab>
    <tr> 
        <td>DEVELOPER :</td><td><div class="zspin-developer"<div></td>
    </tr>
    <tr>
        <td>MANUFACTURER :</td><td><div class="zspin-manufacturer"<div></td>
    </tr>
    <tr>
        <td>YEAR :</td><td><div class="zspin-year"<div></td>
    </tr>
    <tr>
        <td>GENRE :</td><td><div class="zspin-genre"<div></td>
    </tr>
    <tr>
        <td>RATING :</td><td><div class="zspin-rating"<div></td>
    </tr>
    <tr>
        <td>PLAYERS :</td><td><div class="zspin-players"<div></td>
    </tr>
    <tr>
        <td>LANGUAGE :</td><td><div class="zspin-language"<div></td>
    </tr>
    <tr>
        <td>SCORE :</td><td><div class="zspin-score"<div></td>
    </tr>
  </table>
</body>
Comme tout à l'heure on va lui donner un style MAIS en plus on vas lui appliquer un style par colonne avec le "td"

Code : Tout sélectionner

    <style>
          .position_tab { 
             position: absolute; 
             top: 22%; 
             left: 29%;
             z-index: 3;
             font-family: "Arial";
             color: #383838;
             font-size: 1.7vw;
             background: transparent;
             text-align: left;
             text-transform: uppercase;     /**tout passer en majuscule**/
       }

td:nth-child(1) {
       width: 17vw;
       text-align: left;
}

td:nth-child(2) {
       width: 21vw;
       text-align: left;
}

tr {
       line-height: 2.3vh;
       height: 4vh;
}
    </style>
Voilà, avec ça vous devriez déjà vous amuser

Je vous mets le theme EmulationStation-like qui comporte des div standard et le tableau afin que vous puissiez vous entrainer (Il y a même l'auto scroll sur le synopsis si il est trop long)

Image
https://mega.nz/#!LBZ1USiJ!W13B0To4tuI3 ... 0i5remY_bw


Appel à ceux qui savent: corrigez moi!
Dernière modification par Porko le 02 oct. 2015 - 20:57, modifié 3 fois.

Avatar de l’utilisateur
Odissine
Virtuose
Virtuose
Messages : 1223
Inscription : 20 févr. 2014 - 00:00
A remercié : 17 fois
A été remercié : 37 fois

Re: [TUTO] Appel de database dans Zspin

Message par Odissine » 02 oct. 2015 - 18:52

Très bon tuto pour comprendre le fonctionnement ;) après on a juste a l'adapter pour nos besoins ;)
Merci Porko !

Avatar de l’utilisateur
lankou910
Gourou
Gourou
Messages : 724
Inscription : 16 mai 2013 - 01:00
Localisation : Bordeaux
A remercié : 76 fois
A été remercié : 107 fois

Re: [TUTO] Appel de database dans Zspin

Message par lankou910 » 02 oct. 2015 - 18:55

merci porko

vais me le lire demain si j'ai un moment.

bon je viens de le lire attentivement , je pense avoir compris vais essayer de mettre en pratique
mais tu coup faut que modifie que que petite chose sur mon theme.

bon alle au boulot et je vous montre sa
Image

Répondre

Revenir à « Tutorials »