Tilemap

by Mark Damon Hughes

https://mdhughes.tech/rpg

Example:

To put a tilemap in your HTML document:

• copy tilemap.js and img folder next to your document, Download here,
• include a script header,
• end of your document needs to call tileMapInit(),
• then for any map add an HTML "micro-format", like the div shown below:

t t t t t t t t t t
t t6t . . h h h h t
t t . . t t h h h h
t . . h t f . h h h
. . h h . f2f━h━h━h━
. . . h . f . h h h
. . . h h h h h h h
t . . t╔t═~ h╪h╗M h
t t . .║t t h M M M
t t╔.═.╝t1h h h M M

id

the internal name of the map.

class

must be "tilemap".

title

displayed as a header 3.

scale

displayed as a subtitle.

tilechars

the number of characters per tile, default 2. tilechars='1' means no overlay layers, just base terrain; tilechars='2' or higher creates (tilechars-1) overlay layers.

reference

the id,x,y of another map in the same document, you can leave that out if not used.

pre

the map, 'tilechars' characters per tile, a base terrain and 'tilechars'-1 other features on top, or spaces for none.

dl

map labels, dt must be the coordinate, "x,y" starting at left,top 0,0, dd is the title. You can use a dash - to split long words.

The dictionary of characters to tile filenames is in kTileNames in the tilemap.js, and you can add more to it as you like, if you can find unused characters – maybe use Greek or emoji! The images are in img/tilemap, and must be 32x32 png images.

To type the rivers and roads, here's a trick on the Mac: Open character viewer (Emoji & Symbols), gear icon, customize list, and check Box Drawing. Rivers are the double-lines, roads are heavy lines.

Ground Tiles: , moor ; moor_tree . grass ^ mountain + forest ~ ocean _ floor # wall_stone % wall_wood = door_open ≠ door_closed opt = ≈ door_secret opt x ‡ door_cell opt sh 7 ∏ door_wood opt sh P [ stairs_up ] stairs_down b badlands c moor_cold d desert f field h hill i ice k desert_palm p hill_frost s island t taiga v volcwaste C coldmtn M stonemtn V volcano

Overlays, use in tiles 2+ only: empty - window ? sign | pillar F fountain P pit R tombstone2 S statue T trapdoor W web2 $ chest 0 town_adobe 1 town_hut 2 town_redhouse 3 town_tower 4 town_goldcity 5 town_blackcity 6 hole 7 mine 8 ruin 9 dungeon ║ river_ns2 ═ river_ew2 ╔ river_es2 ╦ river_esw2 ╗ river_sw2 ╠ river_nes2 ╬ river_nesw2 ╣ river_nsw2 ╚ river_ne2 ╩ river_new2 ╝ river_nw2 ┃ road_ns2 ━ road_ew2 ┏ road_es2 ┳ road_esw2 ┓ road_sw2 ┣ road_nes2 ╋ road_nesw2 ┫ road_nsw2 ┗ road_ne2 ┻ road_new2 ┛ road_nw2 ╪ bridge_ns2 ╫ bridge_ew2

License

Copyright © 2016,2023 Mark Damon Hughes

tilemap.js is under MIT License, do what thou wilt but don't sue anyone.

Tile art is public domain from David Gervais <dgerv@sympatico.ca>

More examples (view source to see how they're made)

C C C t C C C C C C C C C║C C C v┏v5C C
C C C t C C C C C C7C C C║C C C v┃v C C
tWt t t1t t t t M M t t c╫c━c━c━v9C C C
tWtWt t t t t t1M M t t t║t c c C C C C
tWtWt t t t t t M M t c c║c c c p C p p
tWtWt t t t t t M M c c c║c c p p ^ t t
tWtWtRtRt h2h━h━M7h┓c c c║c h h ^ ^ t t
tWtRtRtRh h h M M h┃c c╔c╝c h h3^ ^ t t
h tRtRhRh h M M h┏h┻.━.╫c1c h h ^ ^ ~ ~
h h h h h h M M h┃h . .║c h h h ^ ^ ~ ~
b h h h h h M M .┃. . .║h h h h ^ ^ ~ ~
b b h h h h M M f┃f .╔.╝h h h h ^ ~ ~ ~
b b . h h h M M .4f +║+ + + h v v ~ ~ ~
b b .8. . . M M f┗f━+╫+ + + v v v ~ ~ ~
~ ~ ~ ~ ~ . M M + + ~ ~ ~ ~ ~ v V v ~ ~
~ ~ ~ ~ ~ ~ ~ M + + ~ ~ ~ ~ ~ ~ v v ~ ~
~ ~ ~ ~ ~ ~ ~ ~ + + + ~ ~ ~ ~ ~ ~ ~ ~ ~
~ ~ ~ ~ s ~ ~ ~ ~ ~ + + ~ ~ ~ ~ ~ ~ ~ ~
~ ~ s ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ s ~ ~ ~ ~ ~ ~
~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~

_ # # # # # # # # # #
_ # _ _P_ _ _ _ _P_$#
_ # _ # # # # # # ≈ #
_ # _ _ _ _ # _$_ _ #
_ # ≠ # # _ # # # ≈ #
_ # _ _ #-_ = _ _ _T#
_ # _ _ # _ # _ _ # #
_ # ≈ # # _ # # _F# #
_ # _$# _S_ _S# # # #
_ # _T# # [ # # # # #