Skip to content

Commit 42482ec

Browse files
bitnenferbitnenfer
committed
TileSprite webgl rendering
1 parent 195a59d commit 42482ec

7 files changed

Lines changed: 72 additions & 35 deletions

File tree

‎src/gameobjects/index.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ var GameObjects = {
2828
//Tile: require('./tilemap/Tile'),
2929
Tilemap: require('./tilemap/Tilemap'),
3030
//Tileset: require('./tilemap/Tileset'),
31-
//TileSprite: require('./tilesprite/TileSprite'),
31+
TileSprite: require('./tilesprite/TileSprite'),
3232
//Zone: require('./zone/Zone'),
3333

3434
// Game Object Factories
@@ -47,7 +47,7 @@ var GameObjects = {
4747
StaticBitmapText: require('./bitmaptext/static/BitmapTextFactory'),
4848
Text: require('./text/static/TextFactory'),
4949
Tilemap: require('./tilemap/TilemapFactory'),
50-
//TileSprite: require('./tilesprite/TileSpriteFactory'),
50+
TileSprite: require('./tilesprite/TileSpriteFactory'),
5151
//Zone: require('./zone/ZoneFactory')
5252
},
5353

@@ -64,7 +64,7 @@ var GameObjects = {
6464
StaticBitmapText: require('./bitmaptext/static/BitmapTextCreator'),
6565
Text: require('./text/static/TextCreator'),
6666
Tilemap: require('./tilemap/TilemapCreator'),
67-
//TileSprite: require('./tilesprite/TileSpriteCreator'),
67+
TileSprite: require('./tilesprite/TileSpriteCreator'),
6868
//Zone: require('./zone/ZoneCreator')
6969
}
7070

‎src/gameobjects/text/static/TextWebGLRenderer.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ var TextWebGLRenderer = function (renderer, text, interpolationPercentage, camer
1818

1919
renderer.pipelines.TextureTintPipeline.batchTexture(
2020
text.canvasTexture,
21+
text.canvasTexture.width, text.canvasTexture.height,
2122
text.x, text.y,
2223
text.canvasTexture.width, text.canvasTexture.height,
2324
text.scaleX, text.scaleY,
@@ -30,6 +31,7 @@ var TextWebGLRenderer = function (renderer, text, interpolationPercentage, camer
3031
getTint(text._tintTR, text._alphaTR),
3132
getTint(text._tintBL, text._alphaBL),
3233
getTint(text._tintBR, text._alphaBR),
34+
0, 0,
3335
camera
3436
);
3537
};

‎src/gameobjects/tilemap/dynamiclayer/DynamicTilemapLayerWebGLRenderer.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ var DynamicTilemapLayerWebGLRenderer = function (renderer, tilemapLayer, interpo
3939

4040
pipeline.batchTexture(
4141
texture,
42+
texture.width, texture.height,
4243
tile.pixelX, tile.pixelY,
4344
tile.width, tile.height,
4445
1, 1,
@@ -48,6 +49,7 @@ var DynamicTilemapLayerWebGLRenderer = function (renderer, tilemapLayer, interpo
4849
0, 0,
4950
frameX, frameY, frameWidth, frameHeight,
5051
tint, tint, tint, tint,
52+
0, 0,
5153
camera
5254
);
5355
}

‎src/gameobjects/tilesprite/TileSprite.js‎

Lines changed: 9 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -29,15 +29,15 @@ var TileSprite = new Class({
2929

3030
function TileSprite (scene, x, y, width, height, texture, frame)
3131
{
32-
var resourceManager = scene.sys.game.renderer.resourceManager;
32+
var renderer = scene.sys.game.renderer;
3333

3434
GameObject.call(this, scene, 'TileSprite');
3535

3636
this.tilePositionX = 0;
3737
this.tilePositionY = 0;
3838
this.dirty = true;
3939
this.tileTexture = null;
40-
this.renderer = null;
40+
this.renderer = renderer;
4141

4242
this.setTexture(texture, frame);
4343
this.setPosition(x, y);
@@ -47,26 +47,16 @@ var TileSprite = new Class({
4747
this.potWidth = GetPowerOfTwo(this.frame.width);
4848
this.potHeight = GetPowerOfTwo(this.frame.height);
4949
this.canvasPattern = null;
50-
51-
if (resourceManager)
52-
{
53-
this.renderer = scene.sys.game.renderer;
54-
var gl = scene.sys.game.renderer.gl;
55-
56-
this.tileTexture = resourceManager.createTexture(0, gl.LINEAR, gl.LINEAR, gl.REPEAT, gl.REPEAT, gl.RGBA, this.canvasBuffer, this.potWidth, this.potHeight);
57-
}
58-
5950
this.canvasBuffer = CanvasPool.create2D(null, this.potWidth, this.potHeight);
6051
this.canvasBufferCtx = this.canvasBuffer.getContext('2d');
6152

6253
this.updateTileTexture();
6354

64-
var _this = this;
6555
scene.sys.game.renderer.onContextRestored(function (renderer) {
66-
_this.tileTexture = null;
67-
_this.dirty = true;
68-
_this.tileTexture = resourceManager.createTexture(0, gl.LINEAR, gl.LINEAR, gl.REPEAT, gl.REPEAT, gl.RGBA, _this.canvasBuffer, _this.potWidth, _this.potHeight);
69-
});
56+
this.tileTexture = null;
57+
this.dirty = true;
58+
this.tileTexture = renderer.createTexture2D(0, gl.LINEAR, gl.LINEAR, gl.REPEAT, gl.REPEAT, gl.RGBA, this.canvasBuffer, this.potWidth, this.potHeight);
59+
}, this);
7060
},
7161

7262
updateTileTexture: function ()
@@ -84,9 +74,9 @@ var TileSprite = new Class({
8474
this.potWidth, this.potHeight
8575
);
8676

87-
if (this.renderer)
77+
if (this.renderer.gl)
8878
{
89-
this.renderer.uploadCanvasToGPU(this.canvasBuffer, this.tileTexture, false);
79+
this.tileTexture = this.renderer.canvasToTexture(this.canvasBuffer, this.tileTexture, (this.tileTexture === null), this.scaleMode);
9080
}
9181
else
9282
{
@@ -100,7 +90,7 @@ var TileSprite = new Class({
10090
{
10191
if (this.renderer)
10292
{
103-
this.renderer.gl.deleteTexture(this.tileTexture);
93+
this.renderer.deleteTexture(this.tileTexture);
10494
}
10595

10696
CanvasPool.remove(this.canvasBuffer);

‎src/gameobjects/tilesprite/TileSpriteWebGLRenderer.js‎

Lines changed: 25 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,36 @@
11
var GameObject = require('../GameObject');
2+
var Utils = require('../../renderer/webgl/Utils');
23

3-
var TileSpriteWebGLRenderer = function (renderer, src, interpolationPercentage, camera)
4+
var TileSpriteWebGLRenderer = function (renderer, tileSprite, interpolationPercentage, camera)
45
{
5-
if (GameObject.RENDER_MASK !== src.renderFlags || (src.cameraFilter > 0 && (src.cameraFilter & camera._id)))
6+
if (GameObject.RENDER_MASK !== tileSprite.renderFlags || (tileSprite.cameraFilter > 0 && (tileSprite.cameraFilter & camera._id)))
67
{
78
return;
89
}
910

10-
src.updateTileTexture();
11+
tileSprite.updateTileTexture();
1112

12-
renderer.tileBatch.addTileSprite(src, camera);
13+
var getTint = Utils.getTintAppendFloatAlpha;
14+
15+
renderer.pipelines.TextureTintPipeline.batchTexture(
16+
tileSprite.tileTexture,
17+
tileSprite.frame.width, tileSprite.frame.height,
18+
tileSprite.x, tileSprite.y,
19+
tileSprite.width, tileSprite.height,
20+
tileSprite.scaleX, tileSprite.scaleY,
21+
tileSprite.rotation,
22+
tileSprite.flipX, tileSprite.flipY,
23+
tileSprite.scrollFactorX, tileSprite.scrollFactorY,
24+
tileSprite.originX * tileSprite.width, tileSprite.originY * tileSprite.height,
25+
0, 0, tileSprite.width, tileSprite.height,
26+
getTint(tileSprite._tintTL, tileSprite._alphaTL),
27+
getTint(tileSprite._tintTR, tileSprite._alphaTR),
28+
getTint(tileSprite._tintBL, tileSprite._alphaBL),
29+
getTint(tileSprite._tintBR, tileSprite._alphaBR),
30+
tileSprite.tilePositionX / tileSprite.frame.width,
31+
tileSprite.tilePositionY / tileSprite.frame.height,
32+
camera
33+
);
1334
};
1435

1536
module.exports = TileSpriteWebGLRenderer;

‎src/renderer/webgl/WebGLRenderer.js‎

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -572,7 +572,7 @@ var WebGLRenderer = new Class({
572572
return vertexBuffer;
573573
},
574574

575-
createIndexBuffer: function ()
575+
createIndexBuffer: function (initialDataOrSize, bufferUsage)
576576
{
577577
var gl = this.gl;
578578
var indexBuffer = gl.createBuffer();
@@ -584,6 +584,26 @@ var WebGLRenderer = new Class({
584584
return indexBuffer;
585585
},
586586

587+
deleteTexture: function (texture)
588+
{
589+
return this;
590+
},
591+
592+
deleteFramebuffer: function (framebuffer)
593+
{
594+
return this;
595+
},
596+
597+
deleteProgram: function (program)
598+
{
599+
return this;
600+
},
601+
602+
deleteBuffer: function (vertexBuffer)
603+
{
604+
return this;
605+
},
606+
587607
/* Rendering Functions */
588608
preRenderCamera: function (camera)
589609
{

‎src/renderer/webgl/pipelines/TextureTintPipeline.js‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -198,6 +198,7 @@ var TextureTintPipeline = new Class({
198198

199199
batchTexture: function (
200200
texture,
201+
textureWidth, textureHeight,
201202
srcX, srcY,
202203
srcWidth, srcHeight,
203204
scaleX, scaleY,
@@ -207,6 +208,7 @@ var TextureTintPipeline = new Class({
207208
displayOriginX, displayOriginY,
208209
frameX, frameY, frameWidth, frameHeight,
209210
tintTL, tintTR, tintBL, tintBR,
211+
uOffset, vOffset,
210212
camera)
211213
{
212214
this.renderer.setPipeline(this);
@@ -265,14 +267,14 @@ var TextureTintPipeline = new Class({
265267
var tx3 = xw * mva + y * mvc + mve;
266268
var ty3 = xw * mvb + y * mvd + mvf;
267269
var vertexOffset = 0;
268-
var u0 = frameX / texture.width;
269-
var v0 = frameY / texture.height;
270-
var u1 = frameX / texture.width;
271-
var v1 = (frameY + frameHeight) / texture.height;
272-
var u2 = (frameX + frameWidth) / texture.width;
273-
var v2 = (frameY + frameHeight) / texture.height;
274-
var u3 = (frameX + frameWidth) / texture.width;
275-
var v3 = frameY / texture.height;
270+
var u0 = (frameX / textureWidth) + uOffset;
271+
var v0 = (frameY / textureHeight) + vOffset;
272+
var u1 = (frameX / textureWidth) + uOffset;
273+
var v1 = ((frameY + frameHeight) / textureHeight) + vOffset;
274+
var u2 = ((frameX + frameWidth) / textureWidth) + uOffset;
275+
var v2 = ((frameY + frameHeight) / textureHeight) + vOffset;
276+
var u3 = ((frameX + frameWidth) / textureWidth) + uOffset;
277+
var v3 = (frameY / textureHeight) + vOffset;
276278

277279
renderer.setTexture2D(texture, 0);
278280

0 commit comments

Comments
 (0)