Mirrors/phaser
2
0
Fork 0
mirror of https://github.com/photonstorm/phaser synced 2024-11-26 22:52:14 +00:00
Code Issues Projects Releases Packages Wiki Activity

TileSprite webgl rendering

Browse source
This commit is contained in:
Felipe Alfonso 2018-01-24 21:15:51 -03:00
parent 195a59d3ba
commit 42482ecb26
7 changed files with 72 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/gameobjects/index.js
View file

@ -28,7 +28,7 @@ var GameObjects = {
//Tile: require('./tilemap/Tile'),
Tilemap: require('./tilemap/Tilemap'),
//Tileset: require('./tilemap/Tileset'),
//TileSprite: require('./tilesprite/TileSprite'),
TileSprite: require('./tilesprite/TileSprite'),
//Zone: require('./zone/Zone'),
// Game Object Factories
@ -47,7 +47,7 @@ var GameObjects = {
StaticBitmapText: require('./bitmaptext/static/BitmapTextFactory'),
Text: require('./text/static/TextFactory'),
Tilemap: require('./tilemap/TilemapFactory'),
//TileSprite: require('./tilesprite/TileSpriteFactory'),
TileSprite: require('./tilesprite/TileSpriteFactory'),
//Zone: require('./zone/ZoneFactory')
},
@ -64,7 +64,7 @@ var GameObjects = {
StaticBitmapText: require('./bitmaptext/static/BitmapTextCreator'),
Text: require('./text/static/TextCreator'),
Tilemap: require('./tilemap/TilemapCreator'),
//TileSprite: require('./tilesprite/TileSpriteCreator'),
TileSprite: require('./tilesprite/TileSpriteCreator'),
//Zone: require('./zone/ZoneCreator')
}

2
src/gameobjects/text/static/TextWebGLRenderer.js
View file

@ -18,6 +18,7 @@ var TextWebGLRenderer = function (renderer, text, interpolationPercentage, camer
renderer.pipelines.TextureTintPipeline.batchTexture(
text.canvasTexture,
text.canvasTexture.width, text.canvasTexture.height,
text.x, text.y,
text.canvasTexture.width, text.canvasTexture.height,
text.scaleX, text.scaleY,
@ -30,6 +31,7 @@ var TextWebGLRenderer = function (renderer, text, interpolationPercentage, camer
getTint(text._tintTR, text._alphaTR),
getTint(text._tintBL, text._alphaBL),
getTint(text._tintBR, text._alphaBR),
0, 0,
camera
);
};

2
src/gameobjects/tilemap/dynamiclayer/DynamicTilemapLayerWebGLRenderer.js
View file

@ -39,6 +39,7 @@ var DynamicTilemapLayerWebGLRenderer = function (renderer, tilemapLayer, interpo
pipeline.batchTexture(
texture,
texture.width, texture.height,
tile.pixelX, tile.pixelY,
tile.width, tile.height,
1, 1,
@ -48,6 +49,7 @@ var DynamicTilemapLayerWebGLRenderer = function (renderer, tilemapLayer, interpo
0, 0,
frameX, frameY, frameWidth, frameHeight,
tint, tint, tint, tint,
0, 0,
camera
);
}

28
src/gameobjects/tilesprite/TileSprite.js
View file

@ -29,7 +29,7 @@ var TileSprite = new Class({
function TileSprite (scene, x, y, width, height, texture, frame)
{
var resourceManager = scene.sys.game.renderer.resourceManager;
var renderer = scene.sys.game.renderer;
GameObject.call(this, scene, 'TileSprite');
@ -37,7 +37,7 @@ var TileSprite = new Class({
this.tilePositionY = 0;
this.dirty = true;
this.tileTexture = null;
this.renderer = null;
this.renderer = renderer;
this.setTexture(texture, frame);
this.setPosition(x, y);
@ -47,26 +47,16 @@ var TileSprite = new Class({
this.potWidth = GetPowerOfTwo(this.frame.width);
this.potHeight = GetPowerOfTwo(this.frame.height);
this.canvasPattern = null;
if (resourceManager)
{
this.renderer = scene.sys.game.renderer;
var gl = scene.sys.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();
var _this = this;
scene.sys.game.renderer.onContextRestored(function (renderer) {
_this.tileTexture = null;
_this.dirty = true;
_this.tileTexture = resourceManager.createTexture(0, gl.LINEAR, gl.LINEAR, gl.REPEAT, gl.REPEAT, gl.RGBA, _this.canvasBuffer, _this.potWidth, _this.potHeight);
});
this.tileTexture = null;
this.dirty = true;
this.tileTexture = renderer.createTexture2D(0, gl.LINEAR, gl.LINEAR, gl.REPEAT, gl.REPEAT, gl.RGBA, this.canvasBuffer, this.potWidth, this.potHeight);
}, this);
},
updateTileTexture: function ()
@ -84,9 +74,9 @@ var TileSprite = new Class({
this.potWidth, this.potHeight
);
if (this.renderer)
if (this.renderer.gl)
{
this.renderer.uploadCanvasToGPU(this.canvasBuffer, this.tileTexture, false);
this.tileTexture = this.renderer.canvasToTexture(this.canvasBuffer, this.tileTexture, (this.tileTexture === null), this.scaleMode);
}
else
{
@ -100,7 +90,7 @@ var TileSprite = new Class({
{
if (this.renderer)
{
this.renderer.gl.deleteTexture(this.tileTexture);
this.renderer.deleteTexture(this.tileTexture);
}
CanvasPool.remove(this.canvasBuffer);

29
src/gameobjects/tilesprite/TileSpriteWebGLRenderer.js
View file

@ -1,15 +1,36 @@
var GameObject = require('../GameObject');
var Utils = require('../../renderer/webgl/Utils');
var TileSpriteWebGLRenderer = function (renderer, src, interpolationPercentage, camera)
var TileSpriteWebGLRenderer = function (renderer, tileSprite, interpolationPercentage, camera)
{
if (GameObject.RENDER_MASK !== src.renderFlags || (src.cameraFilter > 0 && (src.cameraFilter & camera._id)))
if (GameObject.RENDER_MASK !== tileSprite.renderFlags || (tileSprite.cameraFilter > 0 && (tileSprite.cameraFilter & camera._id)))
{
return;
}
src.updateTileTexture();
tileSprite.updateTileTexture();
renderer.tileBatch.addTileSprite(src, camera);
var getTint = Utils.getTintAppendFloatAlpha;
renderer.pipelines.TextureTintPipeline.batchTexture(
tileSprite.tileTexture,
tileSprite.frame.width, tileSprite.frame.height,
tileSprite.x, tileSprite.y,
tileSprite.width, tileSprite.height,
tileSprite.scaleX, tileSprite.scaleY,
tileSprite.rotation,
tileSprite.flipX, tileSprite.flipY,
tileSprite.scrollFactorX, tileSprite.scrollFactorY,
tileSprite.originX * tileSprite.width, tileSprite.originY * tileSprite.height,
0, 0, tileSprite.width, tileSprite.height,
getTint(tileSprite._tintTL, tileSprite._alphaTL),
getTint(tileSprite._tintTR, tileSprite._alphaTR),
getTint(tileSprite._tintBL, tileSprite._alphaBL),
getTint(tileSprite._tintBR, tileSprite._alphaBR),
tileSprite.tilePositionX / tileSprite.frame.width,
tileSprite.tilePositionY / tileSprite.frame.height,
camera
);
};
module.exports = TileSpriteWebGLRenderer;

22
src/renderer/webgl/WebGLRenderer.js
View file

@ -572,7 +572,7 @@ var WebGLRenderer = new Class({
return vertexBuffer;
},
createIndexBuffer: function ()
createIndexBuffer: function (initialDataOrSize, bufferUsage)
{
var gl = this.gl;
var indexBuffer = gl.createBuffer();
@ -584,6 +584,26 @@ var WebGLRenderer = new Class({
return indexBuffer;
},
deleteTexture: function (texture)
{
return this;
},
deleteFramebuffer: function (framebuffer)
{
return this;
},
deleteProgram: function (program)
{
return this;
},
deleteBuffer: function (vertexBuffer)
{
return this;
},
/* Rendering Functions */
preRenderCamera: function (camera)
{

18
src/renderer/webgl/pipelines/TextureTintPipeline.js
View file

@ -198,6 +198,7 @@ var TextureTintPipeline = new Class({
batchTexture: function (
texture,
textureWidth, textureHeight,
srcX, srcY,
srcWidth, srcHeight,
scaleX, scaleY,
@ -207,6 +208,7 @@ var TextureTintPipeline = new Class({
displayOriginX, displayOriginY,
frameX, frameY, frameWidth, frameHeight,
tintTL, tintTR, tintBL, tintBR,
uOffset, vOffset,
camera)
{
this.renderer.setPipeline(this);
@ -265,14 +267,14 @@ var TextureTintPipeline = new Class({
var tx3 = xw * mva + y * mvc + mve;
var ty3 = xw * mvb + y * mvd + mvf;
var vertexOffset = 0;
var u0 = frameX / texture.width;
var v0 = frameY / texture.height;
var u1 = frameX / texture.width;
var v1 = (frameY + frameHeight) / texture.height;
var u2 = (frameX + frameWidth) / texture.width;
var v2 = (frameY + frameHeight) / texture.height;
var u3 = (frameX + frameWidth) / texture.width;
var v3 = frameY / texture.height;
var u0 = (frameX / textureWidth) + uOffset;
var v0 = (frameY / textureHeight) + vOffset;
var u1 = (frameX / textureWidth) + uOffset;
var v1 = ((frameY + frameHeight) / textureHeight) + vOffset;
var u2 = ((frameX + frameWidth) / textureWidth) + uOffset;
var v2 = ((frameY + frameHeight) / textureHeight) + vOffset;
var u3 = ((frameX + frameWidth) / textureWidth) + uOffset;
var v3 = (frameY / textureHeight) + vOffset;
renderer.setTexture2D(texture, 0);