Réalisations /

Cartes interactives


Travail collaboratif. Création de cartes interactives sous Leaflet incluant des panoramas 360° des environnements du jeu vidéo Guild Wars.
#JavaScript Projet en cours

Informations

Présentation auprès de la communauté Guild Wars sur Reddit avec un retour très positif.

Ce projet est un travail collaboratif.

Ces cartes interactives sont un support d'aide pour les joueurs de Guild Wars en reprenant les éléments du jeu et en y ajoutant des informations et des fonctionnalités complémentaires comme : 

  • L'intégralité des missions et des quêtes avec tracé précis de l'itinéraire à suivre pour les compléter
  • Des panoramas 360° des paysages et des lieux importants
  • Des points d'intérêt et les activités quotidiennes
  • Un moteur de recherche et un filtrage pour les quêtes

Mise en place de la carte interactive

  • Utilisation de la librairie leaflet.js comme base pour la carte interactive
  • Création des tiles de la carte du monde avec la librairie de traitement d'images libvips
  • Création d'un back-end pour la gestion complète du contenu des cartes (points d'intérêt, avant-postes, tracés, panoramas, etc)
  • Incorporation et modification de plugins Leaflet du système de recherche, des filtres des quêtes, de la création des tracés, etc
  • Personnalisation et création de très nombreux éléments afin de se détacher de l'apparence native de Leaflet

 

Processus de création et d'affichage des panoramas

  • Prise d'une centaine de captures d'écran 4K par panorama
  • Utilisation d'un logiciel d'assemblage d'images comme Microsoft Image Composite Edition (ICE) pour analyser et assembler les captures d'écran afin de former une image en projection cylindrique équidistante
  • Retouche de l'image si nécessaire (lors de rémanence d'élements par exemple)
  • Visualisation de l'image en panorama 360/180° grâce à la librairie pannellum.js
  • Ouverture en modal plein écran avec sweetalert2.js