Carte 3 isométrique -> Superposition de bâtiments clicables

[Globe]

Bonjour à tous,

Par curiosité je me demandais comment m'y prendre pour réaliser une carte 3D isométrique en utilisant des bâtiments cliquables.

Déjà pour la 3D iso, c'est assez flou pour moi, GD (trop lourd) ?, CSS3 (incompatibilités) ? js ?

Mais là ou ça se complique vraiment à mes yeux ça devient lors de l'ajouts de bâtiments sur cette carte. Pour illustrer j'ai bricolé un petit schéma tout pourri :



Donc imaginons deux bâtiments clicables (un bleu, un rouge). Hachuré en vert on à la zone de superposition du bâtiment bleu sur l'image rouge. Bien sûr j'aimerais que lorsque je clic sur cette partie, cela sélectionne le bâtiment rouge bien que le bâtiment bleu soit au dessus. J'aimerais trouver un moyen autre qu'une area map hyper hasardeux pour parvenir à ce résultat, donc si vous avez des idées, des solutions je suis preneur

[Ter Rowan]

pure hypothèse jamais testée :


utiliser des images en svg
associer l'événement onclick à l'image


en effet, si je ne me gourre pas l'image svg n'est pas un "carré" du coup si on clic sur le clocher bleu, on tombe sur la maison bleu, si on clic a gauche, on tombe sur la tour rouge


mais le pb là, c'est que svg c'est pas partout

---

quand au sujet qualité de l'image (genre image fait via un outil pas svg), on peut imaginer que les zones clicables soient des dessins svg transparent en superposition avec l'image visible qui ne serait pas clicable

[Argorate]

Pour ma part si j'étais obligé de mettre un lien sur des contours comme ça, je ne connais pas d'autres méthodes que la balise <map>.
C'est peut être moche, mais ça permet de définir une zone vectoriel très précis (sauf qu'il n'y a pas la gestion arrondit, donc tu définis ton contour qu'en ligne droite, à la différence de la plume sous photoshop), mais a part ce soucis technique cela marche parfaitement, et avec un onmouseover tu peux même enclencher un effet genre rajouter des bordure au bâtiment au moment du survol etc... Cela reste fidel à la forme que tu définis.

Du coup faudrait modéliser une formes par/bâtiment, mais bon le pc va pas inventé la zone, faut bien la lui donner...

je suis curieux de connaitre d'autres méthodes!?

[Gwym]

Une idée : contourner la difficulté en ne s'occupant que des cases elles même. Au déplacement du curseur bien mettre en évidence la case qui est "visée", et éventuellement modifier légèrement l'affichage du bâtiment concerné, pour qu'on voit lequel se trouve sur la case.

[Sephi-Chan]

Si j'était confronté au problème, je passerais pas une couche d'interaction.

Dans ton cas, ta couche de bâtiment est positionnées au dessus de la couche du damier.

L'idée serait d'avoir une nouvelle couche de damier (sans rien de visible) qui vient par dessus tout ça et qui n'est donc pas encombré par les bâtiments. Et quand tu interagis avec une des tuiles de ta couche d'interaction, ça "renvoie" l'action sur la vraie cible de cette action.


Sephi-Chan

[Argorate]

C'est aussi une bonne méthode je pense, mais cela ne respecte pas le CdC de globe en l'occurrence : cela réagit en losange (le damier invisible incliné dont tu parles) et non avec la forme exacte du bâtiment qui est positionné dessus...
Y a pas un autre moyen?

[Sephi-Chan]

Si, avec SVG, mais ça risque d'être assez compliqué (ça se rapproche du comportement de la balise map).


Sephi-Chan

[Ter Rowan]

Si, avec SVG, mais ça risque d'être assez compliqué (ça se rapproche du comportement de la balise map).


Sephi-Chan

OMG Sephi m'a paraphrasé ^^ du moins c'est ce que j'ai compris non ?

[Sephi-Chan]

En fait, quand j'ai commencé à rédiger ma réponse, aucune autre n'était encore publiée… Mais j'ai pas envoyé tout de suite…

Désolé.


Sephi-Chan

[Ter Rowan]

\\o o// \o/

:p