Skip to content

Commit 99d8503

Browse files
bitnenferbitnenfer
committed
Text rendering added
1 parent 61458e1 commit 99d8503

10 files changed

Lines changed: 201 additions & 38 deletions

File tree

‎src/gameobjects/index.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ var GameObjects = {
2424
//Sprite3D: require('./sprite3d/Sprite3D'),
2525
Sprite: require('./sprite/Sprite'),
2626
//StaticTilemapLayer: require('./tilemap/staticlayer/StaticTilemapLayer'),
27-
//Text: require('./text/static/Text'),
27+
Text: require('./text/static/Text'),
2828
//Tile: require('./tilemap/Tile'),
2929
//Tilemap: require('./tilemap/Tilemap'),
3030
//Tileset: require('./tilemap/Tileset'),
@@ -45,7 +45,7 @@ var GameObjects = {
4545
Sprite: require('./sprite/SpriteFactory'),
4646
//Sprite3D: require('./sprite3d/Sprite3DFactory'),
4747
StaticBitmapText: require('./bitmaptext/static/BitmapTextFactory'),
48-
//Text: require('./text/static/TextFactory'),
48+
Text: require('./text/static/TextFactory'),
4949
//Tilemap: require('./tilemap/TilemapFactory'),
5050
//TileSprite: require('./tilesprite/TileSpriteFactory'),
5151
//Zone: require('./zone/ZoneFactory')
@@ -62,7 +62,7 @@ var GameObjects = {
6262
Sprite: require('./sprite/SpriteCreator'),
6363
//Sprite3D: require('./sprite3d/Sprite3DCreator'),
6464
StaticBitmapText: require('./bitmaptext/static/BitmapTextCreator'),
65-
//Text: require('./text/static/TextCreator'),
65+
Text: require('./text/static/TextCreator'),
6666
//Tilemap: require('./tilemap/TilemapCreator'),
6767
//TileSprite: require('./tilesprite/TileSpriteCreator'),
6868
//Zone: require('./zone/ZoneCreator')

‎src/gameobjects/lightlayer/LightLayer.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ var LightLayer = new Class({
4848
this._z = 0;
4949
this.setOrigin(0, 0);
5050

51-
scene.sys.game.renderer.addContextRestoredCallback(function (renderer) {
51+
scene.sys.game.renderer.onContextRestored(function (renderer) {
5252
_this.onContextRestored(renderer);
5353
});
5454

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,7 @@ var Text = new Class({
9090

9191
var _this = this;
9292

93-
scene.sys.game.renderer.addContextRestoredCallback(function ()
93+
scene.sys.game.renderer.onContextRestored(function ()
9494
{
9595
_this.canvasTexture = null;
9696
_this.dirty = true;

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

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

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

10-
if (src.dirty)
11+
if (text.dirty)
1112
{
12-
src.canvasTexture = renderer.uploadCanvasToGPU(src.canvas, src.canvasTexture, true);
13-
src.dirty = false;
13+
text.canvasTexture = renderer.canvasToTexture(text.canvas, text.canvasTexture, true, text.scaleMode);
14+
text.dirty = false;
1415
}
15-
16-
renderer.spriteBatch.addSpriteTexture(src, camera, src.canvasTexture, src.canvas.width, src.canvas.height);
16+
17+
var getTint = Utils.getTintAppendFloatAlpha;
18+
19+
renderer.pipelines.TextureTintPipeline.batchTexture(
20+
text.canvasTexture,
21+
text.x, text.y,
22+
text.scaleX, text.scaleY,
23+
text.rotation,
24+
text.flipX, text.flipY,
25+
text.scrollFactorX, text.scrollFactorY,
26+
text.displayOriginX, text.displayOriginY,
27+
0, 0, text.canvasTexture.width, text.canvasTexture.height,
28+
getTint(text._tintTL, text._alphaTL),
29+
getTint(text._tintTR, text._alphaTR),
30+
getTint(text._tintBL, text._alphaBL),
31+
getTint(text._tintBR, text._alphaBR),
32+
camera
33+
);
1734
};
1835

1936
module.exports = TextWebGLRenderer;

‎src/gameobjects/tilemap/staticlayer/StaticTilemapLayer.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,7 @@ var StaticTilemapLayer = new Class({
101101
this.setOrigin();
102102
this.setSize(this.layer.tileWidth * this.layer.width, this.layer.tileHeight * this.layer.height);
103103

104-
scene.sys.game.renderer.addContextRestoredCallback(this.contextRestore.bind(this));
104+
scene.sys.game.renderer.onContextRestored(this.contextRestore, this);
105105
},
106106

107107
/**

‎src/gameobjects/tilesprite/TileSprite.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ var TileSprite = new Class({
6262
this.updateTileTexture();
6363

6464
var _this = this;
65-
scene.sys.game.renderer.addContextRestoredCallback(function (renderer) {
65+
scene.sys.game.renderer.onContextRestored(function (renderer) {
6666
_this.tileTexture = null;
6767
_this.dirty = true;
6868
_this.tileTexture = resourceManager.createTexture(0, gl.LINEAR, gl.LINEAR, gl.REPEAT, gl.REPEAT, gl.RGBA, _this.canvasBuffer, _this.potWidth, _this.potHeight);

‎src/renderer/canvas/CanvasRenderer.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -96,11 +96,11 @@ var CanvasRenderer = new Class({
9696
}
9797
},
9898

99-
addContextLostCallback: function (callback)
99+
onContextLost: function (callback)
100100
{
101101
},
102102

103-
addContextRestoredCallback: function (callback)
103+
onContextRestored: function (callback)
104104
{
105105
},
106106

‎src/renderer/webgl/WebGLRenderer.js‎

Lines changed: 43 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,8 @@ var WebGLRenderer = new Class({
3232
this.width = game.config.width * game.config.resolution;
3333
this.height = game.config.height * game.config.resolution;
3434
this.canvas = game.canvas;
35+
this.lostContextCallbacks = [];
36+
this.restoredContextCallbacks = [];
3537
this.blendModes = [];
3638
this.contextLost = false;
3739
this.autoResize = false;
@@ -65,11 +67,21 @@ var WebGLRenderer = new Class({
6567
this.canvas.addEventListener('webglcontextlost', function (event) {
6668
renderer.contextLost = true;
6769
event.preventDefault();
70+
for (var index = 0; index < renderer.lostContextCallbacks.length; ++index)
71+
{
72+
var callback = renderer.lostContextCallbacks[index];
73+
callback[0].call(callback[1], renderer);
74+
}
6875
}, false);
6976

7077
this.canvas.addEventListener('webglcontextrestored', function (event) {
7178
renderer.contextLost = false;
7279
renderer.init(config);
80+
for (var index = 0; index < renderer.restoredContextCallbacks.length; ++index)
81+
{
82+
var callback = renderer.restoredContextCallbacks[index];
83+
callback[0].call(callback[1], renderer);
84+
}
7385
}, false);
7486

7587
// This are initialized post context creation
@@ -150,6 +162,18 @@ var WebGLRenderer = new Class({
150162
return this;
151163
},
152164

165+
onContextRestored: function (callback, target)
166+
{
167+
this.restoredContextCallbacks.push([callback, target]);
168+
return this;
169+
},
170+
171+
onContextLost: function (callback, target)
172+
{
173+
this.lostContextCallbacks.push([callback, target]);
174+
return this;
175+
},
176+
153177
hasExtension: function (extensionName)
154178
{
155179
return this.supportedExtensions ? this.supportedExtensions.indexOf(extensionName) : false;
@@ -353,11 +377,12 @@ var WebGLRenderer = new Class({
353377
},
354378

355379
/* Renderer Resource Creation Functions */
356-
createTextureFromSource: function (source, width, height)
380+
createTextureFromSource: function (source, width, height, scaleMode)
357381
{
358382
var gl = this.gl;
359383
var filter = gl.NEAREST;
360384
var wrap = gl.CLAMP_TO_EDGE;
385+
var texture = null;
361386

362387
width = source ? source.width : width;
363388
height = source ? source.height : height;
@@ -367,28 +392,25 @@ var WebGLRenderer = new Class({
367392
wrap = gl.REPEAT;
368393
}
369394

370-
if (!source.glTexture)
395+
if (scaleMode === CONST.ScaleModes.LINEAR)
371396
{
372-
if (source.scaleMode === CONST.ScaleModes.LINEAR)
373-
{
374-
filter = gl.LINEAR;
375-
}
376-
else if (source.scaleMode === CONST.ScaleModes.NEAREST || this.game.config.pixelArt)
377-
{
378-
filter = gl.NEAREST;
379-
}
397+
filter = gl.LINEAR;
398+
}
399+
else if (scaleMode === CONST.ScaleModes.NEAREST || this.game.config.pixelArt)
400+
{
401+
filter = gl.NEAREST;
402+
}
380403

381-
if (!source && typeof width === 'number' && typeof height === 'number')
382-
{
383-
source.glTexture = this.createTexture2D(0, filter, filter, wrap, wrap, gl.RGBA, null, width, height);
384-
}
385-
else
386-
{
387-
source.glTexture = this.createTexture2D(0, filter, filter, wrap, wrap, gl.RGBA, source.image);
388-
}
404+
if (!source && typeof width === 'number' && typeof height === 'number')
405+
{
406+
texture = this.createTexture2D(0, filter, filter, wrap, wrap, gl.RGBA, null, width, height);
407+
}
408+
else
409+
{
410+
texture = this.createTexture2D(0, filter, filter, wrap, wrap, gl.RGBA, source);
389411
}
390412

391-
return source;
413+
return texture;
392414
},
393415

394416
createTexture2D: function (mipLevel, minFilter, magFilter, wrapT, wrapS, format, pixels, width, height, pma)
@@ -600,13 +622,13 @@ var WebGLRenderer = new Class({
600622
return this;
601623
},
602624

603-
canvasToTexture: function (srcCanvas, dstTexture, shouldReallocate)
625+
canvasToTexture: function (srcCanvas, dstTexture, shouldReallocate, scaleMode)
604626
{
605627
var gl = this.gl;
606628

607629
if (!dstTexture)
608630
{
609-
dstTexture = this.createTextureFromSource(srcCanvas, srcCanvas.width, srcCanvas.height);
631+
dstTexture = this.createTextureFromSource(srcCanvas, srcCanvas.width, srcCanvas.height, scaleMode);
610632
}
611633
else
612634
{

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

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -202,6 +202,130 @@ var TextureTintPipeline = new Class({
202202
}
203203
},
204204

205+
batchTexture: function (
206+
texture,
207+
dstX, dstY,
208+
scaleX, scaleY,
209+
rotation,
210+
flipX, flipY,
211+
scrollFactorX, scrollFactorY,
212+
displayOriginX, displayOriginY,
213+
frameX, frameY, frameWidth, frameHeight,
214+
tintTL, tintTR, tintBL, tintBR,
215+
camera)
216+
{
217+
this.renderer.setPipeline(this);
218+
219+
if (this.vertexCount + 6 > this.vertexCapacity)
220+
{
221+
this.flush();
222+
}
223+
224+
flipY = flipY ^ (texture.isRenderTexture ? 1 : 0);
225+
rotation = -rotation;
226+
227+
var getTint = Utils.getTintAppendFloatAlpha;
228+
var vertexViewF32 = this.vertexViewF32;
229+
var vertexViewU32 = this.vertexViewU32;
230+
var renderer = this.renderer;
231+
var cameraMatrix = camera.matrix.matrix;
232+
var cameraWidth = camera.width + 50;
233+
var cameraHeight = camera.height + 50;
234+
var cameraX = -50;
235+
var cameraY = -50;
236+
var width = frameWidth * (flipX ? -1.0 : 1.0);
237+
var height = frameHeight * (flipY ? -1.0 : 1.0);
238+
var x = -displayOriginX + frameX + ((frameWidth) * (flipX ? 1.0 : 0.0));
239+
var y = -displayOriginY + frameY + ((frameHeight) * (flipY ? 1.0 : 0.0));
240+
var xw = x + width;
241+
var yh = y + height;
242+
var translateX = dstX - camera.scrollX * scrollFactorX;
243+
var translateY = dstY - camera.scrollY * scrollFactorY;
244+
var sr = Math.sin(rotation);
245+
var cr = Math.cos(rotation);
246+
var sra = cr * scaleX;
247+
var srb = -sr * scaleX;
248+
var src = sr * scaleY;
249+
var srd = cr * scaleY;
250+
var sre = translateX;
251+
var srf = translateY;
252+
var cma = cameraMatrix[0];
253+
var cmb = cameraMatrix[1];
254+
var cmc = cameraMatrix[2];
255+
var cmd = cameraMatrix[3];
256+
var cme = cameraMatrix[4];
257+
var cmf = cameraMatrix[5];
258+
var mva = sra * cma + srb * cmc;
259+
var mvb = sra * cmb + srb * cmd;
260+
var mvc = src * cma + srd * cmc;
261+
var mvd = src * cmb + srd * cmd;
262+
var mve = sre * cma + srf * cmc + cme;
263+
var mvf = sre * cmb + srf * cmd + cmf;
264+
var tx0 = x * mva + y * mvc + mve;
265+
var ty0 = x * mvb + y * mvd + mvf;
266+
var tx1 = x * mva + yh * mvc + mve;
267+
var ty1 = x * mvb + yh * mvd + mvf;
268+
var tx2 = xw * mva + yh * mvc + mve;
269+
var ty2 = xw * mvb + yh * mvd + mvf;
270+
var tx3 = xw * mva + y * mvc + mve;
271+
var ty3 = xw * mvb + y * mvd + mvf;
272+
var vertexOffset = 0;
273+
274+
if ((tx0 < cameraX || tx0 > cameraWidth || ty0 < cameraY || ty0 > cameraHeight) &&
275+
(tx1 < cameraX || tx1 > cameraWidth || ty1 < cameraY || ty1 > cameraHeight) &&
276+
(tx2 < cameraX || tx2 > cameraWidth || ty2 < cameraY || ty2 > cameraHeight) &&
277+
(tx3 < cameraX || tx3 > cameraWidth || ty3 < cameraY || ty3 > cameraHeight))
278+
{
279+
return;
280+
}
281+
282+
var u0 = frameX / texture.width;
283+
var v0 = frameY / texture.height;
284+
var u1 = frameX / texture.width;
285+
var v1 = (frameY + frameHeight) / texture.height;
286+
var u2 = (frameX + frameWidth) / texture.width;
287+
var v2 = (frameY + frameHeight) / texture.height;
288+
var u3 = (frameX + frameWidth) / texture.width;
289+
var v3 = frameY / texture.height;
290+
291+
renderer.setTexture2D(texture, 0);
292+
293+
vertexOffset = this.vertexCount * this.vertexComponentCount;
294+
295+
vertexViewF32[vertexOffset + 0] = tx0;
296+
vertexViewF32[vertexOffset + 1] = ty0;
297+
vertexViewF32[vertexOffset + 2] = u0;
298+
vertexViewF32[vertexOffset + 3] = v0;
299+
vertexViewU32[vertexOffset + 4] = tintTL;
300+
vertexViewF32[vertexOffset + 5] = tx1;
301+
vertexViewF32[vertexOffset + 6] = ty1;
302+
vertexViewF32[vertexOffset + 7] = u1;
303+
vertexViewF32[vertexOffset + 8] = v1;
304+
vertexViewU32[vertexOffset + 9] = tintTR;
305+
vertexViewF32[vertexOffset + 10] = tx2;
306+
vertexViewF32[vertexOffset + 11] = ty2;
307+
vertexViewF32[vertexOffset + 12] = u2;
308+
vertexViewF32[vertexOffset + 13] = v2;
309+
vertexViewU32[vertexOffset + 14] = tintBL;
310+
vertexViewF32[vertexOffset + 15] = tx0;
311+
vertexViewF32[vertexOffset + 16] = ty0;
312+
vertexViewF32[vertexOffset + 17] = u0;
313+
vertexViewF32[vertexOffset + 18] = v0;
314+
vertexViewU32[vertexOffset + 19] = tintTL;
315+
vertexViewF32[vertexOffset + 20] = tx2;
316+
vertexViewF32[vertexOffset + 21] = ty2;
317+
vertexViewF32[vertexOffset + 22] = u2;
318+
vertexViewF32[vertexOffset + 23] = v2;
319+
vertexViewU32[vertexOffset + 24] = tintBL;
320+
vertexViewF32[vertexOffset + 25] = tx3;
321+
vertexViewF32[vertexOffset + 26] = ty3;
322+
vertexViewF32[vertexOffset + 27] = u3;
323+
vertexViewF32[vertexOffset + 28] = v3;
324+
vertexViewU32[vertexOffset + 29] = tintBR;
325+
326+
this.vertexCount += 6;
327+
},
328+
205329
batchSprite: function (sprite, camera)
206330
{
207331
this.renderer.setPipeline(this);

‎src/textures/TextureSource.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ var TextureSource = new Class({
3838

3939
if (game.config.renderType === CONST.WEBGL)
4040
{
41-
game.renderer.createTextureFromSource(this, this.width, this.height);
41+
this.glTexture = game.renderer.createTextureFromSource(this.image, this.width, this.height, this.scaleMode);
4242
}
4343

4444
if (game.config.pixelArt)

0 commit comments

Comments
 (0)