+- 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 : Gestion des évènement pour une carte 2D isométrique (/showthread.php?tid=6043)
Pages :
1
2
Gestion des évènement pour une carte 2D isométrique - supermeganono - 21-03-2012
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 !
RE: Gestion des évènement pour une carte 2D isométrique - Maks - 21-03-2012
Il faut que tu joues sur les z-index
RE: Gestion des évènement pour une carte 2D isométrique - supermeganono - 21-03-2012
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 ^^
RE: Gestion des évènement pour une carte 2D isométrique - Ter Rowan - 21-03-2012
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
RE: Gestion des évènement pour une carte 2D isométrique - Maks - 21-03-2012
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 ^^
RE: Gestion des évènement pour une carte 2D isométrique - php_addict - 21-03-2012
z-index et images semi transparentes png ou gif
RE: Gestion des évènement pour une carte 2D isométrique - niahoo - 21-03-2012
SVG ou canvas ?
RE: Gestion des évènement pour une carte 2D isométrique - Sephi-Chan - 21-03-2012
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é.
RE: Gestion des évènement pour une carte 2D isométrique - php_addict - 21-03-2012
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 :
...#...
..###..
.#####.
#######
.#####.
..###..
...#...(21-03-2012, 08:20 PM)Ter Rowan a écrit : 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 ???
RE: Gestion des évènement pour une carte 2D isométrique - Ter Rowan - 22-03-2012
(21-03-2012, 10:46 PM)php_addict a écrit : 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 :...#...
..###..
.#####.
#######
.#####.
..###..
...#...
(21-03-2012, 08:20 PM)Ter Rowan a écrit : 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