From 11c78f11b0ee5bc33a3fd73d9792937fdf0a2453 Mon Sep 17 00:00:00 2001 From: Paul Date: Sat, 24 Jan 2015 17:43:08 -0800 Subject: [PATCH 1/4] TilemapLayer - Safari fix - Changed default slice count to 1: this fixes yet another Safari-specific issue. --- src/tilemap/TilemapLayer.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/tilemap/TilemapLayer.js b/src/tilemap/TilemapLayer.js index df06711d0e..3fc14aa3da 100644 --- a/src/tilemap/TilemapLayer.js +++ b/src/tilemap/TilemapLayer.js @@ -135,6 +135,7 @@ Phaser.TilemapLayer = function (game, tilemap, index, width, height) { * * @property {integer} copySliceCount - [Internal] The number of vertical slices to copy when using a `copyCanvas`. * This is ratio of the pixel count of the primary canvas to the copy canvas. + * *Note*: Safari 7 based canvas implemenations do not work correctly if slices are used. * * @default */ @@ -142,7 +143,7 @@ Phaser.TilemapLayer = function (game, tilemap, index, width, height) { enableScrollDelta: true, overdrawRatio: 0.20, copyCanvas: null, - copySliceCount: 4 + copySliceCount: 1 }; /** @@ -937,7 +938,7 @@ Phaser.TilemapLayer.prototype.renderDeltaScroll = function (shiftX, shiftY) { this.context.clearRect(((left * tw) - scrollX), 0, (right - left + 1) * tw, renderH); var trueTop = Math.floor((0 + scrollY) / th); - var trueBottom = Math.floor((renderH - 1 + scrollY) / th); + var trueBottom = Math.floor((renderH - 1 + scrollY) / th) + 1; this.renderRegion(scrollX, scrollY, left, trueTop, right, trueBottom); } if (top <= bottom) From 4845c2054b4942da34be956869467d2b499cba96 Mon Sep 17 00:00:00 2001 From: Paul Date: Sat, 24 Jan 2015 17:49:20 -0800 Subject: [PATCH 2/4] TilemapLayer - quibbles - Removed accidental change --- src/tilemap/TilemapLayer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/tilemap/TilemapLayer.js b/src/tilemap/TilemapLayer.js index 3fc14aa3da..f091cbe30a 100644 --- a/src/tilemap/TilemapLayer.js +++ b/src/tilemap/TilemapLayer.js @@ -938,7 +938,7 @@ Phaser.TilemapLayer.prototype.renderDeltaScroll = function (shiftX, shiftY) { this.context.clearRect(((left * tw) - scrollX), 0, (right - left + 1) * tw, renderH); var trueTop = Math.floor((0 + scrollY) / th); - var trueBottom = Math.floor((renderH - 1 + scrollY) / th) + 1; + var trueBottom = Math.floor((renderH - 1 + scrollY) / th); this.renderRegion(scrollX, scrollY, left, trueTop, right, trueBottom); } if (top <= bottom) From 818d5bcdcccf641b4e7ba6155757ad8ea740c967 Mon Sep 17 00:00:00 2001 From: Paul Date: Sat, 24 Jan 2015 18:31:07 -0800 Subject: [PATCH 3/4] Tilemaps - removed N-slice support - Since N-slicing doesn't work in Safari, which is what the double-copy fix is for, it is simply removed. --- src/tilemap/TilemapLayer.js | 45 +++++++++++++++++++++++++++---------- 1 file changed, 33 insertions(+), 12 deletions(-) diff --git a/src/tilemap/TilemapLayer.js b/src/tilemap/TilemapLayer.js index f091cbe30a..793c002906 100644 --- a/src/tilemap/TilemapLayer.js +++ b/src/tilemap/TilemapLayer.js @@ -716,14 +716,44 @@ Phaser.TilemapLayer.prototype.shiftCanvas = function (context, x, y) } var copyCanvas = this.renderSettings.copyCanvas; - if (copyCanvas) + if (!copyCanvas) + { + // Avoids a second copy but flickers in Safari / Safari Mobile + // Ref. https://github.com/photonstorm/phaser/issues/1439 + context.save(); + context.globalCompositeOperation = 'copy'; + context.drawImage(canvas, dx, dy, copyW, copyH, sx, sy, copyW, copyH); + context.restore(); + } + else if (this.renderSettings.copySliceCount === 1) + { + // Use a second copy buffer, without slice support, for Safari .. again. + // Ensure copy canvas is large enough + if (copyCanvas.width < copyW || copyCanvas.height < copyH) + { + copyCanvas.width = copyW; + copyCanvas.height = copyH; + } + + var copyContext = copyCanvas.getContext('2d'); + copyContext.clearRect(0, 0, copyW, copyH); + copyContext.drawImage(canvas, dx, dy, copyW, copyH, 0, 0, copyW, copyH); + // clear allows default 'source-over' semantics + context.clearRect(sx, sy, copyW, copyH); + context.drawImage(copyCanvas, 0, 0, copyW, copyH, sx, sy, copyW, copyH); + } + else { // Copying happens in slices to minimize copy canvas size overhead + // (This does not work correctly in Safari 7 under move-region-up.) var sliceCount = this.renderSettings.copySliceCount; var sH = Math.ceil(copyH / sliceCount); // Ensure copy canvas is large enough - if (copyCanvas.width < copyW) { copyCanvas.width = copyW; } - if (copyCanvas.height < sH) { copyCanvas.height = sH; } + if (copyCanvas.width < copyW || copyCanvas.height < sH) + { + copyCanvas.width = copyW; + copyCanvas.height = sH; + } var vShift; if (dy >= sy) @@ -753,15 +783,6 @@ Phaser.TilemapLayer.prototype.shiftCanvas = function (context, x, y) } } - else - { - // Avoids a second copy but flickers in Safari / Safari Mobile - // Ref. https://github.com/photonstorm/phaser/issues/1439 - context.save(); - context.globalCompositeOperation = 'copy'; - context.drawImage(canvas, dx, dy, copyW, copyH, sx, sy, copyW, copyH); - context.restore(); - } }; /** From ad9245caeb415066f9f53a892575a33efe3a32a6 Mon Sep 17 00:00:00 2001 From: Paul Date: Sat, 24 Jan 2015 18:37:28 -0800 Subject: [PATCH 4/4] TilemapLayer - {missing changes} --- src/tilemap/TilemapLayer.js | 63 ++++++------------------------------- 1 file changed, 9 insertions(+), 54 deletions(-) diff --git a/src/tilemap/TilemapLayer.js b/src/tilemap/TilemapLayer.js index 793c002906..2d71ef27b1 100644 --- a/src/tilemap/TilemapLayer.js +++ b/src/tilemap/TilemapLayer.js @@ -133,17 +133,12 @@ Phaser.TilemapLayer = function (game, tilemap, index, width, height) { * Using a canvas bitblt/copy when the source and destinations region overlap produces unexpected behavior * in some browsers, notably Safari. * - * @property {integer} copySliceCount - [Internal] The number of vertical slices to copy when using a `copyCanvas`. - * This is ratio of the pixel count of the primary canvas to the copy canvas. - * *Note*: Safari 7 based canvas implemenations do not work correctly if slices are used. - * * @default */ this.renderSettings = { enableScrollDelta: true, overdrawRatio: 0.20, - copyCanvas: null, - copySliceCount: 1 + copyCanvas: null }; /** @@ -716,16 +711,7 @@ Phaser.TilemapLayer.prototype.shiftCanvas = function (context, x, y) } var copyCanvas = this.renderSettings.copyCanvas; - if (!copyCanvas) - { - // Avoids a second copy but flickers in Safari / Safari Mobile - // Ref. https://github.com/photonstorm/phaser/issues/1439 - context.save(); - context.globalCompositeOperation = 'copy'; - context.drawImage(canvas, dx, dy, copyW, copyH, sx, sy, copyW, copyH); - context.restore(); - } - else if (this.renderSettings.copySliceCount === 1) + if (copyCanvas) { // Use a second copy buffer, without slice support, for Safari .. again. // Ensure copy canvas is large enough @@ -744,45 +730,14 @@ Phaser.TilemapLayer.prototype.shiftCanvas = function (context, x, y) } else { - // Copying happens in slices to minimize copy canvas size overhead - // (This does not work correctly in Safari 7 under move-region-up.) - var sliceCount = this.renderSettings.copySliceCount; - var sH = Math.ceil(copyH / sliceCount); - // Ensure copy canvas is large enough - if (copyCanvas.width < copyW || copyCanvas.height < sH) - { - copyCanvas.width = copyW; - copyCanvas.height = sH; - } - - var vShift; - if (dy >= sy) - { - // move old region up, or don't change vertically - copy top to bottom - vShift = sH; - } - else - { - // move old region down - copy segments from bottom to top - vShift = -sH; - dy += (sH * (sliceCount - 1)); - sy += (sH * (sliceCount - 1)); - } - - var copyContext = copyCanvas.getContext('2d'); - while (sliceCount--) - { - copyContext.clearRect(0, 0, copyW, sH); - copyContext.drawImage(canvas, dx, dy, copyW, sH, 0, 0, copyW, sH); - // clear allows default 'source-over' semantics - context.clearRect(sx, sy, copyW, sH); - context.drawImage(copyCanvas, 0, 0, copyW, sH, sx, sy, copyW, sH); - - dy += vShift; - sy += vShift; - } - + // Avoids a second copy but flickers in Safari / Safari Mobile + // Ref. https://github.com/photonstorm/phaser/issues/1439 + context.save(); + context.globalCompositeOperation = 'copy'; + context.drawImage(canvas, dx, dy, copyW, copyH, sx, sy, copyW, copyH); + context.restore(); } + }; /**