Mirrors/phaser
2
0
Fork 0
mirror of https://github.com/photonstorm/phaser synced 2025-01-09 19:58:52 +00:00
Code Issues Projects Releases Packages Wiki Activity

fixed dynamic layer rendering

Browse source
This commit is contained in:
Svipal 2020-02-04 04:57:28 +01:00
parent fd29e96a5d
commit a8b60cf946
10 changed files with 4348 additions and 3913 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3881
dist/phaser-arcade-physics.js vendored
View file

File diff suppressed because it is too large Load diff

2
dist/phaser-arcade-physics.min.js vendored
View file

File diff suppressed because one or more lines are too long

4047
dist/phaser.js vendored
View file

File diff suppressed because it is too large Load diff

2
dist/phaser.min.js vendored
View file

File diff suppressed because one or more lines are too long

226
src/tilemaps/components/CullTiles.js
View file

@ -22,6 +22,7 @@ var SnapCeil = require('../../math/snap/SnapCeil');
*/
var CullTiles = function (layer, camera, outputArray, renderOrder)
{
if (outputArray === undefined) { outputArray = []; }
if (renderOrder === undefined) { renderOrder = 0; }
@ -44,104 +45,201 @@ var CullTiles = function (layer, camera, outputArray, renderOrder)
var drawRight = mapWidth;
var drawTop = 0;
var drawBottom = mapHeight;
var inIsoBounds = function (x,y) { return true;}
if (!tilemapLayer.skipCull && tilemapLayer.scrollFactorX === 1 && tilemapLayer.scrollFactorY === 1) {
if (layer.orientation == "orthogonal") {
// Camera world view bounds, snapped for scaled tile size
// Cull Padding values are given in tiles, not pixels
if (!tilemapLayer.skipCull && tilemapLayer.scrollFactorX === 1 && tilemapLayer.scrollFactorY === 1)
{
// Camera world view bounds, snapped for scaled tile size
// Cull Padding values are given in tiles, not pixels
var boundsLeft = SnapFloor(camera.worldView.x - tilemapLayer.x, tileW, 0, true) - tilemapLayer.cullPaddingX;
var boundsRight = SnapCeil(camera.worldView.right - tilemapLayer.x, tileW, 0, true) + tilemapLayer.cullPaddingX;
var boundsTop = SnapFloor(camera.worldView.y - tilemapLayer.y, tileH, 0, true) - tilemapLayer.cullPaddingY;
var boundsBottom = SnapCeil(camera.worldView.bottom - tilemapLayer.y, tileH, 0, true) + tilemapLayer.cullPaddingY;
var boundsLeft = SnapFloor(camera.worldView.x - tilemapLayer.x, tileW, 0, true) - tilemapLayer.cullPaddingX;
var boundsRight = SnapCeil(camera.worldView.right - tilemapLayer.x, tileW, 0, true) + tilemapLayer.cullPaddingX;
var boundsTop = SnapFloor(camera.worldView.y - tilemapLayer.y, tileH, 0, true) - tilemapLayer.cullPaddingY;
var boundsBottom = SnapCeil(camera.worldView.bottom - tilemapLayer.y, tileH, 0, true) + tilemapLayer.cullPaddingY;
drawLeft = Math.max(0, boundsLeft);
drawRight = Math.min(mapWidth, boundsRight);
drawTop = Math.max(0, boundsTop);
drawBottom = Math.min(mapHeight, boundsBottom);
drawLeft = Math.max(0, boundsLeft);
drawRight = Math.min(mapWidth, boundsRight);
drawTop = Math.max(0, boundsTop);
drawBottom = Math.min(mapHeight, boundsBottom);
} else if (layer.orientation == "isometric") {
inIsoBounds = function (x,y){
var pos = tilemapLayer.tileToWorldXY(x,y,undefined,camera)
return (pos.x > camera.worldView.x && pos.x < camera.worldView.right) && (pos.y > camera.worldView.y && pos.y < camera.worldView.bottom)
}
}
}
var x;
var y;
var tile;
if (renderOrder === 0)
{
// right-down
for (y = drawTop; y < drawBottom; y++)
if (layer.orientation == "orthogonal") {
if (renderOrder === 0)
{
for (x = drawLeft; mapData[y] && x < drawRight; x++)
// right-down
for (y = drawTop; y < drawBottom; y++)
{
tile = mapData[y][x];
if (!tile || tile.index === -1 || !tile.visible || tile.alpha === 0)
for (x = drawLeft; mapData[y] && x < drawRight; x++)
{
continue;
}
tile = mapData[y][x];
outputArray.push(tile);
if (!tile || tile.index === -1 || !tile.visible || tile.alpha === 0)
{
continue;
}
outputArray.push(tile);
}
}
}
}
else if (renderOrder === 1)
{
// left-down
for (y = drawTop; y < drawBottom; y++)
else if (renderOrder === 1)
{
for (x = drawRight; mapData[y] && x >= drawLeft; x--)
// left-down
for (y = drawTop; y < drawBottom; y++)
{
tile = mapData[y][x];
if (!tile || tile.index === -1 || !tile.visible || tile.alpha === 0)
for (x = drawRight; mapData[y] && x >= drawLeft; x--)
{
continue;
}
tile = mapData[y][x];
outputArray.push(tile);
if (!tile || tile.index === -1 || !tile.visible || tile.alpha === 0)
{
continue;
}
outputArray.push(tile);
}
}
}
}
else if (renderOrder === 2)
{
// right-up
for (y = drawBottom; y >= drawTop; y--)
else if (renderOrder === 2)
{
for (x = drawLeft; mapData[y] && x < drawRight; x++)
// right-up
for (y = drawBottom; y >= drawTop; y--)
{
tile = mapData[y][x];
if (!tile || tile.index === -1 || !tile.visible || tile.alpha === 0)
for (x = drawLeft; mapData[y] && x < drawRight; x++)
{
continue;
}
tile = mapData[y][x];
outputArray.push(tile);
if (!tile || tile.index === -1 || !tile.visible || tile.alpha === 0)
{
continue;
}
outputArray.push(tile);
}
}
}
}
else if (renderOrder === 3)
{
// left-up
for (y = drawBottom; y >= drawTop; y--)
else if (renderOrder === 3)
{
for (x = drawRight; mapData[y] && x >= drawLeft; x--)
// left-up
for (y = drawBottom; y >= drawTop; y--)
{
tile = mapData[y][x];
if (!tile || tile.index === -1 || !tile.visible || tile.alpha === 0)
for (x = drawRight; mapData[y] && x >= drawLeft; x--)
{
continue;
}
tile = mapData[y][x];
outputArray.push(tile);
if (!tile || tile.index === -1 || !tile.visible || tile.alpha === 0)
{
continue;
}
outputArray.push(tile);
}
}
}
} else if (layer.orientation == "isometric") {
if (renderOrder === 0)
{
// right-down
for (y = drawTop; y < drawBottom; y++)
{
for (x = drawLeft; mapData[y] && x < drawRight; x++)
{
if (inIsoBounds(x,y)) {
tile = mapData[y][x];
if (!tile || tile.index === -1 || !tile.visible || tile.alpha === 0)
{
continue;
}
outputArray.push(tile);
}
}
}
}
else if (renderOrder === 1)
{
// left-down
for (y = drawTop; y < drawBottom; y++)
{
for (x = drawRight; mapData[y] && x >= drawLeft; x--)
{
if (inIsoBounds(x,y)) {
tile = mapData[y][x];
if (!tile || tile.index === -1 || !tile.visible || tile.alpha === 0)
{
continue;
}
outputArray.push(tile);
}
}
}
}
else if (renderOrder === 2)
{
// right-up
for (y = drawBottom; y >= drawTop; y--)
{
for (x = drawLeft; mapData[y] && x < drawRight; x++)
{
if (inIsoBounds(x,y)) {
tile = mapData[y][x];
if (!tile || tile.index === -1 || !tile.visible || tile.alpha === 0)
{
continue;
}
outputArray.push(tile);
}
}
}
}
else if (renderOrder === 3)
{
// left-up
for (y = drawBottom; y >= drawTop; y--)
{
for (x = drawRight; mapData[y] && x >= drawLeft; x--)
{
if (inIsoBounds(x,y)) {
tile = mapData[y][x];
if (!tile || tile.index === -1 || !tile.visible || tile.alpha === 0)
{
continue;
}
outputArray.push(tile);
}
}
}
}
}
tilemapLayer.tilesDrawn = outputArray.length;
tilemapLayer.tilesTotal = mapWidth * mapHeight;

1
src/tilemaps/components/GetTilesWithinWorldXY.js
View file

@ -7,6 +7,7 @@
var GetTilesWithin = require('./GetTilesWithin');
var WorldToTileX = require('./WorldToTileX');
var WorldToTileY = require('./WorldToTileY');
var WorldToTileXY = require('./WorldToTileXY');
/**
* Gets the tiles in the given rectangular area (in world coordinates) of the layer.

24
src/tilemaps/components/TileToWorldXY.js
View file

@ -30,15 +30,35 @@ var TileToWorldXY = function (tileX, tileY, point, camera, layer)
var orientation = layer.orientation;
var tileWidth = layer.baseTileWidth;
var tileHeight = layer.baseTileHeight;
var tilemapLayer = layer.tilemapLayer;
if (point === undefined) { point = new Vector2(0, 0); }
if (orientation === "orthogonal") {
point.x = TileToWorldX(tileX, camera, layer, orientation);
point.y = TileToWorldY(tileY, camera, layer, orientation);
} else if (orientation === "isometric") {
point.x = (tileX - tileY) * (tileWidth/2);
point.y = (tileX + tileY) * (tileHeight/2);
var layerWorldX = 0;
var layerWorldY = 0;
if (tilemapLayer)
{
if (camera === undefined) { camera = tilemapLayer.scene.cameras.main; }
layerWorldX = tilemapLayer.x + camera.scrollX * (1 - tilemapLayer.scrollFactorX);
tileWidth *= tilemapLayer.scaleX;
layerWorldY = (tilemapLayer.y + camera.scrollY * (1 - tilemapLayer.scrollFactorY));
tileHeight *= tilemapLayer.scaleY;
}
point.x = layerWorldX + (tileX - tileY) * (tileWidth/2);
point.y = layerWorldY + (tileX + tileY) * (tileHeight/2);
}

7
src/tilemaps/components/WorldToTileXY.js
View file

@ -46,8 +46,9 @@ var WorldToTileXY = function (worldX, worldY, snapToFloor, point, camera, layer)
// Find the world position relative to the static or dynamic layer's top left origin,
// factoring in the camera's vertical scroll
// console.log(1,worldY)
worldY = worldY - (tilemapLayer.y + camera.scrollY * (1 - tilemapLayer.scrollFactorY));
// console.log(worldY)
tileHeight *= tilemapLayer.scaleY;
// 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)
: ((worldX/(tileWidth/2) + worldY/(tileHeight/2))/2);
point.y = snapToFloor
? Math.floor(worldY/(tileHeight/2) - (worldX/(tileWidth/2))/2)
: (worldY/(tileHeight/2) - (worldX/(tileWidth/2))/2);
? Math.floor((worldY/(tileHeight/2) - worldX/(tileWidth/2))/2)
: ((worldY/(tileHeight/2) - worldX/(tileWidth/2))/2);
}

19
src/tilemaps/dynamiclayer/DynamicTilemapLayerCanvasRenderer.js
View file

@ -89,8 +89,19 @@ var DynamicTilemapLayerCanvasRenderer = function (renderer, src, interpolationPe
if (tileTexCoords)
{
var halfWidth = tile.width / 2;
var halfHeight = tile.height / 2;
var width = 0;
var height = 0;
if (src.layer.orientation === "isometric") {
// here we use the tileset width and height to fix problems with isometric map types
width = tileset.tileWidth;
width = tileset.tileHeight;
} else {
width = tile.width;
height = tile.width
}
halfWidth = width / 2;
halfHeight = height / 2;
ctx.save();
@ -111,9 +122,9 @@ var DynamicTilemapLayerCanvasRenderer = function (renderer, src, interpolationPe
ctx.drawImage(
image,
tileTexCoords.x, tileTexCoords.y,
tile.width, tile.height,
width, height,
-halfWidth, -halfHeight,
tile.width, tile.height
width, height
);
ctx.restore();

28
src/tilemaps/dynamiclayer/DynamicTilemapLayerWebGLRenderer.js
View file

@ -74,15 +74,29 @@ var DynamicTilemapLayerWebGLRenderer = function (renderer, src, interpolationPer
{
continue;
}
if (src.layer.orientation === "isometric") {
// here we use the tileset width and height to fix problems with isometric map types
var frameWidth = tile.width;
var frameHeight = tile.height;
var frameWidth = tileset.tileWidth;
var frameHeight = tileset.tileHeight;
var frameX = tileTexCoords.x;
var frameY = tileTexCoords.y;
var tw = tileset.tileWidth * 0.5;
var th = tileset.tileHeight * 0.5;
} else {
var frameWidth = tile.width;
var frameHeight = tile.height;
var frameX = tileTexCoords.x;
var frameY = tileTexCoords.y;
var tw = tile.width * 0.5;
var th = tile.height * 0.5;
}
var frameX = tileTexCoords.x;
var frameY = tileTexCoords.y;
var tw = tile.width * 0.5;
var th = tile.height * 0.5;
var tint = getTint(tile.tint, alpha * tile.alpha);
@ -91,7 +105,7 @@ var DynamicTilemapLayerWebGLRenderer = function (renderer, src, interpolationPer
texture,
texture.width, texture.height,
x + ((tw + tile.pixelX) * sx), y + ((th + tile.pixelY) * sy),
tile.width, tile.height,
frameWidth, frameHeight,
sx, sy,
tile.rotation,
tile.flipX, tile.flipY,