+- 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)
Disposition des tuiles hexagonales sur une carte - Sephi-Chan - 08-09-2008
Bonsoir tout le monde,
Ce soir, j'ai décidé de faire une carte aux tuiles hexagonales pour m'amuser.
Après la lecture de l'article d'Harparine, et notamment la partie sur l'étude des hexagones, je me sentais paré pour mener ma mission à bien. Et là, c'est le drame.
Pour commencer, les hexagones que je souhaites utiliser ne sont pas des hexagones réguliers. Je conserve le respect de N et N/2 pour les longueurs, mais l'angle change. J'ai ici un angle de 45° au lieu de 60°.
![[Image: grass_u1220829448.png]](http://upload.jeuweb.org/uploaded/grass_u1220829448.png)
Je teste les formules et malheur, ça n'a aucune cohérence. En faisant sin(45) * 38 * 2, j'obtiens 68. Si je mesure sur ma figure, la valeur qu'était censée donner le calcul était 40 (la hauteur de mon hexagone).
Appliqué à l'hexagone de l'article, c'est encore pire, puisque sin(60) * n * 2 = -24 ! Il y a un problème avec les formules ou bien je suis vraiment très con ?
Bon, déjà, cela pose de gros problème pour le reste, vu que la hauteur donnée n'est pas bonne, la mise en page ne peut pas être bonne.
Ensuite, mon autre question de mise en page porte sur le fait que les décors dépassent de la tuile, ce qui fait que la hauteur de l'image est variable. Comment faire en sorte que cela chevauche proprement la tuile précédente ? Je précise que j'utilise des blocs contenant une image de fond.
![[Image: sapins_u1220830504.png]](http://upload.jeuweb.org/uploaded/sapins_u1220830504.png)
Enfin, moi qui ne suis pas adepte des cartes (j'ai utilisé des carrés lors de mon unique création de carte), je suis vraiment dérouté. D'où cet appel à l'aide. J'espère que vous saurez m'aider, je vous en remercie d'avance.
Sephi-Chan
RE: Disposition des tuiles hexagonales sur une carte - Anthor - 08-09-2008
marrant. J'ai bossé dessus ce week end.pareil formule fausse pour les hexagones de westnoth reconvertis en orthnormés. Les décalages sont irréguliers. La seule méthode c'était de garder mon essai, le rendre statique et ensuite uniquement modifier le contenu.je ne regrette pas car cette méthode me donne de très bons résultats en terme d'affichage et de vitesse.
Pour les elements ils se trouvent sur une autre couche avec le background ne bottom.
iPhone oblige je fini en arrivant au boulot
RE: Disposition des tuiles hexagonales sur une carte - Delkaes - 08-09-2008
j'espere que celà peut vous aider, le site est très connu tout de même : Amits
RE: Disposition des tuiles hexagonales sur une carte - Harparine - 08-09-2008
Salut ! Je vais essayer de répondre rapidement :
1. As-tu vérifié que tu avais bien utilisé des angles en radian dans tes formules et non pas des angles en degrés ? Beaucoup de langages de prog utilisent le radian en trigonométrie. En PHP, la formule serait donc sin(deg2rad(45)) * 38 * 2 = 53 et non pas sin(45) * 38 * 2 = 68.
2. Pour le nombre négatif, c'est le même truc : sin(deg2rad(60))*38*2 donne environs 65 tandis que sin(60)*38*2 donne -24.
3. Cet article analyse en détail la construction d'un hexagone mais comme tu n'as pas vraiment d'isométrie, tu peux utiliser directement les dimensions de ton image : c'est plus facile à imaginer et à utiliser (ma formule traduit la logique mais en production, il vaut mieux avoir un minimum de calculs). Ici, on sait que tes images font 74px de large et 38 de hauteur.
La position Y, c'est donc n° de ligne (en partant de 0) + 38/2 lorsque le n° de colonne est impair.
pour l'image 0;0 c'est donc Y = 0 pour 1;0 c'est Y= 0+38/2 pour 2;0 c'est Y= 0
Enfin, une tuile est placée aux à 56px du début de l'autre (74- le côté de 18).
X est donc égal à n° de colonne * 56.
4. Pour les décors, il faut utiliser les valeurs d'une tuile vide et faire une soustraction. en fonction de la taille réelle de l'image.
@+
RE: Disposition des tuiles hexagonales sur une carte - Sephi-Chan - 08-09-2008
Merci à vous pour votre attention.
Je suis intéressé par ta technique, Anthor !
Merci Delkaes, je n'arrivais pas à remettre la main sur cette page pourtant intéressante.
Concernant la trigonométrie et ses unités dans les langages, j'avoue avoir été stupide de ne pas y avoir pensé. D'autant plus que ton article l'indique…
J'ai donc travaillé un peu mes formules, que voici (L représente la longueur d'un côté plat de mon hexagone. H représente la hauteur de l'hexagone. H = L dans mon cas.) :
Tuile dont X est pair a écrit :Position en X : (X - 1) * 3/2 * L
Position en Y : Y * H
Tuile dont X est impair a écrit :Position en X : floor(X/2) * 3 * L
Position en Y : 1/2 * H + Y * H;
La mise en page est correcte. Cela dit, je n'ai pas compris comment pouvoir faire un montage avec chevauchement.
![[Image: exemple_u1220870710.png]](http://upload.jeuweb.org/uploaded/exemple_u1220870710.png)
Sephi-Chan
RE: Disposition des tuiles hexagonales sur une carte - Ter Rowan - 08-09-2008
j ai le même questionnement (chevauchement)
je ne vois qu'une solution mais pas encore mis en oeuvre, et pas vraiment de recherche poussée :
plusieurs couches :
le sol
les arbres etc....
les personnages, ou autres éléments notables
trois images qui se superposent, à la même position
RE: Disposition des tuiles hexagonales sur une carte - Sephi-Chan - 08-09-2008
Effectivement, la possibilité de pouvoir empiler une infinité (potentielle) de couches constitue ma principale interrogation. Le but est bien entendu que ces couches puissent en chevaucher d'autres.
Sephi-Chan
RE: Disposition des tuiles hexagonales sur une carte - Ter Rowan - 08-09-2008
et surtout... dans la suite logique.. l'aspect "fusion d'hexagone" (je ne sais pas comment dire)
prenons l'image que tu as présenté, on voit clairement que chaque "bosquet" tient dans un hexagone, on n'a pas l'impression d'une "masse" qui ressemblerait à une forêt recouvrant plusieurs hexagones
c'est aussi un gros boulot mais.. est ce du graphisme ( je construis l'image pour donner une sorte de répétion multituile), est ce de l'algorithme (je construis l'image en fonction des cases voisines)
plus troublant encore, la gestion des cours d'eau plus petit que l'hexagone.... comment on fait ? les directions, etc...
enfin, c'est un gros chantier si on veut faire quelque chose de bien
RE: Disposition des tuiles hexagonales sur une carte - Harparine - 08-09-2008
Ok, voilà une démonstration (sommaire) d'un empilement de couches :
http://gwenole.stephant.free.fr/tests/superposition_calques/
Le principe en lui même est très simple :
Une div principale contient les calques. Les calques sont des div en position:absolute à top et left à 0px. Dans les calques, les sprites sont également en absolute, et leur position est calculée à partir de 0. Seuls les calques se chevauchent.
Les sources de l'exemple ici : http://gwenole.stephant.free.fr/tests/superposition_calques/sources.zip
J'espère que j'ai bien compris votre problème parce que la solution me semble un peu trop évidente^^
EDIT : je constate que les titles ne fonctionnent que sur le dernier calque...
RE: Disposition des tuiles hexagonales sur une carte - Sephi-Chan - 08-09-2008
La fusion des hexagones est purement graphique. Ici, c'est moi qui ai choisi de colorer les bordures.
De même pour mes arbres, je peux obtenir un effet forêt dense si je mets plus d'arbre, on ne verra alors plus le sol et l'illusion sera bonne. De même, je peux mettre plusieurs tuiles différentes, pour varier un peu les plaisirs.
L'idéal étant de pouvoir multiplier les couches, et donc d'afficher ou non la bordure. On masque la bordure quand on fait un affichage général de la page, mais on l'affiche pour un déplacement stratégique, par exemple. Les possibilités sont énormes (des effets météos, des animations, etc.).
Ensuite, concernant la beauté graphique, les cours d'eau, les chemins, etc. Il suffit d'avoir une grande quantité de tuiles à disposition, ensuite, ce n'est que de l'assemblage.
Sephi-Chan
Harparine, l'empilement des couches en soi n'est pas un problème. Mon souci est de permettre à l'image de fond d'une tuile de chevaucher la tuile de derrière. Je n'arrive vraiment pas à le faire.
Sephi-Chan