Sono sempre stato affascinato dalle mappe. Lo ammetto. Fin da quando ero un pischello che alle scuole medie si bruciava tutti i librogame di Lupo Solitario passavo ore a cercare di mettere insieme quelle due paginette all'inizio di ogni capitolo della saga che ritraevano un pezzo di Magnamund nel tentativo di ricreare la visione d'insieme di quel mondo fantastico.
Con la scoperta di D&D e le prime campagne, passavo interi pomeriggi a creare le mappe delle ambientazioni che avrei voluto usare per le mie avventure, anche se alla fine si ripiegava sempre su Mystara perché il risultato finale non mi convinceva mai appieno (non è che sia sta cima a disegnare...).
Poi è arrivata l'era digitale, e basta frugare nel web per trovare mappe stilosissime già pronte (conoscete cartographersguild.com?), oppure basta fare un po' di pratica con Photoshop/PaintShopPro/GIMP per crearsi le proprie o ancora rivolgersi a software specializzati come Campaign Cartographer 3, Dunjinni o Fractal Mapper per sbizzarrirsi con le proprie creazioni.
Anni fa ho creato con le mie manine la mappa per la mia ambientazione, mixando scanner e PaintShopPro alla bene e meglio ed è uscito questo.
Di recente, per la nuova campagna di Dungeon World ambientata nel medesimo continente in tempi diversi, ho rivisto leggermente lo stile giochicchiando con un po' di funzioni strane del succitato software, arrivando a questo, e ottenendo una mappa che più si adatta ai principi di Dungeon World (draw maps, leave blanks - disegna mappe, lascia spazi vuoti). Ma poco importa, non è ciò di cui voglio parlare.
Dato che la mappa ha una estensione notevole e giocando in una parte specifica del continente si rischia di dover piazzare un sacco di note in un area che stampata è grande 3 x 3 cm, qualche giorno fa mi son detto: "Certo che sarebbe comodo se potessi usare GoogleMaps per zoomare e mettere i segnalini dei punti d'interesse!"
Non l'avessi mai fatto, questo tarlo non mi ha dato pace per giorni... finché non ho trovato la soluzione!
La procedura è lunghetta ma secondo me non è complicata. Bisogna preparare la mappa all'uopo e poi scrivere un po' di righe in Javascript.
Premessa: io sono un dummy quanto chiunque altro in tutto questo! Ok, me la cavo bene con il PC, so qualcosina di programmazione e conosco giusto tre cosette di HTML, ma Javascript non l'avevo proprio mai masticato. Quindi se ci sono riuscito io, chissà cosa può fare chi di queste cose ci capisce davvero!


Mappe navigabili
Prima questione: come funziona una mappa navigabile? Per farla breve: l'immagine della mappa alla sua massima risoluzione possibile viene "tagliata" a quadratini della dimensione di 256x256 pixel. Poi tramite appositi software si crea una piramide di immagini ridimensionate che riproduca i diversi livelli di zoom, fino ad arrivare al massimo zoom-out dove tutta la mappa si riduce ad un unico quadratino di 256x256 pixel. La dimensione iniziale dell'immagine determina quindi il livello di zoom possibile. Inoltre questo sistema richiede che la mappa sia quadrata (se non lo è, avremo spazi bianchi ai lati).
Quindi ricapitolando possiamo determinare quale deve essere la dimensione della mappa a seconda del livello di zoom desiderato (o viceversa) secondo questo schema (zoom 0 = più lontano):
  • Zoom 0:   256 px
  • Zoom 1:   512 px
  • Zoom 2:   1024 px
  • Zoom 3:   2048 px
  • Zoom 4:   4096 px
  • Zoom 5:   8192 px
  • Zoom 6:   16384 px
  • ...e così via
La versione originale della mia mappa era particolarmente grossa (più di 15000 px) per cui ho scelto di ridimensionarla a 5 livelli di zoom (8192 px). Ovviamente non essendo quadrata avevo già messo in conto di avere ai lati dei margini bianchi.


Bene, una volta stabilita la vostra mappa e ridimensionata alla grandezza desiderata, eccovi un tutorial passo-passo per creare il vostro Google Maps per giochi di ruolo!


MapTiler
Il passaggio successivo è fare lo spezzatino di mappa, cioè creare tutta quella struttura di mattonelle di cui sono composti i vari livelli di zoom.
Ovviamente c'è chi lo fa per noi, ed è MapTiler, un programmino free comodo comodo. Scaricatelo qui. Noterete sul sito di MapTiler che esiste una versione più recente di quella che ho linkato io, ma sconsiglio vivamente di utilizzarla. La versione beta fa tutto ciò che serve, lo fa bene, è gratis ed è facile da usare.
Dopo aver installato MapTiler lanciatelo. Vi apparirà una finestra come questa.


Selezionate Image Based Tiles premete "Continue": non credo che ci sia qualcuno tra voi con una mappa georeferenziata del proprio mondo fantasy! :-)


In questa schermata cliccate su Add per indicare il percorso della vostra mappa da spezzettare. Non cliccate su Georeference, non ne avete bisogno (anzi se lo fate potrebbe farvi casini con il risultato finale). La vostra mappa diventerà automaticamente l'equivalente della Terra in termini di latitudine e longitudine, ovvero l'angolo in alto a sinistra avrà coordinate Lat 90°, Lon -180°, quello in basso a destra Lat -90°, Lon 180°. Queste informazioni saranno utili più tardi quando vedremo come piazzare i segnalini dei punti di interesse.
Cliccate su "Continue".


Non toccate nulla, ancora "Continue".


Specificate i livelli di zoom in base alle dimensioni dell'immagine che avete caricato. MapTiler dovrebbe comunque già suggerirvi il numero di livelli di zoom adatto. Quindi selezionate il formato dei file (in questo esempio userò il JPEG per semplicità). Se per caso il software vi dà problemi con la casella di selezione del formato cliccateci sopra e poi scorrete le opzioni con le frecce direzionali. Poi cliccate su "Continue".


Nella casella Result directory specificate la cartella di destinazione in cui verranno salvate le mattonelle generate da MapTiler. Solo per scomodità in questo tutorial facciamo che sia C:\Users\User\Documents\MappaSpezzettata, ma voi mettete quello che vi pare.
Fregatevene della casella Destination URL, anche se successivamente desiderate caricare la vostra mappa sul web: serve solo nel caso voleste usare GoogleEarth, e voi non volete usare GoogleEarth. Cliccate su "Continue".


Deselezionate tutte le opzioni. Poi ancora "Continue".


Se volete aggiungete il vostro copyright, e lasciate perdere le caselle delle API e ID key. Cliccate "Continue".


Cliccate "Render" e MapTiler inizierà a creare i files. A seconda dei livelli di zoom e della pomposità del vostro PC ci vorrà più o meno tempo. Aspettate fiduciosi.
Alla fine del processo dovreste trovare nella vostra cartella di destinazione una struttura di cartelle simile a questa (tranne per il fatto che le vostre immagini saranno delle JPEG e non delle PNG come le mie, non badateci).


Se tutto è andato liscio ora non resta che crearsi un visualizzatore che faccia quello che normalmente fa GoogleMaps.


Leaflet
Trovare qualcosa che facesse il mestiere di GoogleMaps non è stato semplice.Certo, in qualche modo so che si potrebbe usare anche GoogleMaps stesso, ma io non ci ho capito una mazza di come si fa...
Alla fine sono capitato su Leaflet, sito che offre una libreria JavaScript open-source e spiega nel dettaglio come usarla! Ficherrimo!
Lascio a voi il divertimento di spulciare le millemila funzioni che io non ho utilizzato. Io mi soffermerò solo su ciò che mi è servito per creare il visualizzatore.
Innanzitutto bisogna creare una pagina html oppure copiare il codice nell'editor html del vostro sito web o blog (se volete che il visualizzatore sia "embedded" sul vostro sito). Per semplicità assumiamo di creare il file html in locale sul vostro PC, usando l'onnipresente Blocco Note come editor.
Create un nuovo file di testo (potete metterlo dove vi pare, ma io consiglio la cartella superiore a quella di destinazione di MapTiler), chiamatelo quellochevolete.html e apritelo con Blocco Note.
Copiateci dentro i blocchi di codice man mano che procedo con la spiegazione.


1. Iniziamo con il codice
Il primo blocco serve a richiamare le librerie di Leaflet (credo), copiatelo tal quale e non fatemi troppe domande...

<html>
<head>
    <link rel="stylesheet" 
          href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
</head>

<body>
Con l'ultima riga abbiamo aperto il blocco <body> dove andremo ad aggiungere i vari pezzi e le funzioni del visualizzatore.


2. Dimensioni del visualizzatore e inizio dello script
    <div id="map" style="width: 700px; height: 500px"></div>
Con questa riga si stabiliscono le dimensioni del visualizzatore. Nell'esempio si sono scelte una larghezza (width) di 700 pixel e un'altezza (height) di 500 pixel, ma potete cambiare i parametri a piacimento per adattarli alle vostre esigenze.
Se invece come me desiderate una visualizzazione a tutto schermo che si adatti anche a smartphone e tablet, invece della riga di codice sopra copiate questo codice, che impone all'immagine di riempire in altezza lo schermo del vostro dispositivo:
    <div id="map"></div>
    <style>
      body {
      padding: 0;
      margin: 0;
      }
      html, body, #map {
      height: 100%;
      }
    </style>
A questo aggiungiamo queste righe per avviare lo script (anche qui poche domande, grazie...)
    <script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
    <script>

3. Caricamento della mappa
Copiando le righe seguenti si carica la mappa. Sostituite la parte in rosso con il percorso in cui si sono salvate le mattonelle della mappa attraverso MapTiler, facendo attenzione ad usare le "/" anziché le "\" solite dei percorsi locali.
Attenti inoltre a settare i livelli di zoom (soprattutto quello max) in modo corretto.
Impostando il valore continuousWorld: false anziché true, si fa in modo che la mappa sia continua come se il bordo destro fosse collegato al sinistro.
 var map = L.map('map').setView([0, 0], 2);

 L.tileLayer('file:///C:/Users/User/Documents/MappaSpezzettata/{z}/{x}/{y}.jpg', {
            minZoom: 0,
            maxZoom: 5,
            attribution: 'ScriviQuelCheVuoi',
            tms: true,
            continuousWorld: true
        }).addTo(map);
4. Chiusura dello script
Aggiungete queste poche righe per chiudere lo script e il file HTML e salvate.
    </script>
</body>
</html>
Wonderful! Già così la vostra mappa dovrebbe essere perfettamente visualizzabile! Provate ad aprire il vostro file .html (si aprirà nel vostro browser internet predefinito) e se avete fatto tutto correttamente potrete navigare la vostra mappa zoomando su e giù!



Nella prossima puntata...
Ok, fine prima parte, direi che ho già messo parecchia carne al fuoco. Il procedimento può sembrare complicato, ma fidatevi è più semplice farlo che spiegarlo, e se non fate modifiche particolari allo script e non avete strane pretese vi troverete in un battibaleno con una mappa navigabile del vostro mondo fantasy preferito. Poi per chi volesse approfondire ci sono sempre i tutorial e le API sul sito di Leaflet.
Ma non è tutto ovviamente! Nella prossima parte vi mostrerò come applicare sulla mappa i segnalini con i punti di interesse, addirittura con icone personalizzate!
Nel frattempo spero di essere stato chiaro, è scontato che sono a disposizione di chiunque avesse dubbi, ammesso e non concesso di saper rispondere.

COME CREARE MAPPE NAVIGABILI E VIVERE FELICI (PT. 1)

Sono sempre stato affascinato dalle mappe. Lo ammetto. Fin da quando ero un pischello che alle scuole medie si bruciava tutti i librogame di Lupo Solitario passavo ore a cercare di mettere insieme quelle due paginette all'inizio di ogni capitolo della saga che ritraevano un pezzo di Magnamund nel tentativo di ricreare la visione d'insieme di quel mondo fantastico.
Con la scoperta di D&D e le prime campagne, passavo interi pomeriggi a creare le mappe delle ambientazioni che avrei voluto usare per le mie avventure, anche se alla fine si ripiegava sempre su Mystara perché il risultato finale non mi convinceva mai appieno (non è che sia sta cima a disegnare...).
Poi è arrivata l'era digitale, e basta frugare nel web per trovare mappe stilosissime già pronte (conoscete cartographersguild.com?), oppure basta fare un po' di pratica con Photoshop/PaintShopPro/GIMP per crearsi le proprie o ancora rivolgersi a software specializzati come Campaign Cartographer 3, Dunjinni o Fractal Mapper per sbizzarrirsi con le proprie creazioni.
Anni fa ho creato con le mie manine la mappa per la mia ambientazione, mixando scanner e PaintShopPro alla bene e meglio ed è uscito questo.
Di recente, per la nuova campagna di Dungeon World ambientata nel medesimo continente in tempi diversi, ho rivisto leggermente lo stile giochicchiando con un po' di funzioni strane del succitato software, arrivando a questo, e ottenendo una mappa che più si adatta ai principi di Dungeon World (draw maps, leave blanks - disegna mappe, lascia spazi vuoti). Ma poco importa, non è ciò di cui voglio parlare.
Dato che la mappa ha una estensione notevole e giocando in una parte specifica del continente si rischia di dover piazzare un sacco di note in un area che stampata è grande 3 x 3 cm, qualche giorno fa mi son detto: "Certo che sarebbe comodo se potessi usare GoogleMaps per zoomare e mettere i segnalini dei punti d'interesse!"
Non l'avessi mai fatto, questo tarlo non mi ha dato pace per giorni... finché non ho trovato la soluzione!
La procedura è lunghetta ma secondo me non è complicata. Bisogna preparare la mappa all'uopo e poi scrivere un po' di righe in Javascript.
Premessa: io sono un dummy quanto chiunque altro in tutto questo! Ok, me la cavo bene con il PC, so qualcosina di programmazione e conosco giusto tre cosette di HTML, ma Javascript non l'avevo proprio mai masticato. Quindi se ci sono riuscito io, chissà cosa può fare chi di queste cose ci capisce davvero!


Mappe navigabili
Prima questione: come funziona una mappa navigabile? Per farla breve: l'immagine della mappa alla sua massima risoluzione possibile viene "tagliata" a quadratini della dimensione di 256x256 pixel. Poi tramite appositi software si crea una piramide di immagini ridimensionate che riproduca i diversi livelli di zoom, fino ad arrivare al massimo zoom-out dove tutta la mappa si riduce ad un unico quadratino di 256x256 pixel. La dimensione iniziale dell'immagine determina quindi il livello di zoom possibile. Inoltre questo sistema richiede che la mappa sia quadrata (se non lo è, avremo spazi bianchi ai lati).
Quindi ricapitolando possiamo determinare quale deve essere la dimensione della mappa a seconda del livello di zoom desiderato (o viceversa) secondo questo schema (zoom 0 = più lontano):
  • Zoom 0:   256 px
  • Zoom 1:   512 px
  • Zoom 2:   1024 px
  • Zoom 3:   2048 px
  • Zoom 4:   4096 px
  • Zoom 5:   8192 px
  • Zoom 6:   16384 px
  • ...e così via
La versione originale della mia mappa era particolarmente grossa (più di 15000 px) per cui ho scelto di ridimensionarla a 5 livelli di zoom (8192 px). Ovviamente non essendo quadrata avevo già messo in conto di avere ai lati dei margini bianchi.


Bene, una volta stabilita la vostra mappa e ridimensionata alla grandezza desiderata, eccovi un tutorial passo-passo per creare il vostro Google Maps per giochi di ruolo!


MapTiler
Il passaggio successivo è fare lo spezzatino di mappa, cioè creare tutta quella struttura di mattonelle di cui sono composti i vari livelli di zoom.
Ovviamente c'è chi lo fa per noi, ed è MapTiler, un programmino free comodo comodo. Scaricatelo qui. Noterete sul sito di MapTiler che esiste una versione più recente di quella che ho linkato io, ma sconsiglio vivamente di utilizzarla. La versione beta fa tutto ciò che serve, lo fa bene, è gratis ed è facile da usare.
Dopo aver installato MapTiler lanciatelo. Vi apparirà una finestra come questa.


Selezionate Image Based Tiles premete "Continue": non credo che ci sia qualcuno tra voi con una mappa georeferenziata del proprio mondo fantasy! :-)


In questa schermata cliccate su Add per indicare il percorso della vostra mappa da spezzettare. Non cliccate su Georeference, non ne avete bisogno (anzi se lo fate potrebbe farvi casini con il risultato finale). La vostra mappa diventerà automaticamente l'equivalente della Terra in termini di latitudine e longitudine, ovvero l'angolo in alto a sinistra avrà coordinate Lat 90°, Lon -180°, quello in basso a destra Lat -90°, Lon 180°. Queste informazioni saranno utili più tardi quando vedremo come piazzare i segnalini dei punti di interesse.
Cliccate su "Continue".


Non toccate nulla, ancora "Continue".


Specificate i livelli di zoom in base alle dimensioni dell'immagine che avete caricato. MapTiler dovrebbe comunque già suggerirvi il numero di livelli di zoom adatto. Quindi selezionate il formato dei file (in questo esempio userò il JPEG per semplicità). Se per caso il software vi dà problemi con la casella di selezione del formato cliccateci sopra e poi scorrete le opzioni con le frecce direzionali. Poi cliccate su "Continue".


Nella casella Result directory specificate la cartella di destinazione in cui verranno salvate le mattonelle generate da MapTiler. Solo per scomodità in questo tutorial facciamo che sia C:\Users\User\Documents\MappaSpezzettata, ma voi mettete quello che vi pare.
Fregatevene della casella Destination URL, anche se successivamente desiderate caricare la vostra mappa sul web: serve solo nel caso voleste usare GoogleEarth, e voi non volete usare GoogleEarth. Cliccate su "Continue".


Deselezionate tutte le opzioni. Poi ancora "Continue".


Se volete aggiungete il vostro copyright, e lasciate perdere le caselle delle API e ID key. Cliccate "Continue".


Cliccate "Render" e MapTiler inizierà a creare i files. A seconda dei livelli di zoom e della pomposità del vostro PC ci vorrà più o meno tempo. Aspettate fiduciosi.
Alla fine del processo dovreste trovare nella vostra cartella di destinazione una struttura di cartelle simile a questa (tranne per il fatto che le vostre immagini saranno delle JPEG e non delle PNG come le mie, non badateci).


Se tutto è andato liscio ora non resta che crearsi un visualizzatore che faccia quello che normalmente fa GoogleMaps.


Leaflet
Trovare qualcosa che facesse il mestiere di GoogleMaps non è stato semplice.Certo, in qualche modo so che si potrebbe usare anche GoogleMaps stesso, ma io non ci ho capito una mazza di come si fa...
Alla fine sono capitato su Leaflet, sito che offre una libreria JavaScript open-source e spiega nel dettaglio come usarla! Ficherrimo!
Lascio a voi il divertimento di spulciare le millemila funzioni che io non ho utilizzato. Io mi soffermerò solo su ciò che mi è servito per creare il visualizzatore.
Innanzitutto bisogna creare una pagina html oppure copiare il codice nell'editor html del vostro sito web o blog (se volete che il visualizzatore sia "embedded" sul vostro sito). Per semplicità assumiamo di creare il file html in locale sul vostro PC, usando l'onnipresente Blocco Note come editor.
Create un nuovo file di testo (potete metterlo dove vi pare, ma io consiglio la cartella superiore a quella di destinazione di MapTiler), chiamatelo quellochevolete.html e apritelo con Blocco Note.
Copiateci dentro i blocchi di codice man mano che procedo con la spiegazione.


1. Iniziamo con il codice
Il primo blocco serve a richiamare le librerie di Leaflet (credo), copiatelo tal quale e non fatemi troppe domande...

<html>
<head>
    <link rel="stylesheet" 
          href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
</head>

<body>
Con l'ultima riga abbiamo aperto il blocco <body> dove andremo ad aggiungere i vari pezzi e le funzioni del visualizzatore.


2. Dimensioni del visualizzatore e inizio dello script
    <div id="map" style="width: 700px; height: 500px"></div>
Con questa riga si stabiliscono le dimensioni del visualizzatore. Nell'esempio si sono scelte una larghezza (width) di 700 pixel e un'altezza (height) di 500 pixel, ma potete cambiare i parametri a piacimento per adattarli alle vostre esigenze.
Se invece come me desiderate una visualizzazione a tutto schermo che si adatti anche a smartphone e tablet, invece della riga di codice sopra copiate questo codice, che impone all'immagine di riempire in altezza lo schermo del vostro dispositivo:
    <div id="map"></div>
    <style>
      body {
      padding: 0;
      margin: 0;
      }
      html, body, #map {
      height: 100%;
      }
    </style>
A questo aggiungiamo queste righe per avviare lo script (anche qui poche domande, grazie...)
    <script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
    <script>

3. Caricamento della mappa
Copiando le righe seguenti si carica la mappa. Sostituite la parte in rosso con il percorso in cui si sono salvate le mattonelle della mappa attraverso MapTiler, facendo attenzione ad usare le "/" anziché le "\" solite dei percorsi locali.
Attenti inoltre a settare i livelli di zoom (soprattutto quello max) in modo corretto.
Impostando il valore continuousWorld: false anziché true, si fa in modo che la mappa sia continua come se il bordo destro fosse collegato al sinistro.
 var map = L.map('map').setView([0, 0], 2);

 L.tileLayer('file:///C:/Users/User/Documents/MappaSpezzettata/{z}/{x}/{y}.jpg', {
            minZoom: 0,
            maxZoom: 5,
            attribution: 'ScriviQuelCheVuoi',
            tms: true,
            continuousWorld: true
        }).addTo(map);
4. Chiusura dello script
Aggiungete queste poche righe per chiudere lo script e il file HTML e salvate.
    </script>
</body>
</html>
Wonderful! Già così la vostra mappa dovrebbe essere perfettamente visualizzabile! Provate ad aprire il vostro file .html (si aprirà nel vostro browser internet predefinito) e se avete fatto tutto correttamente potrete navigare la vostra mappa zoomando su e giù!



Nella prossima puntata...
Ok, fine prima parte, direi che ho già messo parecchia carne al fuoco. Il procedimento può sembrare complicato, ma fidatevi è più semplice farlo che spiegarlo, e se non fate modifiche particolari allo script e non avete strane pretese vi troverete in un battibaleno con una mappa navigabile del vostro mondo fantasy preferito. Poi per chi volesse approfondire ci sono sempre i tutorial e le API sul sito di Leaflet.
Ma non è tutto ovviamente! Nella prossima parte vi mostrerò come applicare sulla mappa i segnalini con i punti di interesse, addirittura con icone personalizzate!
Nel frattempo spero di essere stato chiaro, è scontato che sono a disposizione di chiunque avesse dubbi, ammesso e non concesso di saper rispondere.

6 commenti:

Ursha e No Akei ha detto...

La cosa è molto interessante e con queste applicazioni Simil GIS si pososno fare delle cose veramente carine, avendo il tempo...

Ale ha detto...

Guarda, tolto il tempo per scoprire come fare che è stato parecchio, per il lavoro in sè ci vogliono sì e no 15 minuti, per cui se hai delle buone idee ti consiglio di provare! Con il prossimo post per piazzare segnalini oltre che carino da vedere diventerà anche comodo da utilizzare!

MaxDZ8 ha detto...

Per coincidenza anche io sto lavorando su mappe per giochi di recente, anche se in modo molto diverso!

Ale ha detto...

in che senso?

Petr Pridal ha detto...

Ora meglio con http://www.maptiler.com/. Vedi: http://youtu.be/9iYKmRsGoxg

Ale ha detto...

I see the new Maptiler also generates a Leaflet viewer together with the tiles.
Thanks for the hint Petr, this makes even easier to build your own game map!