Disposition des tuiles hexagonales sur une carte

[Anthor]

Tsss, j'avais répondu ce matin, mais le RER a coupé l'envoi du post.

Je disais de rien, et que j'avais hâte de refaire la suite. N'est pas peur de refaire quelques images, les tests sont la pour ça ^^
Tu as pu voir toi-même que j'en étais au troisième essai de positionnement C'est long mais c'est comme la simulation Photoshop, y'a rien de mieux pour obtenir une map propre et agréable.

J'aurais un truc à montrer d'ici la fin du week end normalement.

[Sephi-Chan]

Owned by SNCF (et c'est un fils de cheminot qui te le dit) !

Sinon, je suis pas avare en tests, généralement. J'ai d'ailleurs pu tester l'assemblage de tuiles en une seule image. Le positionnement est fait grâce à background-position, ensuite. Cela permet de limiter les requête HTTP envoyées au serveur. Le but est d'utiliser ce procédé pour regrouper tous les ensembles de tuiles.



Voilà ce que donne le positionnement :

Code :

.cloud {
    background            : url('Tiles 2/clouds.png') 0 0;
    width                : 120px;
    height                : 60px;
    position            : absolute;
    top                    : -60px;
    left                : 0;
}

.cloud2 {
    background            : url('Tiles 2/clouds.png') 200px 0;
    width                : 120px;
    height                : 60px;
    position            : absolute;
    top                    : -64px;
    left                : -10px;
}

.cloud3 {
    background            : url('Tiles 2/clouds.png') 0 200px;
    width                : 138px;
    height                : 60px;
    position            : absolute;
    top                    : -50px;
    left                : -15px;
}

Sephi-Chan

[Ter Rowan]

J'ai d'ailleurs pu tester l'assemblage de tuiles en une seule image. Le positionnement est fait grâce à background-position, ensuite. Cela permet de limiter les requête HTTP envoyées au serveur. Le but est d'utiliser ce procédé pour regrouper tous les ensembles de tuiles.

pas sûr d'avoir compris (même en écrivant ce que j avais compris, je me suis dit que j'avais compris de travers)

tu peux expliciter ?

là, j ai pigé que tu ne faisais qu'une image, avec n classes, chaque classe correspondant à un "objet" affiché grâce au background.

mais ça doit pas être ça

[Sephi-Chan]

En fait, c'est bien plus simple que ça.

A chaque déclinaison de tuile correspond une classe CSS.
Plutôt que d'avoir une image par déclinaison de ma tuile (ici cloud1, cloud2, cloud3), je fais une seule image contenant toutes les déclinaisons.

Ensuite, au lieu de faire un background : url('cloud1.png');, je fais un background : url('clouds.png') 0 200px;. Le bloc (un div, en l'occurrence) va alors prendre pour image de fond l'image clouds.png, dont le point de coordonnées 0, 200 sera attaché au point de coordonnées 0,0 de mon bloc (le div en question).

N'hésite pas à me dire si je ne suis pas clair.

Quelques articles complémentaires sur l'utilisations de Sprites CSS :

• Pompage - Sprites CSS : Meurs, découpe d’images, meurs !
  
• Website Optimization - CSS Sprites: How Yahoo.com and AOL.com Improve Web Performance
  
• CSS Tricks - CSS Sprites: What They Are, Why They’re Cool, and How To Use Them
  

Sephi-Chan

[Anthor]

Comme je t'ai dit, la structure moi ne me permet que de le faire pour les fonds et les transitions qui gardent la même dimensions, celle d'une tuile. Je pense que c'est beaucoup plus limité lorsque je passe sur les objets qui n'ont pas de taille mini ou maxi définie, ce qui permet d'utiliser n'importe quel taille d'objet, quel que soit son positionnement sur le tileset.

Par contre effectivement, sur les fond et les textures de transitions, c'est très agréable


Anthor, Envi de rentrer pour enfin bosser sur du gros dév :p

[Sephi-Chan]

Ça me refroidit un peu ce que tu dis là. Je ne me vois pas faire charger à la personne autant d'image que je n'ai de couches.
Il faudra que j'essaye.


Sephi-Chan

[Anthor]

Je parle uniquement de la couche objet. Le reste ayant une taille fixe j'aurais une imagé par famille,composé du fond et de 18 a 24 texture de transition. L'objet reste normalement limité a seulement quelque t'îles.

[Ter Rowan]

pigé !

cependant philosophiquement parlant...

l'image a un rôle d'information et pas de décoration

ça me gène du coup un peu qu'on le mette dans le css plutôt que dans le html


Une autre question, supposons les tuiles du sol ( forêt, colline, désert, ...)

est ce vraiment utile de charger une image contenant les x 'tuiles possibles' et de les gérer comme les nuages là où, finalement seules quelques rares tuiles seront affichées en même temps

en effet sur la région que tu affiches il est fort peu probable de trouver tous les décors (même sur un hexagone 8 * 8 si on veut rester un peu réaliste on a peu de chance de trouver tous les types de décors)

est ce qu'il ne vaut pas mieux avoir autant d'images physiqyes que de tuiles dans ces cas là ?


genre si moins de trois tuiles possibles faire une seule image, mais si possibilité de 12 tuiles mais en moyenne 5 différentes partir sur une solution une tuile = une image ?

[Anthor]

Ce n'est pas faux.

Mon idée de départ était d'avoir une image pour le fond, puis une image créé sur le serveur des différentes layers, puis un objet. Globalement sur un grand environnement, à l'affichage, les textures sont sensiblement les mêmes, donc il n'y en a pas beaucoup à télécharger.

Je trouve son utilisation quand même plus simple même au niveau de l'administration, il me suffit de boucler sur les répertoires pour avoir mes textures disponibles par catégorie.

Dans les deux cas, mes images sont toujours des fonds de blocs. Je ne vois pas quels informations elles peuvent apporter puisque de toute manière tu dois avoir une map area par dessus le tout pour contrôler exactement les polygones de tes tuiles.

[Ter Rowan]

tu dois avoir une map area par dessus le tout pour contrôler exactement les polygones de tes tuiles.

ou pas

si tu n'as pas besoin de gérer d'événement (en dehors de title ='' si on veut considérer cela comme un événement)

ou si ... comme moi pour l'instant... tu fais la brute avec des

<a href...><img='...' /></a>

oui oui je sais la quadrature de l'hexagone... mais bon c'est pas si déconnant (tout dépend de la précision attendu du clic)