Tile rendering correctly

This commit is contained in:
Felipe Alfonso 2017-06-01 17:29:51 -04:00
parent dc035ddaab
commit ea71909b4e
3 changed files with 36 additions and 23 deletions

View file

@ -1,4 +1,4 @@
var CHECKSUM = { var CHECKSUM = {
build: 'd6e1c770-470c-11e7-a023-cd5ccd3d9536' build: '3a8f5ea0-4711-11e7-9525-fb6db2cab82a'
}; };
module.exports = CHECKSUM; module.exports = CHECKSUM;

View file

@ -63,6 +63,10 @@ var StaticTilemap = new Class({
var bufferF32, bufferU32; var bufferF32, bufferU32;
var voffset = 0; var voffset = 0;
var vertexCount = 0; var vertexCount = 0;
var width = this.texture.source[0].width;
var height = this.texture.source[0].height;
var setWidth = width / tileWidth;
var mapData = this.mapData;
if (this.vbo === null) if (this.vbo === null)
{ {
@ -79,10 +83,17 @@ var StaticTilemap = new Class({
{ {
for (var x = 0; x < mapWidth; ++x) for (var x = 0; x < mapWidth; ++x)
{ {
var tileId = mapData[y * mapWidth + x];
var rectx = ((tileId % setWidth)|0) * tileWidth;
var recty = ((tileId / setWidth)|0) * tileHeight;
var tx = x * tileWidth; var tx = x * tileWidth;
var ty = y * tileHeight; var ty = y * tileHeight;
var txw = tx + tileWidth; var txw = tx + tileWidth;
var tyh = ty + tileHeight; var tyh = ty + tileHeight;
var u0 = rectx / width;
var v0 = recty / height;
var u1 = u0 + (tileWidth / width);
var v1 = v0 + (tileHeight / height);
var tx0 = tx; var tx0 = tx;
var ty0 = ty; var ty0 = ty;
var tx1 = tx; var tx1 = tx;
@ -94,34 +105,35 @@ var StaticTilemap = new Class({
bufferF32[voffset + 0] = tx0; bufferF32[voffset + 0] = tx0;
bufferF32[voffset + 1] = ty0; bufferF32[voffset + 1] = ty0;
bufferF32[voffset + 2] = 0; bufferF32[voffset + 2] = u0;
bufferF32[voffset + 3] = 0; bufferF32[voffset + 3] = v0;
bufferF32[voffset + 0] = tx1; bufferF32[voffset + 4] = tx1;
bufferF32[voffset + 1] = ty1; bufferF32[voffset + 5] = ty1;
bufferF32[voffset + 2] = 0; bufferF32[voffset + 6] = u0;
bufferF32[voffset + 3] = 1 bufferF32[voffset + 7] = v1;
bufferF32[voffset + 0] = tx2; bufferF32[voffset + 8] = tx2;
bufferF32[voffset + 1] = ty2; bufferF32[voffset + 9] = ty2;
bufferF32[voffset + 2] = 1; bufferF32[voffset + 10] = u1;
bufferF32[voffset + 3] = 1; bufferF32[voffset + 11] = v1;
bufferF32[voffset + 0] = tx0; bufferF32[voffset + 12] = tx0;
bufferF32[voffset + 1] = ty0; bufferF32[voffset + 13] = ty0;
bufferF32[voffset + 2] = 0; bufferF32[voffset + 14] = u0;
bufferF32[voffset + 3] = 0; bufferF32[voffset + 15] = v0;
bufferF32[voffset + 0] = tx2; bufferF32[voffset + 16] = tx2;
bufferF32[voffset + 1] = ty2; bufferF32[voffset + 17] = ty2;
bufferF32[voffset + 2] = 1; bufferF32[voffset + 18] = u1;
bufferF32[voffset + 3] = 1; bufferF32[voffset + 19] = v1;
bufferF32[voffset + 0] = tx3; bufferF32[voffset + 20] = tx3;
bufferF32[voffset + 1] = ty3; bufferF32[voffset + 21] = ty3;
bufferF32[voffset + 2] = 1; bufferF32[voffset + 22] = u1;
bufferF32[voffset + 3] = 0; bufferF32[voffset + 23] = v0;
voffset += 24;
vertexCount += 6; vertexCount += 6;
} }
} }

View file

@ -10,6 +10,7 @@ var StaticTilemapWebGLRenderer = function (renderer, src, interpolationPercentag
var gl = gameObject.gl; var gl = gameObject.gl;
renderer.setRenderer(gameObject.tilemapRenderer, frame.texture.source[frame.sourceIndex].glTexture, gameObject.renderTarget); renderer.setRenderer(gameObject.tilemapRenderer, frame.texture.source[frame.sourceIndex].glTexture, gameObject.renderTarget);
gameObject.tilemapRenderer.bind();
gameObject.upload(); gameObject.upload();
gameObject.vbo.bind(); gameObject.vbo.bind();
gl.drawArrays(gl.TRIANGLES, 0, gameObject.vertexCount); gl.drawArrays(gl.TRIANGLES, 0, gameObject.vertexCount);