Mirrors/phaser
2
0
Fork 0
mirror of https://github.com/photonstorm/phaser synced 2024-11-27 15:12:18 +00:00
Code Issues Projects Releases Packages Wiki Activity

Canvas rendering working with the new system.

Browse source
This commit is contained in:
Felipe Alfonso 2017-02-21 17:05:18 -03:00
parent 1a0f4119c6
commit d309be3b2e
9 changed files with 111 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
v3/src/checksum.js
View file

@ -1,4 +1,4 @@
var CHECKSUM = {
build: '9824f700-f86a-11e6-b8eb-f13c1d2880b2'
build: '692fe170-f870-11e6-8132-938c0b25d0cb'
};
module.exports = CHECKSUM;

4
v3/src/gameobjects/blitter/BlitterCanvasRenderer.js
View file

@ -1,5 +1,5 @@
var BlitterCanvasRenderer = function (renderer, src, interpolationPercentage)
var BlitterCanvasRenderer = function (renderer, src, interpolationPercentage, camera)
{
var worldAlpha = src.color.worldAlpha;
var list = src.getRenderList();
@ -26,7 +26,7 @@ var BlitterCanvasRenderer = function (renderer, src, interpolationPercentage)
ca = renderer.setAlpha(bob.alpha);
}
renderer.blitImage(bob.x, bob.y, bob.frame);
renderer.blitImage(bob.x, bob.y, bob.frame, camera);
}
};

4
v3/src/gameobjects/image/ImageCanvasRenderer.js
View file

@ -1,5 +1,5 @@
var ImageCanvasRenderer = function (renderer, src, interpolationPercentage)
var ImageCanvasRenderer = function (renderer, src, interpolationPercentage, camera)
{
var frame = src.frame;
@ -15,7 +15,7 @@ var ImageCanvasRenderer = function (renderer, src, interpolationPercentage)
var tint = src.color._glTint;
var bg = src.color._glBg;
renderer.drawImage(frame, src.blendMode, src.transform, src.anchorX, src.anchorY, alpha, tint, bg);
renderer.drawImage(frame, src.blendMode, src.transform, src.anchorX, src.anchorY, alpha, tint, bg, camera);
};
module.exports = ImageCanvasRenderer;

6
v3/src/gameobjects/sprite/SpriteCanvasRenderer.js
View file

@ -1,5 +1,5 @@
var SpriteCanvasRenderer = function (renderer, src, interpolationPercentage)
var SpriteCanvasRenderer = function (renderer, src, interpolationPercentage, camera)
{
var frame = src.frame;
var alpha = src.color.worldAlpha * 255 << 24;
@ -15,14 +15,14 @@ var SpriteCanvasRenderer = function (renderer, src, interpolationPercentage)
var tint = src.color._glTint;
var bg = src.color._glBg;
renderer.drawImage(frame, src.blendMode, data, alpha, tint, bg);
renderer.drawImage(frame, src.blendMode, data, alpha, tint, bg, camera);
// Render children
for (var i = 0; i < src.children.list.length; i++)
{
var child = src.children.list[i];
child.renderCanvas(renderer, child, interpolationPercentage);
child.renderCanvas(renderer, child, interpolationPercentage, canvas, camera);
}
};

109
v3/src/gameobjects/sprite/SpriteWebGLRenderer.js
View file

@ -1,36 +1,89 @@
var SpriteWebGLRenderer = function (renderer, src, interpolationPercentage)
var SpriteWebGLRenderer = function (renderer, src, interpolationPercentage, camera)
{
//--------------------
// Inlined quad push
//--------------------
var frame = src.frame;
var alpha = src.color.worldAlpha * 255 << 24;
var alpha = 16777216;
var transform2D = src.transform;
var spriteBatch = renderer.spriteBatch;
var anchorX = src.anchorX;
var anchorY = src.anchorY;
var vertexColor = src.color._glTint;
var vertexDataBuffer = spriteBatch.vertexDataBuffer;
var vertexBufferF32 = vertexDataBuffer.floatView;
var vertexBufferU32 = vertexDataBuffer.uintView;
var vertexOffset = 0;
var uvs = frame.uvs;
var width = frame.width;
var height = frame.height;
var translateX = transform2D.x - camera.scrollX;
var translateY = transform2D.y - camera.scrollY;
var scaleX = transform2D.scaleX;
var scaleY = transform2D.scaleY;
var rotation = transform2D.angle;
var cameraMatrix = camera.matrix.matrix;
var a = cameraMatrix[0];
var b = cameraMatrix[1];
var c = cameraMatrix[2];
var d = cameraMatrix[3];
var e = cameraMatrix[4];
var f = cameraMatrix[5];
var x = width * -anchorX + frame.x;
var y = height * -anchorY + frame.y;
var xw = x + width;
var yh = y + height;
var tx = x * a + y * c + e;
var ty = x * b + y * d + f;
var txw = xw * a + yh * c + e;
var tyh = xw * b + yh * d + f;
// Skip rendering?
renderer.setBatch(spriteBatch, frame.texture.source[frame.sourceIndex].glTexture);
vertexOffset = vertexDataBuffer.allocate(40);
spriteBatch.elementCount += 6;
if (src.skipRender || !src.visible || alpha === 0 || !frame.cutWidth || !frame.cutHeight)
{
return;
}
var transform = src.transform;
renderer.setBlendMode(src.color._blendMode);
renderer.spriteBatch.add(
frame,
transform._anchorX, transform._anchorY,
transform.world.tx, transform.world.ty,
transform._worldScaleX, transform._worldScaleY,
transform._worldRotation,
src.color._glTint
);
// Render children
for (var i = 0; i < src.children.list.length; i++)
{
var child = src.children.list[i];
child.renderWebGL(renderer, child, interpolationPercentage);
}
vertexBufferF32[vertexOffset++] = tx;
vertexBufferF32[vertexOffset++] = ty;
vertexBufferF32[vertexOffset++] = uvs.x0;
vertexBufferF32[vertexOffset++] = uvs.y0;
vertexBufferF32[vertexOffset++] = translateX;
vertexBufferF32[vertexOffset++] = translateY;
vertexBufferF32[vertexOffset++] = scaleX;
vertexBufferF32[vertexOffset++] = scaleY;
vertexBufferF32[vertexOffset++] = rotation;
vertexBufferU32[vertexOffset++] = vertexColor.topLeft;
vertexBufferF32[vertexOffset++] = tx;
vertexBufferF32[vertexOffset++] = tyh;
vertexBufferF32[vertexOffset++] = uvs.x1;
vertexBufferF32[vertexOffset++] = uvs.y1;
vertexBufferF32[vertexOffset++] = translateX;
vertexBufferF32[vertexOffset++] = translateY;
vertexBufferF32[vertexOffset++] = scaleX;
vertexBufferF32[vertexOffset++] = scaleY;
vertexBufferF32[vertexOffset++] = rotation;
vertexBufferU32[vertexOffset++] = vertexColor.bottomLeft;
vertexBufferF32[vertexOffset++] = txw;
vertexBufferF32[vertexOffset++] = tyh;
vertexBufferF32[vertexOffset++] = uvs.x2;
vertexBufferF32[vertexOffset++] = uvs.y2;
vertexBufferF32[vertexOffset++] = translateX;
vertexBufferF32[vertexOffset++] = translateY;
vertexBufferF32[vertexOffset++] = scaleX;
vertexBufferF32[vertexOffset++] = scaleY;
vertexBufferF32[vertexOffset++] = rotation;
vertexBufferU32[vertexOffset++] = vertexColor.bottomRight;
vertexBufferF32[vertexOffset++] = txw;
vertexBufferF32[vertexOffset++] = ty;
vertexBufferF32[vertexOffset++] = uvs.x3;
vertexBufferF32[vertexOffset++] = uvs.y3;
vertexBufferF32[vertexOffset++] = translateX;
vertexBufferF32[vertexOffset++] = translateY;
vertexBufferF32[vertexOffset++] = scaleX;
vertexBufferF32[vertexOffset++] = scaleY;
vertexBufferF32[vertexOffset++] = rotation;
vertexBufferU32[vertexOffset++] = vertexColor.topRight;
};
module.exports = SpriteWebGLRenderer;

18
v3/src/renderer/canvas/CanvasRenderer.js
View file

@ -149,17 +149,18 @@ CanvasRenderer.prototype = {
* by the amount of time that will be simulated the next time update()
* runs. Useful for interpolating frames.
*/
render: function (state, list, interpolationPercentage, camera)
render: function (state, children, interpolationPercentage, camera)
{
var w = state.sys.width;
var h = state.sys.height;
var ctx = state.sys.context;
var settings = state.sys.settings;
var scissor = (camera.x !== 0 || camera.y !== 0 || camera.width !== ctx.canvas.width || camera.height !== ctx.canvas.height);
var list = children.list;
this.currentContext = ctx;
ctx.setTransform(1, 0, 0, 1, 0, 0);
// If the alpha or blend mode didn't change since the last render, then don't set them again (saves 2 ops)
@ -202,16 +203,15 @@ CanvasRenderer.prototype = {
ctx.closePath();
}
var matrix = camera.matrix.matrix;
ctx.setTransform(matrix[0], matrix[1], matrix[2], matrix[3], matrix[4], matrix[5]);
for (var c = 0; c < list.length; c++)
{
var child = list[c].gameObject;
var child = list[c];
child.renderCanvas(this, child, interpolationPercentage);
child.renderCanvas(this, child, interpolationPercentage, camera);
}
// Reset the transform so going in to the devs render function the context is ready for use
ctx.setTransform(1, 0, 0, 1, 0, 0);
// Call the State.render function
state.render.call(state, ctx, interpolationPercentage);
@ -221,6 +221,8 @@ CanvasRenderer.prototype = {
ctx.restore();
}
ctx.setTransform(1, 0, 0, 1, 0, 0);
// Blast it to the Game Canvas (if needed)
if (settings.renderToTexture)
{

4
v3/src/renderer/canvas/utils/BlitImage.js
View file

@ -1,11 +1,11 @@
// No scaling, anchor, rotation or effects, literally draws the frame directly to the canvas
var BlitImage = function (dx, dy, frame)
var BlitImage = function (dx, dy, frame, camera)
{
var ctx = this.currentContext;
var cd = frame.canvasData;
ctx.drawImage(frame.source.image, cd.sx, cd.sy, cd.sWidth, cd.sHeight, dx, dy, cd.dWidth, cd.dHeight);
ctx.drawImage(frame.source.image, cd.sx, cd.sy, cd.sWidth, cd.sHeight, dx - camera.scrollX, dy - camera.scrollY, cd.dWidth, cd.dHeight);
};
module.exports = BlitImage;

15
v3/src/renderer/canvas/utils/DrawImage.js
View file

@ -1,5 +1,5 @@
var DrawImage = function (frame, blendMode, transform, anchorX, anchorY, alpha, tint, bg)
var DrawImage = function (frame, blendMode, transform, anchorX, anchorY, alpha, tint, bg, camera)
{
var ctx = this.currentContext;
var cd = frame.canvasData;
@ -28,14 +28,15 @@ var DrawImage = function (frame, blendMode, transform, anchorX, anchorY, alpha,
// ctx[this.smoothProperty] = (source.scaleMode === ScaleModes.LINEAR);
}
var dx = frame.x - (anchorX * frame.width);
var dy = frame.y - (anchorY * frame.height);
var wt = transform.worldMatrix;
ctx.setTransform(wt[0], wt[1], wt[2], wt[3], wt[4], wt[5]);
var dx = frame.x - (anchorX * frame.width) - camera.scrollX;
var dy = frame.y - (anchorY * frame.height) - camera.scrollY;
ctx.save();
ctx.translate(transform.x, transform.y);
ctx.rotate(transform.angle);
ctx.scale(transform.scaleX, transform.scaleY);
ctx.drawImage(frame.source.image, cd.sx, cd.sy, cd.sWidth, cd.sHeight, dx, dy, cd.dWidth, cd.dHeight);
ctx.restore();
};
module.exports = DrawImage;

2
v3/src/renderer/webgl/WebGLRenderer.js
View file

@ -220,7 +220,7 @@ WebGLRenderer.prototype = {
// We could either clear color or render a quad
gl.clear(gl.COLOR_BUFFER_BIT);
var list = state.sys.children.list;
var list = children.list;
var length = list.length;
for (var index = 0; index < length; ++index)
{