Tile Sprite rendering on WebGL

Author: bitnenfer

v3/src/gameobjects/tilesprite/TileSprite.js

@@ -35,20 +35,68 @@ var TileSprite = new Class({
 
         this.tilePositionX = 0;
         this.tilePositionY = 0;
-        this.canvasBuffer = CanvasPool.create2D(null, width, height);
-        this.canvasBufferCtx = this.canvasBuffer.getContext('2d');
-        this.dirty = false;
+        this.dirty = true;
+        this.tileTexture = null;
+        this.renderer = null;
 
         this.setTexture(texture, frame);
         this.setPosition(x, y);
         this.setSizeToFrame();
         this.setOrigin();
+        this.setSize(width, height);
+
+        this.potWidth = this.frame.width;
+        this.potHeight = this.frame.height; 
+
+        if (resourceManager) 
+        {
+            this.potWidth--;
+            this.potWidth |= this.potWidth >> 1;
+            this.potWidth |= this.potWidth >> 2;
+            this.potWidth |= this.potWidth >> 4;
+            this.potWidth |= this.potWidth >> 8;
+            this.potWidth |= this.potWidth >> 16;
+            this.potWidth++;
+
+            this.potHeight--;
+            this.potHeight |= this.potHeight >> 1;
+            this.potHeight |= this.potHeight >> 2;
+            this.potHeight |= this.potHeight >> 4;
+            this.potHeight |= this.potHeight >> 8;
+            this.potHeight |= this.potHeight >> 16;
+            this.potHeight++;
+
+            this.renderer = state.game.renderer;
+            gl = state.game.renderer.gl;
 
+            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');
+
+        this.updateTileTexture();
     },
 
     updateTileTexture: function () 
     {
+        if (!this.dirty)
+            return;
+
+        this.canvasBufferCtx.drawImage(
+            this.frame.source.image, 
+            this.frame.cutX, this.frame.cutY,
+            this.frame.cutWidth, this.frame.cutHeight,
+            0, 0,
+            this.potWidth, this.potHeight
+        );
 
+        if (this.renderer) 
+        {
+            this.renderer.uploadCanvasToGPU(this.canvasBuffer, this.tileTexture, true);
+        }
+        this.dirty = false;
     }
 
 });

v3/src/gameobjects/tilesprite/TileSpriteWebGLRenderer.js

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

v3/src/renderer/webgl/renderers/tilebatch/TileBatch.js

@@ -172,124 +172,39 @@ TileBatch.prototype = {
         this.vertexBufferObject = null;
     },
 
-    addTileTexture: function (gameObject, camera, texture, textureWidth, textureHeight)
-    {
-        var tempMatrix = this.tempMatrix;
-        var alpha = 16777216;
-        var vertexDataBuffer = this.vertexDataBuffer;
-        var vertexBufferObjectF32 = vertexDataBuffer.floatView;
-        var vertexBufferObjectU32 = vertexDataBuffer.uintView;
-        var vertexOffset = 0;
-        var width = textureWidth * (gameObject.flipX ? -1 : 1);
-        var height = textureHeight * (gameObject.flipY ? -1 : 1);
-        var translateX = gameObject.x - camera.scrollX;
-        var translateY = gameObject.y - camera.scrollY;
-        var scaleX = gameObject.scaleX;
-        var scaleY = gameObject.scaleY;
-        var rotation = -gameObject.rotation;
-        var tempMatrixMatrix = tempMatrix.matrix;
-        var x = -gameObject.displayOriginX + ((textureWidth) * (gameObject.flipX ? 1 : 0.0));
-        var y = -gameObject.displayOriginY + ((textureHeight) * (gameObject.flipY ? 1 : 0.0));
-        var xw = x + width;
-        var yh = y + height;
-        var cameraMatrix = camera.matrix.matrix;
-        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;
-
-        tempMatrix.applyITRS(translateX, translateY, rotation, scaleX, scaleY);
-
-        sra = tempMatrixMatrix[0];
-        srb = tempMatrixMatrix[1];
-        src = tempMatrixMatrix[2];
-        srd = tempMatrixMatrix[3];
-        sre = tempMatrixMatrix[4];
-        srf = tempMatrixMatrix[5];
-
-        cma = cameraMatrix[0];
-        cmb = cameraMatrix[1];
-        cmc = cameraMatrix[2];
-        cmd = cameraMatrix[3];
-        cme = cameraMatrix[4];
-        cmf = cameraMatrix[5];
-
-        mva = sra * cma + srb * cmc;
-        mvb = sra * cmb + srb * cmd;
-        mvc = src * cma + srd * cmc;
-        mvd = src * cmb + srd * cmd;
-        mve = sre * cma + srf * cmc + cme;
-        mvf = sre * cmb + srf * cmd + cmf; 
-        
-        tx0 = x * mva + y * mvc + mve;
-        ty0 = x * mvb + y * mvd + mvf;
-        tx1 = x * mva + yh * mvc + mve;
-        ty1 = x * mvb + yh * mvd + mvf;
-        tx2 = xw * mva + yh * mvc + mve;
-        ty2 = xw * mvb + yh * mvd + mvf;
-        tx3 = xw * mva + y * mvc + mve;
-        ty3 = xw * mvb + y * mvd + mvf;
-
-        this.manager.setRenderer(this, texture, gameObject.renderTarget);
-        vertexOffset = vertexDataBuffer.allocate(24);
-        this.elementCount += 6;
-        
-        vertexBufferObjectF32[vertexOffset++] = tx0;
-        vertexBufferObjectF32[vertexOffset++] = ty0;
-        vertexBufferObjectF32[vertexOffset++] = 0;
-        vertexBufferObjectF32[vertexOffset++] = 0;
-        vertexBufferObjectU32[vertexOffset++] = 0xFFFFFF; //vertexColor.topLeft;
-        vertexBufferObjectF32[vertexOffset++] = alpha;
-
-        vertexBufferObjectF32[vertexOffset++] = tx1;
-        vertexBufferObjectF32[vertexOffset++] = ty1;
-        vertexBufferObjectF32[vertexOffset++] = 0;
-        vertexBufferObjectF32[vertexOffset++] = 1;
-        vertexBufferObjectU32[vertexOffset++] = 0xFFFFFF; //vertexColor.bottomLeft;
-        vertexBufferObjectF32[vertexOffset++] = alpha;
-
-        vertexBufferObjectF32[vertexOffset++] = tx2;
-        vertexBufferObjectF32[vertexOffset++] = ty2;
-        vertexBufferObjectF32[vertexOffset++] = 1;
-        vertexBufferObjectF32[vertexOffset++] = 1;
-        vertexBufferObjectU32[vertexOffset++] = 0xFFFFFF; //vertexColor.bottomRight;
-        vertexBufferObjectF32[vertexOffset++] = alpha;
-
-        vertexBufferObjectF32[vertexOffset++] = tx3;
-        vertexBufferObjectF32[vertexOffset++] = ty3;
-        vertexBufferObjectF32[vertexOffset++] = 1;
-        vertexBufferObjectF32[vertexOffset++] = 0;
-        vertexBufferObjectU32[vertexOffset++] = 0xFFFFFF; //vertexColor.topRight;
-        vertexBufferObjectF32[vertexOffset++] = alpha;
-    },
-
     addTileSprite: function (gameObject, camera)
     {
         var tempMatrix = this.tempMatrix;
-        var frame = gameObject.frame;
         var alpha = 16777216;
         var vertexDataBuffer = this.vertexDataBuffer;
         var vertexBufferObjectF32 = vertexDataBuffer.floatView;
         var vertexBufferObjectU32 = vertexDataBuffer.uintView;
         var vertexOffset = 0;
-        var uvs = frame.uvs;
-        var width = frame.width * (gameObject.flipX ? -1 : 1);
-        var height = frame.height * (gameObject.flipY ? -1 : 1);
+        var width = gameObject.width * (gameObject.flipX ? -1 : 1);
+        var height = gameObject.height * (gameObject.flipY ? -1 : 1);
         var translateX = gameObject.x - camera.scrollX;
         var translateY = gameObject.y - camera.scrollY;
         var scaleX = gameObject.scaleX;
         var scaleY = gameObject.scaleY;
         var rotation = -gameObject.rotation;
         var tempMatrixMatrix = tempMatrix.matrix;
-        var x = -gameObject.displayOriginX + frame.x + ((frame.width) * (gameObject.flipX ? 1 : 0.0));
-        var y = -gameObject.displayOriginY + frame.y + ((frame.height) * (gameObject.flipY ? 1 : 0.0));
+        var displayOriginX = gameObject.originX * gameObject.width;
+        var displayOriginY = gameObject.originY * gameObject.height;
+        var x = -displayOriginX + ((gameObject.width) * (gameObject.flipX ? 1 : 0.0));
+        var y = -displayOriginY + ((gameObject.height) * (gameObject.flipY ? 1 : 0.0));
         var xw = x + width;
         var yh = y + height;
+        var u0 = 0;
+        var v0 = 0;
+        var u1 = width / gameObject.frame.width;
+        var v1 = height / gameObject.frame.height;
         var cameraMatrix = camera.matrix.matrix;
         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 texture = gameObject.tileTexture;
 
         tempMatrix.applyITRS(translateX, translateY, rotation, scaleX, scaleY);
 
@@ -323,35 +238,35 @@ TileBatch.prototype = {
         tx3 = xw * mva + y * mvc + mve;
         ty3 = xw * mvb + y * mvd + mvf;
 
-        this.manager.setRenderer(this, frame.texture.source[frame.sourceIndex].glTexture, gameObject.renderTarget);
+        this.manager.setRenderer(this, texture, gameObject.renderTarget);
         vertexOffset = vertexDataBuffer.allocate(24);
         this.elementCount += 6;
 
         vertexBufferObjectF32[vertexOffset++] = tx0;
         vertexBufferObjectF32[vertexOffset++] = ty0;
-        vertexBufferObjectF32[vertexOffset++] = uvs.x0 + tilePositionX;
-        vertexBufferObjectF32[vertexOffset++] = uvs.y0 + tilePositionY;
+        vertexBufferObjectF32[vertexOffset++] = u0 + tilePositionX;
+        vertexBufferObjectF32[vertexOffset++] = v0 + tilePositionY;
         vertexBufferObjectU32[vertexOffset++] = 0xFFFFFF; //vertexColor.topLeft;
         vertexBufferObjectF32[vertexOffset++] = alpha;
 
         vertexBufferObjectF32[vertexOffset++] = tx1;
         vertexBufferObjectF32[vertexOffset++] = ty1;
-        vertexBufferObjectF32[vertexOffset++] = uvs.x1 + tilePositionX;
-        vertexBufferObjectF32[vertexOffset++] = uvs.y1 + tilePositionY;
+        vertexBufferObjectF32[vertexOffset++] = u0 + tilePositionX;
+        vertexBufferObjectF32[vertexOffset++] = v1 + tilePositionY;
         vertexBufferObjectU32[vertexOffset++] = 0xFFFFFF; //vertexColor.bottomLeft;
         vertexBufferObjectF32[vertexOffset++] = alpha;
 
         vertexBufferObjectF32[vertexOffset++] = tx2;
         vertexBufferObjectF32[vertexOffset++] = ty2;
-        vertexBufferObjectF32[vertexOffset++] = uvs.x2 + tilePositionX;
-        vertexBufferObjectF32[vertexOffset++] = uvs.y2 + tilePositionY;
+        vertexBufferObjectF32[vertexOffset++] = u1 + tilePositionX;
+        vertexBufferObjectF32[vertexOffset++] = v1 + tilePositionY;
         vertexBufferObjectU32[vertexOffset++] = 0xFFFFFF; //vertexColor.bottomRight;
         vertexBufferObjectF32[vertexOffset++] = alpha;
 
         vertexBufferObjectF32[vertexOffset++] = tx3;
         vertexBufferObjectF32[vertexOffset++] = ty3;
-        vertexBufferObjectF32[vertexOffset++] = uvs.x3 + tilePositionX;
-        vertexBufferObjectF32[vertexOffset++] = uvs.y3 + tilePositionY;
+        vertexBufferObjectF32[vertexOffset++] = u1 + tilePositionX;
+        vertexBufferObjectF32[vertexOffset++] = v0 + tilePositionY;
         vertexBufferObjectU32[vertexOffset++] = 0xFFFFFF; //vertexColor.topRight;
         vertexBufferObjectF32[vertexOffset++] = alpha;
     }