Canvas TileSprite

This commit is contained in:
Felipe Alfonso 2017-05-03 21:14:14 -03:00
parent 9ee41603a2
commit da9a6de007
4 changed files with 46 additions and 4 deletions

View file

@ -47,6 +47,7 @@ var TileSprite = new Class({
this.potWidth = this.frame.width;
this.potHeight = this.frame.height;
this.canvasPattern = null;
if (resourceManager)
{
@ -71,7 +72,7 @@ var TileSprite = new Class({
this.tileTexture = resourceManager.createTexture(0, gl.LINEAR, gl.LINEAR, gl.REPEAT, gl.REPEAT, gl.RGBA, this.canvasBuffer, this.potWidth, this.potHeight);
}
}
this.canvasBuffer = CanvasPool.create2D(null, this.potWidth, this.potHeight);
this.canvasBufferCtx = this.canvasBuffer.getContext('2d');
@ -84,6 +85,7 @@ var TileSprite = new Class({
if (!this.dirty)
return;
this.canvasBuffer.width = this.canvasBuffer.width;
this.canvasBufferCtx.drawImage(
this.frame.source.image,
this.frame.cutX, this.frame.cutY,
@ -96,6 +98,10 @@ var TileSprite = new Class({
{
this.renderer.uploadCanvasToGPU(this.canvasBuffer, this.tileTexture, true);
}
else
{
this.canvasPattern = this.canvasBufferCtx.createPattern(this.canvasBuffer, 'repeat');
}
this.dirty = false;
}

View file

@ -5,6 +5,43 @@ var TileSpriteCanvasRenderer = function (renderer, src, interpolationPercentage,
{
return;
}
var ctx = renderer.currentContext;
var frame = src.frame;
// Blend Mode
if (renderer.currentBlendMode !== src.blendMode)
{
renderer.currentBlendMode = src.blendMode;
ctx.globalCompositeOperation = renderer.blendModes[src.blendMode];
}
// Alpha
if (renderer.currentAlpha !== src.alpha)
{
renderer.currentAlpha = src.alpha;
ctx.globalAlpha = src.alpha;
}
// Smoothing
if (renderer.currentScaleMode !== src.scaleMode)
{
renderer.currentScaleMode = src.scaleMode;
}
var dx = frame.x - (src.originX * src.width);
var dy = frame.y - (src.originY * src.height);
ctx.save();
ctx.translate(dx, dy);
ctx.translate(src.x - camera.scrollX, src.y - camera.scrollY);
ctx.fillStyle = src.canvasPattern;
ctx.translate(-this.tilePositionX, -this.tilePositionY);
ctx.fillRect(this.tilePositionX, this.tilePositionY, src.width, src.height);
ctx.restore();
};
module.exports = TileSpriteCanvasRenderer;

View file

@ -427,7 +427,6 @@ WebGLRenderer.prototype = {
/* only call this once */
dstTexture.texture = gl.createTexture();
}
if (shouldUpdateResource)
{
/* Update resource */

View file

@ -202,8 +202,8 @@ TileBatch.prototype = {
var mva, mvb, mvc, mvd, mve, mvf, tx0, ty0, tx1, ty1, tx2, ty2, tx3, ty3;
var sra, srb, src, srd, sre, srf, cma, cmb, cmc, cmd, cme, cmf;
var alpha = gameObject.alpha;
var tilePositionX = gameObject.tilePositionX / width;
var tilePositionY = gameObject.tilePositionY / height;
var tilePositionX = gameObject.tilePositionX / gameObject.frame.width;
var tilePositionY = gameObject.tilePositionY / gameObject.frame.height;
var texture = gameObject.tileTexture;
tempMatrix.applyITRS(translateX, translateY, rotation, scaleX, scaleY);