JeuWeb - Crée ton jeu par navigateur
Gestion des évènement pour une carte 2D isométrique - Version imprimable

+- 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

RE: Gestion des évènement pour une carte 2D isométrique - supermeganono - 22-03-2012

Merci pour toutes les idées.

Donc finalement mon test en cours est :

- un div conteneur qui contient le tout en relative
- une multitude de div qui vont s’occuper de créer la carte comme afficher dans l'exemple avec maintenant un z-index:-1 et en position absolute ( ce qui rend la carte beaucoup plus légère qu'une seule image de toute la carte )
- un div qui contient :
* un pixel de 1*1 transparent qui va servir de support pour la map area en z-index:2 et qui prend les 900px de large et 500px de haut pour couvrir toute la surface
* La map area fixer sur le pixel transparent
Dans tous les cas, je garderai ça au dessus pour garder l'interactivité.
- et un dernier div pour des divs généré en php selon la présence d'un objet ( planète, vaisseau, soleil etc... ) qui se placeront derrière le pixel transparent histoire de garder le map area actif en z-index : 1


La map area semble fonctionner mais j'ai pas eu le temps de tester plus ce soir, avoir l'idée c'est déjà pas mal. Je test demain et je vous tiens au courant !

Merci !

RE: Gestion des évènement pour une carte 2D isométrique - php_addict - 22-03-2012

faut tester sur tout les navigateurs communs, opera, chrome, ie, ff, safari, etc...

RE: Gestion des évènement pour une carte 2D isométrique - supermeganono - 22-03-2012

http://www.damocorp.com/test.php C'est fonctionnel.

Donc si quelqu'un tombe sur le sujet et est intéressé voici le code :
( ce code est un code test, il est donc certainement à améliorer )

Explication : Je possède 5 images pour la réalisation :
  1. Un pixel transparent de 1*1 que j'étire sur toute la surface de 900*450
  2. Un image de 100*50 qui représente le fond de la carte
  3. Une image de 100*50 qui représente la carte au survol de la souris
  4. Une image de 100*50 qui représente la case sélectionné ( verte )
  5. Une image de 100*50 avec le vaisseau
Niveau optimisation, je compte réaliser une sprite avec tous les vaisseaux, une autre pour les planètes, astéroïdes, stations spatiales. L'affichage se faisant sur le fond, le background-position gèrera l'affichage.
En attendant, j'affiche toutes les cases via les formules en php.
J'y superpose 2 choses : 1 les objets ( planète, vaisseaux etc... ) et 2 l'image de survol au passage de la souris.
Pour finir avec le z-index 2 je superpose tout au dessus, le pixel transparent avec le map area. Ainsi au survol de la souris, seul le map area est actif.
j'ai pas encore programmé la dés-sélection, mais il est clair que ça sera à faire.

Le CSS :
[pastebin]pFiH1BU3[/pastebin]

Niveau php et javascript ( en Jquery ) c'est relativement simple tout est dans les commentaires :
Tout rentre dans le div avec pour classe la carte. Et en css on les superpose via le position:absolute.
[pastebin]dgyc6xRt[/pastebin]


Voila, donc si vous tombez sur ce topic, vous avez la solution mis en place pour la base.
Merci à toutes et tous pour l'aide apportée !
Comme la page test changera pour d'autre test, voici un screenshot du résultat :
[Image: maptest.jpg]