More intuitive tilemap renderer

[luizbills]

Instead of:

var displayOptions = {
    // ...
    tileMap: {
        "@": [0, 0],
        "#": [0, 32],
        "a": [32, 0],
        "!": [32, 32] // absolute position
    }
    // ...
}

I was thinking something:

var displayOptions = {
    // ...
    tileMap: {
        "@": [0, 0],
        "#": [0, 1],
        "a": [1, 0],
        "!": [1, 1] // grid position
    }
    // ...
}

// OR

var displayOptions = {
    // ...
    tileMap: {
        "@": 0,
        "#": 1,
        "a": 2,
        "!": 3 // index position
    }
    // ...
}

What do you think?

--- Want to back this issue? **[Post a bounty on it!](https://www.bountysource.com/issues/34070776-more-intuitive-tilemap-renderer?utm_campaign=plugin&utm_content=tracker%2F297828&utm_medium=issues&utm_source=github)** We accept bounties via [Bountysource](https://www.bountysource.com/?utm_campaign=plugin&utm_content=tracker%2F297828&utm_medium=issues&utm_source=github).

[ondras]

@luizbills, there was quite some discussion about this back in 2013 when we added this feature: https://github.com/ondras/rot.js/issues/20

Please see this post in particular, where I initially went with the "grid position" approach but reverted to absolute numbers after hearing user feedback and deciding absolute pixels are better.

[luizbills]

So... I think we could add support to gutter/padding and return to using grid positions?

var displayOptions = {
    // ...
    tileSetPadding: 4,
    tileSetGutter: 1,
    tileMap: {
        "@": [0, 0],
        "#": [0, 1],
        "a": [1, 0],
        "!": [1, 1] // grid position
    }
    // ...
}

[luizbills]

Support to "atlas" would be great too.

[luizbills]

I have an idea to maintain compatibility.

var displayOptions = {
  tileMap: {
 // type: "absolute", // default value to maintain compatibility
    "@": [0, 0],
    "#": [0, 64],
    "a": [64, 0],
    "!": [64, 64]
  }
  // ...
}

// OR
var displayOptions = {
  tileMap: {
    type: "grid",
    "@": [0, 0],
    "#": [0, 1],
    "a": [1, 0],
    "!": [1, 1]
  }
  // ...
}

// OR
var displayOptions = {
  tileMap: {
    type: "index",
    "@": 0,
    "#": 1,
    "a": 2,
    "!": 3
  }
  // ...
}

[Blindmikey]

This could also be done currently, with something akin to

var Game = {

    display    : null,
    tileWidth  : 16,
    tileHeight : 24,
    tileMap    : {},
    tiles      : {
        player : { symbol: '@', sprite: [0, 0] },
        enemy  : { symbol: 'S', sprite: [0, 1] }
    },

    init: function() 
    {
        Object.keys(this.tiles).map( function( tile, index )
        {
            var x = Game.tiles[tile].sprite[0] * this.tileWidth;
            var y = Game.tiles[tile].sprite[1] * this.tileHeight;

            this.tileMap[Game.tiles[tile].symbol] = [x, y];
        });

        this.display = new ROT.Display(
        {
            tileWidth: this.tileWidth,
            tileHeight: this.tileHeight,
            tileMap: this.tileMap,
            // ...
        });

        // ...
    },

    // ...
}

Where we declare our grid offset in Game.tiles and iterate through that object to create what ROT.js expects in tileMap.