Added tile border support to dynamic tilemap

This commit is contained in:
Felipe Alfonso 2017-06-27 17:22:39 -04:00
parent bd363553ba
commit b61635b51b
6 changed files with 28 additions and 20 deletions

View file

@ -1,4 +1,4 @@
var CHECKSUM = {
build: '18c0acb0-5b49-11e7-8d14-217ddc0d000b'
build: '3742be10-5b7d-11e7-8005-ef6dcee762ca'
};
module.exports = CHECKSUM;

View file

@ -15,8 +15,9 @@ var BuildFromConfig = function (state, config)
var tileHeight = GetValue(config, 'tile.height', 16);
var tileTexture = GetValue(config, 'tile.texture', null);
var tileFrame = GetValue(config, 'tile.frame', null);
var tileBorder = GetValue(config, 'tile.border', 0);
var map = new Tilemap(state, mapData, x, y, tileWidth, tileHeight, mapWidth, mapHeight, tileTexture, tileFrame);
var map = new Tilemap(state, mapData, x, y, tileWidth, tileHeight, mapWidth, mapHeight, tileBorder, tileTexture, tileFrame);
BuildGameObject(state, map, config);

View file

@ -15,6 +15,7 @@ function Tile(properties)
this.visible = true;
this.textureWidth = properties.textureWidth;
this.textureHeight = properties.textureHeight;
this.border = properties.border;
}
Tile.prototype.setId = function (id)
@ -23,10 +24,12 @@ Tile.prototype.setId = function (id)
var tileWidth = this.width;
var tileHeight = this.height;
var setWidth = this.textureWidth / tileWidth;
var halfTileWidth = (tileWidth) * 0.5;
var halfTileHeight = (tileHeight) * 0.5;
var rectx = (((tileId % setWidth)|0) * tileWidth) + halfTileWidth;
var recty = (((tileId / setWidth)|0) * tileHeight) + halfTileHeight;
var tileWidthBorder = (tileWidth + this.border * 2);
var tileHeightBorder = (tileHeight + this.border * 2);
var halfTileWidth = tileWidthBorder * 0.5;
var halfTileHeight = tileHeightBorder * 0.5;
var rectx = (((tileId % setWidth)|0) * tileWidthBorder) + halfTileWidth;
var recty = (((tileId / setWidth)|0) * tileHeightBorder) + halfTileHeight;
this.frameX = rectx;
this.frameY = recty;

View file

@ -27,7 +27,7 @@ var Tilemap = new Class({
initialize:
function Tilemap (state, mapData, x, y, tileWidth, tileHeight, mapWidth, mapHeight, texture, frame)
function Tilemap (state, mapData, x, y, tileWidth, tileHeight, mapWidth, mapHeight, tileBorder, texture, frame)
{
GameObject.call(this, state, 'Tilemap');
@ -38,6 +38,7 @@ var Tilemap = new Class({
this.mapHeight = mapHeight;
this.tileArray = [];
this.culledTiles = [];
this.tileBorder = tileBorder;
this.setTexture(texture, frame);
this.setPosition(x, y);
this.setSizeToFrame();
@ -60,9 +61,11 @@ var Tilemap = new Class({
{
var tileArray = this.tileArray;
var mapData = this.mapData;
// var frame = this.frame;
var border = this.tileBorder;
var tileWidth = this.tileWidth;
var tileHeight = this.tileHeight;
var tileWidthBorder = tileWidth + border * 2;
var tileHeightBorder = tileHeight + border * 2;
var width = this.texture.source[0].width;
var height = this.texture.source[0].height;
var mapWidth = this.mapWidth;
@ -76,13 +79,13 @@ var Tilemap = new Class({
for (var x = 0; x < mapWidth; ++x)
{
var tileId = mapData[y * mapWidth + x];
var halfTileWidth = (tileWidth) * 0.5;
var halfTileHeight = (tileHeight) * 0.5;
var rectx = (((tileId % setWidth)|0) * tileWidth) + halfTileWidth;
var recty = (((tileId / setWidth)|0) * tileHeight) + halfTileHeight;
var halfTileWidth = (tileWidthBorder) * 0.5;
var halfTileHeight = (tileHeightBorder) * 0.5;
var rectx = (((tileId % setWidth)|0) * tileWidthBorder) + halfTileWidth;
var recty = (((tileId / setWidth)|0) * tileHeightBorder) + halfTileHeight;
var tx = x * tileWidth;
var ty = y * tileHeight;
tileArray.push(new Tile({
index: x + y,
id: tileId,
@ -95,7 +98,8 @@ var Tilemap = new Class({
frameWidth: tileWidth,
frameHeight: tileHeight,
textureWidth: width,
textureHeight: height
textureHeight: height,
border: border
}));
}
}

View file

@ -7,9 +7,9 @@ var TilemapFactory = {
KEY: 'tilemap',
add: function (mapData, x, y, tileWidth, tileHeight, mapWidth, mapHeight, texture, frame)
add: function (mapData, x, y, tileWidth, tileHeight, mapWidth, mapHeight, tileBorder, texture, frame)
{
return this.children.add(new Tilemap(this.state, mapData, x, y, tileWidth, tileHeight, mapWidth, mapHeight, texture, frame));
return this.children.add(new Tilemap(this.state, mapData, x, y, tileWidth, tileHeight, mapWidth, mapHeight, tileBorder, texture, frame));
},
make: function (config)

View file

@ -374,10 +374,10 @@ SpriteBatch.prototype = {
var sra, srb, src, srd, sre, srf, cma, cmb, cmc, cmd, cme, cmf;
var halfTileWidth = (width) * 0.5;
var halfTileHeight = (height) * 0.5;
var u0 = (rectX - (halfTileWidth - 0.5)) / textureWidth;
var v0 = (rectY - (halfTileHeight - 0.5)) / textureHeight;
var u1 = (rectX + (halfTileWidth - 0.5)) / textureWidth;
var v1 = (rectY + (halfTileHeight - 0.5)) / textureHeight;
var u0 = (rectX - halfTileWidth) / textureWidth;
var v0 = (rectY - halfTileHeight) / textureHeight;
var u1 = (rectX + halfTileWidth) / textureWidth;
var v1 = (rectY + halfTileHeight) / textureHeight;
var scrollX = camera.scrollX * scrollFactorX;
var scrollY = camera.scrollY * scrollFactorY;