Simple Map Editor

A simple map editor for grid-based systems. The assumes that you're doing it yourself and isn't using anything like ROT for instance.

by Sam Fereday

HTML

<div id="preview">
  <span data-bind="foreach: grid">
    <div class="sq" data-bind="x"></div>
  </span>
</div>

<p><strong>Foundation Tiles</strong></p>
<form id="foundations">
  <input type="radio" name="foundation" value="Block" checked> Default Block
  <input type="radio" name="foundation" value="Empty"> Empty
</form>

<p><strong>Entity Tiles</strong></p>
<form id="entities">
  <input type="radio" name="entity" value="Entry" checked> Entry
  <input type="radio" name="entity" value="Exit"> Exit
  <input type="radio" name="entity" value="Start"> Player Start
  <input type="radio" name="entity" value="Block"> Enemy
  <input type="radio" name="entity" value="Chest"> Chest
  <input type="radio" name="entity" value="Pickup"> Pickup
  <input type="radio" name="entity" value="Trap"> Trap
  <input type="radio" name="entity" value="Hazard"> Hazard
  <input type="radio" name="entity" value="Empty"> Empty
</form>

<p><strong>Decor Tiles</strong></p>
<form id="decors">
  <input type="radio" name="decor" value="TreeLg" checked> Tree Large
  <input type="radio" name="decor" value="TreeSm"> Tree Small
</form>

CSS

body {
  font: 75%/1.4em arial;
}

JavaScript

/*
Simply put the approach to this is:
- One layer for the map foundation, this denotes where tiles sit that can be walked upon or built upon.
- Second layer over that which denotes placement of objects. Scratch the rules, we'll just make sure we can't place entity or decor tiles on the foundation layer. Then just do some simple occupied checking.
- Finally there will be some global map properties where you can specify graphical layers such as the very rear, or, something in front of that such as distant imposters. That will just make some arbitrary data, whether you use it or not is up to you. Same goes for the map layer arrays to be honest, how they get used is up to the person that makes the map.
The plan is to use this within Electron as a desktop app, either for myself or someone else who wants to use the thing. Mustn't forget either that the prop types might change, so may just have arbitrary letters for now, not sure. Will see how it pans out.
- So far tiles are hard-coded as you can see, but this can be changed in future. Get it to work first.
*/
var helpers = {
	guid: function() {
    function s4() {
      return Math.floor((1 + Math.random()) * 0x10000)
        .toString(16)
        .substring(1);
    }
    return s4() + s4() + '-' + s4() + '-' + s4() + '-' +
      s4() + '-' + s4() + s4() + s4();
  }
}

// Types for tiles (wip)
var tileTypes = {
	empty: 0,
  occupied: 1
};

// Components / models for mapper to use
var TileModel = function()
{
	this.x = -1;
  this.y = -1;
  this.type = tileTypes.empty;
  this.layer = null;
	this.guid = null;
};

TileModel.prototype.set = function(x, y, t)
{
	this.x = x;
  this.y = y;
  this.type = t;
};

// ...
var Mapper = function()
{
	// Required
	this.foundationLayer = [];
  this.entityLayer = [];
  // Optional
  this.propLayer = [];
};

Mapper.prototype.createGrid = function(w, h)
{
	
  var tm;
	
  // Remember to consider flipping
  for(var c = 0; c < h; c++)
  {
  	for(var r = 0; r < w; r++)
    {
    	tm = new...