JeuWeb - Crée ton jeu par navigateur
Une carte du monde interactive - 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 : Une carte du monde interactive (/showthread.php?tid=6604)



Une carte du monde interactive - Netthos - 18-01-2013

Re-bonjour à tous,

Je réfléchis beaucoup à mon projet ces derniers temps. J'ai oublié de le dire dans la présentation de mon projet, mais je compte utiliser cakePHP puisqu'il semblerait que les frameworks soient à la mode. Mais j'apprends assez doucement pour le moment à l'utiliser. Mais c'est vrai que c'est bien pratique niveau temps à gagner. Cependant il faut vraiment rapprendre pas mal de chose...

Bref, je ne suis pas là pour parler de ça, mais pour vous demander des marches à suivre pour la création d'une carte. J'ai écumé les sujets déjà posté sur le forum sans trop trouver ce dont j'aurais besoin.

Ce que j'aimerais pour mon jeu, c'est recréer une carte du monde "pseudo-réelle". Càd reprendre les continents actuels (du moins leur formes grossièrement), et de créer une sorte de pangée (càd coller quelques continents les uns aux autres). J'aimerais que le rendu ressemble à quelque chose de claire de ce style :

[Image: stock-vector-world-map-illustration-98703002.jpg]

Et qu'on puisse zoomer sur la carte pour retrouver le pays du joueur (qui devra être découpé aléatoirement à l'inscription). De ce style :

[Image: vector-map-mexique_65927.jpg]

Je vais peut-être viser un peu haut, mais j'aimerais qu'on puisse modifier les frontières au fur et à mesure (en fonction des guerres de gagnées ou de la conquêtes de territoires non occupés).

Je n'ai jamais créé de cartes et je n'ai vraiment aucune idée de comment faire, avec quels outils. Sachant que le JS ou autres langages du style me sont presque inconnus.

Merci d'avance de vos conseils !


RE: Une carte du monde interactive - starmindfr - 18-01-2013

Bonjour

une petite idée, ne veux tu pas juste colorier l’intérieur des zones avec la couleur du joueur ? c'est probablement plus facile que de modifier les frontières des zones ?


RE: Une carte du monde interactive - Netthos - 18-01-2013

Ca peut être une idée ! Mais cela signifie prédécouper TOUTES la carte du monde en assez de morceau pour palier au nombre futurs de joueurs ? Faire plusieurs milliers de pays, ça risque d'être long... (ou alors je n'ai pas compris où tu voulais en venir).

Je viens de tomber là-dessus : http://www.jaffredo.com/2012/tutoriel-jquery-creer-ses-propres-cartes-pour-jvectormap-et-jqvmap/

Quelqu'un aurait déjà essayé ?


RE: Une carte du monde interactive - Sephi-Chan - 18-01-2013

L'outil que tu présentes est très bien, d'autant qu'il utilise SVG qui sera un précieux allié à l'aspect dynamique, en revanche, pour redessiner les frontières, il faudra intervenir sur les tracés, à toi de voir comment intégrer ce processus ça à ton jeu.

PS : La carte de la Pangée existe en SVG.


RE: Une carte du monde interactive - Netthos - 18-01-2013

Merci Sephi-Chan pour cette carte. Je pense la reprendre pour mon monde, du moins la forme.

Mais je n'ai aucune qualité en tant que graphiste, et je ne sais pas trop par où commencer pour réussir à créer quelque chose d'intégrable :/

Comment délimiter des frontières et séparer la carte pour chaque nouveau joueur qui s'inscrit ?

Comment l'intégrer dans le code ? Permettre les zooms ? Franchement, je n'ai aucune connaissance là dedans et je ne sais pas quel outil utiliser...


RE: Une carte du monde interactive - niahoo - 18-01-2013

Pour pouvoir modifier des frontières facilement il faut que tu t'intéresses au modèle arc/noeud je pense. Au lieu d'avoir des couches géographiques composées de polygones dont les frontières sont superposées, ton monde est représenté par un graphe de points étant en relation les uns avec les autres, formant les frontières.

Ainsi pour bouger une frontière tu changes simplement de place les points qui la composent. Pour scinder une province en deux, tu intercales de nouveaux points sur deux des arcs qui en forment les bords puis tu ré-établis les relations concernées afin d'avoir une nouvelle frontière au milieu.


RE: Une carte du monde interactive - Netthos - 18-01-2013

Très intéressant ce que tu dis là niahoo ! Tu aurais des ressources pour expliquer un peu tout ça en profondeur ?
Et comment intégrer ça à la carte elle-même ?

Je suis vraiment novice dans tout ça, je ne m'y étais jamais intéressé auparavant.


RE: Une carte du monde interactive - niahoo - 19-01-2013

hélàs il n'y a pas grand chose comme ressources.. et je ne sais pas trop comment identifier les polygones délimités par les arcs. Il y a des logiciels pour faire ça, comme ArcGIS ou Géoconcept mais on ne peut pas vraiment baser un jeu dessus, ce sont des bases de données géo.

à la limite tu oublies l'utilisation des arcs pour conceptualiser la chose : tu définis simplement tous tes points (champs X et Y en base de données) et tu identifies les polygones délimités par ces points (table de relation polygone/liste de points ordonnés).

Quand tu crées un nouveau point, il doit forcément venir s'intercaler entre deux autres points dans les listes ordonnées de tous les polygones concernés. Pour scinder un polygone en deux, tu commences donc par créer un ou deux nouveaux points. (tu peux en créer un seul et réutiliser un autre point existant à condition qu'il ne soit pas un des deux points entre lesquels tu intercales le premier. Ensuite, tu modifies la liste ordonnée de points du polygone à scinder en coupant les points qui se trouvent entre les deux nouveaux points. Le nouveau polygone issu de la scission est simple à définir : le 1er nouveau point, les points qui ont été coupés, et le second nouveau point.



Voilà l'idée, je sais pas si c'est très clair. ça doit être assez lourd à organiser en base de données parce que potentiellement le même point va se trouver dans de nombreuses listes. Malheureusement je ne connais pas de librairies pour faire ça mais si tu abstrais le chargement et la sauvegarde des données, la logique doit pouvoir s'implémenter en une centaine de lignes.

(edit: attention, si ton polygone est concave, et que le nouvel arc dessiné par les deux nouveaux points se trouve en dehors du polygone, alors c'est un autre polygone qui sera scindé -- sauf que tu n'auras pas prévu d'éditer la liste de points de cet autre polygone. Il faut donc penser à vérifier ça et c'est tout de suite beaucoup plus chiant & + de code)

Pour les ressources, on trouve pas grand chose sur "arc noeud" sur google. En anglais tu peux chercher "nodes faces edges" mais c'est pas terrible non plus, la plupart des bases de données SIG utilisent plutot des polygones aux bords superposés (tous les points d'angles sont dupliqués) par défaut.

Pour dessiner ça sur une carte, et ben ... à toi de voir Smile puisque tu as tes X et Y pout tous tes points, et comme chaque polygone a sa liste de points ordonnés, il suffit de donner les points dans ce même ordre à ta lib qui dessine et ça devrait faire des chocapics.


RE: Une carte du monde interactive - Netthos - 19-01-2013

Bon, si j'ai bien compris, et comme j'ai pas trop compris, je crois que je vais aller voir cette histoire de polygones de plus prêt !