Skip to content

Commit 11c3b0a

Browse files
pavle-goloskokovicpavle-goloskokovic
committed
Merge remote-tracking branch 'origin/master'
2 parents 031f409 + 6d1b172 commit 11c3b0a

14 files changed

Lines changed: 151 additions & 212 deletions

‎v3/src/gameobjects/tilemap/Parse.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,20 @@
11
var Formats = require('./Formats');
22
var Parsers = require('./parsers');
33

4-
var Parse = function (key, mapFormat, mapData, tileWidth, tileHeight, width, height)
4+
var Parse = function (key, mapFormat, mapData, tileWidth, tileHeight, insertNull)
55
{
66
var newMap;
77

88
switch(mapFormat)
99
{
1010
case (Formats.TILEMAP_2D_ARRAY):
11-
newMap = Parsers.Parse2DArray(key, mapData, tileWidth, tileHeight, width, height);
11+
newMap = Parsers.Parse2DArray(key, mapData, tileWidth, tileHeight, insertNull);
1212
break;
1313
case (Formats.TILEMAP_CSV):
14-
newMap = Parsers.ParseCSV(key, mapData, tileWidth, tileHeight, width, height);
14+
newMap = Parsers.ParseCSV(key, mapData, tileWidth, tileHeight, insertNull);
1515
break;
1616
case (Formats.TILEMAP_TILED_JSON):
17-
newMap = Parsers.ParseTiledJSON(key, mapData);
17+
newMap = Parsers.ParseTiledJSON(key, mapData, insertNull);
1818
break;
1919
default:
2020
console.warn('Unrecognized tilemap data format: ' + mapFormat);

‎v3/src/gameobjects/tilemap/Tile.js‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,15 @@
11
var Class = require('../../utils/Class');
2-
3-
// Dummy Tile class
4-
// Todo: merge dynamic/tile into this
2+
var Components = require('../components');
53

64
var Tile = new Class({
75

6+
// TODO: Add in bounds mixin, or custom replacement
7+
Mixins: [
8+
Components.Alpha,
9+
Components.Flip,
10+
Components.Visible
11+
],
12+
813
initialize:
914

1015
function Tile (layer, index, x, y, width, height)
@@ -13,10 +18,14 @@ var Tile = new Class({
1318
this.index = index;
1419
this.x = x;
1520
this.y = y;
21+
this.worldX = x * width;
22+
this.worldY = y * height;
1623
this.width = width;
1724
this.height = height;
18-
}
1925

26+
// TODO: update renders to allow for using Components.Tint
27+
this.tint = 0xFFFFFF;
28+
}
2029
});
2130

2231
module.exports = Tile;

‎v3/src/gameobjects/tilemap/TilemapCreator.js‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,20 +14,22 @@ GameObjectCreator.register('tilemap', function (config)
1414
// tileHeight: 32,
1515
// width: 10,
1616
// height: 10,
17-
// data: null (2D array of tile indices)
17+
// data: null (2D array of tile indices),
18+
// insertNull: false
1819
// }
1920

2021
var key = GetFastValue(config, 'key', null);
2122
var tileWidth = GetFastValue(config, 'tileWidth', 32);
2223
var tileHeight = GetFastValue(config, 'tileHeight', 32);
2324
var width = GetFastValue(config, 'width', 10);
2425
var height = GetFastValue(config, 'height', 10);
26+
var insertNull = GetFastValue(config, 'insertNull', false);
2527
var data = GetFastValue(config, 'data', null);
2628

2729
var parsedData = null;
2830
if (key === null && Array.isArray(data))
2931
{
30-
parsedData = Parse(key, Formats.TILEMAP_2D_ARRAY, data, tileWidth, tileHeight, width, height);
32+
parsedData = Parse(key, Formats.TILEMAP_2D_ARRAY, data, tileWidth, tileHeight, insertNull);
3133
}
3234
else if (key !== null)
3335
{
@@ -39,7 +41,7 @@ GameObjectCreator.register('tilemap', function (config)
3941
}
4042
else
4143
{
42-
parsedData = Parse(key, tilemapData.format, tilemapData.data, tileWidth, tileHeight, width, height);
44+
parsedData = Parse(key, tilemapData.format, tilemapData.data, tileWidth, tileHeight, insertNull);
4345
}
4446
}
4547

‎v3/src/gameobjects/tilemap/TilemapFactory.js‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,20 +21,22 @@ GameObjectFactory.register('tilemap', function (config)
2121
// tileHeight: 32,
2222
// width: 10,
2323
// height: 10,
24-
// data: null (2D array of tile indices)
24+
// data: null (2D array of tile indices),
25+
// insertNull: false
2526
// }
2627

2728
var key = GetFastValue(config, 'key', null);
2829
var tileWidth = GetFastValue(config, 'tileWidth', 32);
2930
var tileHeight = GetFastValue(config, 'tileHeight', 32);
3031
var width = GetFastValue(config, 'width', 10);
3132
var height = GetFastValue(config, 'height', 10);
33+
var insertNull = GetFastValue(config, 'insertNull', false);
3234
var data = GetFastValue(config, 'data', null);
3335

3436
var parsedData = null;
3537
if (key === null && Array.isArray(data))
3638
{
37-
parsedData = Parse(key, Formats.TILEMAP_2D_ARRAY, data, tileWidth, tileHeight, width, height);
39+
parsedData = Parse(key, Formats.TILEMAP_2D_ARRAY, data, tileWidth, tileHeight, insertNull);
3840
}
3941
else if (key !== null)
4042
{
@@ -46,7 +48,7 @@ GameObjectFactory.register('tilemap', function (config)
4648
}
4749
else
4850
{
49-
parsedData = Parse(key, tilemapData.format, tilemapData.data, tileWidth, tileHeight, width, height);
51+
parsedData = Parse(key, tilemapData.format, tilemapData.data, tileWidth, tileHeight, insertNull);
5052
}
5153
}
5254

‎v3/src/gameobjects/tilemap/dynamiclayer/DynamicTilemapLayer.js‎

Lines changed: 46 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ var Class = require('../../../utils/Class');
22
var GameObject = require('../../GameObject');
33
var Components = require('../../components');
44
var DynamicTilemapLayerRender = require('./DynamicTilemapLayerRender');
5-
var Tile = require('./Tile');
65

76
var DynamicTilemapLayer = new Class({
87

@@ -35,7 +34,6 @@ var DynamicTilemapLayer = new Class({
3534
this.layer = tilemap.layers[layerIndex];
3635
this.tileset = tileset;
3736

38-
this.tileArray = [];
3937
this.culledTiles = [];
4038

4139
this.setTexture(tileset.image.key);
@@ -45,8 +43,6 @@ var DynamicTilemapLayer = new Class({
4543
this.setSize(this.map.tileWidth * this.layer.width, this.map.tileheight * this.layer.height);
4644

4745
this.skipIndexZero = false;
48-
49-
this.buildTilemap();
5046
},
5147

5248
getTotalTileCount: function ()
@@ -59,85 +55,50 @@ var DynamicTilemapLayer = new Class({
5955
return this.cull(camera).length;
6056
},
6157

62-
buildTilemap: function ()
58+
cull: function (camera)
6359
{
64-
var tileArray = this.tileArray;
6560
var mapData = this.layer.data;
66-
var tileWidth = this.map.tileWidth;
67-
var tileHeight = this.map.tileHeight;
68-
var tileset = this.tileset;
69-
var width = this.texture.source[0].width;
70-
var height = this.texture.source[0].height;
7161
var mapWidth = this.layer.width;
7262
var mapHeight = this.layer.height;
73-
74-
tileArray.length = 0;
75-
76-
for (var row = 0; row < mapHeight; ++row)
77-
{
78-
for (var col = 0; col < mapWidth; ++col)
79-
{
80-
var tileIndex = mapData[row][col].index;
81-
if (tileIndex <= 0 && this.skipIndexZero) { continue; }
82-
83-
var texCoords = tileset.getTileTextureCoordinates(tileIndex);
84-
if (texCoords === null) { continue; }
85-
86-
tileArray.push(new Tile({
87-
index: tileIndex,
88-
id: tileIndex,
89-
x: col * tileWidth,
90-
y: row * tileHeight,
91-
width: tileWidth,
92-
height: tileHeight,
93-
frameX: texCoords.x,
94-
frameY: texCoords.y,
95-
frameWidth: tileWidth,
96-
frameHeight: tileHeight,
97-
textureWidth: width,
98-
textureHeight: height
99-
}));
100-
}
101-
}
102-
},
103-
104-
cull: function (camera)
105-
{
10663
var culledTiles = this.culledTiles;
107-
var tiles = this.tileArray;
108-
var length = tiles.length;
10964
var scrollX = camera.scrollX * this.scrollFactorX;
11065
var scrollY = camera.scrollY * this.scrollFactorY;
11166
var cameraW = camera.width;
11267
var cameraH = camera.height;
11368

11469
culledTiles.length = 0;
11570

116-
for (var index = 0; index < length; ++index)
71+
for (var row = 0; row < mapHeight; ++row)
11772
{
118-
var tile = tiles[index];
119-
var tileX = tile.x - scrollX;
120-
var tileY = tile.y - scrollY;
121-
var tileW = tile.width;
122-
var tileH = tile.height;
123-
var cullW = cameraW + tileW;
124-
var cullH = cameraH + tileH;
125-
126-
if (tile.visible &&
127-
tileX > -tileW && tileY > -tileH &&
128-
tileX < cullW && tileY < cullH)
73+
for (var col = 0; col < mapWidth; ++col)
12974
{
130-
culledTiles.push(tile);
75+
var tile = mapData[row][col];
76+
77+
if (tile === null || (tile.index <= 0 && this.skipIndexZero)) { continue; }
78+
79+
var tileX = tile.worldX - scrollX;
80+
var tileY = tile.worldY - scrollY;
81+
var tileW = tile.width;
82+
var tileH = tile.height;
83+
var cullW = cameraW + tileW;
84+
var cullH = cameraH + tileH;
85+
86+
if (tile.visible &&
87+
tileX > -tileW && tileY > -tileH &&
88+
tileX < cullW && tileY < cullH)
89+
{
90+
culledTiles.push(tile);
91+
}
13192
}
13293
}
13394

13495
return culledTiles;
135-
},
96+
}
13697

137-
forEach: function (callback)
138-
{
139-
this.tileArray.forEach(callback);
140-
},
98+
// forEach: function (callback)
99+
// {
100+
// this.tileArray.forEach(callback);
101+
// },
141102

142103
// Returns Object containing:
143104
// {
@@ -157,32 +118,32 @@ var DynamicTilemapLayer = new Class({
157118
// y
158119
// }
159120

160-
getTileAt: function (x, y)
161-
{
162-
var ix = (x|0);
163-
var iy = (y|0);
164-
var tiles = this.tileArray;
165-
var index = iy * this.mapWidth + ix;
121+
// getTileAt: function (x, y)
122+
// {
123+
// var ix = (x|0);
124+
// var iy = (y|0);
125+
// var tiles = this.tileArray;
126+
// var index = iy * this.mapWidth + ix;
166127

167-
if (index < tiles.length)
168-
{
169-
return tiles[index];
170-
}
128+
// if (index < tiles.length)
129+
// {
130+
// return tiles[index];
131+
// }
171132

172-
return null;
173-
},
133+
// return null;
134+
// },
174135

175-
getTileAtIndex: function (index)
176-
{
177-
var tiles = this.tileArray;
136+
// getTileAtIndex: function (index)
137+
// {
138+
// var tiles = this.tileArray;
178139

179-
if (index < tiles.length)
180-
{
181-
return tiles[index];
182-
}
140+
// if (index < tiles.length)
141+
// {
142+
// return tiles[index];
143+
// }
183144

184-
return null;
185-
}
145+
// return null;
146+
// }
186147

187148
});
188149

‎v3/src/gameobjects/tilemap/dynamiclayer/DynamicTilemapLayerCanvasRenderer.js‎

Lines changed: 24 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,10 @@ var DynamicTilemapLayerCanvasRenderer = function (renderer, gameObject, interpol
99

1010
gameObject.cull(camera);
1111

12-
var tiles = gameObject.culledTiles;
13-
var tileCount = tiles.length;
12+
var renderTiles = gameObject.culledTiles;
13+
var length = renderTiles.length;
1414
var image = gameObject.frame.source.image;
15-
16-
// var scrollFactorX = gameObject.scrollFactorX;
17-
// var scrollFactorY = gameObject.scrollFactorY;
18-
// var alpha = gameObject.alpha;
15+
var tileset = this.tileset;
1916

2017
var tx = gameObject.x - camera.scrollX * gameObject.scrollFactorX;
2118
var ty = gameObject.y - camera.scrollY * gameObject.scrollFactorY;
@@ -27,22 +24,35 @@ var DynamicTilemapLayerCanvasRenderer = function (renderer, gameObject, interpol
2724
ctx.scale(gameObject.scaleX, gameObject.scaleY);
2825
ctx.scale(gameObject.flipX ? -1 : 1, gameObject.flipY ? -1 : 1);
2926

30-
for (var index = 0; index < tileCount; ++index)
27+
for (var index = 0; index < length; ++index)
3128
{
32-
var tile = tiles[index];
29+
var tile = renderTiles[index];
30+
31+
var tileTexCoords = tileset.getTileTextureCoordinates(tile.index);
32+
if (tileTexCoords === null) { continue; }
33+
34+
var halfWidth = tile.width / 2;
35+
var halfHeight = tile.height / 2;
3336

34-
if (tile.id <= 0 && gameObject.skipIndexZero)
37+
ctx.save();
38+
ctx.translate(tile.worldX - halfWidth, tile.worldY - halfHeight);
39+
40+
if (tile.flipX || tile.flipY)
3541
{
36-
continue;
42+
ctx.scale(tile.flipX ? -1 : 1, tile.flipY ? -1 : 1);
3743
}
3844

45+
renderer.setAlpha(gameObject.alpha * tile.alpha);
46+
3947
ctx.drawImage(
4048
image,
41-
tile.frameX, tile.frameY,
42-
tile.frameWidth, tile.frameHeight,
43-
tile.x, tile.y,
44-
tile.frameWidth, tile.frameHeight
49+
tileTexCoords.x, tileTexCoords.y,
50+
tile.width, tile.height,
51+
-halfWidth, -halfHeight,
52+
tile.width, tile.height
4553
);
54+
55+
ctx.restore();
4656
}
4757

4858
ctx.restore();

0 commit comments

Comments
 (0)