Disposition des tuiles hexagonales sur une carte

[Sephi-Chan]

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°.



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.




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

[Anthor]

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

[Delkaes]

j'espere que celà peut vous aider, le site est très connu tout de même : Amits

[Harparine]

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.

@+

[Sephi-Chan]

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.) :

Position en X : (X - 1) * 3/2 * L
Position en Y : Y * H

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.




Sephi-Chan

[Ter Rowan]

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

[Sephi-Chan]

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

[Ter Rowan]

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

[Harparine]

Ok, voilà une démonstration (sommaire) d'un empilement de couches :

http://gwenole.stephant.free.fr/tests/su...n_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/su...ources.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...

[Sephi-Chan]

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