mirror of
https://github.com/photonstorm/phaser
synced 2025-03-05 15:58:11 +00:00
DynamicBitmapText WebGL renderer updated
This commit is contained in:
Felipe Alfonso
parent
5c782c8f7d
commit
fd4f441146
7 changed files with 237 additions and 82 deletions
|
|
@ -1,5 +1,6 @@
|
|||
var GameObject = require('../../GameObject');
|
||||
var TransformMatrix = require('../../components/TransformMatrix');
|
||||
var Utils = require('../../../renderer/webgl/Utils');
|
||||
var tempMatrix = new TransformMatrix();
|
||||
var tempMatrixChar = new TransformMatrix();
|
||||
|
||||
|
|
@ -13,21 +14,21 @@ var DynamicBitmapTextWebGLRenderer = function (renderer, gameObject, interpolati
|
|||
return;
|
||||
}
|
||||
|
||||
var spriteRenderer = renderer.spriteRenderer;
|
||||
var displayCallback = gameObject.displayCallback;
|
||||
var textureFrame = gameObject.frame;
|
||||
var cameraScrollX = camera.scrollX * gameObject.scrollFactorX;
|
||||
var cameraScrollY = camera.scrollY * gameObject.scrollFactorY;
|
||||
var chars = gameObject.fontData.chars;
|
||||
var lineHeight = gameObject.fontData.lineHeight;
|
||||
var spriteBatch = renderer.spriteBatch;
|
||||
var getTint = Utils.getTintAppendFloatAlpha;
|
||||
var alpha = gameObject.alpha;
|
||||
var tintTL = gameObject._tintTL;
|
||||
var tintTR = gameObject._tintTR;
|
||||
var tintBL = gameObject._tintBL;
|
||||
var tintBR = gameObject._tintBR;
|
||||
var vertexDataBuffer = spriteBatch.vertexDataBuffer;
|
||||
var vertexBuffer = vertexDataBuffer.floatView;
|
||||
var vertexBufferU32 = vertexDataBuffer.uintView;
|
||||
var tintTL = getTint(gameObject._tintTL, alpha);
|
||||
var tintTR = getTint(gameObject._tintTR, alpha);
|
||||
var tintBL = getTint(gameObject._tintBL, alpha);
|
||||
var tintBR = getTint(gameObject._tintBR, alpha);
|
||||
var vertexViewF32 = spriteRenderer.vertexViewF32;
|
||||
var vertexViewU32 = spriteRenderer.vertexViewU32;
|
||||
var vertexOffset = 0;
|
||||
var textureData = gameObject.texture.source[textureFrame.sourceIndex];
|
||||
var textureX = textureFrame.cutX;
|
||||
|
|
@ -57,48 +58,46 @@ var DynamicBitmapTextWebGLRenderer = function (renderer, gameObject, interpolati
|
|||
var lastCharCode = 0;
|
||||
var tempMatrixMatrix = tempMatrix.matrix;
|
||||
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 scale = (gameObject.fontSize / gameObject.fontData.size);
|
||||
var uta, utb, utc, utd, ute, utf;
|
||||
var tempMatrixCharMatrix = tempMatrixChar.matrix;
|
||||
var renderTarget = gameObject.renderTarget;
|
||||
|
||||
tempMatrix.applyITRS(
|
||||
gameObject.x - cameraScrollX, gameObject.y - cameraScrollY,
|
||||
-gameObject.rotation,
|
||||
gameObject.scaleX, gameObject.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;
|
||||
|
||||
var sr = Math.sin(-gameObject.rotation);
|
||||
var cr = Math.cos(-gameObject.rotation);
|
||||
var sra = cr * gameObject.scaleX;
|
||||
var srb = -sr * gameObject.scaleX;
|
||||
var src = sr * gameObject.scaleY;
|
||||
var srd = cr * gameObject.scaleY;
|
||||
var sre = gameObject.x - cameraScrollX;
|
||||
var srf = gameObject.y - cameraScrollY;
|
||||
var cma = cameraMatrix[0];
|
||||
var cmb = cameraMatrix[1];
|
||||
var cmc = cameraMatrix[2];
|
||||
var cmd = cameraMatrix[3];
|
||||
var cme = cameraMatrix[4];
|
||||
var cmf = cameraMatrix[5];
|
||||
var mva = sra * cma + srb * cmc;
|
||||
var mvb = sra * cmb + srb * cmd;
|
||||
var mvc = src * cma + srd * cmc;
|
||||
var mvd = src * cmb + srd * cmd;
|
||||
var mve = sre * cma + srf * cmc + cme;
|
||||
var mvf = sre * cmb + srf * cmd + cmf;
|
||||
var gl = renderer.gl;
|
||||
var shader = null;
|
||||
|
||||
renderer.setPipeline(spriteRenderer);
|
||||
spriteRenderer.beginPass(gameObject.shader, gameObject.renderTarget);
|
||||
renderer.setTexture(texture, 0);
|
||||
shader = spriteRenderer.currentProgram;
|
||||
|
||||
spriteRenderer.orthoViewMatrix[0] = +2.0 / spriteRenderer.width;
|
||||
spriteRenderer.orthoViewMatrix[5] = -2.0 / spriteRenderer.height;
|
||||
|
||||
shader.setConstantMatrix4x4(shader.getUniformLocation('uOrthoMatrix'), spriteRenderer.orthoViewMatrix);
|
||||
|
||||
if (gameObject.cropWidth > 0 && gameObject.cropHeight > 0)
|
||||
{
|
||||
if (renderer.currentRenderer !== null)
|
||||
{
|
||||
renderer.currentRenderer.flush();
|
||||
}
|
||||
spriteRenderer.flush();
|
||||
|
||||
if (!renderer.scissor.enabled)
|
||||
{
|
||||
|
|
@ -171,6 +170,11 @@ var DynamicBitmapTextWebGLRenderer = function (renderer, gameObject, interpolati
|
|||
tintBL = output.tint.bottomLeft;
|
||||
tintBR = output.tint.bottomRight;
|
||||
}
|
||||
|
||||
tintTL = getTint(tintTL, alpha);
|
||||
tintTR = getTint(tintTR, alpha);
|
||||
tintBL = getTint(tintBL, alpha);
|
||||
tintBR = getTint(tintBR, alpha);
|
||||
}
|
||||
|
||||
x -= gameObject.scrollX | 0;
|
||||
|
|
@ -211,52 +215,60 @@ var DynamicBitmapTextWebGLRenderer = function (renderer, gameObject, interpolati
|
|||
vmin = glyphY / textureHeight;
|
||||
vmax = (glyphY + glyphH) / textureHeight;
|
||||
|
||||
if (spriteBatch.elementCount >= spriteBatch.maxParticles)
|
||||
if (spriteRenderer.vertexCount >= spriteRenderer.vertexCapacity)
|
||||
{
|
||||
spriteBatch.flush();
|
||||
spriteRenderer.flush();
|
||||
vertexOffset = 0;
|
||||
}
|
||||
|
||||
renderer.setRenderer(spriteBatch, texture, renderTarget);
|
||||
vertexOffset = vertexDataBuffer.allocate(24);
|
||||
spriteBatch.elementCount += 6;
|
||||
spriteRenderer.vertexCount += 6;
|
||||
|
||||
vertexBuffer[vertexOffset++] = tx0;
|
||||
vertexBuffer[vertexOffset++] = ty0;
|
||||
vertexBuffer[vertexOffset++] = umin;
|
||||
vertexBuffer[vertexOffset++] = vmin;
|
||||
vertexBufferU32[vertexOffset++] = tintTL;
|
||||
vertexBuffer[vertexOffset++] = alpha;
|
||||
vertexViewF32[vertexOffset++] = tx0;
|
||||
vertexViewF32[vertexOffset++] = ty0;
|
||||
vertexViewF32[vertexOffset++] = umin;
|
||||
vertexViewF32[vertexOffset++] = vmin;
|
||||
vertexViewU32[vertexOffset++] = tintTL;
|
||||
|
||||
vertexBuffer[vertexOffset++] = tx1;
|
||||
vertexBuffer[vertexOffset++] = ty1;
|
||||
vertexBuffer[vertexOffset++] = umin;
|
||||
vertexBuffer[vertexOffset++] = vmax;
|
||||
vertexBufferU32[vertexOffset++] = tintBL;
|
||||
vertexBuffer[vertexOffset++] = alpha;
|
||||
vertexViewF32[vertexOffset++] = tx1;
|
||||
vertexViewF32[vertexOffset++] = ty1;
|
||||
vertexViewF32[vertexOffset++] = umin;
|
||||
vertexViewF32[vertexOffset++] = vmax;
|
||||
vertexViewU32[vertexOffset++] = tintBL;
|
||||
|
||||
vertexBuffer[vertexOffset++] = tx2;
|
||||
vertexBuffer[vertexOffset++] = ty2;
|
||||
vertexBuffer[vertexOffset++] = umax;
|
||||
vertexBuffer[vertexOffset++] = vmax;
|
||||
vertexBufferU32[vertexOffset++] = tintBR;
|
||||
vertexBuffer[vertexOffset++] = alpha;
|
||||
vertexViewF32[vertexOffset++] = tx2;
|
||||
vertexViewF32[vertexOffset++] = ty2;
|
||||
vertexViewF32[vertexOffset++] = umax;
|
||||
vertexViewF32[vertexOffset++] = vmax;
|
||||
vertexViewU32[vertexOffset++] = tintBR;
|
||||
|
||||
vertexBuffer[vertexOffset++] = tx3;
|
||||
vertexBuffer[vertexOffset++] = ty3;
|
||||
vertexBuffer[vertexOffset++] = umax;
|
||||
vertexBuffer[vertexOffset++] = vmin;
|
||||
vertexBufferU32[vertexOffset++] = tintTR;
|
||||
vertexBuffer[vertexOffset++] = alpha;
|
||||
vertexViewF32[vertexOffset++] = tx0;
|
||||
vertexViewF32[vertexOffset++] = ty0;
|
||||
vertexViewF32[vertexOffset++] = umin;
|
||||
vertexViewF32[vertexOffset++] = vmin;
|
||||
vertexViewU32[vertexOffset++] = tintTL;
|
||||
|
||||
vertexViewF32[vertexOffset++] = tx2;
|
||||
vertexViewF32[vertexOffset++] = ty2;
|
||||
vertexViewF32[vertexOffset++] = umax;
|
||||
vertexViewF32[vertexOffset++] = vmax;
|
||||
vertexViewU32[vertexOffset++] = tintBR;
|
||||
|
||||
vertexViewF32[vertexOffset++] = tx3;
|
||||
vertexViewF32[vertexOffset++] = ty3;
|
||||
vertexViewF32[vertexOffset++] = umax;
|
||||
vertexViewF32[vertexOffset++] = vmin;
|
||||
vertexViewU32[vertexOffset++] = tintTR;
|
||||
|
||||
xAdvance += glyph.xAdvance;
|
||||
indexCount += 1;
|
||||
lastGlyph = glyph;
|
||||
lastCharCode = charCode;
|
||||
|
||||
}
|
||||
|
||||
if (gameObject.cropWidth > 0 && gameObject.cropHeight > 0)
|
||||
{
|
||||
spriteBatch.flush();
|
||||
spriteRenderer.flush();
|
||||
|
||||
if (renderer.scissor.enabled)
|
||||
{
|
||||
|
|
@ -268,6 +280,9 @@ var DynamicBitmapTextWebGLRenderer = function (renderer, gameObject, interpolati
|
|||
gl.disable(gl.SCISSOR_TEST);
|
||||
}
|
||||
}
|
||||
|
||||
spriteRenderer.flush();
|
||||
spriteRenderer.endPass();
|
||||
};
|
||||
|
||||
module.exports = DynamicBitmapTextWebGLRenderer;
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ var ImageWebGLRenderer = function (renderer, src, interpolationPercentage, camer
|
|||
return;
|
||||
}
|
||||
|
||||
renderer.spriteBatch.drawSprite(src, camera);
|
||||
renderer.spriteRenderer.drawSprite(src, camera);
|
||||
};
|
||||
|
||||
module.exports = ImageWebGLRenderer;
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ var SpriteWebGLRenderer = function (renderer, src, interpolationPercentage, came
|
|||
return;
|
||||
}
|
||||
|
||||
renderer.spriteBatch.drawSprite(src, camera);
|
||||
renderer.spriteRenderer.drawSprite(src, camera);
|
||||
};
|
||||
|
||||
module.exports = SpriteWebGLRenderer;
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ var ResourceManager = require('./ResourceManager');
|
|||
var Resources = require('./resources');
|
||||
var ScaleModes = require('../ScaleModes');
|
||||
var ShapeBatch = require('./pipelines/shapebatch/ShapeBatch');
|
||||
var SpriteBatch = require('./pipelines/spritebatch/SpriteBatch');
|
||||
var SpriteRenderer = require('./pipelines/spriterenderer/SpriteRenderer');
|
||||
var TileBatch = require('./pipelines/tilebatch/TileBatch');
|
||||
var TilemapRenderer = require('./pipelines/tilemaprenderer/TilemapRenderer');
|
||||
var WebGLSnapshot = require('../snapshot/WebGLSnapshot');
|
||||
|
|
@ -166,14 +166,14 @@ var WebGLpipeline = new Class({
|
|||
this.extensions = gl.getSupportedExtensions();
|
||||
this.blitterBatch = this.addPipeline(new BlitterBatch(this.game, gl, this));
|
||||
//this.quadBatch = this.addPipeline(new QuadBatch(this.game, gl, this));
|
||||
this.spriteBatch = this.addPipeline(new SpriteBatch(this.game, gl, this));
|
||||
this.spriteRenderer = this.addPipeline(new SpriteRenderer(this.game, gl, this));
|
||||
//this.shapeBatch = this.addPipeline(new ShapeBatch(this.game, gl, this));
|
||||
//this.EffectRenderer = this.addPipeline(new EffectRenderer(this.game, gl, this));
|
||||
//this.tileBatch = this.addPipeline(new TileBatch(this.game, gl, this));
|
||||
//this.TilemapRenderer = this.addPipeline(new TilemapRenderer(this.game, gl, this));
|
||||
//this.ParticleRenderer = this.addPipeline(new ParticleRenderer(this.game, gl, this));
|
||||
//this.MaskRenderer = this.addPipeline(new MaskRenderer(this.game, gl, this));
|
||||
this.currentPipeline = this.spriteBatch;
|
||||
this.currentPipeline = this.spriteRenderer;
|
||||
this.currentVertexBuffer = null;
|
||||
this.setBlendMode(0);
|
||||
this.resize(this.width, this.height);
|
||||
|
|
@ -299,7 +299,6 @@ var WebGLpipeline = new Class({
|
|||
var gl = this.gl;
|
||||
|
||||
this.currentPipeline.flush();
|
||||
this.currentPipeline.endPass();
|
||||
|
||||
gl.activeTexture(gl.TEXTURE0 + unit);
|
||||
|
||||
|
|
|
|||
|
|
@ -3,16 +3,16 @@ var ShaderSource = require('../../shaders/TextureTintShader');
|
|||
var Pipeline = require('../../Pipeline');
|
||||
var Utils = require('../../Utils');
|
||||
|
||||
var SpriteBatch = new Class({
|
||||
var SpriteRenderer = new Class({
|
||||
|
||||
Extends: Pipeline,
|
||||
|
||||
initialize:
|
||||
|
||||
function SpriteBatch(game, gl, manager)
|
||||
function SpriteRenderer(game, gl, manager)
|
||||
{
|
||||
Pipeline.call(this, {
|
||||
name: 'SpriteBatch',
|
||||
name: 'SpriteRenderer',
|
||||
game: game,
|
||||
gl: gl,
|
||||
manager: manager,
|
||||
|
|
@ -73,6 +73,147 @@ var SpriteBatch = new Class({
|
|||
this.vertexViewU32 = new Uint32Array(this.vertexData);
|
||||
},
|
||||
|
||||
drawRawSprite: function (
|
||||
shader,
|
||||
renderTarget,
|
||||
frameTexture,
|
||||
textureSourceIndex,
|
||||
flipX,
|
||||
flipY,
|
||||
frameX,
|
||||
frameY,
|
||||
frameWidth,
|
||||
frameHeight,
|
||||
displayOriginX,
|
||||
displayOriginY,
|
||||
scrollFactorX,
|
||||
scrollFactorY,
|
||||
translateX,
|
||||
translateY,
|
||||
scaleX,
|
||||
scaleY,
|
||||
rotation,
|
||||
tint,
|
||||
alpha,
|
||||
camera
|
||||
)
|
||||
{
|
||||
this.manager.setPipeline(this);
|
||||
this.beginPass(shader, renderTarget);
|
||||
|
||||
var vertexViewF32 = this.vertexViewF32;
|
||||
var vertexViewU32 = this.vertexViewU32;
|
||||
var orthoViewMatrix = this.orthoViewMatrix;
|
||||
var manager = this.manager;
|
||||
var gl = this.gl;
|
||||
var shader = this.currentProgram;
|
||||
var cameraMatrix = camera.matrix.matrix;
|
||||
var a = cameraMatrix[0];
|
||||
var b = cameraMatrix[1];
|
||||
var c = cameraMatrix[2];
|
||||
var d = cameraMatrix[3];
|
||||
var e = cameraMatrix[4];
|
||||
var f = cameraMatrix[5];
|
||||
var textureSource = frameTexture.source[textureSourceIndex];
|
||||
var textureWidth = textureSource.width;
|
||||
var textureHeight = textureSource.height;
|
||||
var texture = textureSource.glTexture;
|
||||
var forceFlipY = (texture.isRenderTexture ? true : false);
|
||||
var flipX = flipX;
|
||||
var flipY = flipY ^ forceFlipY;
|
||||
var width = frameWidth * (flipX ? -1.0 : 1.0);
|
||||
var height = frameHeight * (flipY ? -1.0 : 1.0);
|
||||
var x = -displayOriginX + ((frameWidth) * (flipX ? 1.0 : 0.0));
|
||||
var y = -displayOriginY + ((frameHeight) * (flipY ? 1.0 : 0.0));
|
||||
var xw = x + width;
|
||||
var yh = y + height;
|
||||
var translateX = translateX - camera.scrollX * scrollFactorX;
|
||||
var translateY = translateY - camera.scrollY * scrollFactorY;
|
||||
var scaleX = scaleX;
|
||||
var scaleY = scaleY;
|
||||
var rotation = -rotation;
|
||||
var sr = Math.sin(rotation);
|
||||
var cr = Math.cos(rotation);
|
||||
var sra = cr * scaleX;
|
||||
var srb = -sr * scaleX;
|
||||
var src = sr * scaleY;
|
||||
var srd = cr * scaleY;
|
||||
var sre = translateX;
|
||||
var srf = translateY;
|
||||
var cma = cameraMatrix[0];
|
||||
var cmb = cameraMatrix[1];
|
||||
var cmc = cameraMatrix[2];
|
||||
var cmd = cameraMatrix[3];
|
||||
var cme = cameraMatrix[4];
|
||||
var cmf = cameraMatrix[5];
|
||||
var mva = sra * cma + srb * cmc;
|
||||
var mvb = sra * cmb + srb * cmd;
|
||||
var mvc = src * cma + srd * cmc;
|
||||
var mvd = src * cmb + srd * cmd;
|
||||
var mve = sre * cma + srf * cmc + cme;
|
||||
var mvf = sre * cmb + srf * cmd + cmf;
|
||||
var tx0 = x * mva + y * mvc + mve;
|
||||
var ty0 = x * mvb + y * mvd + mvf;
|
||||
var tx1 = x * mva + yh * mvc + mve;
|
||||
var ty1 = x * mvb + yh * mvd + mvf;
|
||||
var tx2 = xw * mva + yh * mvc + mve;
|
||||
var ty2 = xw * mvb + yh * mvd + mvf;
|
||||
var tx3 = xw * mva + y * mvc + mve;
|
||||
var ty3 = xw * mvb + y * mvd + mvf;
|
||||
var spriteTint = Utils.getTintAppendFloatAlpha(tint, alpha);
|
||||
var u0 = (frameX + 0.5) / textureWidth;
|
||||
var v0 = (frameY + 0.5) / textureHeight;
|
||||
var u1 = (frameX - 0.5 + frameWidth) / textureWidth;
|
||||
var v1 = (frameY - 0.5 + frameHeight) / textureHeight;
|
||||
|
||||
orthoViewMatrix[0] = +2.0 / this.width;
|
||||
orthoViewMatrix[5] = -2.0 / this.height;
|
||||
|
||||
shader.setConstantMatrix4x4(shader.getUniformLocation('uOrthoMatrix'), orthoViewMatrix);
|
||||
manager.setTexture(texture, 0);
|
||||
|
||||
vertexViewF32[0] = tx0;
|
||||
vertexViewF32[1] = ty0;
|
||||
vertexViewF32[2] = u0;
|
||||
vertexViewF32[3] = v0;
|
||||
vertexViewU32[4] = spriteTint;
|
||||
|
||||
vertexViewF32[5] = tx1;
|
||||
vertexViewF32[6] = ty1;
|
||||
vertexViewF32[7] = u0;
|
||||
vertexViewF32[8] = v1;
|
||||
vertexViewU32[9] = spriteTint;
|
||||
|
||||
vertexViewF32[10] = tx2;
|
||||
vertexViewF32[11] = ty2;
|
||||
vertexViewF32[12] = u1;
|
||||
vertexViewF32[13] = v1;
|
||||
vertexViewU32[14] = spriteTint;
|
||||
|
||||
vertexViewF32[15] = tx0;
|
||||
vertexViewF32[16] = ty0;
|
||||
vertexViewF32[17] = u0;
|
||||
vertexViewF32[18] = v0;
|
||||
vertexViewU32[19] = spriteTint;
|
||||
|
||||
vertexViewF32[20] = tx2;
|
||||
vertexViewF32[21] = ty2;
|
||||
vertexViewF32[22] = u1;
|
||||
vertexViewF32[23] = v1;
|
||||
vertexViewU32[24] = spriteTint;
|
||||
|
||||
vertexViewF32[25] = tx3;
|
||||
vertexViewF32[26] = ty3;
|
||||
vertexViewF32[27] = u1;
|
||||
vertexViewF32[28] = v0;
|
||||
vertexViewU32[29] = spriteTint;
|
||||
|
||||
this.vertexCount = 6;
|
||||
|
||||
this.flush();
|
||||
this.endPass();
|
||||
},
|
||||
|
||||
drawSprite: function (sprite, camera)
|
||||
{
|
||||
this.manager.setPipeline(this);
|
||||
|
|
@ -196,4 +337,4 @@ var SpriteBatch = new Class({
|
|||
|
||||
});
|
||||
|
||||
module.exports = SpriteBatch;
|
||||
module.exports = SpriteRenderer;
|
||||
Loading…
Add table
Reference in a new issue