[Résolu][SVG] Dessiner des motifs pour une carte d'hexagones

[Sephi-Chan]

Hello,

En ce moment, je réfléchis pas mal à mon prochain projet et j'ai déjà en tête la carte que je veux. Cette carte serait une grille d'hexagones réguliers.

Chaque hexagone y représente un terrain et chaque sommet représente un territoire. Le but est d'avoir un motif qui dessine des cercles pour ces territoires et des chemins entre eux, de façon à ce que ce soit un peu joli.



Une fois formé, voilà ce à quoi pourrait ressembler une portion de la carte. Ici une île qui introduit mon problème suivant.



Comme on peut le voir, les tuiles qui représentent l'eau n'ont que des bordures partielles. C'est sur ce point que j'aimerais avoir des conseils.

L'ordre de grandeur de ma carte est de 100 × 100 hexagones. J'ai choisi d'utiliser SVG (probablement inline) pour la dessiner. En effet, mes tests m'ont montré que le dessin d'une carte de cette taille était plutôt rapide (notamment grâce à l'utilisation des balises refs et use), et la simplicité d'associer des events handlers aux éléments est déterminante.

Je cherche maintenant le moyen le plus efficace d'implémenter ça en répondant aux besoins suivant :

• L'hexagone "intérieur" qui affiche l'icône de la ressource du terrain doit être une entité (pour y associer des events handlers et pouvoir changer l'icône).
  
• Chaque sommet servira de centre à un cercle qui modélisera le territoire. Ce cercle sera donc concentrique à celui qu'on voit sur mes schémas, qui est purement décoratif. Il doit également être une entité.
  

La partie la plus gênant de mon problème repose donc sur le dessin des tuiles de mer, qui n'ont qu'une bordure partielle.


Voilà, voilà, j'espère que les amateurs de SVG sauront m'aider !

[niahoo]

hum j'ai eu un peu de mal à suivre là mais le premier truc qui me vient à l'esprit ce sont les couches. En cartographie, tu utilises une couche par type d'informations.

Ainsi tu auras une couche terrain qui sera constituée de tuiles terre et mer, avec des bordures simples.
Tu as également les informations humaines à représenter avec tes espèces de remparts chelous.

Là pour que ce soit plus simple tu dessines une couche des bordure épaisse sur les côtés et sur les 6 disques à chaque angle. Avec la bordure rouge (cf. schéma)
Puis une couche supplémentaire dessinant les hexagones par dessus cette bordure épaisse, sans remplissage.

Ensuite l'icône au centre faisant plutôt partie des éléments de l'interface de jeu (les manettes) tu les laisse sur la couche d'interaction.

Bon je réponds peut être à côté, j'ai pas très bien suivi ton post.

---

si la bordure des mers doit couper le cercle en bord d'hexagone occupé alors tu places les bordures de tous les hexagones sur une même couche dédiée.

[Sephi-Chan]

Je comptais bien adopter ce modèle en couche, mais le problème réside sur les tuiles de mer.

Regarde bien les tuiles qui ont une vague comme symbole. Comme tu peux le voir, elles n'ont de bordure et de disque que pour compléter le motif des tuiles adjacentes. Et c'est ça qui me pose problème : j'ai plusieurs combinaisons possible des 6 "routes" et des 6 "arcs" et je cherche le moyen de faire cette composition le plus efficacement possible.

[niahoo]

Ben justement, dans ce que je disais, les tuiles qui doivent avoir des disques à leurs angles dessinent les 6 disques complets, pas seulement leur tiers.

Ainsi, les tuiles de mer sont simplement sous le disque, elles ne le dessinent pas.

Je sais pas si on se comprend bien

Bon du coup je réfléchis, je me dis que mettre les cercles à chaque fois pourrait faire beaucoup de données d'affichage pour pas grand chose, à gérer par le moteur de rendu du browser. Se sentirait-il mal sur du 100x100 si une case sur deux est occupée ...

---

les disque complet ET la bordure épaisse + trait rouge complet également => pour moi le plus chiant ce serait ce trait rouge justement ;

[Sephi-Chan]

Le trait rouge n'est pas nécessaire sur le motif final. Il servait surtout à marquer le contour de l'île de manière plus évidente sur le schéma.
Je comprends mieux ce que tu décris, mais je ne sais pas si c'est vraiment une bonne solution. Il faudra que je fasse des essais.

Par ailleurs, je ne souhaite pas dessiner les bordures des différents hexagones. Mais ça c'est du détail facile. :p

[Myrina]

A tout hasard, une couche unique pour représenter les tiles terrestres et maritimes et par dessus un <path> unique représentant ton trait rouge généré par le serveur. Je suppose que tes tiles seront générés par le serveur donc tu devrais donc disposer des informations nécessaires pour tracer la "frontière" dans un deuxième temps.

les hexagones, c'est des images avec un filtre de clipping dessus? ou c'est un motif de remplissage d'un path?

NB: J'ai des soucis actuellement de rendu en SVG Inline; il n'y a que sur FF4.0 et supérieur que c'est bien rendu, animations comprises (Sur Chrome, les animations ne se déclenchent pas et j'ai un rendu un peu différents des <text>.

[Sephi-Chan]

A tout hasard, une couche unique pour représenter les tiles terrestres et maritimes et par dessus un <path> unique représentant ton trait rouge généré par le serveur. Je suppose que tes tiles seront générés par le serveur donc tu devrais donc disposer des informations nécessaires pour tracer la "frontière" dans un deuxième temps.

les hexagones, c'est des images avec un filtre de clipping dessus? ou c'est un motif de remplissage d'un path?

NB: J'ai des soucis actuellement de rendu en SVG Inline; il n'y a que sur FF4.0 et supérieur que c'est bien rendu, animations comprises (Sur Chrome, les animations ne se déclenchent pas et j'ai un rendu un peu différents des <text>.

Mon principal besoin, c'est d'arriver à dessiner les hexagones (et leur contenu) tel qu'on peut les voir sur mon schéma avec les symboles. C'est à dire sans "route" sur certaines arrêtes et sans "cercle" sur d'autres. Mais je ne sais pas comment dessiner ça.

Il me faudrait 12 formes : les 6 arcs de cercles des sommets et les 6 arrêtes. Une fois que j'aurais ça, je n'aurais plus qu'à les combiner selon mes besoins pour dessiner un hexagone, et répéter la manœuvre pour composer ma grille.

[Myrina]

Justement pour tes formes, le path s'y prête bien; tu peux faire tes arêtes ainsi que tes arcs de cercles (ex:http://tecfa.unige.ch/guides/tie/html/svg-intro/svg-intro-4.html#pgfId-1000120923).

Après, comme je l'ai déjà dit, si tu construis ton path au niveau serveur, tu devrait être capable de déterminer l'enchainement des traits à faire: il faut travailler en relatif et faire un peu de trigonométrie.

D'ailleurs pour ton problème de bordure des hexagones ou pas, conçoit tes hexagones sans bordures (stroke) et génère un path (en couche intermédiaire) pour représenter les bordures à afficher.

Tu n'aurais pas un premier essai à montrer?

[php_addict]

dans un premier temps tu peut essayer de dessiner avec Inkscape pour te familiariser avec les couches puis de jeter un œil sur le code source du fichier .svg rendu par Inkscape

[Sephi-Chan]

Justement pour tes formes, le path s'y prête bien; tu peux faire tes arêtes ainsi que tes arcs de cercles (ex:http://tecfa.unige.ch/guides/tie/html/svg-intro/svg-intro-4.html#pgfId-1000120923).

Après, comme je l'ai déjà dit, si tu construis ton path au niveau serveur, tu devrait être capable de déterminer l'enchainement des traits à faire: il faut travailler en relatif et faire un peu de trigonométrie.

D'ailleurs pour ton problème de bordure des hexagones ou pas, conçoit tes hexagones sans bordures (stroke) et génère un path (en couche intermédiaire) pour représenter les bordures à afficher.

Tu n'aurais pas un premier essai à montrer?

Voici une petite page de test. La première chose qu'on remarque, c'est l'ajustement qui n'est pas parfait. Peut-être que ma méthode de calcul des positions gagnerait à faire des ajustements, quitte à avoir de micro chevauchements.

dans un premier temps tu peut essayer de dessiner avec Inkscape pour te familiariser avec les couches puis de jeter un œil sur le code source du fichier .svg rendu par Inkscape

Hélas, cette technique ne marche pas trop dans mon cas. ^^


En tout cas, tout ça me fait bien chier. :p Les hexagones ont un bon pouvoir visuel, mais c'est un peu chiant à ajuster.