Using canvas buffer for generating tile texture

This commit is contained in:
Felipe Alfonso 2017-04-28 15:10:32 -03:00
parent 456809e8dd
commit e6fefdab24
4 changed files with 29 additions and 13 deletions

View file

@ -3,6 +3,7 @@ var Class = require('../../utils/Class');
var GameObject = require('../GameObject');
var Components = require('../../components');
var TileSpriteRender = require('./TileSpriteRender');
var CanvasPool = require('../../dom/CanvasPool')
var TileSprite = new Class({
@ -25,17 +26,29 @@ var TileSprite = new Class({
initialize:
function TileSprite (state, x, y, texture, frame)
function TileSprite (state, x, y, width, height, texture, frame)
{
var resourceManager = state.game.renderer.resourceManager;
var gl;
GameObject.call(this, state, 'TileSprite');
this.tilePositionX = 0;
this.tilePositionY = 0;
this.canvasBuffer = CanvasPool.create2D(null, width, height);
this.canvasBufferCtx = this.canvasBuffer.getContext('2d');
this.dirty = false;
this.setTexture(texture, frame);
this.setPosition(x, y);
this.setSizeToFrame();
this.setOrigin();
},
updateTileTexture: function ()
{
}
});

View file

@ -6,14 +6,14 @@ var TileSpriteFactory = {
KEY: 'tileSprite',
add: function (x, y, key, frame)
add: function (x, y, width, height, key, frame)
{
return this.children.add(new TileSprite(this.state, x, y, key, frame));
return this.children.add(new TileSprite(this.state, x, y, width, height, key, frame));
},
make: function (x, y, key, frame)
make: function (x, y, width, height, key, frame)
{
return new TileSprite(this.state, x, y, key, frame);
return new TileSprite(this.state, x, y, width, height, key, frame);
}
};

View file

@ -4,6 +4,7 @@ var TileSpriteWebGLRenderer = function (renderer, src, interpolationPercentage,
{
return;
}
renderer.tileBatch.addTileSprite(src, camera);
};
module.exports = TileSpriteWebGLRenderer;

View file

@ -288,6 +288,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;
tempMatrix.applyITRS(translateX, translateY, rotation, scaleX, scaleY);
@ -327,29 +329,29 @@ TileBatch.prototype = {
vertexBufferObjectF32[vertexOffset++] = tx0;
vertexBufferObjectF32[vertexOffset++] = ty0;
vertexBufferObjectF32[vertexOffset++] = uvs.x0;
vertexBufferObjectF32[vertexOffset++] = uvs.y0;
vertexBufferObjectF32[vertexOffset++] = uvs.x0 + tilePositionX;
vertexBufferObjectF32[vertexOffset++] = uvs.y0 + tilePositionY;
vertexBufferObjectU32[vertexOffset++] = 0xFFFFFF; //vertexColor.topLeft;
vertexBufferObjectF32[vertexOffset++] = alpha;
vertexBufferObjectF32[vertexOffset++] = tx1;
vertexBufferObjectF32[vertexOffset++] = ty1;
vertexBufferObjectF32[vertexOffset++] = uvs.x1;
vertexBufferObjectF32[vertexOffset++] = uvs.y1;
vertexBufferObjectF32[vertexOffset++] = uvs.x1 + tilePositionX;
vertexBufferObjectF32[vertexOffset++] = uvs.y1 + tilePositionY;
vertexBufferObjectU32[vertexOffset++] = 0xFFFFFF; //vertexColor.bottomLeft;
vertexBufferObjectF32[vertexOffset++] = alpha;
vertexBufferObjectF32[vertexOffset++] = tx2;
vertexBufferObjectF32[vertexOffset++] = ty2;
vertexBufferObjectF32[vertexOffset++] = uvs.x2;
vertexBufferObjectF32[vertexOffset++] = uvs.y2;
vertexBufferObjectF32[vertexOffset++] = uvs.x2 + tilePositionX;
vertexBufferObjectF32[vertexOffset++] = uvs.y2 + tilePositionY;
vertexBufferObjectU32[vertexOffset++] = 0xFFFFFF; //vertexColor.bottomRight;
vertexBufferObjectF32[vertexOffset++] = alpha;
vertexBufferObjectF32[vertexOffset++] = tx3;
vertexBufferObjectF32[vertexOffset++] = ty3;
vertexBufferObjectF32[vertexOffset++] = uvs.x3;
vertexBufferObjectF32[vertexOffset++] = uvs.y3;
vertexBufferObjectF32[vertexOffset++] = uvs.x3 + tilePositionX;
vertexBufferObjectF32[vertexOffset++] = uvs.y3 + tilePositionY;
vertexBufferObjectU32[vertexOffset++] = 0xFFFFFF; //vertexColor.topRight;
vertexBufferObjectF32[vertexOffset++] = alpha;
}