+- 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 : Une carte interactive, méthode la plus optimale ? (/showthread.php?tid=7646)
Une carte interactive, méthode la plus optimale ? - L'Omniscient - 11-05-2016
Bonjour,
Je suis actuellement en train de travailler sur ma carte interactive.
Pour l'instant j'en suis au découpage des régions. En gros la carte sera divisée en 6 et au survol des différentes régions la partie en question s'illuminera.
J'ai déjà réalisé quelque chose de ce genre, mais pour le faire j'ai copié 6 fois mon image de carte initiale, et lorsqu'on passe au survol d'une zone définie par un <map></map> et des <area/> avec coordonnées, ça remplace l'image inititiale par une autre image de la carte dans laquelle j'ai illuminé la zone survolée.
Le problème de cette méthode, c'est que je duplique l'image 6 fois, alors que je pourrai me contenter de récupérer que certaines parties de l'images à illuminer, en les affichant à l'endroit exact de l'élément dans l'image (via la position indiquée dans area).
Y-a-t-il un moyen du coup d'optimiser en ne rechargeant que les parties en surbrillance plutôt que de remplacer l'image de base par la même image en illuminant la partie survolée ? Voire même, avec le area et je JS, de directement modifier la luminosité d'un seule partie de l'image. (A la façon d'une sélection dans un logiciel de graphisme qui permet de n'illuminer que l'intérieure de la sélection).
Ou tout autre méthode qui soit la moins loudre possible.
Merci d'avance aux graphismes
(oh grand @alucard, viens m'éclairer de ton savoir)
RE: Une carte interactive, méthode la plus optimale ? - didawin - 11-05-2016
(11-05-2016, 08:55 PM)LOmniscient a écrit : Bonjour,
Je suis actuellement en train de travailler sur ma carte interactive.
Pour l'instant j'en suis au découpage des régions. En gros la carte sera divisée en 6 et au survol des différentes régions la partie en question s'illuminera.
J'ai déjà réalisé quelque chose de ce genre, mais pour le faire j'ai copié 6 fois mon image de carte initiale, et lorsqu'on passe au survol d'une zone définie par un <map></map> et des <area/> avec coordonnées, ça remplace l'image inititiale par une autre image de la carte dans laquelle j'ai illuminé la zone survolée.
Le problème de cette méthode, c'est que je duplique l'image 6 fois, alors que je pourrai me contenter de récupérer que certaines parties de l'images à illuminer, en les affichant à l'endroit exact de l'élément dans l'image (via la position indiquée dans area).
Y-a-t-il un moyen du coup d'optimiser en ne rechargeant que les parties en surbrillance plutôt que de remplacer l'image de base par la même image en illuminant la partie survolée ? Voire même, avec le area et je JS, de directement modifier la luminosité d'un seule partie de l'image. (A la façon d'une sélection dans un logiciel de graphisme qui permet de n'illuminer que l'intérieure de la sélection).
Ou tout autre méthode qui soit la moins loudre possible.
Merci d'avance aux graphismes
Hello !
J'avais ce système sur les premières "maquettes" de mon projet (j'ai retiré cette option suite à la révision générale de mon design)
Je ne sait pas si c'est la meilleure option mais voila comment j'ai procédé :
l'image que j'affichais à chaque survol faisait la même taille que l'original, mais elle ne comportais que la partie survolé en clignotement (gif), le reste étais un fond transparent, ce qui fait que l'image étais moins lourde que charger à chaque fois l'original.
RE: Une carte interactive, méthode la plus optimale ? - Xenos - 11-05-2016
Salut,
Tu peux passer sur du SVG: tu mets ton image de fond dans le SVG (<image xlink:href>) et par-dessus, les polygones délimitant les zones (<path d=>). Ensuite, au passage de la souris sur un polygone (svg path:hover) tu peux modifier l'esthétique de ce polygone (stroke: red; stroke-width:5px
.Pour faire l'effet d'illumination, tu peux aller piocher dans ma zone de tests (je crois même que cette méthode était d@lucard): il te suffit de regarder la source pour voir comment est fait l'effet d'illumination intérieur du polygone-jaune-qui-bouge. Ou cette version-là. Note qu'il faudra peut-être définir l'image de la map en guise d'image de fond du polygone "glow" (en la plaçant correctement).
Après, à toi de voir si t'as vraiment besoin du inner glow: le stroke tout seul est 100x plus simple
.
RE: Une carte interactive, méthode la plus optimale ? - L'Omniscient - 11-05-2016
Ah oui Didawin, pas bête ^^
Xenos, l'image de fond peut être de n'importe quel format ? (jpg, png ?)
J'avais regardé les exemples de @lucard, mais je ne comprends pas bien comment ça fonctionne.
D'autre part, quand tu parle de modifier l'esthétique d'un polygone, tu parles juste du contours, d'une image intérieure style fond, ou d'une image située sous le polygone ?
(Je ne vois pas l'effet d'illumination sur l'exemple que tu m'as donné).
RE: Une carte interactive, méthode la plus optimale ? - Xenos - 11-05-2016
N'importe quelle image fonctionne. Le principe est de créer un objet "pattern" en SVG, qui est une texture qui sera posé sur un autre objet SVG (le polygone de contour par exemple). La texture (le pattern) peut donc contenir n'importe quoi (des <image/>, des <circle> etc).
L'effet, dans ton cas, serait simplement d'ajouter un contour au polygone délimitant ta zone: le polygone est toujours affiché, mais est transparent en temps normal et sans contour. Quand tu passes ta souris dessus, le style du polygone change (ce qui peut donc être fait en CSS): on définit alors un contour, qui semble "apparaitre" (puisqu'on ne voyait pas le polygone avant). L'image serait donc un arrière-fond statique, avec des polygones transparents devant qui sont stylisés pour avoir un contour quand la souris leur passe dessus.
Autre exemple avec une texture de fond
Si tu regardes les sources, tu verras un <circle> pour la planète, avec un CSS:fill permettant de mettre une texture dessus (+ un CSS:filter pour l'effet sphérique, mais cela ne te concerne pas). Un autre <circle> est placé par-dessus, et est transparent. Son contour est définit à "gold" quand la souris passe dessus, ce qui donne l'impression que la zone est "entourée" quand on la survole (en fait, c'est un "masque" devant la carte / devant la planète qui est entouré et non la carte elle-même).