Skip to content

Commit a8b60cf

Browse files
svipalsvipal
committed
fixed dynamic layer rendering
1 parent fd29e96 commit a8b60cf

10 files changed

Lines changed: 4342 additions & 3907 deletions

‎dist/phaser-arcade-physics.js‎

Lines changed: 2015 additions & 1870 deletions
Large diffs are not rendered by default.

‎dist/phaser-arcade-physics.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/phaser.js‎

Lines changed: 2098 additions & 1953 deletions
Large diffs are not rendered by default.

‎dist/phaser.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/tilemaps/components/CullTiles.js‎

Lines changed: 161 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ var SnapCeil = require('../../math/snap/SnapCeil');
2222
*/
2323
var CullTiles = function (layer, camera, outputArray, renderOrder)
2424
{
25+
2526
if (outputArray === undefined) { outputArray = []; }
2627
if (renderOrder === undefined) { renderOrder = 0; }
2728

@@ -44,104 +45,201 @@ var CullTiles = function (layer, camera, outputArray, renderOrder)
4445
var drawRight = mapWidth;
4546
var drawTop = 0;
4647
var drawBottom = mapHeight;
47-
48-
if (!tilemapLayer.skipCull && tilemapLayer.scrollFactorX === 1 && tilemapLayer.scrollFactorY === 1)
49-
{
50-
// Camera world view bounds, snapped for scaled tile size
51-
// Cull Padding values are given in tiles, not pixels
52-
53-
var boundsLeft = SnapFloor(camera.worldView.x - tilemapLayer.x, tileW, 0, true) - tilemapLayer.cullPaddingX;
54-
var boundsRight = SnapCeil(camera.worldView.right - tilemapLayer.x, tileW, 0, true) + tilemapLayer.cullPaddingX;
55-
var boundsTop = SnapFloor(camera.worldView.y - tilemapLayer.y, tileH, 0, true) - tilemapLayer.cullPaddingY;
56-
var boundsBottom = SnapCeil(camera.worldView.bottom - tilemapLayer.y, tileH, 0, true) + tilemapLayer.cullPaddingY;
57-
58-
drawLeft = Math.max(0, boundsLeft);
59-
drawRight = Math.min(mapWidth, boundsRight);
60-
drawTop = Math.max(0, boundsTop);
61-
drawBottom = Math.min(mapHeight, boundsBottom);
62-
}
63-
48+
var inIsoBounds = function (x,y) { return true;}
49+
if (!tilemapLayer.skipCull && tilemapLayer.scrollFactorX === 1 && tilemapLayer.scrollFactorY === 1) {
50+
if (layer.orientation == "orthogonal") {
51+
// Camera world view bounds, snapped for scaled tile size
52+
// Cull Padding values are given in tiles, not pixels
53+
54+
var boundsLeft = SnapFloor(camera.worldView.x - tilemapLayer.x, tileW, 0, true) - tilemapLayer.cullPaddingX;
55+
var boundsRight = SnapCeil(camera.worldView.right - tilemapLayer.x, tileW, 0, true) + tilemapLayer.cullPaddingX;
56+
var boundsTop = SnapFloor(camera.worldView.y - tilemapLayer.y, tileH, 0, true) - tilemapLayer.cullPaddingY;
57+
var boundsBottom = SnapCeil(camera.worldView.bottom - tilemapLayer.y, tileH, 0, true) + tilemapLayer.cullPaddingY;
58+
59+
drawLeft = Math.max(0, boundsLeft);
60+
drawRight = Math.min(mapWidth, boundsRight);
61+
drawTop = Math.max(0, boundsTop);
62+
drawBottom = Math.min(mapHeight, boundsBottom);
63+
} else if (layer.orientation == "isometric") {
64+
inIsoBounds = function (x,y){
65+
var pos = tilemapLayer.tileToWorldXY(x,y,undefined,camera)
66+
return (pos.x > camera.worldView.x && pos.x < camera.worldView.right) && (pos.y > camera.worldView.y && pos.y < camera.worldView.bottom)
67+
}
68+
}
69+
}
6470
var x;
6571
var y;
6672
var tile;
6773

68-
if (renderOrder === 0)
69-
{
70-
// right-down
7174

72-
for (y = drawTop; y < drawBottom; y++)
75+
if (layer.orientation == "orthogonal") {
76+
77+
if (renderOrder === 0)
7378
{
74-
for (x = drawLeft; mapData[y] && x < drawRight; x++)
75-
{
76-
tile = mapData[y][x];
79+
// right-down
7780

78-
if (!tile || tile.index === -1 || !tile.visible || tile.alpha === 0)
81+
for (y = drawTop; y < drawBottom; y++)
82+
{
83+
for (x = drawLeft; mapData[y] && x < drawRight; x++)
7984
{
80-
continue;
81-
}
85+
tile = mapData[y][x];
8286

83-
outputArray.push(tile);
87+
if (!tile || tile.index === -1 || !tile.visible || tile.alpha === 0)
88+
{
89+
continue;
90+
}
91+
92+
outputArray.push(tile);
93+
}
8494
}
8595
}
86-
}
87-
else if (renderOrder === 1)
88-
{
89-
// left-down
90-
91-
for (y = drawTop; y < drawBottom; y++)
96+
else if (renderOrder === 1)
9297
{
93-
for (x = drawRight; mapData[y] && x >= drawLeft; x--)
94-
{
95-
tile = mapData[y][x];
98+
// left-down
9699

97-
if (!tile || tile.index === -1 || !tile.visible || tile.alpha === 0)
100+
for (y = drawTop; y < drawBottom; y++)
101+
{
102+
for (x = drawRight; mapData[y] && x >= drawLeft; x--)
98103
{
99-
continue;
100-
}
104+
tile = mapData[y][x];
101105

102-
outputArray.push(tile);
106+
if (!tile || tile.index === -1 || !tile.visible || tile.alpha === 0)
107+
{
108+
continue;
109+
}
110+
111+
outputArray.push(tile);
112+
}
103113
}
104114
}
105-
}
106-
else if (renderOrder === 2)
107-
{
108-
// right-up
109-
110-
for (y = drawBottom; y >= drawTop; y--)
115+
else if (renderOrder === 2)
111116
{
112-
for (x = drawLeft; mapData[y] && x < drawRight; x++)
113-
{
114-
tile = mapData[y][x];
117+
// right-up
115118

116-
if (!tile || tile.index === -1 || !tile.visible || tile.alpha === 0)
119+
for (y = drawBottom; y >= drawTop; y--)
120+
{
121+
for (x = drawLeft; mapData[y] && x < drawRight; x++)
117122
{
118-
continue;
123+
tile = mapData[y][x];
124+
125+
if (!tile || tile.index === -1 || !tile.visible || tile.alpha === 0)
126+
{
127+
continue;
128+
}
129+
130+
outputArray.push(tile);
119131
}
132+
}
133+
}
134+
else if (renderOrder === 3)
135+
{
136+
// left-up
137+
138+
for (y = drawBottom; y >= drawTop; y--)
139+
{
140+
for (x = drawRight; mapData[y] && x >= drawLeft; x--)
141+
{
142+
tile = mapData[y][x];
120143

121-
outputArray.push(tile);
144+
if (!tile || tile.index === -1 || !tile.visible || tile.alpha === 0)
145+
{
146+
continue;
147+
}
148+
149+
outputArray.push(tile);
150+
}
122151
}
123152
}
124-
}
125-
else if (renderOrder === 3)
126-
{
127-
// left-up
153+
} else if (layer.orientation == "isometric") {
154+
if (renderOrder === 0)
155+
{
156+
// right-down
128157

129-
for (y = drawBottom; y >= drawTop; y--)
158+
for (y = drawTop; y < drawBottom; y++)
159+
{
160+
for (x = drawLeft; mapData[y] && x < drawRight; x++)
161+
{
162+
if (inIsoBounds(x,y)) {
163+
tile = mapData[y][x];
164+
165+
if (!tile || tile.index === -1 || !tile.visible || tile.alpha === 0)
166+
{
167+
continue;
168+
}
169+
170+
outputArray.push(tile);
171+
}
172+
173+
}
174+
}
175+
}
176+
else if (renderOrder === 1)
130177
{
131-
for (x = drawRight; mapData[y] && x >= drawLeft; x--)
178+
// left-down
179+
180+
for (y = drawTop; y < drawBottom; y++)
132181
{
133-
tile = mapData[y][x];
182+
for (x = drawRight; mapData[y] && x >= drawLeft; x--)
183+
{
184+
if (inIsoBounds(x,y)) {
185+
tile = mapData[y][x];
186+
187+
if (!tile || tile.index === -1 || !tile.visible || tile.alpha === 0)
188+
{
189+
continue;
190+
}
191+
192+
outputArray.push(tile);
193+
}
194+
}
195+
}
196+
}
197+
else if (renderOrder === 2)
198+
{
199+
// right-up
134200

135-
if (!tile || tile.index === -1 || !tile.visible || tile.alpha === 0)
201+
for (y = drawBottom; y >= drawTop; y--)
202+
{
203+
for (x = drawLeft; mapData[y] && x < drawRight; x++)
136204
{
137-
continue;
205+
if (inIsoBounds(x,y)) {
206+
tile = mapData[y][x];
207+
208+
if (!tile || tile.index === -1 || !tile.visible || tile.alpha === 0)
209+
{
210+
continue;
211+
}
212+
213+
outputArray.push(tile);
214+
}
138215
}
216+
}
217+
}
218+
else if (renderOrder === 3)
219+
{
220+
// left-up
139221

140-
outputArray.push(tile);
222+
for (y = drawBottom; y >= drawTop; y--)
223+
{
224+
for (x = drawRight; mapData[y] && x >= drawLeft; x--)
225+
{
226+
if (inIsoBounds(x,y)) {
227+
tile = mapData[y][x];
228+
229+
if (!tile || tile.index === -1 || !tile.visible || tile.alpha === 0)
230+
{
231+
continue;
232+
}
233+
234+
outputArray.push(tile);
235+
}
236+
}
141237
}
142238
}
239+
143240
}
144241

242+
145243
tilemapLayer.tilesDrawn = outputArray.length;
146244
tilemapLayer.tilesTotal = mapWidth * mapHeight;
147245

‎src/tilemaps/components/GetTilesWithinWorldXY.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
var GetTilesWithin = require('./GetTilesWithin');
88
var WorldToTileX = require('./WorldToTileX');
99
var WorldToTileY = require('./WorldToTileY');
10+
var WorldToTileXY = require('./WorldToTileXY');
1011

1112
/**
1213
* Gets the tiles in the given rectangular area (in world coordinates) of the layer.

‎src/tilemaps/components/TileToWorldXY.js‎

Lines changed: 22 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,15 +30,35 @@ var TileToWorldXY = function (tileX, tileY, point, camera, layer)
3030
var orientation = layer.orientation;
3131
var tileWidth = layer.baseTileWidth;
3232
var tileHeight = layer.baseTileHeight;
33+
var tilemapLayer = layer.tilemapLayer;
3334

3435
if (point === undefined) { point = new Vector2(0, 0); }
3536

37+
38+
39+
40+
3641
if (orientation === "orthogonal") {
3742
point.x = TileToWorldX(tileX, camera, layer, orientation);
3843
point.y = TileToWorldY(tileY, camera, layer, orientation);
3944
} else if (orientation === "isometric") {
40-
point.x = (tileX - tileY) * (tileWidth/2);
41-
point.y = (tileX + tileY) * (tileHeight/2);
45+
46+
var layerWorldX = 0;
47+
var layerWorldY = 0;
48+
49+
if (tilemapLayer)
50+
{
51+
if (camera === undefined) { camera = tilemapLayer.scene.cameras.main; }
52+
layerWorldX = tilemapLayer.x + camera.scrollX * (1 - tilemapLayer.scrollFactorX);
53+
tileWidth *= tilemapLayer.scaleX;
54+
layerWorldY = (tilemapLayer.y + camera.scrollY * (1 - tilemapLayer.scrollFactorY));
55+
tileHeight *= tilemapLayer.scaleY;
56+
}
57+
58+
59+
60+
point.x = layerWorldX + (tileX - tileY) * (tileWidth/2);
61+
point.y = layerWorldY + (tileX + tileY) * (tileHeight/2);
4262

4363
}
4464

‎src/tilemaps/components/WorldToTileXY.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -46,8 +46,9 @@ var WorldToTileXY = function (worldX, worldY, snapToFloor, point, camera, layer)
4646

4747
// Find the world position relative to the static or dynamic layer's top left origin,
4848
// factoring in the camera's vertical scroll
49+
// console.log(1,worldY)
4950
worldY = worldY - (tilemapLayer.y + camera.scrollY * (1 - tilemapLayer.scrollFactorY));
50-
51+
// console.log(worldY)
5152
tileHeight *= tilemapLayer.scaleY;
5253

5354
// Find the world position relative to the static or dynamic layer's top left origin,
@@ -62,8 +63,8 @@ var WorldToTileXY = function (worldX, worldY, snapToFloor, point, camera, layer)
6263
: ((worldX/(tileWidth/2) + worldY/(tileHeight/2))/2);
6364

6465
point.y = snapToFloor
65-
? Math.floor(worldY/(tileHeight/2) - (worldX/(tileWidth/2))/2)
66-
: (worldY/(tileHeight/2) - (worldX/(tileWidth/2))/2);
66+
? Math.floor((worldY/(tileHeight/2) - worldX/(tileWidth/2))/2)
67+
: ((worldY/(tileHeight/2) - worldX/(tileWidth/2))/2);
6768
}
6869

6970

‎src/tilemaps/dynamiclayer/DynamicTilemapLayerCanvasRenderer.js‎

Lines changed: 16 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -89,8 +89,19 @@ var DynamicTilemapLayerCanvasRenderer = function (renderer, src, interpolationPe
8989

9090
if (tileTexCoords)
9191
{
92-
var halfWidth = tile.width / 2;
93-
var halfHeight = tile.height / 2;
92+
var width = 0;
93+
var height = 0;
94+
95+
if (src.layer.orientation === "isometric") {
96+
// here we use the tileset width and height to fix problems with isometric map types
97+
width = tileset.tileWidth;
98+
width = tileset.tileHeight;
99+
} else {
100+
width = tile.width;
101+
height = tile.width
102+
}
103+
halfWidth = width / 2;
104+
halfHeight = height / 2;
94105

95106
ctx.save();
96107

@@ -107,13 +118,13 @@ var DynamicTilemapLayerCanvasRenderer = function (renderer, src, interpolationPe
107118
}
108119

109120
ctx.globalAlpha = alpha * tile.alpha;
110-
121+
111122
ctx.drawImage(
112123
image,
113124
tileTexCoords.x, tileTexCoords.y,
114-
tile.width, tile.height,
125+
width, height,
115126
-halfWidth, -halfHeight,
116-
tile.width, tile.height
127+
width, height
117128
);
118129

119130
ctx.restore();

0 commit comments

Comments
 (0)