Map Isometrique zoomable ?

[starmindfr]

Bonjour

Pour le jeu Mechaswar nous avons actuellement une carte de la galaxie constituée d'une grande image png ou jpg type 3000*3000px avec les systemes et liaisons entre systeme (donc coordoonées x, y + 1 a 9 liens)

Exemple ici :

http://mechaswar.com/images/tempimg/18.jpg


Nous recherchons une librairie ou méthode pour a la place, faire une galaxie zoomable afin d'affiner la position du joueur, jusqu’à voir le système stellaire actuel.

La premiere idée basique serait de découper la carte actuelle en 4 zone ou plus et afficher les png des zones lors du clic mais cela sous entend chargements et effet visuel moyen.

Donc j'ai songer a un système plus sous forme de CSS - ensemble de points tracés et lignes - infos qui réponde a la roulette souris pour étirer l'ensemble et afficher plus d'infos en direct sans rechargement.

Je suppose que cela existe en open source ou en script quelque part ? Le but étant aussi de rester sur du html / Css sans nécessiter du flash ou client a télécharger.

Voili voila si c'est pas clair du tour j’éditerai merci

[Xenos]

A voir, car je n'en suis pas sûr: SVG répond très bien au zoom (la méthode de zoom étant définie par le navigateur, par exemple Ctrl+molette sur FF ou Ctrl++/-). Il se peut (et le doute est là) que SVG offre une forme de "n'afficher que si le zoom est suffisant", auquel cas il créer la carte en format SVG et de définir à partir de quand tel élément doit s'afficher.

Si SVG ne le propose pas, je n'ai pas de bibliothèque toute faite pour ce genre de problème, mais il sera possible de:
• Poser une classe indiquant le niveau de zoom de chaque élément (class="zoom-1", "zoom-2" etc)
• De récupérer le niveau de zoom (à voir comment cela se fait, google devrait aider, l'intérêt étant que le navigateur gère la commande du zoom et donc, cette commande sera forcément adaptée au support ce qui fait moins de boulot pour le dev du site)
• Masquer les classes dont le niveau de zoom est hors cadre (aka masquer tout sauf zoom-1 quand on est dézoomé au max et masquer tout sauf zoom-5 quand on est zoomé à la moitié)

Pour l'idée basique, elle s'appelle Quadtree: elle consiste à découper une zone d'affichage en 4, constituant ainsi 4 nouvelles zones, que l'on peut redécouper à loisir (et on forme un arbre, facile d'y naviguer ou d'y zoomer).

[starmindfr]

Bonjour

Merci pour la réponse.

Sinon une suggestion pour la modelisation ? Coté SVG je prefererait m'en passer dans la mesure du possible pour avoir une plus grand compatibilité de navigateurs. Je suppose qu'avec du JS , CSS et voir jquery il est possible de faire pas mal de tracage - polygones

[niahoo]

Le support de SVG est pas mal. Sinon canvas mais faire des dessins en HTML, bien que possible, relève du masochisme. Surtout que bon, jQuery c'est pas un framework de dessin quoi.

[Xenos]

A part les animations qui ne sont pas toujours pris en charge par les téléphones, svg est pris en charge par les navigateurs récents. À part les vieux Internet explorer, tu ne devrais pas avoir de problèmes de compatibilité. Regardes sur CanIUse si tu veux t'en convaincre

(et Niahoo a raison: tu pourras utiliser des logiciels de dessin pour faire la base de tes SVG et ensuite, les insérer dans le code, cela aide par rapport à un JQuery pur et dur où il te faudrait tout dessiner "de tête")

[Ter Rowan]

je dirais svg aussi même si j'ai un problème de clip path avec la version de chrome que j'utilise

[starmindfr]

oki merci je vais googliser svg galaxy maps pour voir ce que je trouve

Edit : et donc au final pour ceux qui connaissent j'aimerais obtenir quelque chose comme la carte galactique de eve online que l'ont peut faire bouger facilement :

http://sparklin.org/wp-content/uploads/2...ap.jpg.png

[@lucard]

quelques lien qui porront t'interesser sur les map svg :
https://github.com/escobar5/raphael-pan-zoom
[exemple]

jQuery Vector Map
https://github.com/manifestinteractive/jqvmap
[exemple]

bon courage et bonne continuation =)

[starmindfr]

merci je vais tester un poil tout ca