mirror of
https://github.com/photonstorm/phaser
synced 2024-11-30 16:39:34 +00:00
Canvas RenderTexture rendering added
This commit is contained in:
parent
f6210905ae
commit
7c96e93c47
4 changed files with 94 additions and 15 deletions
|
@ -2,7 +2,9 @@ var Class = require('../../utils/Class');
|
||||||
var Components = require('../components');
|
var Components = require('../components');
|
||||||
var GameObject = require('../GameObject');
|
var GameObject = require('../GameObject');
|
||||||
var RenderTextureWebGL = require('./RenderTextureWebGL');
|
var RenderTextureWebGL = require('./RenderTextureWebGL');
|
||||||
|
var RenderTextureCanvas = require('./RenderTextureCanvas');
|
||||||
var Render = require('./RenderTextureRender');
|
var Render = require('./RenderTextureRender');
|
||||||
|
var CanvasPool = require('../../display/canvas/CanvasPool');
|
||||||
|
|
||||||
var RenderTexture = new Class({
|
var RenderTexture = new Class({
|
||||||
|
|
||||||
|
@ -48,11 +50,12 @@ var RenderTexture = new Class({
|
||||||
}
|
}
|
||||||
else
|
else
|
||||||
{
|
{
|
||||||
// For now we'll just add canvas stubs
|
this.fill = RenderTextureCanvas.fill;
|
||||||
this.fill = function () {};
|
this.clear = RenderTextureCanvas.clear;
|
||||||
this.clear = function () {};
|
this.draw = RenderTextureCanvas.draw;
|
||||||
this.draw = function () {};
|
this.drawFrame = RenderTextureCanvas.drawFrame;
|
||||||
this.drawFrame = function () {};
|
this.canvas = CanvasPool.create2D(null, width, height);
|
||||||
|
this.context = this.canvas.getContext('2d');
|
||||||
}
|
}
|
||||||
|
|
||||||
this.setPosition(x, y);
|
this.setPosition(x, y);
|
||||||
|
|
30
src/gameobjects/rendertexture/RenderTextureCanvas.js
Normal file
30
src/gameobjects/rendertexture/RenderTextureCanvas.js
Normal file
|
@ -0,0 +1,30 @@
|
||||||
|
var RenderTextureCanvas = {
|
||||||
|
|
||||||
|
fill: function (rgb)
|
||||||
|
{
|
||||||
|
var ur = ((rgb >> 16)|0) & 0xff;
|
||||||
|
var ug = ((rgb >> 8)|0) & 0xff;
|
||||||
|
var ub = (rgb|0) & 0xff;
|
||||||
|
|
||||||
|
this.context.fillStyle = 'rgb(' + ur + ',' + ug + ',' + ub + ')';
|
||||||
|
this.context.fillRect(0, 0, this.canvas.width, this.canvas.height);
|
||||||
|
return this;
|
||||||
|
},
|
||||||
|
|
||||||
|
clear: function ()
|
||||||
|
{
|
||||||
|
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
||||||
|
return this;
|
||||||
|
},
|
||||||
|
|
||||||
|
draw: function (texture, frame, x, y)
|
||||||
|
{
|
||||||
|
var matrix = this.currentMatrix;
|
||||||
|
this.context.setTransform(matrix[0], matrix[1], matrix[2], matrix[3], matrix[4], matrix[5]);
|
||||||
|
this.context.drawImage(texture.source[frame.sourceIndex].image, frame.x, frame.y, frame.width, frame.height, x, y, frame.width, frame.height);
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
module.exports = RenderTextureCanvas;
|
|
@ -7,6 +7,59 @@ var RenderTextureCanvasRenderer = function (renderer, renderTexture, interpolati
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
var ctx = renderer.currentContext;
|
||||||
|
|
||||||
|
if (renderer.currentBlendMode !== renderTexture.blendMode)
|
||||||
|
{
|
||||||
|
renderer.currentBlendMode = renderTexture.blendMode;
|
||||||
|
ctx.globalCompositeOperation = renderer.blendModes[renderTexture.blendMode];
|
||||||
|
}
|
||||||
|
|
||||||
|
if (renderer.currentAlpha !== renderTexture.alpha)
|
||||||
|
{
|
||||||
|
renderer.currentAlpha = renderTexture.alpha;
|
||||||
|
ctx.globalAlpha = renderTexture.alpha;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (renderer.currentScaleMode !== renderTexture.scaleMode)
|
||||||
|
{
|
||||||
|
renderer.currentScaleMode = renderTexture.scaleMode;
|
||||||
|
}
|
||||||
|
|
||||||
|
var dx = 0;
|
||||||
|
var dy = 0;
|
||||||
|
|
||||||
|
var fx = 1;
|
||||||
|
var fy = 1;
|
||||||
|
|
||||||
|
if (renderTexture.flipX)
|
||||||
|
{
|
||||||
|
fx = -1;
|
||||||
|
dx -= renderTexture.canvas.width - renderTexture.displayOriginX;
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
dx -= renderTexture.displayOriginX;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (renderTexture.flipY)
|
||||||
|
{
|
||||||
|
fy = -1;
|
||||||
|
dy -= renderTexture.canvas.height - src.displayOriginY;
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
dy -= renderTexture.displayOriginY;
|
||||||
|
}
|
||||||
|
|
||||||
|
ctx.save();
|
||||||
|
ctx.translate(renderTexture.x - camera.scrollX * renderTexture.scrollFactorX, renderTexture.y - camera.scrollY * renderTexture.scrollFactorY);
|
||||||
|
ctx.rotate(renderTexture.rotation);
|
||||||
|
ctx.scale(renderTexture.scaleX, renderTexture.scaleY);
|
||||||
|
ctx.scale(fx, fy);
|
||||||
|
ctx.drawImage(renderTexture.canvas, dx, dy);
|
||||||
|
ctx.restore();
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
module.exports = RenderTextureCanvasRenderer;
|
module.exports = RenderTextureCanvasRenderer;
|
||||||
|
|
|
@ -24,18 +24,11 @@ var RenderTextureWebGL = {
|
||||||
return this;
|
return this;
|
||||||
},
|
},
|
||||||
|
|
||||||
draw: function (texture, x, y)
|
draw: function (texture, frame, x, y)
|
||||||
{
|
{
|
||||||
|
var glTexture = texture.source[frame.sourceIndex].glTexture;
|
||||||
this.renderer.setFramebuffer(this.framebuffer);
|
this.renderer.setFramebuffer(this.framebuffer);
|
||||||
this.renderer.pipelines.TextureTintPipeline.drawTexture(texture, x, y, 0, 0, texture.width, texture.height, this.currentMatrix);
|
this.renderer.pipelines.TextureTintPipeline.drawTexture(glTexture, x, y, frame.x, frame.y, frame.width, frame.height, this.currentMatrix);
|
||||||
this.renderer.setFramebuffer(null);
|
|
||||||
return this;
|
|
||||||
},
|
|
||||||
|
|
||||||
drawFrame: function (texture, x, y, frame)
|
|
||||||
{
|
|
||||||
this.renderer.setFramebuffer(this.framebuffer);
|
|
||||||
this.renderer.pipelines.TextureTintPipeline.drawTexture(texture, frame.x, frame.y, frame.width, frame.height, texture.width, texture.height, this.currentMatrix);
|
|
||||||
this.renderer.setFramebuffer(null);
|
this.renderer.setFramebuffer(null);
|
||||||
return this;
|
return this;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue