mirror of
https://github.com/photonstorm/phaser
synced 2024-11-27 07:01:20 +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 GameObject = require('../GameObject');
|
||||
var RenderTextureWebGL = require('./RenderTextureWebGL');
|
||||
var RenderTextureCanvas = require('./RenderTextureCanvas');
|
||||
var Render = require('./RenderTextureRender');
|
||||
var CanvasPool = require('../../display/canvas/CanvasPool');
|
||||
|
||||
var RenderTexture = new Class({
|
||||
|
||||
|
@ -48,11 +50,12 @@ var RenderTexture = new Class({
|
|||
}
|
||||
else
|
||||
{
|
||||
// For now we'll just add canvas stubs
|
||||
this.fill = function () {};
|
||||
this.clear = function () {};
|
||||
this.draw = function () {};
|
||||
this.drawFrame = function () {};
|
||||
this.fill = RenderTextureCanvas.fill;
|
||||
this.clear = RenderTextureCanvas.clear;
|
||||
this.draw = RenderTextureCanvas.draw;
|
||||
this.drawFrame = RenderTextureCanvas.drawFrame;
|
||||
this.canvas = CanvasPool.create2D(null, width, height);
|
||||
this.context = this.canvas.getContext('2d');
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
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;
|
||||
|
|
|
@ -24,18 +24,11 @@ var RenderTextureWebGL = {
|
|||
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.pipelines.TextureTintPipeline.drawTexture(texture, x, y, 0, 0, texture.width, texture.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.pipelines.TextureTintPipeline.drawTexture(glTexture, x, y, frame.x, frame.y, frame.width, frame.height, this.currentMatrix);
|
||||
this.renderer.setFramebuffer(null);
|
||||
return this;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue