www.oldgames.sk/dungeon-mapper/

Kreslenie máp k dungeon-crawlerom, alebo všeobecne k RPG hrám bola vždy moja obľúbená činnosť. Najčastejšie používanými nástrojmi pri mapovaní sú u mňa zrejme ceruzka a štvorčekovaný papier, predovšetkým preto, že to bolo najjednoduchšie a zároveň prehlbovalo atmosféru blúdenia zatuchlými kobkami vytváraním niečoho hmatateľného. Takýchto fyzických pripomienok svojich virtuálnych zážitkov mám plný šuflík. Problémom mapovania v takejto forme bola jednoznačne editovateľnosť. Pri potrebe niečo zmeniť, prípadne opraviť chybu mi časom pod rukami vznikali neprehľadné mazanice a nutnosť v neskorších fázach mapu nanovo prekresliť.

Už len ten problém na samotnom začiatku, predo mnou na počítači nová kobka, na stole čistý štvorčekovaný papier formátu A4. Po rozvážnom zanalyzovaní možného rozloženia mapy zapichujem ceruzku niekde do stredu a ako tak postupujem, je mi jasné, že som trafil zrovna nejaký okraj a mapa bude pokračovať na druhej strane papiera. Grrrr...

Ale nie o tom som chcel, bude to tu o kreslení virtuálnych máp na počítači a nástrojov k tomu používaných.

Pri vytváraní máp vo virtuálnej podobe som vyskúšal už množstvo softvéru, bohužiaľ žiadny mi zatiaľ "nesadol" a nakoniec som aj tak skončil vo fotošope, kde som nebol ničím obmedzený. Nutne dodávam, že mapy som v tomto grafickom programe robil už z pripravených podkladov, či už z máp urobených na papier, z "nedokonalých" automáp v hre (Evil's Doom), alebo vytváraním mapy sveta spájaním obrázkov z hry (Dragonflight).

V príslušnej téme v diskusii sme taktiež riešili rôzne nástroje, množstvo hráčov vytvára mapy v tabuľkovom procesore - Exceli a vôbec to nevyzerá zle (viď mapy od Quida), ale ja som si na to proste zvyknúť nemohol. V poslednej dobe som skúšal Grid Cartographer Pro, ale tiež som to vzdal. Na webe sa už pár rokov vyskytuje celkom praktický nástroj Dungeon Crawl Map Editor, pre kreslenie máp priamo v browseri. Veľkou výhodou je jeho nenáročnosť, dá sa prakticky použiť pri mapovaní, ale chýba mi tam možnosť poznámkovať a viac funkcií. Týmto programom som sa aj inšpiroval pri návrhu toho vlastného:

Dungeon Mapper

Tož to je to, čomu sa v posledných dňoch voľnočasovo venujem. Snažím sa vytvoriť niečo praktického, použiteľného pre všetkých, čo si radi vytvárajú vlastné mapy k dungeonom a predovšetkých chcem, aby tie výsledné produkty dobre vyzerali.

Aktuálnu verziu nájdete na: www.oldgames.sk/dungeon-mapper/

Mapa by mala mať svoj jednoduchý a prehľadný, schématický štýl, jedným z cieľov je aj to, aby dobre vyzerala v čierno-bielych farbách, prípadne vytlačená na čb tlačiarni. Ďalšou dôležitou vecou bola možnosť poznámkovania mapy aspoň dvoma typmi značiek a automatické vytváranie legendy. Jedna značka pre poznámku je teda klasické koliesko s viditeľným ľubovoľným dvojznakových označením a ďalšia je "excelovského typu" teda malý červený štvorček v rohu tak aby neprekážal značkám na danom políčku. Poznámky sú samozrejme viditeľné aj ako tooltipy nad kurzorom.

Zopár technických: pre tento editor značne využívam jQuery a jQuery UI, samotná oblasť mapy je tvorená kockami (html elementmi typu span) celkovo v ôsmych vrstvách nad sebou, čo znamená, že pri väčších mapách to môže trošku zlenivieť. Každé políčko môže mať svoj obrázok, pre ktorý využívam background-image v CSS.  Nie som schopný zistiť, prečo prehliadač Google Chrome nevie zobraziť viac obrázkových pozadí v elemetoch "nad sebou", a preto zatiaľ v Chome nevidno čo je nakreslené (aj keď to tam je) - používajte teda Firefox a Explorer. Podporuje všetky moderné prehliadače.

Vrstvy - layers: snažil som sa ich urobiť tak, aby sa dali jednotlivé prvky kombinovať a jednoducho tak vytvoriť nové s použitím čo najmenšieho počtu nástrojov, príklad - ak chcem nakresliť dvere priechodzie jedným smerom, použijem v jednej vrstve ikonku dverí a v druhej šípku, podobne pri jednosmernej stene, nie je potrebné mať pre každý typ vlastný nástroj.

Viditeľných vrstiev je 6, zoradené od najspodnejšej:

• GRID - podklad, mriežka mapy, mám tam zatiaľ zopár farebných možností
• FLOOR - pre kreslenie podkladov v zmysle celého "hrubého" štvorcového políčka
• FLOOR MARKERS - značky nad vrstvou FLOOR, teda v zmysle štvorca
• WALL - podklad v zmysle "tenkej jednorozmernej" steny, využíva sa aj pre ohraničovanie štvorcových stien, čo vyzerá pekne
• WALL MARKERS - značky nad vrstvou WALL, teda v zmysle čiary
• NOTES - poznámky

Export / Import (save/load pre lokálne použitie): mapa aj s poznámkami sa uchováva ako textový reťazec, drobnou nevýhodou je nutnosť nepoužívať v texte poznámok niektoré špeciálne znaky - oddeľovače (^ | ;), uložíte si ju teda systémom copy-paste do akéhokoľvek textového súboru v notepade. Neskôr pribudne možnosť uloženia na server a prepojenie mapy priamo s hrou na stránkach OldGames.sk, ale dôležité je v prvom rade to, aby editor fungoval aj offline.

Ovládanie myšou: zatiaľ využívam dve tlačidlá - ľavým sa kreslí vybraným nástrojom (umožňuje aj držanie a pohyb), stlačenie pravého tlačidla znamená zmazanie políčka v aktuálnej vrstve (neumožňuje držanie a pohyb).

Osi a číslovanie políčok: toto bol často problém ostatných editorov, ktoré políčka nečíslujú vôbec, alebo majú osi napevno. Väčšina dungeonov má pritom interne sieť mapy fixne očíslovanú a niektoré to dokážu hráčom presne povedať na akom políčku sa nachádza (MM1 a kúzlo Locate). Pridal som teda možnosť nastaviť si číslovanie oboch osí od ľubovoľného čísla a tiež reverzne.

 » Download - Dungeon Mapper Offline verzia (zip)

Tak teda skúšajte, testujte (dúfam že je ovládanie dostatočne intuitívne) a pripomienkujte v diskusii, snáď sa mi z toho podarí vytvoriť zmysluplný Dungeon Mapper ;-)

Nástroje v toolbare tiež budem dopĺňať, takže nech sa páči, sem s návrhmi, ktoré by som mal ešte nakresliť...

Update 4/2021: Po dlhom čase som opäť nakukol do pravekých zdrojákov a pridal do programu niekoľko nových funkcií. Za zmienku stojí napríklad možnosť vybrať akúkoľvek obdĺžnikovú časť mapy a presúvať ju so všetkými vrstvami aj poznámkami. Tiež mi neustále chýbali ďalšie grafické prvky / nástroje a preto som namiesto kreslenia nových pixelových ikoniek využil dostupnú free knižnicu FontAwesome. Už to síce nie je pixel-perfect ale ikony fungujú ako fonty, čo prináša veľa nových možností, vrátanie zmeny farby, alebo zapnutia animácie - rotácie. Ikoniek je veľká hromada - aktuálne niečo cez 1600 a používam všetky čo sú free, teda aj brandové, preto je pri výbere aj možnosť vyľadávať podľa classname, ktorý sa zobrazuje v tooltipe...