@eva/plugin-renderer-text 2.0.1-beta.33 → 2.0.1-beta.34
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/EVA.plugin.renderer.text.js +49 -4
- package/dist/EVA.plugin.renderer.text.min.js +1 -1
- package/dist/plugin-renderer-text.cjs.js +70 -3
- package/dist/plugin-renderer-text.cjs.prod.js +2 -2
- package/dist/plugin-renderer-text.d.ts +52 -2
- package/dist/plugin-renderer-text.esm.js +71 -5
- package/package.json +5 -5
|
@@ -2,7 +2,7 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
|
|
|
2
2
|
globalThis.EVA = globalThis.EVA || {};
|
|
3
3
|
globalThis.EVA.plugin = globalThis.EVA.plugin || {};
|
|
4
4
|
globalThis.EVA.plugin.renderer = globalThis.EVA.plugin.renderer || {};
|
|
5
|
-
var _EVA_IIFE_text = function (exports,
|
|
5
|
+
var _EVA_IIFE_text = function (exports, eva_js, pixi_js, pluginRenderer, rendererAdapter) {
|
|
6
6
|
'use strict';
|
|
7
7
|
function __decorate(decorators, target, key, desc) {
|
|
8
8
|
var c = arguments.length,
|
|
@@ -55,6 +55,25 @@ var _EVA_IIFE_text = function (exports, pixi_js, eva_js, pluginRenderer, rendere
|
|
|
55
55
|
prop.type = type;
|
|
56
56
|
};
|
|
57
57
|
}
|
|
58
|
+
class BitmapText extends eva_js.Component {
|
|
59
|
+
constructor() {
|
|
60
|
+
super(...arguments);
|
|
61
|
+
this.text = '';
|
|
62
|
+
this.style = {};
|
|
63
|
+
}
|
|
64
|
+
init(obj) {
|
|
65
|
+
this.style = _extends({
|
|
66
|
+
fontSize: 24,
|
|
67
|
+
fill: '#000000',
|
|
68
|
+
fontFamily: 'Arial'
|
|
69
|
+
}, obj === null || obj === void 0 ? void 0 : obj.style);
|
|
70
|
+
if (obj) {
|
|
71
|
+
this.text = obj.text;
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
BitmapText.componentName = 'BitmapText';
|
|
76
|
+
__decorate([type('string')], BitmapText.prototype, "text", void 0);
|
|
58
77
|
class Text$2 extends eva_js.Component {
|
|
59
78
|
constructor() {
|
|
60
79
|
super(...arguments);
|
|
@@ -119,12 +138,15 @@ var _EVA_IIFE_text = function (exports, pixi_js, eva_js, pluginRenderer, rendere
|
|
|
119
138
|
return __awaiter(this, void 0, void 0, function* () {
|
|
120
139
|
const isText = changed.componentName === 'Text';
|
|
121
140
|
const isHTMLText = changed.componentName === 'HTMLText';
|
|
122
|
-
|
|
141
|
+
const isBitmapText = changed.componentName === 'BitmapText';
|
|
142
|
+
if (!isText && !isHTMLText && !isBitmapText) return;
|
|
123
143
|
if (changed.type === eva_js.OBSERVER_TYPE.ADD) {
|
|
124
144
|
if (isText) {
|
|
125
145
|
yield this.addTextComponent(changed);
|
|
126
|
-
} else {
|
|
146
|
+
} else if (isHTMLText) {
|
|
127
147
|
yield this.addHTMLTextComponent(changed);
|
|
148
|
+
} else {
|
|
149
|
+
yield this.addBitmapTextComponent(changed);
|
|
128
150
|
}
|
|
129
151
|
this.setSize(changed);
|
|
130
152
|
} else if (changed.type === eva_js.OBSERVER_TYPE.REMOVE) {
|
|
@@ -187,6 +209,24 @@ var _EVA_IIFE_text = function (exports, pixi_js, eva_js, pluginRenderer, rendere
|
|
|
187
209
|
}
|
|
188
210
|
});
|
|
189
211
|
}
|
|
212
|
+
addBitmapTextComponent(changed) {
|
|
213
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
214
|
+
const component = changed.component;
|
|
215
|
+
const styleWithoutFont = _extends({}, component.style);
|
|
216
|
+
const fontFamily = styleWithoutFont.fontFamily;
|
|
217
|
+
delete styleWithoutFont.fontFamily;
|
|
218
|
+
const initialText = fontFamily ? '' : component.text;
|
|
219
|
+
const bitmapText = new rendererAdapter.BitmapText(initialText, styleWithoutFont);
|
|
220
|
+
this.containerManager.getContainer(changed.gameObject.id).addChildAt(bitmapText, 0);
|
|
221
|
+
this.texts[changed.gameObject.id] = {
|
|
222
|
+
text: bitmapText,
|
|
223
|
+
component
|
|
224
|
+
};
|
|
225
|
+
if (fontFamily) {
|
|
226
|
+
yield this.waitForFontResource(bitmapText, changed, fontFamily);
|
|
227
|
+
}
|
|
228
|
+
});
|
|
229
|
+
}
|
|
190
230
|
waitForFontResource(text, changed, fontFamily) {
|
|
191
231
|
return __awaiter(this, void 0, void 0, function* () {
|
|
192
232
|
if (!fontFamily) {
|
|
@@ -257,9 +297,14 @@ var _EVA_IIFE_text = function (exports, pixi_js, eva_js, pluginRenderer, rendere
|
|
|
257
297
|
}, {
|
|
258
298
|
prop: ['textureStyle'],
|
|
259
299
|
deep: true
|
|
300
|
+
}],
|
|
301
|
+
BitmapText: ['text', {
|
|
302
|
+
prop: ['style'],
|
|
303
|
+
deep: true
|
|
260
304
|
}]
|
|
261
305
|
})], Text);
|
|
262
306
|
var Text$1 = Text;
|
|
307
|
+
exports.BitmapText = BitmapText;
|
|
263
308
|
exports.HTMLText = HTMLText;
|
|
264
309
|
exports.Text = Text$2;
|
|
265
310
|
exports.TextSystem = Text$1;
|
|
@@ -267,5 +312,5 @@ var _EVA_IIFE_text = function (exports, pixi_js, eva_js, pluginRenderer, rendere
|
|
|
267
312
|
value: true
|
|
268
313
|
});
|
|
269
314
|
return exports;
|
|
270
|
-
}({},
|
|
315
|
+
}({}, EVA, PIXI, EVA.plugin.renderer, EVA.rendererAdapter);
|
|
271
316
|
globalThis.EVA.plugin.renderer.text = globalThis.EVA.plugin.renderer.text || _EVA_IIFE_text;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
function _extends(){return _extends=Object.assign?Object.assign.bind():function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var i in n)({}).hasOwnProperty.call(n,i)&&(t[i]=n[i])}return t},_extends.apply(null,arguments)}globalThis.EVA=globalThis.EVA||{},globalThis.EVA.plugin=globalThis.EVA.plugin||{},globalThis.EVA.plugin.renderer=globalThis.EVA.plugin.renderer||{};var _EVA_IIFE_text=function(t,e,n,i,o){"use strict";function s(t,e,n,i){var o,s=arguments.length,r=s<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(t,e,n,i);else for(var
|
|
1
|
+
function _extends(){return _extends=Object.assign?Object.assign.bind():function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var i in n)({}).hasOwnProperty.call(n,i)&&(t[i]=n[i])}return t},_extends.apply(null,arguments)}globalThis.EVA=globalThis.EVA||{},globalThis.EVA.plugin=globalThis.EVA.plugin||{},globalThis.EVA.plugin.renderer=globalThis.EVA.plugin.renderer||{};var _EVA_IIFE_text=function(t,e,n,i,o){"use strict";function s(t,e,n,i){var o,s=arguments.length,r=s<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(t,e,n,i);else for(var l=t.length-1;l>=0;l--)(o=t[l])&&(r=(s<3?o(r):s>3?o(e,n,r):o(e,n))||r);return s>3&&r&&Object.defineProperty(e,n,r),r}function r(t,e,n,i){return new(n||(n=Promise))((function(o,s){function r(t){try{c(i.next(t))}catch(t){s(t)}}function l(t){try{c(i.throw(t))}catch(t){s(t)}}function c(t){var e;t.done?o(t.value):(e=t.value,e instanceof n?e:new n((function(t){t(e)}))).then(r,l)}c((i=i.apply(t,e||[])).next())}))}function l(t){return function(e,n){var i=function(t,e){return t.constructor.IDEProps||(t.constructor.IDEProps={}),t.constructor.IDEProps[e]||(t.constructor.IDEProps[e]={}),t.constructor.IDEProps[e]}(e,n);i.key=n,i.type=t}}class c extends e.Component{constructor(){super(...arguments),this.text="",this.style={}}init(t){this.style=_extends({fontSize:24,fill:"#000000",fontFamily:"Arial"},null==t?void 0:t.style),t&&(this.text=t.text)}}c.componentName="BitmapText",s([l("string")],c.prototype,"text",void 0);class a extends e.Component{constructor(){super(...arguments),this.text="",this.style={}}init(t){const e=new n.TextStyle({fontSize:20}),i={};for(const t in e)0===t.indexOf("_")&&(i[t.substring(1)]=e[t]);delete i.styleKey,this.style=i,t&&(this.text=t.text,_extends(this.style,t.style))}}a.componentName="Text",s([l("string")],a.prototype,"text",void 0);class d extends e.Component{constructor(){super(...arguments),this.text="",this.style={},this.textureStyle={}}init(t){this.style=_extends({fontSize:24,fill:"#000000",fontFamily:"Arial"},null==t?void 0:t.style),this.textureStyle=_extends({scaleMode:"linear",resolution:window.devicePixelRatio||1},null==t?void 0:t.textureStyle),t&&(this.text=t.text)}}d.componentName="HTMLText",s([l("string")],d.prototype,"text",void 0);let x=class extends i.Renderer{constructor(){super(...arguments),this.name="Text",this.texts={}}init(){this.renderSystem=this.game.getSystem(i.RendererSystem),this.renderSystem.rendererManager.register(this)}componentChanged(t){return r(this,void 0,void 0,(function*(){const n="Text"===t.componentName,i="HTMLText"===t.componentName,o="BitmapText"===t.componentName;if(n||i||o)if(t.type===e.OBSERVER_TYPE.ADD)n?yield this.addTextComponent(t):i?yield this.addHTMLTextComponent(t):yield this.addBitmapTextComponent(t),this.setSize(t);else if(t.type===e.OBSERVER_TYPE.REMOVE)this.containerManager.getContainer(t.gameObject.id).removeChild(this.texts[t.gameObject.id].text),this.texts[t.gameObject.id].text.destroy({children:!0}),delete this.texts[t.gameObject.id];else{this.change(t);const e=t.component;if("style"===t.prop.prop[0]&&e.style&&e.style.fontFamily){const{text:n}=this.texts[t.gameObject.id];yield this.waitForFontResource(n,t,e.style.fontFamily)}this.setSize(t)}}))}addTextComponent(t){return r(this,void 0,void 0,(function*(){const e=t.component,n=_extends({},e.style),i=n.fontFamily;delete n.fontFamily;const s=i?"":e.text,r=new o.Text(s,n);this.containerManager.getContainer(t.gameObject.id).addChildAt(r,0),this.texts[t.gameObject.id]={text:r,component:e},i&&(yield this.waitForFontResource(r,t,i))}))}addHTMLTextComponent(t){return r(this,void 0,void 0,(function*(){const e=t.component,n=_extends({},e.style),i=n.fontFamily;delete n.fontFamily;const s=i?"":e.text,r=new o.HTMLText(_extends({text:s,style:n},e.textureStyle&&{textureStyle:e.textureStyle}));this.containerManager.getContainer(t.gameObject.id).addChildAt(r,0),this.texts[t.gameObject.id]={text:r,component:e},i&&(yield this.waitForFontResource(r,t,i))}))}addBitmapTextComponent(t){return r(this,void 0,void 0,(function*(){const e=t.component,n=_extends({},e.style),i=n.fontFamily;delete n.fontFamily;const s=i?"":e.text,r=new o.BitmapText(s,n);this.containerManager.getContainer(t.gameObject.id).addChildAt(r,0),this.texts[t.gameObject.id]={text:r,component:e},i&&(yield this.waitForFontResource(r,t,i))}))}waitForFontResource(t,n,i){return r(this,void 0,void 0,(function*(){if(i)try{const o=Array.isArray(i)?i[0]:i,s=this.increaseAsyncId(n.gameObject.id);if(yield e.resource.getResource(o),!this.validateAsyncId(n.gameObject.id,s))return;const r=this.texts[n.gameObject.id].component;t.style.fontFamily=i,t.text=r.text}catch(t){console.warn(`字体资源 ${i} 加载失败:`,t)}}))}change(t){const{text:e,component:n}=this.texts[t.gameObject.id],i="HTMLText"===t.componentName;if("text"===t.prop.prop[0])e.text=n.text;else if("style"===t.prop.prop[0])_extends(e.style,n.style);else if("textureStyle"===t.prop.prop[0]&&i){const i=n,s=this.containerManager.getContainer(t.gameObject.id),r=s.getChildIndex(e);s.removeChild(e),e.destroy({children:!0});const l=new o.HTMLText({text:i.text,style:i.style,textureStyle:i.textureStyle});s.addChildAt(l,r),this.texts[t.gameObject.id].text=l}}setSize(t){const{transform:e}=t.gameObject;if(!e)return;const{text:n}=this.texts[t.gameObject.id],i=n.getSize();e.size.width=i.width,e.size.height=i.height}};x.systemName="Text",x=s([e.decorators.componentObserver({Text:["text",{prop:["style"],deep:!0}],HTMLText:["text",{prop:["style"],deep:!0},{prop:["textureStyle"],deep:!0}],BitmapText:["text",{prop:["style"],deep:!0}]})],x);var p=x;return t.BitmapText=c,t.HTMLText=d,t.Text=a,t.TextSystem=p,Object.defineProperty(t,"__esModule",{value:!0}),t}({},EVA,PIXI,EVA.plugin.renderer,EVA.rendererAdapter);globalThis.EVA.plugin.renderer.text=globalThis.EVA.plugin.renderer.text||_EVA_IIFE_text;
|
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var pixi_js = require('pixi.js');
|
|
6
5
|
var eva_js = require('@eva/eva.js');
|
|
7
6
|
var inspectorDecorator = require('@eva/inspector-decorator');
|
|
7
|
+
var pixi_js = require('pixi.js');
|
|
8
8
|
var pluginRenderer = require('@eva/plugin-renderer');
|
|
9
9
|
var rendererAdapter = require('@eva/renderer-adapter');
|
|
10
10
|
|
|
@@ -39,6 +39,47 @@ function __awaiter(thisArg, _arguments, P, generator) {
|
|
|
39
39
|
});
|
|
40
40
|
}
|
|
41
41
|
|
|
42
|
+
/**
|
|
43
|
+
* 位图文本组件
|
|
44
|
+
*
|
|
45
|
+
* BitmapText 组件使用位图字体渲染文本,性能优于 Canvas 文本渲染。
|
|
46
|
+
* 适用于频繁更新的文本场景,如计分板、倒计时等。
|
|
47
|
+
*
|
|
48
|
+
* 支持两种字体模式:
|
|
49
|
+
* - 动态生成:指定 TextStyle,PixiJS 自动生成 bitmap font
|
|
50
|
+
* - 预加载字体:通过 BitmapFont.install() 预安装或从 .fnt 文件加载
|
|
51
|
+
*
|
|
52
|
+
* @example
|
|
53
|
+
* ```typescript
|
|
54
|
+
* const score = new GameObject('score');
|
|
55
|
+
* score.addComponent(new BitmapText({
|
|
56
|
+
* text: 'Score: 0',
|
|
57
|
+
* style: {
|
|
58
|
+
* fontSize: 32,
|
|
59
|
+
* fill: '#ffffff',
|
|
60
|
+
* fontFamily: 'Arial'
|
|
61
|
+
* }
|
|
62
|
+
* }));
|
|
63
|
+
* ```
|
|
64
|
+
*/
|
|
65
|
+
class BitmapText extends eva_js.Component {
|
|
66
|
+
constructor() {
|
|
67
|
+
super(...arguments);
|
|
68
|
+
this.text = '';
|
|
69
|
+
this.style = {};
|
|
70
|
+
}
|
|
71
|
+
init(obj) {
|
|
72
|
+
this.style = Object.assign({ fontSize: 24, fill: '#000000', fontFamily: 'Arial' }, obj === null || obj === void 0 ? void 0 : obj.style);
|
|
73
|
+
if (obj) {
|
|
74
|
+
this.text = obj.text;
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
BitmapText.componentName = 'BitmapText';
|
|
79
|
+
__decorate([
|
|
80
|
+
inspectorDecorator.type('string')
|
|
81
|
+
], BitmapText.prototype, "text", void 0);
|
|
82
|
+
|
|
42
83
|
/**
|
|
43
84
|
* 文本组件(基于 PixiJS Text)
|
|
44
85
|
*
|
|
@@ -226,15 +267,19 @@ let Text = class Text extends pluginRenderer.Renderer {
|
|
|
226
267
|
return __awaiter(this, void 0, void 0, function* () {
|
|
227
268
|
const isText = changed.componentName === 'Text';
|
|
228
269
|
const isHTMLText = changed.componentName === 'HTMLText';
|
|
229
|
-
|
|
270
|
+
const isBitmapText = changed.componentName === 'BitmapText';
|
|
271
|
+
if (!isText && !isHTMLText && !isBitmapText)
|
|
230
272
|
return;
|
|
231
273
|
if (changed.type === eva_js.OBSERVER_TYPE.ADD) {
|
|
232
274
|
if (isText) {
|
|
233
275
|
yield this.addTextComponent(changed);
|
|
234
276
|
}
|
|
235
|
-
else {
|
|
277
|
+
else if (isHTMLText) {
|
|
236
278
|
yield this.addHTMLTextComponent(changed);
|
|
237
279
|
}
|
|
280
|
+
else {
|
|
281
|
+
yield this.addBitmapTextComponent(changed);
|
|
282
|
+
}
|
|
238
283
|
this.setSize(changed);
|
|
239
284
|
}
|
|
240
285
|
else if (changed.type === eva_js.OBSERVER_TYPE.REMOVE) {
|
|
@@ -294,6 +339,26 @@ let Text = class Text extends pluginRenderer.Renderer {
|
|
|
294
339
|
}
|
|
295
340
|
});
|
|
296
341
|
}
|
|
342
|
+
addBitmapTextComponent(changed) {
|
|
343
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
344
|
+
const component = changed.component;
|
|
345
|
+
// 创建样式副本,先不设置 fontFamily
|
|
346
|
+
const styleWithoutFont = Object.assign({}, component.style);
|
|
347
|
+
const fontFamily = styleWithoutFont.fontFamily;
|
|
348
|
+
delete styleWithoutFont.fontFamily;
|
|
349
|
+
const initialText = fontFamily ? '' : component.text;
|
|
350
|
+
const bitmapText = new rendererAdapter.BitmapText(initialText, styleWithoutFont);
|
|
351
|
+
this.containerManager.getContainer(changed.gameObject.id).addChildAt(bitmapText, 0);
|
|
352
|
+
this.texts[changed.gameObject.id] = {
|
|
353
|
+
text: bitmapText,
|
|
354
|
+
component,
|
|
355
|
+
};
|
|
356
|
+
// 如果指定了字体资源,等待资源加载完成后设置 fontFamily
|
|
357
|
+
if (fontFamily) {
|
|
358
|
+
yield this.waitForFontResource(bitmapText, changed, fontFamily);
|
|
359
|
+
}
|
|
360
|
+
});
|
|
361
|
+
}
|
|
297
362
|
/**
|
|
298
363
|
* 等待字体资源加载完成并更新文本
|
|
299
364
|
*/
|
|
@@ -361,10 +426,12 @@ Text = __decorate([
|
|
|
361
426
|
eva_js.decorators.componentObserver({
|
|
362
427
|
Text: ['text', { prop: ['style'], deep: true }],
|
|
363
428
|
HTMLText: ['text', { prop: ['style'], deep: true }, { prop: ['textureStyle'], deep: true }],
|
|
429
|
+
BitmapText: ['text', { prop: ['style'], deep: true }],
|
|
364
430
|
})
|
|
365
431
|
], Text);
|
|
366
432
|
var Text$1 = Text;
|
|
367
433
|
|
|
434
|
+
exports.BitmapText = BitmapText;
|
|
368
435
|
exports.HTMLText = HTMLText;
|
|
369
436
|
exports.Text = Text$2;
|
|
370
437
|
exports.TextSystem = Text$1;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("@eva/eva.js"),e=require("@eva/inspector-decorator"),i=require("pixi.js"),n=require("@eva/plugin-renderer"),o=require("@eva/renderer-adapter");
|
|
2
2
|
/*! *****************************************************************************
|
|
3
3
|
Copyright (c) Microsoft Corporation. All rights reserved.
|
|
4
4
|
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
|
|
@@ -13,4 +13,4 @@ MERCHANTABLITY OR NON-INFRINGEMENT.
|
|
|
13
13
|
See the Apache Version 2.0 License for specific language governing permissions
|
|
14
14
|
and limitations under the License.
|
|
15
15
|
***************************************************************************** */
|
|
16
|
-
function
|
|
16
|
+
function s(t,e,i,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPropertyDescriptor(e,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(t,e,i,n);else for(var a=t.length-1;a>=0;a--)(o=t[a])&&(r=(s<3?o(r):s>3?o(e,i,r):o(e,i))||r);return s>3&&r&&Object.defineProperty(e,i,r),r}function r(t,e,i,n){return new(i||(i=Promise))((function(o,s){function r(t){try{c(n.next(t))}catch(t){s(t)}}function a(t){try{c(n.throw(t))}catch(t){s(t)}}function c(t){t.done?o(t.value):new i((function(e){e(t.value)})).then(r,a)}c((n=n.apply(t,e||[])).next())}))}class a extends t.Component{constructor(){super(...arguments),this.text="",this.style={}}init(t){this.style=Object.assign({fontSize:24,fill:"#000000",fontFamily:"Arial"},null==t?void 0:t.style),t&&(this.text=t.text)}}a.componentName="BitmapText",s([e.type("string")],a.prototype,"text",void 0);class c extends t.Component{constructor(){super(...arguments),this.text="",this.style={}}init(t){const e=new i.TextStyle({fontSize:20}),n={};for(const t in e)0===t.indexOf("_")&&(n[t.substring(1)]=e[t]);delete n.styleKey,this.style=n,t&&(this.text=t.text,Object.assign(this.style,t.style))}}c.componentName="Text",s([e.type("string")],c.prototype,"text",void 0);class d extends t.Component{constructor(){super(...arguments),this.text="",this.style={},this.textureStyle={}}init(t){this.style=Object.assign({fontSize:24,fill:"#000000",fontFamily:"Arial"},null==t?void 0:t.style),this.textureStyle=Object.assign({scaleMode:"linear",resolution:window.devicePixelRatio||1},null==t?void 0:t.textureStyle),t&&(this.text=t.text)}}d.componentName="HTMLText",s([e.type("string")],d.prototype,"text",void 0);let l=class extends n.Renderer{constructor(){super(...arguments),this.name="Text",this.texts={}}init(){this.renderSystem=this.game.getSystem(n.RendererSystem),this.renderSystem.rendererManager.register(this)}componentChanged(e){return r(this,void 0,void 0,(function*(){const i="Text"===e.componentName,n="HTMLText"===e.componentName,o="BitmapText"===e.componentName;if(i||n||o)if(e.type===t.OBSERVER_TYPE.ADD)i?yield this.addTextComponent(e):n?yield this.addHTMLTextComponent(e):yield this.addBitmapTextComponent(e),this.setSize(e);else if(e.type===t.OBSERVER_TYPE.REMOVE)this.containerManager.getContainer(e.gameObject.id).removeChild(this.texts[e.gameObject.id].text),this.texts[e.gameObject.id].text.destroy({children:!0}),delete this.texts[e.gameObject.id];else{this.change(e);const t=e.component;if("style"===e.prop.prop[0]&&t.style&&t.style.fontFamily){const{text:i}=this.texts[e.gameObject.id];yield this.waitForFontResource(i,e,t.style.fontFamily)}this.setSize(e)}}))}addTextComponent(t){return r(this,void 0,void 0,(function*(){const e=t.component,i=Object.assign({},e.style),n=i.fontFamily;delete i.fontFamily;const s=n?"":e.text,r=new o.Text(s,i);this.containerManager.getContainer(t.gameObject.id).addChildAt(r,0),this.texts[t.gameObject.id]={text:r,component:e},n&&(yield this.waitForFontResource(r,t,n))}))}addHTMLTextComponent(t){return r(this,void 0,void 0,(function*(){const e=t.component,i=Object.assign({},e.style),n=i.fontFamily;delete i.fontFamily;const s=n?"":e.text,r=new o.HTMLText(Object.assign({text:s,style:i},e.textureStyle&&{textureStyle:e.textureStyle}));this.containerManager.getContainer(t.gameObject.id).addChildAt(r,0),this.texts[t.gameObject.id]={text:r,component:e},n&&(yield this.waitForFontResource(r,t,n))}))}addBitmapTextComponent(t){return r(this,void 0,void 0,(function*(){const e=t.component,i=Object.assign({},e.style),n=i.fontFamily;delete i.fontFamily;const s=n?"":e.text,r=new o.BitmapText(s,i);this.containerManager.getContainer(t.gameObject.id).addChildAt(r,0),this.texts[t.gameObject.id]={text:r,component:e},n&&(yield this.waitForFontResource(r,t,n))}))}waitForFontResource(e,i,n){return r(this,void 0,void 0,(function*(){if(n)try{const o=Array.isArray(n)?n[0]:n,s=this.increaseAsyncId(i.gameObject.id);if(yield t.resource.getResource(o),!this.validateAsyncId(i.gameObject.id,s))return;const r=this.texts[i.gameObject.id].component;e.style.fontFamily=n,e.text=r.text}catch(t){console.warn(`字体资源 ${n} 加载失败:`,t)}}))}change(t){const{text:e,component:i}=this.texts[t.gameObject.id],n="HTMLText"===t.componentName;if("text"===t.prop.prop[0])e.text=i.text;else if("style"===t.prop.prop[0])Object.assign(e.style,i.style);else if("textureStyle"===t.prop.prop[0]&&n){const n=i,s=this.containerManager.getContainer(t.gameObject.id),r=s.getChildIndex(e);s.removeChild(e),e.destroy({children:!0});const a=new o.HTMLText({text:n.text,style:n.style,textureStyle:n.textureStyle});s.addChildAt(a,r),this.texts[t.gameObject.id].text=a}}setSize(t){const{transform:e}=t.gameObject;if(!e)return;const{text:i}=this.texts[t.gameObject.id],n=i.getSize();e.size.width=n.width,e.size.height=n.height}};l.systemName="Text",l=s([t.decorators.componentObserver({Text:["text",{prop:["style"],deep:!0}],HTMLText:["text",{prop:["style"],deep:!0},{prop:["textureStyle"],deep:!0}],BitmapText:["text",{prop:["style"],deep:!0}]})],l);var x=l;exports.BitmapText=a,exports.HTMLText=d,exports.Text=c,exports.TextSystem=x;
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { BitmapText as BitmapText_2 } from '@eva/renderer-adapter';
|
|
1
2
|
import { Component } from '@eva/eva.js';
|
|
2
3
|
import { ComponentChanged } from '@eva/eva.js';
|
|
3
4
|
import { ContainerManager } from '@eva/plugin-renderer';
|
|
@@ -13,6 +14,54 @@ import { TextStyleFontWeight } from 'pixi.js';
|
|
|
13
14
|
import { TextStyleTextBaseline } from 'pixi.js';
|
|
14
15
|
import { TextStyleWhiteSpace } from 'pixi.js';
|
|
15
16
|
|
|
17
|
+
/**
|
|
18
|
+
* 位图文本组件
|
|
19
|
+
*
|
|
20
|
+
* BitmapText 组件使用位图字体渲染文本,性能优于 Canvas 文本渲染。
|
|
21
|
+
* 适用于频繁更新的文本场景,如计分板、倒计时等。
|
|
22
|
+
*
|
|
23
|
+
* 支持两种字体模式:
|
|
24
|
+
* - 动态生成:指定 TextStyle,PixiJS 自动生成 bitmap font
|
|
25
|
+
* - 预加载字体:通过 BitmapFont.install() 预安装或从 .fnt 文件加载
|
|
26
|
+
*
|
|
27
|
+
* @example
|
|
28
|
+
* ```typescript
|
|
29
|
+
* const score = new GameObject('score');
|
|
30
|
+
* score.addComponent(new BitmapText({
|
|
31
|
+
* text: 'Score: 0',
|
|
32
|
+
* style: {
|
|
33
|
+
* fontSize: 32,
|
|
34
|
+
* fill: '#ffffff',
|
|
35
|
+
* fontFamily: 'Arial'
|
|
36
|
+
* }
|
|
37
|
+
* }));
|
|
38
|
+
* ```
|
|
39
|
+
*/
|
|
40
|
+
export declare class BitmapText extends Component<BitmapTextParams> {
|
|
41
|
+
static componentName: string;
|
|
42
|
+
text: string;
|
|
43
|
+
style: BitmapTextStyleOptions;
|
|
44
|
+
init(obj?: BitmapTextParams): void;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
export declare interface BitmapTextParams {
|
|
48
|
+
text: string;
|
|
49
|
+
style?: BitmapTextStyleOptions;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
declare interface BitmapTextStyleOptions {
|
|
53
|
+
fontFamily?: string | string[];
|
|
54
|
+
fontSize?: number | string;
|
|
55
|
+
fill?: string | number;
|
|
56
|
+
align?: 'left' | 'center' | 'right' | 'justify';
|
|
57
|
+
letterSpacing?: number;
|
|
58
|
+
padding?: number;
|
|
59
|
+
stroke?: string | number;
|
|
60
|
+
strokeThickness?: number;
|
|
61
|
+
fontWeight?: TextStyleFontWeight;
|
|
62
|
+
fontStyle?: TextStyleFontStyle;
|
|
63
|
+
}
|
|
64
|
+
|
|
16
65
|
/**
|
|
17
66
|
* HTML 富文本组件
|
|
18
67
|
*
|
|
@@ -231,8 +280,8 @@ export declare class TextSystem extends Renderer {
|
|
|
231
280
|
name: string;
|
|
232
281
|
texts: {
|
|
233
282
|
[propName: number]: {
|
|
234
|
-
text: Text_3 | HTMLText_2;
|
|
235
|
-
component: Text_2 | HTMLText;
|
|
283
|
+
text: Text_3 | HTMLText_2 | BitmapText_2;
|
|
284
|
+
component: Text_2 | HTMLText | BitmapText;
|
|
236
285
|
};
|
|
237
286
|
};
|
|
238
287
|
renderSystem: RendererSystem;
|
|
@@ -242,6 +291,7 @@ export declare class TextSystem extends Renderer {
|
|
|
242
291
|
componentChanged(changed: ComponentChanged): Promise<void>;
|
|
243
292
|
private addTextComponent;
|
|
244
293
|
private addHTMLTextComponent;
|
|
294
|
+
private addBitmapTextComponent;
|
|
245
295
|
/**
|
|
246
296
|
* 等待字体资源加载完成并更新文本
|
|
247
297
|
*/
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { TextStyle } from 'pixi.js';
|
|
2
1
|
import { Component, decorators, OBSERVER_TYPE, resource } from '@eva/eva.js';
|
|
3
2
|
import { type } from '@eva/inspector-decorator';
|
|
3
|
+
import { TextStyle } from 'pixi.js';
|
|
4
4
|
import { Renderer, RendererSystem } from '@eva/plugin-renderer';
|
|
5
|
-
import { HTMLText as HTMLText$1, Text as Text$3 } from '@eva/renderer-adapter';
|
|
5
|
+
import { HTMLText as HTMLText$1, Text as Text$3, BitmapText as BitmapText$1 } from '@eva/renderer-adapter';
|
|
6
6
|
|
|
7
7
|
/*! *****************************************************************************
|
|
8
8
|
Copyright (c) Microsoft Corporation. All rights reserved.
|
|
@@ -35,6 +35,47 @@ function __awaiter(thisArg, _arguments, P, generator) {
|
|
|
35
35
|
});
|
|
36
36
|
}
|
|
37
37
|
|
|
38
|
+
/**
|
|
39
|
+
* 位图文本组件
|
|
40
|
+
*
|
|
41
|
+
* BitmapText 组件使用位图字体渲染文本,性能优于 Canvas 文本渲染。
|
|
42
|
+
* 适用于频繁更新的文本场景,如计分板、倒计时等。
|
|
43
|
+
*
|
|
44
|
+
* 支持两种字体模式:
|
|
45
|
+
* - 动态生成:指定 TextStyle,PixiJS 自动生成 bitmap font
|
|
46
|
+
* - 预加载字体:通过 BitmapFont.install() 预安装或从 .fnt 文件加载
|
|
47
|
+
*
|
|
48
|
+
* @example
|
|
49
|
+
* ```typescript
|
|
50
|
+
* const score = new GameObject('score');
|
|
51
|
+
* score.addComponent(new BitmapText({
|
|
52
|
+
* text: 'Score: 0',
|
|
53
|
+
* style: {
|
|
54
|
+
* fontSize: 32,
|
|
55
|
+
* fill: '#ffffff',
|
|
56
|
+
* fontFamily: 'Arial'
|
|
57
|
+
* }
|
|
58
|
+
* }));
|
|
59
|
+
* ```
|
|
60
|
+
*/
|
|
61
|
+
class BitmapText extends Component {
|
|
62
|
+
constructor() {
|
|
63
|
+
super(...arguments);
|
|
64
|
+
this.text = '';
|
|
65
|
+
this.style = {};
|
|
66
|
+
}
|
|
67
|
+
init(obj) {
|
|
68
|
+
this.style = Object.assign({ fontSize: 24, fill: '#000000', fontFamily: 'Arial' }, obj === null || obj === void 0 ? void 0 : obj.style);
|
|
69
|
+
if (obj) {
|
|
70
|
+
this.text = obj.text;
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
BitmapText.componentName = 'BitmapText';
|
|
75
|
+
__decorate([
|
|
76
|
+
type('string')
|
|
77
|
+
], BitmapText.prototype, "text", void 0);
|
|
78
|
+
|
|
38
79
|
/**
|
|
39
80
|
* 文本组件(基于 PixiJS Text)
|
|
40
81
|
*
|
|
@@ -222,15 +263,19 @@ let Text = class Text extends Renderer {
|
|
|
222
263
|
return __awaiter(this, void 0, void 0, function* () {
|
|
223
264
|
const isText = changed.componentName === 'Text';
|
|
224
265
|
const isHTMLText = changed.componentName === 'HTMLText';
|
|
225
|
-
|
|
266
|
+
const isBitmapText = changed.componentName === 'BitmapText';
|
|
267
|
+
if (!isText && !isHTMLText && !isBitmapText)
|
|
226
268
|
return;
|
|
227
269
|
if (changed.type === OBSERVER_TYPE.ADD) {
|
|
228
270
|
if (isText) {
|
|
229
271
|
yield this.addTextComponent(changed);
|
|
230
272
|
}
|
|
231
|
-
else {
|
|
273
|
+
else if (isHTMLText) {
|
|
232
274
|
yield this.addHTMLTextComponent(changed);
|
|
233
275
|
}
|
|
276
|
+
else {
|
|
277
|
+
yield this.addBitmapTextComponent(changed);
|
|
278
|
+
}
|
|
234
279
|
this.setSize(changed);
|
|
235
280
|
}
|
|
236
281
|
else if (changed.type === OBSERVER_TYPE.REMOVE) {
|
|
@@ -290,6 +335,26 @@ let Text = class Text extends Renderer {
|
|
|
290
335
|
}
|
|
291
336
|
});
|
|
292
337
|
}
|
|
338
|
+
addBitmapTextComponent(changed) {
|
|
339
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
340
|
+
const component = changed.component;
|
|
341
|
+
// 创建样式副本,先不设置 fontFamily
|
|
342
|
+
const styleWithoutFont = Object.assign({}, component.style);
|
|
343
|
+
const fontFamily = styleWithoutFont.fontFamily;
|
|
344
|
+
delete styleWithoutFont.fontFamily;
|
|
345
|
+
const initialText = fontFamily ? '' : component.text;
|
|
346
|
+
const bitmapText = new BitmapText$1(initialText, styleWithoutFont);
|
|
347
|
+
this.containerManager.getContainer(changed.gameObject.id).addChildAt(bitmapText, 0);
|
|
348
|
+
this.texts[changed.gameObject.id] = {
|
|
349
|
+
text: bitmapText,
|
|
350
|
+
component,
|
|
351
|
+
};
|
|
352
|
+
// 如果指定了字体资源,等待资源加载完成后设置 fontFamily
|
|
353
|
+
if (fontFamily) {
|
|
354
|
+
yield this.waitForFontResource(bitmapText, changed, fontFamily);
|
|
355
|
+
}
|
|
356
|
+
});
|
|
357
|
+
}
|
|
293
358
|
/**
|
|
294
359
|
* 等待字体资源加载完成并更新文本
|
|
295
360
|
*/
|
|
@@ -357,8 +422,9 @@ Text = __decorate([
|
|
|
357
422
|
decorators.componentObserver({
|
|
358
423
|
Text: ['text', { prop: ['style'], deep: true }],
|
|
359
424
|
HTMLText: ['text', { prop: ['style'], deep: true }, { prop: ['textureStyle'], deep: true }],
|
|
425
|
+
BitmapText: ['text', { prop: ['style'], deep: true }],
|
|
360
426
|
})
|
|
361
427
|
], Text);
|
|
362
428
|
var Text$1 = Text;
|
|
363
429
|
|
|
364
|
-
export { HTMLText, Text$2 as Text, Text$1 as TextSystem };
|
|
430
|
+
export { BitmapText, HTMLText, Text$2 as Text, Text$1 as TextSystem };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@eva/plugin-renderer-text",
|
|
3
|
-
"version": "2.0.1-beta.
|
|
3
|
+
"version": "2.0.1-beta.34",
|
|
4
4
|
"description": "@eva/plugin-renderer-text",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"module": "dist/plugin-renderer-text.esm.js",
|
|
@@ -19,9 +19,9 @@
|
|
|
19
19
|
"homepage": "https://eva.js.org",
|
|
20
20
|
"dependencies": {
|
|
21
21
|
"@eva/inspector-decorator": "^0.0.5",
|
|
22
|
-
"@eva/plugin-renderer": "2.0.1-beta.
|
|
23
|
-
"@eva/renderer-adapter": "2.0.1-beta.
|
|
24
|
-
"@eva/eva.js": "2.0.1-beta.
|
|
25
|
-
"pixi.js": "^8.
|
|
22
|
+
"@eva/plugin-renderer": "2.0.1-beta.34",
|
|
23
|
+
"@eva/renderer-adapter": "2.0.1-beta.34",
|
|
24
|
+
"@eva/eva.js": "2.0.1-beta.34",
|
|
25
|
+
"pixi.js": "^8.17.0"
|
|
26
26
|
}
|
|
27
27
|
}
|