+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : Disposition des tuiles hexagonales sur une carte (/showthread.php?tid=3025)
RE: Disposition des tuiles hexagonales sur une carte - Anthor - 11-09-2008
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.
RE: Disposition des tuiles hexagonales sur une carte - Sephi-Chan - 11-09-2008
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.
![[Image: clouds_u1221126836.png]](http://upload.jeuweb.org/uploaded/clouds_u1221126836.png)
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
RE: Disposition des tuiles hexagonales sur une carte - Ter Rowan - 11-09-2008
Sephi-Chan a écrit :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
RE: Disposition des tuiles hexagonales sur une carte - Sephi-Chan - 11-09-2008
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
RE: Disposition des tuiles hexagonales sur une carte - Anthor - 11-09-2008
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
RE: Disposition des tuiles hexagonales sur une carte - Sephi-Chan - 11-09-2008
Ç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
RE: Disposition des tuiles hexagonales sur une carte - Anthor - 11-09-2008
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.
RE: Disposition des tuiles hexagonales sur une carte - Ter Rowan - 11-09-2008
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 ?
RE: Disposition des tuiles hexagonales sur une carte - Anthor - 11-09-2008
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.
RE: Disposition des tuiles hexagonales sur une carte - Ter Rowan - 11-09-2008
Anthor a écrit :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)