Skip to content

Commit e351654

Browse files
raytranukraytranuk
committed
tidy up
1 parent 7700c4f commit e351654

File tree

5 files changed

+34
-63
lines changed

5 files changed

+34
-63
lines changed

‎examples/user-interface/text-outline.html

Lines changed: 7 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -59,25 +59,26 @@
5959
color: new pc.Color(0, 0, 0),
6060
fontSize: 128,
6161
outlineColor: new pc.Color(1, 1, 1),
62-
outlineThickness: 1.0,
62+
outlineThickness: 0.75,
6363
pivot: [ 0.5, 0.5 ],
64-
text: "Outlines v1",
64+
text: "Outlines",
6565
type: pc.ELEMENTTYPE_TEXT,
6666
width: 640
6767
});
6868
screen.addChild(text);
6969
text.setLocalPosition(0, 150, 0);
7070

71+
// Create a text element a thicker font outline enabled
7172
var text2 = new pc.Entity();
7273
text2.addComponent("element", {
7374
anchor: [ 0.5, 0.5, 0.5, 0.5 ],
7475
autoWidth: false,
7576
color: new pc.Color(0, 0, 0),
7677
fontSize: 128,
7778
outlineColor: new pc.Color(1, 1, 1),
78-
outlineThickness: 2.0,
79+
outlineThickness: 3.0,
7980
pivot: [ 0.5, 0.5 ],
80-
text: "Outlines v2",
81+
text: "Thicker Outlines",
8182
type: pc.ELEMENTTYPE_TEXT,
8283
width: 640
8384
});
@@ -91,8 +92,7 @@
9192
text.element.fontAsset = fontAsset;
9293
});
9394

94-
//var fontAsset2 = new pc.Asset('OpenSans-Bold.json', "font", {url: "../assets/fonts/OpenSans-Bold.json"});
95-
var fontAsset2 = new pc.Asset('Arial.json', "font", {url: "../assets/fonts/Arial4/Arial.json"});
95+
var fontAsset2 = new pc.Asset('Arial.json', "font", {url: "../assets/fonts/Arial-v4/Arial.json"});
9696
fontAsset2.on('load', function () {
9797
// Apply the font to the text element
9898
text2.element.fontAsset = fontAsset2;
@@ -102,20 +102,7 @@
102102
app.assets.add(fontAsset2);
103103
app.assets.load(fontAsset);
104104
app.assets.load(fontAsset2);
105-
106-
// Set an update function on the app's update event
107-
var thickness = 0;
108-
var pingpong = 1;
109-
app.on("update", function (dt) {
110-
thickness += dt*pingpong;
111-
if (thickness > 5 || thickness < 0) {
112-
pingpong = -pingpong;
113-
thickness = pc.math.clamp(thickness, 0, 5);
114-
}
115-
116-
//text.element.outlineThickness=thickness;
117-
text2.element.outlineThickness=thickness;
118-
});
105+
119106
</script>
120107
</body>
121108
</html>

‎src/bundles/bundle-registry.js

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -104,8 +104,7 @@ Object.assign(pc, function () {
104104
var numFiles = asset.data.info.maps.length;
105105
for (var i = 1; i < numFiles; i++) {
106106
urls.push(url.replace('.png', i + '.png'));
107-
if (asset.data.version >= 4)
108-
{
107+
if (asset.data.version >= 4) {
109108
urls.push(url.replace('.png', i + 'A.png'));
110109
}
111110
}

‎src/framework/components/element/text-element.js

Lines changed: 15 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,7 @@ Object.assign(pc, function () {
103103

104104
this._outlineColor = new pc.Color(0, 0, 0, 1);
105105
this._outlineColorUniform = new Float32Array(4);
106-
this._outlineThicknessScale = 0.2; //0.1; // was 0.2 now 0.1 - coefficient to map editor range of 0 - 1 to shader value
106+
this._outlineThicknessScale = 0.2; // 0.1; // was 0.2 now 0.1 - coefficient to map editor range of 0 - 1 to shader value
107107
this._outlineThickness = 0.0;
108108

109109
this._multiPassEnabled = false; // when true multi pass text rendering is enabled for correct thicker outline rendering
@@ -541,12 +541,9 @@ Object.assign(pc, function () {
541541
mi.isVisibleFunc = visibleFn;
542542
}
543543

544-
if (this._multiPassEnabled)
545-
{
544+
if (this._multiPassEnabled) {
546545
this._setTextureParams(mi, this._font.textures[0][ti], this._font.textures[1][ti]);
547-
}
548-
else
549-
{
546+
} else {
550547
this._setTextureParams(mi, this._font.textures[0][ti], null);
551548
}
552549

@@ -1178,12 +1175,9 @@ Object.assign(pc, function () {
11781175
mi.deleteParameter("texture_emissiveMap");
11791176
mi.deleteParameter("texture_opacityMap");
11801177
mi.setParameter("texture_msdfMap", texture);
1181-
if (textureA)
1182-
{
1178+
if (textureA) {
11831179
mi.setParameter("texture_msdfMapA", textureA);
1184-
}
1185-
else
1186-
{
1180+
} else {
11871181
mi.setParameter("texture_msdfMapA", texture);
11881182
}
11891183
} else if (this._font.type === pc.FONT_BITMAP) {
@@ -1616,7 +1610,7 @@ Object.assign(pc, function () {
16161610
if (this._font) {
16171611
previousFontType = this._font.type;
16181612
previousFontVersion = this._font.data.version;
1619-
1613+
16201614
// remove render event listener
16211615
if (this._font.off) this._font.off('render', this._onFontRender, this);
16221616
}
@@ -1664,14 +1658,14 @@ Object.assign(pc, function () {
16641658
this._updateText();
16651659

16661660
// if font version has changed we will need to change the _outlineThicknessScale and update the material parameter
1667-
/*if (value.data.version !== previousFontVersion) {
1668-
this._outlineThicknessScale = (this._font.data.version == 3) ? 0.2 : 0.1;
1669-
1670-
for (var i = 0; i < this._model.meshInstances.length; i++) {
1671-
var mi = this._model.meshInstances[i];
1672-
mi.setParameter("outline_thickness", this._outlineThicknessScale * Math.min(this._outlineThickness,(this._font.data.version==3) ? 1.0 : 5.0));
1673-
}
1674-
}*/
1661+
// if (value.data.version !== previousFontVersion) {
1662+
// this._outlineThicknessScale = (this._font.data.version == 3) ? 0.2 : 0.1;
1663+
//
1664+
// for (var i = 0; i < this._model.meshInstances.length; i++) {
1665+
// var mi = this._model.meshInstances[i];
1666+
// mi.setParameter("outline_thickness", this._outlineThicknessScale * Math.min(this._outlineThickness,(this._font.data.version==3) ? 1.0 : 5.0));
1667+
// }
1668+
// }
16751669
}
16761670
});
16771671

@@ -1859,7 +1853,7 @@ Object.assign(pc, function () {
18591853

18601854
for (var i = 0, len = this._model.meshInstances.length; i < len; i++) {
18611855
var mi = this._model.meshInstances[i];
1862-
mi.setParameter("outline_thickness", this._outlineThicknessScale * Math.min(this._outlineThickness,(this._font.data.version==3) ? 1.0 : 5.0));
1856+
mi.setParameter("outline_thickness", this._outlineThicknessScale * Math.min(this._outlineThickness, (this._font.data.version == 3) ? 1.0 : 5.0));
18631857
}
18641858
}
18651859
}

‎src/graphics/program-lib/chunks/msdf.frag

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -48,21 +48,13 @@ vec4 applyMsdf(vec4 color) {
4848
#ifdef MSDFA
4949
float num = float(sigDist<0.5)*clamp((outline_thickness-0.2)*5.0,0.0,1.0);
5050

51-
t_outline_thickness=mix(outline_thickness, outline_thickness*0.25+0.02, num);
52-
53-
//float tsamplea = min(texture2D(texture_msdfMapA, vUv0).r, sigDist);
54-
//float ssamplea = min(texture2D(texture_msdfMapA, uvShdw).r, sigDistShdw);
55-
// sigDist=mix(sigDist,tsamplea, float(outline_thickness>0.2)*clamp((0.3-tsamplea)*10.0,0.0,1.0));
56-
// sigDistShdw=mix(sigDistShdw,ssamplea, float(outline_thickness>0.2)*clamp((0.3-ssamplea)*10.0,0.0,1.0));
57-
58-
//float num = float(sigDist<0.5)*clamp((t_outline_thickness-0.2)*20.0,0.0,1.0);
59-
6051
float tsamplea = texture2D(texture_msdfMapA, vUv0).r;
6152
float ssamplea = texture2D(texture_msdfMapA, uvShdw).r;
6253

6354
sigDist=mix(sigDist, tsamplea, num);
6455
sigDistShdw=mix(sigDistShdw, ssamplea, num);
6556

57+
t_outline_thickness=mix(outline_thickness, outline_thickness*0.25+0.02, num);
6658
t_font_pxrange=mix(font_pxrange, font_pxrange*4.0, num);
6759
#endif
6860

‎src/resources/font.js

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ Object.assign(pc, function () {
33

44
function upgradeDataSchema(data) {
55
// convert v1 and v2 to v3 font data schema
6-
if (data.version < 3 || data.version == 4) { //seems upgraded schema is never saved out?
6+
if (data.version < 3 || data.version == 4) { // seems upgraded schema is never saved out?
77
if (data.version < 2) {
88
data.info.maps = data.info.maps || [{
99
width: data.info.width,
@@ -20,7 +20,7 @@ Object.assign(pc, function () {
2020
newChars[newKey] = existing;
2121
return newChars;
2222
}, {});
23-
data.version = Math.max(data.version+1, 3);
23+
data.version = Math.max(data.version + 1, 3);
2424
}
2525
return data;
2626
}
@@ -60,8 +60,8 @@ Object.assign(pc, function () {
6060

6161
callback(null, {
6262
data: data,
63-
textures: textures//,
64-
//textures2: textures2
63+
textures: textures// ,
64+
// textures2: textures2
6565
});
6666
});
6767
} else {
@@ -81,7 +81,7 @@ Object.assign(pc, function () {
8181
_loadTextures: function (url, data, callback) {
8282
var numTextures = data.info.maps.length;
8383
var numLoaded = 0;
84-
84+
8585
var error = null;
8686

8787
var textures = new Array(numTextures);
@@ -90,22 +90,21 @@ Object.assign(pc, function () {
9090
var textures2 = null;
9191

9292
var loadTexture = function (index) {
93-
if (data.version >= 4)
94-
{
93+
if (data.version >= 4) {
9594
textures2 = new Array(numTextures);
96-
95+
9796
var onLoaded2 = function (err, texture) {
9897
if (error) return;
99-
98+
10099
if (err) {
101100
error = err;
102101
return callback(err);
103102
}
104-
103+
105104
texture.upload();
106105
textures2[index] = texture;
107106
};
108-
107+
109108
if (index === 0) {
110109
loader.load(url.replace('.png', 'A.png'), "texture", onLoaded2);
111110
} else {

0 commit comments

Comments
 (0)