Mirrors/phaser
2
0
Fork 0
mirror of https://github.com/photonstorm/phaser synced 2024-12-17 16:43:30 +00:00
Code Issues Projects Releases Packages Wiki Activity

Text rendering added

Browse source
This commit is contained in:
Felipe Alfonso 2018-01-23 21:40:20 -03:00
parent 61458e1475
commit 99d850346f
10 changed files with 202 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/gameobjects/index.js
View file

@ -24,7 +24,7 @@ var GameObjects = {
//Sprite3D: require('./sprite3d/Sprite3D'),
Sprite: require('./sprite/Sprite'),
//StaticTilemapLayer: require('./tilemap/staticlayer/StaticTilemapLayer'),
//Text: require('./text/static/Text'),
Text: require('./text/static/Text'),
//Tile: require('./tilemap/Tile'),
//Tilemap: require('./tilemap/Tilemap'),
//Tileset: require('./tilemap/Tileset'),
@ -45,7 +45,7 @@ var GameObjects = {
Sprite: require('./sprite/SpriteFactory'),
//Sprite3D: require('./sprite3d/Sprite3DFactory'),
StaticBitmapText: require('./bitmaptext/static/BitmapTextFactory'),
//Text: require('./text/static/TextFactory'),
Text: require('./text/static/TextFactory'),
//Tilemap: require('./tilemap/TilemapFactory'),
//TileSprite: require('./tilesprite/TileSpriteFactory'),
//Zone: require('./zone/ZoneFactory')
@ -62,7 +62,7 @@ var GameObjects = {
Sprite: require('./sprite/SpriteCreator'),
//Sprite3D: require('./sprite3d/Sprite3DCreator'),
StaticBitmapText: require('./bitmaptext/static/BitmapTextCreator'),
//Text: require('./text/static/TextCreator'),
Text: require('./text/static/TextCreator'),
//Tilemap: require('./tilemap/TilemapCreator'),
//TileSprite: require('./tilesprite/TileSpriteCreator'),
//Zone: require('./zone/ZoneCreator')

2
src/gameobjects/lightlayer/LightLayer.js
View file

@ -48,7 +48,7 @@ var LightLayer = new Class({
this._z = 0;
this.setOrigin(0, 0);
scene.sys.game.renderer.addContextRestoredCallback(function (renderer) {
scene.sys.game.renderer.onContextRestored(function (renderer) {
_this.onContextRestored(renderer);
});

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

@ -90,7 +90,7 @@ var Text = new Class({
var _this = this;
scene.sys.game.renderer.addContextRestoredCallback(function ()
scene.sys.game.renderer.onContextRestored(function ()
{
_this.canvasTexture = null;
_this.dirty = true;

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

@ -1,19 +1,36 @@
var GameObject = require('../../GameObject');
var Utils = require('../../../renderer/webgl/Utils');
var TextWebGLRenderer = function (renderer, src, interpolationPercentage, camera)
var TextWebGLRenderer = function (renderer, text, interpolationPercentage, camera)
{
if (GameObject.RENDER_MASK !== src.renderFlags || (src.cameraFilter > 0 && (src.cameraFilter & camera._id)) || src.text === '')
if (GameObject.RENDER_MASK !== text.renderFlags || (text.cameraFilter > 0 && (text.cameraFilter & camera._id)) || text.text === '')
{
return;
}
if (src.dirty)
if (text.dirty)
{
src.canvasTexture = renderer.uploadCanvasToGPU(src.canvas, src.canvasTexture, true);
src.dirty = false;
text.canvasTexture = renderer.canvasToTexture(text.canvas, text.canvasTexture, true, text.scaleMode);
text.dirty = false;
}
renderer.spriteBatch.addSpriteTexture(src, camera, src.canvasTexture, src.canvas.width, src.canvas.height);
var getTint = Utils.getTintAppendFloatAlpha;
renderer.pipelines.TextureTintPipeline.batchTexture(
text.canvasTexture,
text.x, text.y,
text.scaleX, text.scaleY,
text.rotation,
text.flipX, text.flipY,
text.scrollFactorX, text.scrollFactorY,
text.displayOriginX, text.displayOriginY,
0, 0, text.canvasTexture.width, text.canvasTexture.height,
getTint(text._tintTL, text._alphaTL),
getTint(text._tintTR, text._alphaTR),
getTint(text._tintBL, text._alphaBL),
getTint(text._tintBR, text._alphaBR),
camera
);
};
module.exports = TextWebGLRenderer;

2
src/gameobjects/tilemap/staticlayer/StaticTilemapLayer.js
View file

@ -101,7 +101,7 @@ var StaticTilemapLayer = new Class({
this.setOrigin();
this.setSize(this.layer.tileWidth * this.layer.width, this.layer.tileHeight * this.layer.height);
scene.sys.game.renderer.addContextRestoredCallback(this.contextRestore.bind(this));
scene.sys.game.renderer.onContextRestored(this.contextRestore, this);
},
/**

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

@ -62,7 +62,7 @@ var TileSprite = new Class({
this.updateTileTexture();
var _this = this;
scene.sys.game.renderer.addContextRestoredCallback(function (renderer) {
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);

4
src/renderer/canvas/CanvasRenderer.js
View file

@ -96,11 +96,11 @@ var CanvasRenderer = new Class({
}
},
addContextLostCallback: function (callback)
onContextLost: function (callback)
{
},
addContextRestoredCallback: function (callback)
onContextRestored: function (callback)
{
},

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

@ -32,6 +32,8 @@ var WebGLRenderer = new Class({
this.width = game.config.width * game.config.resolution;
this.height = game.config.height * game.config.resolution;
this.canvas = game.canvas;
this.lostContextCallbacks = [];
this.restoredContextCallbacks = [];
this.blendModes = [];
this.contextLost = false;
this.autoResize = false;
@ -65,11 +67,21 @@ var WebGLRenderer = new Class({
this.canvas.addEventListener('webglcontextlost', function (event) {
renderer.contextLost = true;
event.preventDefault();
for (var index = 0; index < renderer.lostContextCallbacks.length; ++index)
{
var callback = renderer.lostContextCallbacks[index];
callback[0].call(callback[1], renderer);
}
}, false);
this.canvas.addEventListener('webglcontextrestored', function (event) {
renderer.contextLost = false;
renderer.init(config);
for (var index = 0; index < renderer.restoredContextCallbacks.length; ++index)
{
var callback = renderer.restoredContextCallbacks[index];
callback[0].call(callback[1], renderer);
}
}, false);
// This are initialized post context creation
@ -150,6 +162,18 @@ var WebGLRenderer = new Class({
return this;
},
onContextRestored: function (callback, target)
{
this.restoredContextCallbacks.push([callback, target]);
return this;
},
onContextLost: function (callback, target)
{
this.lostContextCallbacks.push([callback, target]);
return this;
},
hasExtension: function (extensionName)
{
return this.supportedExtensions ? this.supportedExtensions.indexOf(extensionName) : false;
@ -353,11 +377,12 @@ var WebGLRenderer = new Class({
},
/* Renderer Resource Creation Functions */
createTextureFromSource: function (source, width, height)
createTextureFromSource: function (source, width, height, scaleMode)
{
var gl = this.gl;
var filter = gl.NEAREST;
var wrap = gl.CLAMP_TO_EDGE;
var texture = null;
width = source ? source.width : width;
height = source ? source.height : height;
@ -367,28 +392,25 @@ var WebGLRenderer = new Class({
wrap = gl.REPEAT;
}
if (!source.glTexture)
if (scaleMode === CONST.ScaleModes.LINEAR)
{
if (source.scaleMode === CONST.ScaleModes.LINEAR)
{
filter = gl.LINEAR;
}
else if (source.scaleMode === CONST.ScaleModes.NEAREST || this.game.config.pixelArt)
{
filter = gl.NEAREST;
}
if (!source && typeof width === 'number' && typeof height === 'number')
{
source.glTexture = this.createTexture2D(0, filter, filter, wrap, wrap, gl.RGBA, null, width, height);
}
else
{
source.glTexture = this.createTexture2D(0, filter, filter, wrap, wrap, gl.RGBA, source.image);
}
filter = gl.LINEAR;
}
else if (scaleMode === CONST.ScaleModes.NEAREST || this.game.config.pixelArt)
{
filter = gl.NEAREST;
}
return source;
if (!source && typeof width === 'number' && typeof height === 'number')
{
texture = this.createTexture2D(0, filter, filter, wrap, wrap, gl.RGBA, null, width, height);
}
else
{
texture = this.createTexture2D(0, filter, filter, wrap, wrap, gl.RGBA, source);
}
return texture;
},
createTexture2D: function (mipLevel, minFilter, magFilter, wrapT, wrapS, format, pixels, width, height, pma)
@ -600,13 +622,13 @@ var WebGLRenderer = new Class({
return this;
},
canvasToTexture: function (srcCanvas, dstTexture, shouldReallocate)
canvasToTexture: function (srcCanvas, dstTexture, shouldReallocate, scaleMode)
{
var gl = this.gl;
if (!dstTexture)
{
dstTexture = this.createTextureFromSource(srcCanvas, srcCanvas.width, srcCanvas.height);
dstTexture = this.createTextureFromSource(srcCanvas, srcCanvas.width, srcCanvas.height, scaleMode);
}
else
{

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

@ -202,6 +202,130 @@ var TextureTintPipeline = new Class({
}
},
batchTexture: function (
texture,
dstX, dstY,
scaleX, scaleY,
rotation,
flipX, flipY,
scrollFactorX, scrollFactorY,
displayOriginX, displayOriginY,
frameX, frameY, frameWidth, frameHeight,
tintTL, tintTR, tintBL, tintBR,
camera)
{
this.renderer.setPipeline(this);
if (this.vertexCount + 6 > this.vertexCapacity)
{
this.flush();
}
flipY = flipY ^ (texture.isRenderTexture ? 1 : 0);
rotation = -rotation;
var getTint = Utils.getTintAppendFloatAlpha;
var vertexViewF32 = this.vertexViewF32;
var vertexViewU32 = this.vertexViewU32;
var renderer = this.renderer;
var cameraMatrix = camera.matrix.matrix;
var cameraWidth = camera.width + 50;
var cameraHeight = camera.height + 50;
var cameraX = -50;
var cameraY = -50;
var width = frameWidth * (flipX ? -1.0 : 1.0);
var height = frameHeight * (flipY ? -1.0 : 1.0);
var x = -displayOriginX + frameX + ((frameWidth) * (flipX ? 1.0 : 0.0));
var y = -displayOriginY + frameY + ((frameHeight) * (flipY ? 1.0 : 0.0));
var xw = x + width;
var yh = y + height;
var translateX = dstX - camera.scrollX * scrollFactorX;
var translateY = dstY - camera.scrollY * scrollFactorY;
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 vertexOffset = 0;
if ((tx0 < cameraX || tx0 > cameraWidth || ty0 < cameraY || ty0 > cameraHeight) &&
(tx1 < cameraX || tx1 > cameraWidth || ty1 < cameraY || ty1 > cameraHeight) &&
(tx2 < cameraX || tx2 > cameraWidth || ty2 < cameraY || ty2 > cameraHeight) &&
(tx3 < cameraX || tx3 > cameraWidth || ty3 < cameraY || ty3 > cameraHeight))
{
return;
}
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;
renderer.setTexture2D(texture, 0);
vertexOffset = this.vertexCount * this.vertexComponentCount;
vertexViewF32[vertexOffset + 0] = tx0;
vertexViewF32[vertexOffset + 1] = ty0;
vertexViewF32[vertexOffset + 2] = u0;
vertexViewF32[vertexOffset + 3] = v0;
vertexViewU32[vertexOffset + 4] = tintTL;
vertexViewF32[vertexOffset + 5] = tx1;
vertexViewF32[vertexOffset + 6] = ty1;
vertexViewF32[vertexOffset + 7] = u1;
vertexViewF32[vertexOffset + 8] = v1;
vertexViewU32[vertexOffset + 9] = tintTR;
vertexViewF32[vertexOffset + 10] = tx2;
vertexViewF32[vertexOffset + 11] = ty2;
vertexViewF32[vertexOffset + 12] = u2;
vertexViewF32[vertexOffset + 13] = v2;
vertexViewU32[vertexOffset + 14] = tintBL;
vertexViewF32[vertexOffset + 15] = tx0;
vertexViewF32[vertexOffset + 16] = ty0;
vertexViewF32[vertexOffset + 17] = u0;
vertexViewF32[vertexOffset + 18] = v0;
vertexViewU32[vertexOffset + 19] = tintTL;
vertexViewF32[vertexOffset + 20] = tx2;
vertexViewF32[vertexOffset + 21] = ty2;
vertexViewF32[vertexOffset + 22] = u2;
vertexViewF32[vertexOffset + 23] = v2;
vertexViewU32[vertexOffset + 24] = tintBL;
vertexViewF32[vertexOffset + 25] = tx3;
vertexViewF32[vertexOffset + 26] = ty3;
vertexViewF32[vertexOffset + 27] = u3;
vertexViewF32[vertexOffset + 28] = v3;
vertexViewU32[vertexOffset + 29] = tintBR;
this.vertexCount += 6;
},
batchSprite: function (sprite, camera)
{
this.renderer.setPipeline(this);

2
src/textures/TextureSource.js
View file

@ -38,7 +38,7 @@ var TextureSource = new Class({
if (game.config.renderType === CONST.WEBGL)
{
game.renderer.createTextureFromSource(this, this.width, this.height);
this.glTexture = game.renderer.createTextureFromSource(this.image, this.width, this.height, this.scaleMode);
}
if (game.config.pixelArt)