Skip to content

Commit 9f44896

Browse files
photonstormphotonstorm
committed
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.
1 parent e0918df commit 9f44896

9 files changed

Lines changed: 32 additions & 149 deletions

File tree

‎CHANGELOG.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -110,6 +110,8 @@ Setting the `resolution` property in the Game Config to a value other than 1 wou
110110
* RenderTextures in WebGL will now set the viewport size, stopping the console warning in Firefox. Fix #3823 (thanks @SBCGames)
111111
* 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.
112112
* 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.
113+
* 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.
114+
* 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.
113115

114116
### Examples, Documentation and TypeScript
115117

‎src/gameobjects/bitmaptext/dynamic/DynamicBitmapTextCanvasRenderer.js‎

Lines changed: 2 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -82,24 +82,10 @@ var DynamicBitmapTextCanvasRenderer = function (renderer, src, interpolationPerc
8282
}
8383

8484
// Blend Mode
85-
if (renderer.currentBlendMode !== src.blendMode)
86-
{
87-
renderer.currentBlendMode = src.blendMode;
88-
ctx.globalCompositeOperation = renderer.blendModes[src.blendMode];
89-
}
85+
ctx.globalCompositeOperation = renderer.blendModes[src.blendMode];
9086

9187
// Alpha
92-
if (renderer.currentAlpha !== src.alpha)
93-
{
94-
renderer.currentAlpha = src.alpha;
95-
ctx.globalAlpha = src.alpha;
96-
}
97-
98-
// Smoothing
99-
if (renderer.currentScaleMode !== src.scaleMode)
100-
{
101-
renderer.currentScaleMode = src.scaleMode;
102-
}
88+
ctx.globalAlpha = src.alpha;
10389

10490
ctx.save();
10591

‎src/gameobjects/bitmaptext/static/BitmapTextCanvasRenderer.js‎

Lines changed: 5 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -87,24 +87,12 @@ var BitmapTextCanvasRenderer = function (renderer, src, interpolationPercentage,
8787
// Nothing to see, so abort early
8888
return;
8989
}
90-
else if (renderer.currentAlpha !== alpha)
91-
{
92-
renderer.currentAlpha = alpha;
93-
ctx.globalAlpha = alpha;
94-
}
9590

9691
// Blend Mode
97-
if (renderer.currentBlendMode !== src.blendMode)
98-
{
99-
renderer.currentBlendMode = src.blendMode;
100-
ctx.globalCompositeOperation = renderer.blendModes[src.blendMode];
101-
}
92+
ctx.globalCompositeOperation = renderer.blendModes[src.blendMode];
10293

103-
// Smoothing
104-
if (renderer.currentScaleMode !== src.scaleMode)
105-
{
106-
renderer.currentScaleMode = src.scaleMode;
107-
}
94+
// Alpha
95+
ctx.globalAlpha = alpha;
10896

10997
var tx = (src.x - camera.scrollX * src.scrollFactorX) + src.frame.x;
11098
var ty = (src.y - camera.scrollY * src.scrollFactorY) + src.frame.y;
@@ -119,10 +107,9 @@ var BitmapTextCanvasRenderer = function (renderer, src, interpolationPercentage,
119107

120108
ctx.save();
121109

122-
if (parentMatrix !== undefined)
110+
if (parentMatrix)
123111
{
124-
var matrix = parentMatrix.matrix;
125-
ctx.transform(matrix[0], matrix[1], matrix[2], matrix[3], matrix[4], matrix[5]);
112+
parentMatrix.copyToContext(ctx);
126113
}
127114

128115
ctx.translate(tx, ty);

‎src/gameobjects/graphics/GraphicsCanvasRenderer.js‎

Lines changed: 3 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -43,33 +43,19 @@ var GraphicsCanvasRenderer = function (renderer, src, interpolationPercentage, c
4343
var green = 0;
4444
var blue = 0;
4545

46-
// Alpha
47-
4846
var alpha = camera.alpha * src.alpha;
4947

5048
if (alpha === 0)
5149
{
5250
// Nothing to see, so abort early
5351
return;
5452
}
55-
else if (renderer.currentAlpha !== alpha)
56-
{
57-
renderer.currentAlpha = alpha;
58-
ctx.globalAlpha = alpha;
59-
}
6053

6154
// Blend Mode
62-
if (renderer.currentBlendMode !== src.blendMode)
63-
{
64-
renderer.currentBlendMode = src.blendMode;
65-
ctx.globalCompositeOperation = renderer.blendModes[src.blendMode];
66-
}
55+
ctx.globalCompositeOperation = renderer.blendModes[src.blendMode];
6756

68-
// Smoothing
69-
if (renderer.currentScaleMode !== src.scaleMode)
70-
{
71-
renderer.currentScaleMode = src.scaleMode;
72-
}
57+
// Alpha
58+
ctx.globalAlpha = alpha;
7359

7460
ctx.save();
7561

‎src/gameobjects/particles/ParticleManagerCanvasRenderer.js‎

Lines changed: 2 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -65,11 +65,7 @@ var ParticleManagerCanvasRenderer = function (renderer, emitterManager, interpol
6565
scrollY = 0;
6666
}
6767

68-
if (renderer.currentBlendMode !== emitter.blendMode)
69-
{
70-
renderer.currentBlendMode = emitter.blendMode;
71-
ctx.globalCompositeOperation = renderer.blendModes[emitter.blendMode];
72-
}
68+
ctx.globalCompositeOperation = renderer.blendModes[emitter.blendMode];
7369

7470
for (var i = 0; i < particleCount; i++)
7571
{
@@ -83,34 +79,18 @@ var ParticleManagerCanvasRenderer = function (renderer, emitterManager, interpol
8379
}
8480

8581
var frame = particle.frame;
82+
var cd = frame.canvasData;
8683

8784
var x = -(frame.halfWidth);
8885
var y = -(frame.halfHeight);
8986

90-
// var width = frame.width;
91-
// var height = frame.height;
92-
// var ox = width * 0.5;
93-
// var oy = height * 0.5;
94-
9587
particleMatrix.applyITRS(0, 0, particle.rotation, particle.scaleX, particle.scaleY);
9688

9789
particleMatrix.e = particle.x - scrollX;
9890
particleMatrix.f = particle.y - scrollY;
9991

10092
camMatrix.multiply(particleMatrix, calcMatrix);
10193

102-
// var x = -ox;
103-
// var y = -oy;
104-
105-
// var tx = particle.x - cameraScrollX;
106-
// var ty = particle.y - cameraScrollY;
107-
108-
// if (camera.roundPixels)
109-
// {
110-
// tx |= 0;
111-
// ty |= 0;
112-
// }
113-
11494
ctx.globalAlpha = alpha;
11595

11696
ctx.save();
@@ -123,14 +103,6 @@ var ParticleManagerCanvasRenderer = function (renderer, emitterManager, interpol
123103
y |= 0;
124104
}
125105

126-
// ctx.translate(tx, ty);
127-
128-
// ctx.rotate(particle.rotation);
129-
130-
// ctx.scale(particle.scaleX, particle.scaleY);
131-
132-
var cd = frame.canvasData;
133-
134106
ctx.drawImage(frame.source.image, cd.x, cd.y, cd.width, cd.height, x, y, cd.width, cd.height);
135107

136108
ctx.restore();

‎src/gameobjects/rendertexture/RenderTextureCanvasRenderer.js‎

Lines changed: 5 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -61,28 +61,15 @@ var RenderTextureCanvasRenderer = function (renderer, renderTexture, interpolati
6161

6262
ctx.save();
6363

64-
ctx.globalAlpha = alpha;
65-
6664
// Blend Mode
65+
ctx.globalCompositeOperation = renderer.blendModes[renderTexture.blendMode];
6766

68-
if (renderer.currentBlendMode !== renderTexture.blendMode)
69-
{
70-
renderer.currentBlendMode = renderTexture.blendMode;
71-
ctx.globalCompositeOperation = renderer.blendModes[renderTexture.blendMode];
72-
}
73-
74-
// Scale Mode
75-
76-
if (renderer.currentScaleMode !== renderTexture.scaleMode)
77-
{
78-
renderer.currentScaleMode = renderTexture.scaleMode;
79-
}
67+
// Alpha
68+
ctx.globalAlpha = alpha;
8069

81-
if (parentMatrix !== undefined)
70+
if (parentMatrix)
8271
{
83-
var matrix = parentMatrix.matrix;
84-
85-
ctx.transform(matrix[0], matrix[1], matrix[2], matrix[3], matrix[4], matrix[5]);
72+
parentMatrix.copyToContext(ctx);
8673
}
8774

8875
ctx.translate(renderTexture.x - camera.scrollX * renderTexture.scrollFactorX, renderTexture.y - camera.scrollY * renderTexture.scrollFactorY);

‎src/gameobjects/text/static/TextCanvasRenderer.js‎

Lines changed: 5 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -37,35 +37,20 @@ var TextCanvasRenderer = function (renderer, src, interpolationPercentage, camer
3737
// Nothing to see, so abort early
3838
return;
3939
}
40-
else if (renderer.currentAlpha !== alpha)
41-
{
42-
renderer.currentAlpha = alpha;
43-
ctx.globalAlpha = alpha;
44-
}
4540

4641
// Blend Mode
42+
ctx.globalCompositeOperation = renderer.blendModes[src.blendMode];
4743

48-
if (renderer.currentBlendMode !== src.blendMode)
49-
{
50-
renderer.currentBlendMode = src.blendMode;
51-
ctx.globalCompositeOperation = renderer.blendModes[src.blendMode];
52-
}
53-
54-
// Smoothing
55-
56-
if (renderer.currentScaleMode !== src.scaleMode)
57-
{
58-
renderer.currentScaleMode = src.scaleMode;
59-
}
44+
// Alpha
45+
ctx.globalAlpha = alpha;
6046

6147
var canvas = src.canvas;
6248

6349
ctx.save();
6450

65-
if (parentMatrix !== undefined)
51+
if (parentMatrix)
6652
{
67-
var matrix = parentMatrix.matrix;
68-
ctx.transform(matrix[0], matrix[1], matrix[2], matrix[3], matrix[4], matrix[5]);
53+
parentMatrix.copyToContext(ctx);
6954
}
7055

7156
var tx = src.x - camera.scrollX * src.scrollFactorX;

‎src/gameobjects/tilesprite/TileSpriteCanvasRenderer.js‎

Lines changed: 5 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -26,35 +26,19 @@ var TileSpriteCanvasRenderer = function (renderer, src, interpolationPercentage,
2626

2727
src.updateTileTexture();
2828

29-
// Alpha
30-
3129
var alpha = camera.alpha * src.alpha;
3230

3331
if (alpha === 0)
3432
{
3533
// Nothing to see, so abort early
3634
return;
3735
}
38-
else if (renderer.currentAlpha !== alpha)
39-
{
40-
renderer.currentAlpha = alpha;
41-
ctx.globalAlpha = alpha;
42-
}
4336

4437
// Blend Mode
38+
ctx.globalCompositeOperation = renderer.blendModes[src.blendMode];
4539

46-
if (renderer.currentBlendMode !== src.blendMode)
47-
{
48-
renderer.currentBlendMode = src.blendMode;
49-
ctx.globalCompositeOperation = renderer.blendModes[src.blendMode];
50-
}
51-
52-
// Smoothing
53-
54-
if (renderer.currentScaleMode !== src.scaleMode)
55-
{
56-
renderer.currentScaleMode = src.scaleMode;
57-
}
40+
// Alpha
41+
ctx.globalAlpha = alpha;
5842

5943
var dx = frame.x - (src.originX * src.width);
6044
var dy = frame.y - (src.originY * src.height);
@@ -89,11 +73,9 @@ var TileSpriteCanvasRenderer = function (renderer, src, interpolationPercentage,
8973

9074
ctx.save();
9175

92-
if (parentMatrix !== undefined)
76+
if (parentMatrix)
9377
{
94-
var matrix = parentMatrix.matrix;
95-
96-
ctx.transform(matrix[0], matrix[1], matrix[2], matrix[3], matrix[4], matrix[5]);
78+
parentMatrix.copyToContext(ctx);
9779
}
9880

9981
ctx.translate(dx, dy);

‎src/renderer/canvas/utils/DrawImage.js‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -33,15 +33,11 @@ var DrawImage = function (src, camera, parentTransformMatrix)
3333
return;
3434
}
3535

36-
ctx.globalAlpha = alpha;
37-
3836
// Blend Mode
37+
ctx.globalCompositeOperation = this.blendModes[src.blendMode];
3938

40-
if (this.currentBlendMode !== src.blendMode)
41-
{
42-
this.currentBlendMode = src.blendMode;
43-
ctx.globalCompositeOperation = this.blendModes[src.blendMode];
44-
}
39+
// Alpha
40+
ctx.globalAlpha = alpha;
4541

4642
var camMatrix = _tempCameraMatrix;
4743
var spriteMatrix = _tempSpriteMatrix;

0 commit comments

Comments
 (0)