diff --git a/src/gameobjects/rendertexture/RenderTexture.js b/src/gameobjects/rendertexture/RenderTexture.js index dcfb0c640..b33b6f32a 100644 --- a/src/gameobjects/rendertexture/RenderTexture.js +++ b/src/gameobjects/rendertexture/RenderTexture.js @@ -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); diff --git a/src/gameobjects/rendertexture/RenderTextureCanvas.js b/src/gameobjects/rendertexture/RenderTextureCanvas.js new file mode 100644 index 000000000..78585fa72 --- /dev/null +++ b/src/gameobjects/rendertexture/RenderTextureCanvas.js @@ -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; diff --git a/src/gameobjects/rendertexture/RenderTextureCanvasRenderer.js b/src/gameobjects/rendertexture/RenderTextureCanvasRenderer.js index e5528cbcb..2a87e733e 100644 --- a/src/gameobjects/rendertexture/RenderTextureCanvasRenderer.js +++ b/src/gameobjects/rendertexture/RenderTextureCanvasRenderer.js @@ -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; diff --git a/src/gameobjects/rendertexture/RenderTextureWebGL.js b/src/gameobjects/rendertexture/RenderTextureWebGL.js index c4ff9da0b..cb9686922 100644 --- a/src/gameobjects/rendertexture/RenderTextureWebGL.js +++ b/src/gameobjects/rendertexture/RenderTextureWebGL.js @@ -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; }