Virtual BattleMap : UI (part 1)
Yes, I’m a geek, playing RPG, TableTop and many other things since 30 years. In the 2000’s, following the trend of Magic the Gathering, there was a boom of TableTop (coming from germany). Playing D&D was no longer evil…
Aside from playing WoW in PvE HL, I also love clever indie games like Card Hunter or RimWorlds and UX between paper and technologies like Editions Volumiques or Jean Simonet (dice) or GouGou (voice).
Now that COVID-19 is accelerating we need to reduce the gap between online and offline.
- Great tools like 3DVTT, Roll20, Tale Spire, Foundry or Astral are available.
- Great content creators on Patreon like Cze and Peku (map), PaperForge (pawn), Danny the DM (3D Printing) and Magnetic Board.
Yet another Virtual BattleMap ?
Well, I give a try on a simple UI in vanilla HTML5 / CSS. The idea was to build something really simple mixing great Patreon content with Card Hunter isometric design and gameplay.
For now there is no backend, no rules, no database. I wanted to validate the most difficult part: the UI: grid, fog of war, pawn, etc … The idea is to use CSS transform (that should be handled by the browser). There is a DIV for each cell, the map can be any dimensions.
What do you think about the Dwarf ? It is an image generated in Blender from a 3D model shared by Danny the DM. I wonder if it has a color version ?
What’s Next ?
The database will be hosted on AirTable 🙂 with a NodeJS WebSocket server in front (or Lamba? and/or Firebase?) so VERY simple to add rich content, image, pawn, music, stats, etc …
Improvement of the UI/UX:
- Keep it stupid simple with helpers to count cells, roll dices, display players stats (WoW style) but no hard-coded rules: see it as a whiteboard.
- Find a way to add lighting effects, animations (GIF ?), ambient sounds, spell effects, walls ?
- Generate dungeon on the fly (at cells level or room levels)
- Connect physical dice, do computer vision, …
Une réflexion sur “Virtual BattleMap : UI (part 1)”
Hi! Where can I try it? It looks exactly like what I’ve been looking for