Mirrors/phaser
2
0
Fork 0
mirror of https://github.com/photonstorm/phaser synced 2025-02-16 22:18:29 +00:00
Code Issues Projects Releases Packages Wiki Activity

The Blend Mode is now set directly in all Canvas Renderers without comparing it to what's stored in the Canvas Renderer. This fixes problems where the blend mode would be lost between two different Game Objects because they restored the context, but didn't update the renderer flag. Game Objects in Canvas can now mix and match blend modes across the display list.

Browse source
This commit is contained in:
Richard Davey 2018-08-03 01:29:18 +01:00
parent e0918df6b0
commit 9f44896a3f
9 changed files with 33 additions and 150 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
CHANGELOG.md
View file

@ -110,6 +110,8 @@ Setting the `resolution` property in the Game Config to a value other than 1 wou
* RenderTextures in WebGL will now set the viewport size, stopping the console warning in Firefox. Fix #3823 (thanks @SBCGames)
* Particles now take the Cameras alpha value into consideration when calculating their final alpha values in WebGL. They previously ignored it. If you now alpha a Camera out all particles will change accordingly.
* The `CullTiles` updates from 3.11 didn't factor in the position of the Tilemap Layer to its bounds calculations, causing Static layers displayed out of the Camera viewport to never render in Canvas mode. The method has also been optimized further, with less divisions and less checks if culling is disabled.
* The Particle Emitter when running in Canvas wouldn't allow more than 1 emitter to use a blend mode (as seen in the Electric examples). The blend mode is properly set for each emitter now.
* The Blend Mode is now set directly in all Canvas Renderers without comparing it to what's stored in the Canvas Renderer. This fixes problems where the blend mode would be lost between two different Game Objects because they restored the context, but didn't update the renderer flag. Game Objects in Canvas can now mix and match blend modes across the display list.
### Examples, Documentation and TypeScript

18
src/gameobjects/bitmaptext/dynamic/DynamicBitmapTextCanvasRenderer.js
View file

@ -82,24 +82,10 @@ var DynamicBitmapTextCanvasRenderer = function (renderer, src, interpolationPerc
}
// Blend Mode
if (renderer.currentBlendMode !== src.blendMode)
{
renderer.currentBlendMode = src.blendMode;
ctx.globalCompositeOperation = renderer.blendModes[src.blendMode];
}
ctx.globalCompositeOperation = renderer.blendModes[src.blendMode];
// Alpha
if (renderer.currentAlpha !== src.alpha)
{
renderer.currentAlpha = src.alpha;
ctx.globalAlpha = src.alpha;
}
// Smoothing
if (renderer.currentScaleMode !== src.scaleMode)
{
renderer.currentScaleMode = src.scaleMode;
}
ctx.globalAlpha = src.alpha;
ctx.save();

23
src/gameobjects/bitmaptext/static/BitmapTextCanvasRenderer.js
View file

@ -87,24 +87,12 @@ var BitmapTextCanvasRenderer = function (renderer, src, interpolationPercentage,
// Nothing to see, so abort early
return;
}
else if (renderer.currentAlpha !== alpha)
{
renderer.currentAlpha = alpha;
ctx.globalAlpha = alpha;
}
// Blend Mode
if (renderer.currentBlendMode !== src.blendMode)
{
renderer.currentBlendMode = src.blendMode;
ctx.globalCompositeOperation = renderer.blendModes[src.blendMode];
}
ctx.globalCompositeOperation = renderer.blendModes[src.blendMode];
// Smoothing
if (renderer.currentScaleMode !== src.scaleMode)
{
renderer.currentScaleMode = src.scaleMode;
}
// Alpha
ctx.globalAlpha = alpha;
var tx = (src.x - camera.scrollX * src.scrollFactorX) + src.frame.x;
var ty = (src.y - camera.scrollY * src.scrollFactorY) + src.frame.y;
@ -119,10 +107,9 @@ var BitmapTextCanvasRenderer = function (renderer, src, interpolationPercentage,
ctx.save();
if (parentMatrix !== undefined)
if (parentMatrix)
{
var matrix = parentMatrix.matrix;
ctx.transform(matrix[0], matrix[1], matrix[2], matrix[3], matrix[4], matrix[5]);
parentMatrix.copyToContext(ctx);
}
ctx.translate(tx, ty);

20
src/gameobjects/graphics/GraphicsCanvasRenderer.js
View file

@ -43,8 +43,6 @@ var GraphicsCanvasRenderer = function (renderer, src, interpolationPercentage, c
var green = 0;
var blue = 0;
// Alpha
var alpha = camera.alpha * src.alpha;
if (alpha === 0)
@ -52,24 +50,12 @@ var GraphicsCanvasRenderer = function (renderer, src, interpolationPercentage, c
// Nothing to see, so abort early
return;
}
else if (renderer.currentAlpha !== alpha)
{
renderer.currentAlpha = alpha;
ctx.globalAlpha = alpha;
}
// Blend Mode
if (renderer.currentBlendMode !== src.blendMode)
{
renderer.currentBlendMode = src.blendMode;
ctx.globalCompositeOperation = renderer.blendModes[src.blendMode];
}
ctx.globalCompositeOperation = renderer.blendModes[src.blendMode];
// Smoothing
if (renderer.currentScaleMode !== src.scaleMode)
{
renderer.currentScaleMode = src.scaleMode;
}
// Alpha
ctx.globalAlpha = alpha;
ctx.save();

32
src/gameobjects/particles/ParticleManagerCanvasRenderer.js
View file

@ -65,11 +65,7 @@ var ParticleManagerCanvasRenderer = function (renderer, emitterManager, interpol
scrollY = 0;
}
if (renderer.currentBlendMode !== emitter.blendMode)
{
renderer.currentBlendMode = emitter.blendMode;
ctx.globalCompositeOperation = renderer.blendModes[emitter.blendMode];
}
ctx.globalCompositeOperation = renderer.blendModes[emitter.blendMode];
for (var i = 0; i < particleCount; i++)
{
@ -83,15 +79,11 @@ var ParticleManagerCanvasRenderer = function (renderer, emitterManager, interpol
}
var frame = particle.frame;
var cd = frame.canvasData;
var x = -(frame.halfWidth);
var y = -(frame.halfHeight);
// var width = frame.width;
// var height = frame.height;
// var ox = width * 0.5;
// var oy = height * 0.5;
particleMatrix.applyITRS(0, 0, particle.rotation, particle.scaleX, particle.scaleY);
particleMatrix.e = particle.x - scrollX;
@ -99,18 +91,6 @@ var ParticleManagerCanvasRenderer = function (renderer, emitterManager, interpol
camMatrix.multiply(particleMatrix, calcMatrix);
// var x = -ox;
// var y = -oy;
// var tx = particle.x - cameraScrollX;
// var ty = particle.y - cameraScrollY;
// if (camera.roundPixels)
// {
// tx |= 0;
// ty |= 0;
// }
ctx.globalAlpha = alpha;
ctx.save();
@ -123,14 +103,6 @@ var ParticleManagerCanvasRenderer = function (renderer, emitterManager, interpol
y |= 0;
}
// ctx.translate(tx, ty);
// ctx.rotate(particle.rotation);
// ctx.scale(particle.scaleX, particle.scaleY);
var cd = frame.canvasData;
ctx.drawImage(frame.source.image, cd.x, cd.y, cd.width, cd.height, x, y, cd.width, cd.height);
ctx.restore();

25
src/gameobjects/rendertexture/RenderTextureCanvasRenderer.js
View file

@ -61,28 +61,15 @@ var RenderTextureCanvasRenderer = function (renderer, renderTexture, interpolati
ctx.save();
// Blend Mode
ctx.globalCompositeOperation = renderer.blendModes[renderTexture.blendMode];
// Alpha
ctx.globalAlpha = alpha;
// Blend Mode
if (renderer.currentBlendMode !== renderTexture.blendMode)
if (parentMatrix)
{
renderer.currentBlendMode = renderTexture.blendMode;
ctx.globalCompositeOperation = renderer.blendModes[renderTexture.blendMode];
}
// Scale Mode
if (renderer.currentScaleMode !== renderTexture.scaleMode)
{
renderer.currentScaleMode = renderTexture.scaleMode;
}
if (parentMatrix !== undefined)
{
var matrix = parentMatrix.matrix;
ctx.transform(matrix[0], matrix[1], matrix[2], matrix[3], matrix[4], matrix[5]);
parentMatrix.copyToContext(ctx);
}
ctx.translate(renderTexture.x - camera.scrollX * renderTexture.scrollFactorX, renderTexture.y - camera.scrollY * renderTexture.scrollFactorY);

25
src/gameobjects/text/static/TextCanvasRenderer.js
View file

@ -37,35 +37,20 @@ var TextCanvasRenderer = function (renderer, src, interpolationPercentage, camer
// Nothing to see, so abort early
return;
}
else if (renderer.currentAlpha !== alpha)
{
renderer.currentAlpha = alpha;
ctx.globalAlpha = alpha;
}
// Blend Mode
ctx.globalCompositeOperation = renderer.blendModes[src.blendMode];
if (renderer.currentBlendMode !== src.blendMode)
{
renderer.currentBlendMode = src.blendMode;
ctx.globalCompositeOperation = renderer.blendModes[src.blendMode];
}
// Smoothing
if (renderer.currentScaleMode !== src.scaleMode)
{
renderer.currentScaleMode = src.scaleMode;
}
// Alpha
ctx.globalAlpha = alpha;
var canvas = src.canvas;
ctx.save();
if (parentMatrix !== undefined)
if (parentMatrix)
{
var matrix = parentMatrix.matrix;
ctx.transform(matrix[0], matrix[1], matrix[2], matrix[3], matrix[4], matrix[5]);
parentMatrix.copyToContext(ctx);
}
var tx = src.x - camera.scrollX * src.scrollFactorX;

28
src/gameobjects/tilesprite/TileSpriteCanvasRenderer.js
View file

@ -26,8 +26,6 @@ var TileSpriteCanvasRenderer = function (renderer, src, interpolationPercentage,
src.updateTileTexture();
// Alpha
var alpha = camera.alpha * src.alpha;
if (alpha === 0)
@ -35,26 +33,12 @@ var TileSpriteCanvasRenderer = function (renderer, src, interpolationPercentage,
// Nothing to see, so abort early
return;
}
else if (renderer.currentAlpha !== alpha)
{
renderer.currentAlpha = alpha;
ctx.globalAlpha = alpha;
}
// Blend Mode
ctx.globalCompositeOperation = renderer.blendModes[src.blendMode];
if (renderer.currentBlendMode !== src.blendMode)
{
renderer.currentBlendMode = src.blendMode;
ctx.globalCompositeOperation = renderer.blendModes[src.blendMode];
}
// Smoothing
if (renderer.currentScaleMode !== src.scaleMode)
{
renderer.currentScaleMode = src.scaleMode;
}
// Alpha
ctx.globalAlpha = alpha;
var dx = frame.x - (src.originX * src.width);
var dy = frame.y - (src.originY * src.height);
@ -89,11 +73,9 @@ var TileSpriteCanvasRenderer = function (renderer, src, interpolationPercentage,
ctx.save();
if (parentMatrix !== undefined)
if (parentMatrix)
{
var matrix = parentMatrix.matrix;
ctx.transform(matrix[0], matrix[1], matrix[2], matrix[3], matrix[4], matrix[5]);
parentMatrix.copyToContext(ctx);
}
ctx.translate(dx, dy);

10
src/renderer/canvas/utils/DrawImage.js
View file

@ -33,15 +33,11 @@ var DrawImage = function (src, camera, parentTransformMatrix)
return;
}
ctx.globalAlpha = alpha;
// Blend Mode
ctx.globalCompositeOperation = this.blendModes[src.blendMode];
if (this.currentBlendMode !== src.blendMode)
{
this.currentBlendMode = src.blendMode;
ctx.globalCompositeOperation = this.blendModes[src.blendMode];
}
// Alpha
ctx.globalAlpha = alpha;
var camMatrix = _tempCameraMatrix;
var spriteMatrix = _tempSpriteMatrix;