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.

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)

  • 20 mai 2020 à 23 h 49 min

    Hi! Where can I try it? It looks exactly like what I’ve been looking for


Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.