Canvas RenderTexture rendering added

This commit is contained in:
Felipe Alfonso 2018-02-23 21:05:15 -03:00
parent f6210905ae
commit 7c96e93c47
4 changed files with 94 additions and 15 deletions

View file

@ -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);

View 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;

View file

@ -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;

View file

@ -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;
} }