Skip to content

Commit d309be3

Browse files
bitnenferbitnenfer
committed
Canvas rendering working with the new system.
1 parent 1a0f411 commit d309be3

9 files changed

Lines changed: 111 additions & 55 deletions

File tree

‎v3/src/checksum.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
var CHECKSUM = {
2-
build: '9824f700-f86a-11e6-b8eb-f13c1d2880b2'
2+
build: '692fe170-f870-11e6-8132-938c0b25d0cb'
33
};
44
module.exports = CHECKSUM;

‎v3/src/gameobjects/blitter/BlitterCanvasRenderer.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11

2-
var BlitterCanvasRenderer = function (renderer, src, interpolationPercentage)
2+
var BlitterCanvasRenderer = function (renderer, src, interpolationPercentage, camera)
33
{
44
var worldAlpha = src.color.worldAlpha;
55
var list = src.getRenderList();
@@ -26,7 +26,7 @@ var BlitterCanvasRenderer = function (renderer, src, interpolationPercentage)
2626
ca = renderer.setAlpha(bob.alpha);
2727
}
2828

29-
renderer.blitImage(bob.x, bob.y, bob.frame);
29+
renderer.blitImage(bob.x, bob.y, bob.frame, camera);
3030
}
3131
};
3232

‎v3/src/gameobjects/image/ImageCanvasRenderer.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11

2-
var ImageCanvasRenderer = function (renderer, src, interpolationPercentage)
2+
var ImageCanvasRenderer = function (renderer, src, interpolationPercentage, camera)
33
{
44
var frame = src.frame;
55

@@ -15,7 +15,7 @@ var ImageCanvasRenderer = function (renderer, src, interpolationPercentage)
1515
var tint = src.color._glTint;
1616
var bg = src.color._glBg;
1717

18-
renderer.drawImage(frame, src.blendMode, src.transform, src.anchorX, src.anchorY, alpha, tint, bg);
18+
renderer.drawImage(frame, src.blendMode, src.transform, src.anchorX, src.anchorY, alpha, tint, bg, camera);
1919
};
2020

2121
module.exports = ImageCanvasRenderer;

‎v3/src/gameobjects/sprite/SpriteCanvasRenderer.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11

2-
var SpriteCanvasRenderer = function (renderer, src, interpolationPercentage)
2+
var SpriteCanvasRenderer = function (renderer, src, interpolationPercentage, camera)
33
{
44
var frame = src.frame;
55
var alpha = src.color.worldAlpha * 255 << 24;
@@ -15,14 +15,14 @@ var SpriteCanvasRenderer = function (renderer, src, interpolationPercentage)
1515
var tint = src.color._glTint;
1616
var bg = src.color._glBg;
1717

18-
renderer.drawImage(frame, src.blendMode, data, alpha, tint, bg);
18+
renderer.drawImage(frame, src.blendMode, data, alpha, tint, bg, camera);
1919

2020
// Render children
2121
for (var i = 0; i < src.children.list.length; i++)
2222
{
2323
var child = src.children.list[i];
2424

25-
child.renderCanvas(renderer, child, interpolationPercentage);
25+
child.renderCanvas(renderer, child, interpolationPercentage, canvas, camera);
2626
}
2727
};
2828

‎v3/src/gameobjects/sprite/SpriteWebGLRenderer.js‎

Lines changed: 82 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,89 @@
11

2-
var SpriteWebGLRenderer = function (renderer, src, interpolationPercentage)
2+
var SpriteWebGLRenderer = function (renderer, src, interpolationPercentage, camera)
33
{
4-
var frame = src.frame;
5-
var alpha = src.color.worldAlpha * 255 << 24;
6-
7-
// Skip rendering?
8-
9-
if (src.skipRender || !src.visible || alpha === 0 || !frame.cutWidth || !frame.cutHeight)
10-
{
11-
return;
12-
}
13-
14-
var transform = src.transform;
4+
//--------------------
5+
// Inlined quad push
6+
//--------------------
157

16-
renderer.setBlendMode(src.color._blendMode);
17-
18-
renderer.spriteBatch.add(
19-
frame,
20-
transform._anchorX, transform._anchorY,
21-
transform.world.tx, transform.world.ty,
22-
transform._worldScaleX, transform._worldScaleY,
23-
transform._worldRotation,
24-
src.color._glTint
25-
);
26-
27-
// Render children
28-
for (var i = 0; i < src.children.list.length; i++)
29-
{
30-
var child = src.children.list[i];
8+
var frame = src.frame;
9+
var alpha = 16777216;
10+
var transform2D = src.transform;
11+
var spriteBatch = renderer.spriteBatch;
12+
var anchorX = src.anchorX;
13+
var anchorY = src.anchorY;
14+
var vertexColor = src.color._glTint;
15+
var vertexDataBuffer = spriteBatch.vertexDataBuffer;
16+
var vertexBufferF32 = vertexDataBuffer.floatView;
17+
var vertexBufferU32 = vertexDataBuffer.uintView;
18+
var vertexOffset = 0;
19+
var uvs = frame.uvs;
20+
var width = frame.width;
21+
var height = frame.height;
22+
var translateX = transform2D.x - camera.scrollX;
23+
var translateY = transform2D.y - camera.scrollY;
24+
var scaleX = transform2D.scaleX;
25+
var scaleY = transform2D.scaleY;
26+
var rotation = transform2D.angle;
27+
var cameraMatrix = camera.matrix.matrix;
28+
var a = cameraMatrix[0];
29+
var b = cameraMatrix[1];
30+
var c = cameraMatrix[2];
31+
var d = cameraMatrix[3];
32+
var e = cameraMatrix[4];
33+
var f = cameraMatrix[5];
34+
var x = width * -anchorX + frame.x;
35+
var y = height * -anchorY + frame.y;
36+
var xw = x + width;
37+
var yh = y + height;
38+
var tx = x * a + y * c + e;
39+
var ty = x * b + y * d + f;
40+
var txw = xw * a + yh * c + e;
41+
var tyh = xw * b + yh * d + f;
3142

32-
child.renderWebGL(renderer, child, interpolationPercentage);
33-
}
43+
renderer.setBatch(spriteBatch, frame.texture.source[frame.sourceIndex].glTexture);
44+
vertexOffset = vertexDataBuffer.allocate(40);
45+
spriteBatch.elementCount += 6;
46+
47+
vertexBufferF32[vertexOffset++] = tx;
48+
vertexBufferF32[vertexOffset++] = ty;
49+
vertexBufferF32[vertexOffset++] = uvs.x0;
50+
vertexBufferF32[vertexOffset++] = uvs.y0;
51+
vertexBufferF32[vertexOffset++] = translateX;
52+
vertexBufferF32[vertexOffset++] = translateY;
53+
vertexBufferF32[vertexOffset++] = scaleX;
54+
vertexBufferF32[vertexOffset++] = scaleY;
55+
vertexBufferF32[vertexOffset++] = rotation;
56+
vertexBufferU32[vertexOffset++] = vertexColor.topLeft;
57+
vertexBufferF32[vertexOffset++] = tx;
58+
vertexBufferF32[vertexOffset++] = tyh;
59+
vertexBufferF32[vertexOffset++] = uvs.x1;
60+
vertexBufferF32[vertexOffset++] = uvs.y1;
61+
vertexBufferF32[vertexOffset++] = translateX;
62+
vertexBufferF32[vertexOffset++] = translateY;
63+
vertexBufferF32[vertexOffset++] = scaleX;
64+
vertexBufferF32[vertexOffset++] = scaleY;
65+
vertexBufferF32[vertexOffset++] = rotation;
66+
vertexBufferU32[vertexOffset++] = vertexColor.bottomLeft;
67+
vertexBufferF32[vertexOffset++] = txw;
68+
vertexBufferF32[vertexOffset++] = tyh;
69+
vertexBufferF32[vertexOffset++] = uvs.x2;
70+
vertexBufferF32[vertexOffset++] = uvs.y2;
71+
vertexBufferF32[vertexOffset++] = translateX;
72+
vertexBufferF32[vertexOffset++] = translateY;
73+
vertexBufferF32[vertexOffset++] = scaleX;
74+
vertexBufferF32[vertexOffset++] = scaleY;
75+
vertexBufferF32[vertexOffset++] = rotation;
76+
vertexBufferU32[vertexOffset++] = vertexColor.bottomRight;
77+
vertexBufferF32[vertexOffset++] = txw;
78+
vertexBufferF32[vertexOffset++] = ty;
79+
vertexBufferF32[vertexOffset++] = uvs.x3;
80+
vertexBufferF32[vertexOffset++] = uvs.y3;
81+
vertexBufferF32[vertexOffset++] = translateX;
82+
vertexBufferF32[vertexOffset++] = translateY;
83+
vertexBufferF32[vertexOffset++] = scaleX;
84+
vertexBufferF32[vertexOffset++] = scaleY;
85+
vertexBufferF32[vertexOffset++] = rotation;
86+
vertexBufferU32[vertexOffset++] = vertexColor.topRight;
3487
};
3588

3689
module.exports = SpriteWebGLRenderer;

‎v3/src/renderer/canvas/CanvasRenderer.js‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -149,17 +149,18 @@ CanvasRenderer.prototype = {
149149
* by the amount of time that will be simulated the next time update()
150150
* runs. Useful for interpolating frames.
151151
*/
152-
render: function (state, list, interpolationPercentage, camera)
152+
render: function (state, children, interpolationPercentage, camera)
153153
{
154154
var w = state.sys.width;
155155
var h = state.sys.height;
156156
var ctx = state.sys.context;
157157
var settings = state.sys.settings;
158158
var scissor = (camera.x !== 0 || camera.y !== 0 || camera.width !== ctx.canvas.width || camera.height !== ctx.canvas.height);
159+
var list = children.list;
159160

160161
this.currentContext = ctx;
161162

162-
ctx.setTransform(1, 0, 0, 1, 0, 0);
163+
163164

164165
// If the alpha or blend mode didn't change since the last render, then don't set them again (saves 2 ops)
165166

@@ -202,16 +203,15 @@ CanvasRenderer.prototype = {
202203
ctx.closePath();
203204
}
204205

206+
var matrix = camera.matrix.matrix;
207+
ctx.setTransform(matrix[0], matrix[1], matrix[2], matrix[3], matrix[4], matrix[5]);
208+
205209
for (var c = 0; c < list.length; c++)
206210
{
207-
var child = list[c].gameObject;
211+
var child = list[c];
208212

209-
child.renderCanvas(this, child, interpolationPercentage);
213+
child.renderCanvas(this, child, interpolationPercentage, camera);
210214
}
211-
212-
// Reset the transform so going in to the devs render function the context is ready for use
213-
ctx.setTransform(1, 0, 0, 1, 0, 0);
214-
215215
// Call the State.render function
216216
state.render.call(state, ctx, interpolationPercentage);
217217

@@ -221,6 +221,8 @@ CanvasRenderer.prototype = {
221221
ctx.restore();
222222
}
223223

224+
ctx.setTransform(1, 0, 0, 1, 0, 0);
225+
224226
// Blast it to the Game Canvas (if needed)
225227
if (settings.renderToTexture)
226228
{

‎v3/src/renderer/canvas/utils/BlitImage.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11

22
// No scaling, anchor, rotation or effects, literally draws the frame directly to the canvas
3-
var BlitImage = function (dx, dy, frame)
3+
var BlitImage = function (dx, dy, frame, camera)
44
{
55
var ctx = this.currentContext;
66
var cd = frame.canvasData;
77

8-
ctx.drawImage(frame.source.image, cd.sx, cd.sy, cd.sWidth, cd.sHeight, dx, dy, cd.dWidth, cd.dHeight);
8+
ctx.drawImage(frame.source.image, cd.sx, cd.sy, cd.sWidth, cd.sHeight, dx - camera.scrollX, dy - camera.scrollY, cd.dWidth, cd.dHeight);
99
};
1010

1111
module.exports = BlitImage;

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

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11

2-
var DrawImage = function (frame, blendMode, transform, anchorX, anchorY, alpha, tint, bg)
2+
var DrawImage = function (frame, blendMode, transform, anchorX, anchorY, alpha, tint, bg, camera)
33
{
44
var ctx = this.currentContext;
55
var cd = frame.canvasData;
@@ -28,14 +28,15 @@ var DrawImage = function (frame, blendMode, transform, anchorX, anchorY, alpha,
2828
// ctx[this.smoothProperty] = (source.scaleMode === ScaleModes.LINEAR);
2929
}
3030

31-
var dx = frame.x - (anchorX * frame.width);
32-
var dy = frame.y - (anchorY * frame.height);
33-
var wt = transform.worldMatrix;
34-
35-
ctx.setTransform(wt[0], wt[1], wt[2], wt[3], wt[4], wt[5]);
31+
var dx = frame.x - (anchorX * frame.width) - camera.scrollX;
32+
var dy = frame.y - (anchorY * frame.height) - camera.scrollY;
3633

34+
ctx.save();
35+
ctx.translate(transform.x, transform.y);
36+
ctx.rotate(transform.angle);
37+
ctx.scale(transform.scaleX, transform.scaleY);
3738
ctx.drawImage(frame.source.image, cd.sx, cd.sy, cd.sWidth, cd.sHeight, dx, dy, cd.dWidth, cd.dHeight);
38-
39+
ctx.restore();
3940
};
4041

4142
module.exports = DrawImage;

‎v3/src/renderer/webgl/WebGLRenderer.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -220,7 +220,7 @@ WebGLRenderer.prototype = {
220220
// We could either clear color or render a quad
221221
gl.clear(gl.COLOR_BUFFER_BIT);
222222

223-
var list = state.sys.children.list;
223+
var list = children.list;
224224
var length = list.length;
225225
for (var index = 0; index < length; ++index)
226226
{

0 commit comments

Comments
 (0)