Skip to content

Commit 2d10cff

Browse files
bitnenferbitnenfer
committed
Bitmap text rendering on WebGL
1 parent 618e47c commit 2d10cff

2 files changed

Lines changed: 163 additions & 3 deletions

File tree

‎v3/src/gameobjects/text/BitmapText.js‎

Lines changed: 48 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,53 @@
11
var Class = require('../../utils/Class');
22
var GameObject = require('../GameObject');
33
var Components = require('../../components');
4-
var Renderer = require('./BitmapTextRenderer')
4+
var Renderer = require('./BitmapTextRenderer');
5+
6+
var ParseXMLBitmapFont = function (xml, xSpacing, ySpacing, frame)
7+
{
8+
var data = {};
9+
var info = xml.getElementsByTagName('info')[0];
10+
var common = xml.getElementsByTagName('common')[0];
11+
12+
data.font = info.getAttribute('face');
13+
data.size = parseInt(info.getAttribute('size'), 10);
14+
data.lineHeight = parseInt(common.getAttribute('lineHeight'), 10) + ySpacing;
15+
data.chars = {};
16+
17+
var letters = xml.getElementsByTagName('char');
18+
19+
var x = (frame) ? frame.x : 0;
20+
var y = (frame) ? frame.y : 0;
21+
22+
for (var i = 0; i < letters.length; i++)
23+
{
24+
var charCode = parseInt(letters[i].getAttribute('id'), 10);
25+
26+
data.chars[charCode] = {
27+
x: x + parseInt(letters[i].getAttribute('x'), 10),
28+
y: y + parseInt(letters[i].getAttribute('y'), 10),
29+
width: parseInt(letters[i].getAttribute('width'), 10),
30+
height: parseInt(letters[i].getAttribute('height'), 10),
31+
xOffset: parseInt(letters[i].getAttribute('xoffset'), 10),
32+
yOffset: parseInt(letters[i].getAttribute('yoffset'), 10),
33+
xAdvance: parseInt(letters[i].getAttribute('xadvance'), 10) + xSpacing,
34+
kerning: {}
35+
};
36+
}
37+
38+
var kernings = xml.getElementsByTagName('kerning');
39+
40+
for (i = 0; i < kernings.length; i++)
41+
{
42+
var first = parseInt(kernings[i].getAttribute('first'), 10);
43+
var second = parseInt(kernings[i].getAttribute('second'), 10);
44+
var amount = parseInt(kernings[i].getAttribute('amount'), 10);
45+
46+
data.chars[second].kerning[first] = amount;
47+
}
48+
49+
return data;
50+
}
551

652
var BitmapText = new Class({
753

@@ -11,7 +57,6 @@ var BitmapText = new Class({
1157
Components.Size,
1258
Components.Alpha,
1359
Components.BlendMode,
14-
Components.ScaleMode,
1560
Components.Visible,
1661
Renderer
1762
],
@@ -23,7 +68,7 @@ var BitmapText = new Class({
2368
GameObject.call(this, state);
2469

2570
this.text = typeof text === 'string' ? text : '';
26-
this.fontData = this.state.sys.cache.xml.get(key);
71+
this.fontData = ParseXMLBitmapFont(this.state.sys.cache.xml.get(key), 0, 0);
2772

2873
this.setTexture(key, null);
2974
this.setPosition(x, y);

‎v3/src/gameobjects/text/BitmapTextWebGLRenderer.js‎

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,121 @@ var BitmapTextWebGLRenderer = function (renderer, src, interpolationPercentage,
1515
var f = cameraMatrix[5];
1616
var cameraScrollX = camera.scrollX;
1717
var cameraScrollY = camera.scrollY;
18+
var text = src.text;
19+
var textLength = text.length;
20+
var chars = src.fontData.chars;
21+
var lineHeight = src.fontData.lineHeight;
22+
var blitterBatch = renderer.blitterBatch;
23+
var alpha = src.alpha;
24+
var vertexDataBuffer = blitterBatch.vertexDataBuffer;
25+
var vertexBuffer = vertexDataBuffer.floatView;
26+
var vertexOffset = 0;
27+
var srcX = src.x;
28+
var srcY = src.y;
29+
var texture = src.texture.source[0].glTexture
30+
var textureWidth = src.texture.source[0].width;
31+
var textureHeight = src.texture.source[0].height
32+
var xAdvance = 0;
33+
var yAdvance = 0;
34+
var indexCount = 0;
35+
var charCode = 0;
36+
var glyph = null;
37+
var glyphX = 0;
38+
var glyphY = 0;
39+
var glyphW = 0;
40+
var glyphH = 0;
41+
var x = 0;
42+
var y = 0;
43+
var xw = 0;
44+
var yh = 0;
45+
var tx = 0;
46+
var ty = 0;
47+
var txw = 0;
48+
var tyh = 0;
49+
var umin = 0;
50+
var umax = 0;
51+
var vmin = 0;
52+
var vmax = 0;
53+
var lastGlyph = null;
54+
var lastCharCode = 0;
55+
56+
for (var index = 0; index < textLength; ++index)
57+
{
58+
charCode = text.charCodeAt(index);
59+
if (charCode === 10)
60+
{
61+
xAdvance = 0;
62+
indexCount = 0;
63+
yAdvance += lineHeight;
64+
lastGlyph = null;
65+
continue;
66+
}
67+
68+
glyph = chars[charCode];
69+
if (!glyph)
70+
{
71+
continue;
72+
}
73+
74+
glyphX = glyph.x;
75+
glyphY = glyph.y;
76+
glyphW = glyph.width;
77+
glyphH = glyph.height;
78+
x = (srcX + indexCount + glyph.xOffset + xAdvance) - cameraScrollX;
79+
y = (srcY + glyph.yOffset + yAdvance) - cameraScrollY;
80+
81+
if (lastGlyph !== null)
82+
{
83+
var kerningOffset = glyph.kerning[lastCharCode];
84+
x += (kerningOffset !== undefined) ? kerningOffset : 0;
85+
}
86+
87+
xw = x + glyphW;
88+
yh = y + glyphH;
89+
tx = x * a + y * c + e;
90+
ty = x * b + y * d + f;
91+
txw = xw * a + yh * c + e;
92+
tyh = xw * b + yh * d + f;
93+
umin = glyphX / textureWidth;
94+
umax = (glyphX + glyphW) / textureWidth;
95+
vmin = glyphY / textureHeight;
96+
vmax = (glyphY + glyphH) / textureHeight;
97+
98+
if (blitterBatch.elementCount >= blitterBatch.maxParticles)
99+
{
100+
blitterBatch.flush();
101+
}
102+
103+
renderer.setBatch(blitterBatch, texture);
104+
vertexOffset = vertexDataBuffer.allocate(20);
105+
blitterBatch.elementCount += 6;
106+
107+
vertexBuffer[vertexOffset++] = tx;
108+
vertexBuffer[vertexOffset++] = ty;
109+
vertexBuffer[vertexOffset++] = umin;
110+
vertexBuffer[vertexOffset++] = vmin;
111+
vertexBuffer[vertexOffset++] = alpha;
112+
vertexBuffer[vertexOffset++] = tx;
113+
vertexBuffer[vertexOffset++] = tyh;
114+
vertexBuffer[vertexOffset++] = umin;
115+
vertexBuffer[vertexOffset++] = vmax;
116+
vertexBuffer[vertexOffset++] = alpha;
117+
vertexBuffer[vertexOffset++] = txw;
118+
vertexBuffer[vertexOffset++] = tyh;
119+
vertexBuffer[vertexOffset++] = umax;
120+
vertexBuffer[vertexOffset++] = vmax;
121+
vertexBuffer[vertexOffset++] = alpha;
122+
vertexBuffer[vertexOffset++] = txw;
123+
vertexBuffer[vertexOffset++] = ty;
124+
vertexBuffer[vertexOffset++] = umax;
125+
vertexBuffer[vertexOffset++] = vmin;
126+
vertexBuffer[vertexOffset++] = alpha;
127+
128+
xAdvance += glyph.xAdvance;
129+
indexCount += 1;
130+
lastGlyph = glyph;
131+
lastCharCode = charCode;
132+
}
18133
};
19134

20135
module.exports = BitmapTextWebGLRenderer;

0 commit comments

Comments
 (0)