Gestion des évènement pour une carte 2D isométrique

[supermeganono]

Bonjour,

Je me suis intéressé depuis peu à la 2D isométrique que j'aimerai implanté dans mon jeu. Après des tests et différentes solution, j'ai fini par réaliser ce test.

Tout fonctionne superbement bien sauf l’interaction avec la souris.
J'ai testé deux choses pour le moment :

- Des div de 100/50px avec fond d'image
- Des images de 100/50px avec un image map en polygone le tout dans une div

Comme l'une ou l'autre solution consiste à faire des images carrés en position absolute, y'a forcement un moment ou l'une monte sur l'autre. Et c'est bien la le soucis pour la souris. c'est que dans une case, elle se croit sur l'autre ( ce qui est le cas puisque la case est carré ).

Ce qui fait qu'au survol de la souris on peut apercevoir un décalage dans la case survolé.

Quelqu'un aurait une idée ? un indice sur comment je pourrai supprimer ca ?

Des images en triangle ça serait quand même fun ^^


Merci !

[Maks]

Il faut que tu joues sur les z-index

[supermeganono]

mmm j'y avais pensé mais pour le moment rien de concret, faut que je test. Mais même avec le z-index, de tête, y'aura toujours au moins 1 des coin qui empiètera sur un autre.

J'ai pensé à une autre idée, que je dois tester aussi, ce serait un image complète de la taille total de la map ( dans mon cas 9*9 ). Puis de dessiner les losanges grâce au map area avec un id et voir avec le onmouseout si je peut atteindre Jquery pour afficher une image en absolute à la sélection.
Ce qui a mon avis restera problématique car je veux créer un système de multi-sélection et lors de deux sélections côte a côte, je me retrouve confronté aux images qui se chevêtre.


Je vais commencer par tester avec les z-index histoire d'y voir plus clair et voir si je peux en tirer quelque chose.


Merci ^^

[Ter Rowan]

le z-index ne va pas t'aider je pense, les carrés restent carrés, quelque soit l'ordre

je pencherais aussi sur le map area ou encore simplement une image complète, avec identification via javascript de la position x,y de la souris (lors de l'événement qui va bien survol, clic, etc...) et après identification de la / les case(s) sollicitées

[Maks]

Autant pour moi pour les z-index j'ai testé sur fiddle ça ne fonctionne pas

Ca fait tellement longtemps que j'ai pas utilisé CSS pour faire une map, je ne sais même plus comment j'avais géré les clicks ^^

[php_addict]

z-index et images semi transparentes png ou gif

[niahoo]

SVG ou canvas ?

[Sephi-Chan]

SVG ou Canvas fonctionnent, une image map aussi.
Je pense qu'il doit exister une formule pour savoir quelle tuile se trouve sous un point donné.

[php_addict]

je précise:

- pour affichage : des div ayant pour backgound css des images semi transparentes et des z-index cohérents
- pour le survole de ta souris : un <map> et des <area>

exemple de background div: en point la transparence et et dièse ton image (admirer l'ascii art ;-) )

Code :

...#...
..###..
.#####.
#######
.#####.
..###..
...#...

je pencherais aussi sur le map area ou encore simplement une image complète

tu entends quoi par image complete? une seule et même image? dans ce cas il faut générer l'image, c'est vraiment trop lourd non ???

[Ter Rowan]

je précise:

- pour affichage : des div ayant pour backgound css des images semi transparentes et des z-index cohérents
- pour le survole de ta souris : un <map> et des <area>

exemple de background div: en point la transparence et et dièse ton image (admirer l'ascii art ;-) )

Code :

...#...
..###..
.#####.
#######
.#####.
..###..
...#...

je pencherais aussi sur le map area ou encore simplement une image complète

tu entends quoi par image complete? une seule et même image? dans ce cas il faut générer l'image, c'est vraiment trop lourd non ???

ce que j'en ai compris mais c'est pas évident au regard de l'exemple, c'est qu'on est dans le vide intersidéral (une image noire) par case, avec, éventuellement, des vaisseaux sur certaines cases

image complète = une seule image pour l'ensemble de la zone , avec, positionnés à certains endroits des images de vaisseaux, mais sans intérêt pour l'algorithme
de fait pas de css ou de semi transparence, juste une image qui supporte le javascript et / ou le map area

maintenant si on est pas dans l'espace (donc le vide partout pareil) si on peut sélectionner des éléments de décor différents, ça tombe à l'eau, effectivement