@eva/plugin-renderer-render 2.0.1-beta.3 → 2.0.1-beta.30
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.render.js +28 -3
- package/dist/EVA.plugin.renderer.render.min.js +1 -1
- package/dist/plugin-renderer-render.cjs.js +110 -4
- package/dist/plugin-renderer-render.cjs.prod.js +1 -1
- package/dist/plugin-renderer-render.d.ts +76 -0
- package/dist/plugin-renderer-render.esm.js +110 -4
- package/package.json +4 -4
|
@@ -42,6 +42,7 @@ var _EVA_IIFE_render = function (exports, eva_js, pluginRenderer) {
|
|
|
42
42
|
this.alpha = 1;
|
|
43
43
|
this.zIndex = 0;
|
|
44
44
|
this.sortableChildren = false;
|
|
45
|
+
this.resolution = 1;
|
|
45
46
|
}
|
|
46
47
|
init(obj) {
|
|
47
48
|
obj && _extends(this, obj);
|
|
@@ -52,6 +53,7 @@ var _EVA_IIFE_render = function (exports, eva_js, pluginRenderer) {
|
|
|
52
53
|
__decorate([type('number'), step(0.1)], Render$2.prototype, "alpha", void 0);
|
|
53
54
|
__decorate([type('number'), step(1)], Render$2.prototype, "zIndex", void 0);
|
|
54
55
|
__decorate([type('boolean')], Render$2.prototype, "sortableChildren", void 0);
|
|
56
|
+
__decorate([type('number'), step(0.1)], Render$2.prototype, "resolution", void 0);
|
|
55
57
|
let Render = class Render extends pluginRenderer.Renderer {
|
|
56
58
|
constructor() {
|
|
57
59
|
super(...arguments);
|
|
@@ -82,11 +84,24 @@ var _EVA_IIFE_render = function (exports, eva_js, pluginRenderer) {
|
|
|
82
84
|
add(changed) {
|
|
83
85
|
if (changed.component.name === 'Render') {
|
|
84
86
|
this.setDirty(changed);
|
|
87
|
+
const component = changed.component;
|
|
88
|
+
const container = this.containerManager.getContainer(changed.gameObject.id);
|
|
89
|
+
if (component.resolution !== undefined && component.resolution > 0) {
|
|
90
|
+
this.applyResolution(container, component.resolution);
|
|
91
|
+
}
|
|
85
92
|
}
|
|
86
93
|
}
|
|
87
94
|
change(changed) {
|
|
88
|
-
if (changed.component.name === 'Render'
|
|
89
|
-
|
|
95
|
+
if (changed.component.name === 'Render') {
|
|
96
|
+
if (changed.prop.prop[0] === 'zIndex') {
|
|
97
|
+
this.setDirty(changed);
|
|
98
|
+
} else if (changed.prop.prop[0] === 'resolution') {
|
|
99
|
+
const component = changed.component;
|
|
100
|
+
const container = this.containerManager.getContainer(changed.gameObject.id);
|
|
101
|
+
if (component.resolution !== undefined && component.resolution > 0) {
|
|
102
|
+
this.applyResolution(container, component.resolution);
|
|
103
|
+
}
|
|
104
|
+
}
|
|
90
105
|
}
|
|
91
106
|
}
|
|
92
107
|
remove(changed) {
|
|
@@ -101,10 +116,20 @@ var _EVA_IIFE_render = function (exports, eva_js, pluginRenderer) {
|
|
|
101
116
|
parentRender.sortDirty = true;
|
|
102
117
|
}
|
|
103
118
|
}
|
|
119
|
+
applyResolution(container, resolution) {
|
|
120
|
+
if (!container) return;
|
|
121
|
+
window.requestAnimationFrame(() => {
|
|
122
|
+
if (container.children && Array.isArray(container.children)) {
|
|
123
|
+
for (const child of container.children) {
|
|
124
|
+
child.resolution = resolution;
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
});
|
|
128
|
+
}
|
|
104
129
|
};
|
|
105
130
|
Render.systemName = 'Render';
|
|
106
131
|
Render = __decorate([eva_js.decorators.componentObserver({
|
|
107
|
-
Render: ['zIndex']
|
|
132
|
+
Render: ['zIndex', 'resolution']
|
|
108
133
|
})], Render);
|
|
109
134
|
var Render$1 = Render;
|
|
110
135
|
exports.Render = Render$2;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var
|
|
1
|
+
function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)({}).hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},_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_render=function(e,n,t){"use strict";function r(e,n,t,r){var o,i=arguments.length,s=i<3?n:null===r?r=Object.getOwnPropertyDescriptor(n,t):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,n,t,r);else for(var a=e.length-1;a>=0;a--)(o=e[a])&&(s=(i<3?o(s):i>3?o(n,t,s):o(n,t))||s);return i>3&&s&&Object.defineProperty(n,t,s),s}function o(e,n){return e.constructor.IDEProps||(e.constructor.IDEProps={}),e.constructor.IDEProps[n]||(e.constructor.IDEProps[n]={}),e.constructor.IDEProps[n]}function i(e){return function(n,t){var r=o(n,t);r.key=t,r.type=e}}function s(e){return function(n,t){o(n,t).step=e}}class a extends n.Component{constructor(){super(...arguments),this.sortDirty=!1,this.visible=!0,this.alpha=1,this.zIndex=0,this.sortableChildren=!1,this.resolution=1}init(e){e&&_extends(this,e)}}a.componentName="Render",r([i("boolean")],a.prototype,"visible",void 0),r([i("number"),s(.1)],a.prototype,"alpha",void 0),r([i("number"),s(1)],a.prototype,"zIndex",void 0),r([i("boolean")],a.prototype,"sortableChildren",void 0),r([i("number"),s(.1)],a.prototype,"resolution",void 0);let l=class extends t.Renderer{constructor(){super(...arguments),this.name="Render"}init(){this.renderSystem=this.game.getSystem(t.RendererSystem),this.renderSystem.rendererManager.register(this)}rendererUpdate(e){const n=e.getComponent("Render"),t=this.containerManager.getContainer(e.id);t.alpha=n.alpha,t.visible=n.visible,t.zIndex=n.zIndex}componentChanged(e){e.type!==n.OBSERVER_TYPE.ADD&&e.type!==n.OBSERVER_TYPE.REMOVE||this.add(e),e.type===n.OBSERVER_TYPE.CHANGE&&this.change(e),e.type===n.OBSERVER_TYPE.REMOVE&&this.remove(e)}add(e){if("Render"===e.component.name){this.setDirty(e);const n=e.component,t=this.containerManager.getContainer(e.gameObject.id);void 0!==n.resolution&&n.resolution>0&&this.applyResolution(t,n.resolution)}}change(e){if("Render"===e.component.name)if("zIndex"===e.prop.prop[0])this.setDirty(e);else if("resolution"===e.prop.prop[0]){const n=e.component,t=this.containerManager.getContainer(e.gameObject.id);void 0!==n.resolution&&n.resolution>0&&this.applyResolution(t,n.resolution)}}remove(e){if("Render"===e.component.name){this.containerManager.getContainer(e.gameObject.id).alpha=1}}setDirty(e){const n=e.gameObject.parent&&e.gameObject.parent.getComponent("Render");n&&(n.sortDirty=!0)}applyResolution(e,n){e&&window.requestAnimationFrame((()=>{if(e.children&&Array.isArray(e.children))for(const t of e.children)t.resolution=n}))}};l.systemName="Render",l=r([n.decorators.componentObserver({Render:["zIndex","resolution"]})],l);var p=l;return e.Render=a,e.RenderSystem=p,Object.defineProperty(e,"__esModule",{value:!0}),e}({},EVA,EVA.plugin.renderer);globalThis.EVA.plugin.renderer.render=globalThis.EVA.plugin.renderer.render||_EVA_IIFE_render;
|
|
@@ -28,19 +28,90 @@ function __decorate(decorators, target, key, desc) {
|
|
|
28
28
|
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
29
29
|
}
|
|
30
30
|
|
|
31
|
+
/**
|
|
32
|
+
* 渲染属性组件
|
|
33
|
+
*
|
|
34
|
+
* Render 组件控制游戏对象的渲染相关属性，如可见性、透明度、层级等。
|
|
35
|
+
* 这些属性影响对象的显示效果和渲染顺序，
|
|
36
|
+
* 适用于需要控制显示状态、淡入淡出、层级排序等场景。
|
|
37
|
+
*
|
|
38
|
+
* 主要属性：
|
|
39
|
+
* - visible - 控制对象是否可见
|
|
40
|
+
* - alpha - 控制对象透明度（0-1）
|
|
41
|
+
* - zIndex - 控制对象渲染层级
|
|
42
|
+
* - sortableChildren - 是否对子对象按 zIndex 排序
|
|
43
|
+
* - resolution - 渲染分辨率，值越大越清晰但性能消耗越大
|
|
44
|
+
*
|
|
45
|
+
* @example
|
|
46
|
+
* ```typescript
|
|
47
|
+
* // 创建带渲染属性的对象
|
|
48
|
+
* const sprite = new GameObject('sprite');
|
|
49
|
+
* sprite.addComponent(new Img({ resource: 'player' }));
|
|
50
|
+
* sprite.addComponent(new Render({
|
|
51
|
+
* visible: true,
|
|
52
|
+
* alpha: 1,
|
|
53
|
+
* zIndex: 10
|
|
54
|
+
* }));
|
|
55
|
+
*
|
|
56
|
+
* // 控制可见性
|
|
57
|
+
* const render = sprite.getComponent('Render');
|
|
58
|
+
* render.visible = false; // 隐藏对象
|
|
59
|
+
*
|
|
60
|
+
* // 淡入淡出效果
|
|
61
|
+
* let alpha = 1;
|
|
62
|
+
* setInterval(() => {
|
|
63
|
+
* alpha -= 0.01;
|
|
64
|
+
* if (alpha <= 0) alpha = 1;
|
|
65
|
+
* render.alpha = alpha;
|
|
66
|
+
* }, 16);
|
|
67
|
+
*
|
|
68
|
+
* // 设置渲染层级
|
|
69
|
+
* render.zIndex = 100; // 越大越靠前
|
|
70
|
+
*
|
|
71
|
+
* // 启用子对象排序
|
|
72
|
+
* const container = new GameObject('container');
|
|
73
|
+
* container.addComponent(new Render({
|
|
74
|
+
* sortableChildren: true // 子对象将按 zIndex 排序
|
|
75
|
+
* }));
|
|
76
|
+
*
|
|
77
|
+
* // 设置渲染分辨率
|
|
78
|
+
* const text = new GameObject('text');
|
|
79
|
+
* text.addComponent(new Text({ text: 'High Resolution' }));
|
|
80
|
+
* text.addComponent(new Render({
|
|
81
|
+
* resolution: 2 // 2倍分辨率，使渲染更清晰
|
|
82
|
+
* }));
|
|
83
|
+
* ```
|
|
84
|
+
*/
|
|
31
85
|
class Render$2 extends eva_js.Component {
|
|
32
86
|
constructor() {
|
|
33
87
|
super(...arguments);
|
|
88
|
+
/** 排序脏标记 */
|
|
34
89
|
this.sortDirty = false;
|
|
90
|
+
/** 是否可见 */
|
|
35
91
|
this.visible = true;
|
|
92
|
+
/** 透明度（0-1，0 为完全透明，1 为完全不透明） */
|
|
36
93
|
this.alpha = 1;
|
|
94
|
+
/** 渲染层级（数值越大越靠前） */
|
|
37
95
|
this.zIndex = 0;
|
|
96
|
+
/** 是否对子对象按 zIndex 排序 */
|
|
38
97
|
this.sortableChildren = false;
|
|
98
|
+
/** 渲染分辨率（值越大越清晰但性能消耗越大，默认为 1） */
|
|
99
|
+
this.resolution = 1;
|
|
39
100
|
}
|
|
101
|
+
/**
|
|
102
|
+
* 初始化组件
|
|
103
|
+
* @param obj - 初始化参数
|
|
104
|
+
* @param obj.visible - 是否可见
|
|
105
|
+
* @param obj.alpha - 透明度
|
|
106
|
+
* @param obj.zIndex - 渲染层级
|
|
107
|
+
* @param obj.sortableChildren - 是否对子对象排序
|
|
108
|
+
* @param obj.resolution - 渲染分辨率
|
|
109
|
+
*/
|
|
40
110
|
init(obj) {
|
|
41
111
|
obj && Object.assign(this, obj);
|
|
42
112
|
}
|
|
43
113
|
}
|
|
114
|
+
/** 组件名称 */
|
|
44
115
|
Render$2.componentName = 'Render';
|
|
45
116
|
__decorate([
|
|
46
117
|
inspectorDecorator.type('boolean')
|
|
@@ -55,7 +126,11 @@ __decorate([
|
|
|
55
126
|
], Render$2.prototype, "zIndex", void 0);
|
|
56
127
|
__decorate([
|
|
57
128
|
inspectorDecorator.type('boolean')
|
|
58
|
-
], Render$2.prototype, "sortableChildren", void 0);
|
|
129
|
+
], Render$2.prototype, "sortableChildren", void 0);
|
|
130
|
+
__decorate([
|
|
131
|
+
inspectorDecorator.type('number'),
|
|
132
|
+
inspectorDecorator.step(0.1)
|
|
133
|
+
], Render$2.prototype, "resolution", void 0);
|
|
59
134
|
|
|
60
135
|
let Render = class Render extends pluginRenderer.Renderer {
|
|
61
136
|
constructor() {
|
|
@@ -87,11 +162,27 @@ let Render = class Render extends pluginRenderer.Renderer {
|
|
|
87
162
|
add(changed) {
|
|
88
163
|
if (changed.component.name === 'Render') {
|
|
89
164
|
this.setDirty(changed);
|
|
165
|
+
// 初始化时应用 resolution
|
|
166
|
+
const component = changed.component;
|
|
167
|
+
const container = this.containerManager.getContainer(changed.gameObject.id);
|
|
168
|
+
if (component.resolution !== undefined && component.resolution > 0) {
|
|
169
|
+
this.applyResolution(container, component.resolution);
|
|
170
|
+
}
|
|
90
171
|
}
|
|
91
172
|
}
|
|
92
173
|
change(changed) {
|
|
93
|
-
if (changed.component.name === 'Render'
|
|
94
|
-
|
|
174
|
+
if (changed.component.name === 'Render') {
|
|
175
|
+
if (changed.prop.prop[0] === 'zIndex') {
|
|
176
|
+
this.setDirty(changed);
|
|
177
|
+
}
|
|
178
|
+
else if (changed.prop.prop[0] === 'resolution') {
|
|
179
|
+
// 当 resolution 改变时，重新应用到子对象
|
|
180
|
+
const component = changed.component;
|
|
181
|
+
const container = this.containerManager.getContainer(changed.gameObject.id);
|
|
182
|
+
if (component.resolution !== undefined && component.resolution > 0) {
|
|
183
|
+
this.applyResolution(container, component.resolution);
|
|
184
|
+
}
|
|
185
|
+
}
|
|
95
186
|
}
|
|
96
187
|
}
|
|
97
188
|
remove(changed) {
|
|
@@ -106,11 +197,26 @@ let Render = class Render extends pluginRenderer.Renderer {
|
|
|
106
197
|
parentRender.sortDirty = true;
|
|
107
198
|
}
|
|
108
199
|
}
|
|
200
|
+
/**
|
|
201
|
+
* 递归应用 resolution 到容器中所有支持该属性的子对象
|
|
202
|
+
*/
|
|
203
|
+
applyResolution(container, resolution) {
|
|
204
|
+
if (!container)
|
|
205
|
+
return;
|
|
206
|
+
window.requestAnimationFrame(() => {
|
|
207
|
+
// 遍历容器的所有子对象
|
|
208
|
+
if (container.children && Array.isArray(container.children)) {
|
|
209
|
+
for (const child of container.children) {
|
|
210
|
+
child.resolution = resolution;
|
|
211
|
+
}
|
|
212
|
+
}
|
|
213
|
+
});
|
|
214
|
+
}
|
|
109
215
|
};
|
|
110
216
|
Render.systemName = 'Render';
|
|
111
217
|
Render = __decorate([
|
|
112
218
|
eva_js.decorators.componentObserver({
|
|
113
|
-
Render: ['zIndex'],
|
|
219
|
+
Render: ['zIndex', 'resolution'],
|
|
114
220
|
})
|
|
115
221
|
], Render);
|
|
116
222
|
var Render$1 = Render;
|
|
@@ -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 n(e,t,r,n){var o,
|
|
16
|
+
function n(e,t,r,n){var o,i=arguments.length,s=i<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,r):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,r,n);else for(var a=e.length-1;a>=0;a--)(o=e[a])&&(s=(i<3?o(s):i>3?o(t,r,s):o(t,r))||s);return i>3&&s&&Object.defineProperty(t,r,s),s}class o extends e.Component{constructor(){super(...arguments),this.sortDirty=!1,this.visible=!0,this.alpha=1,this.zIndex=0,this.sortableChildren=!1,this.resolution=1}init(e){e&&Object.assign(this,e)}}o.componentName="Render",n([t.type("boolean")],o.prototype,"visible",void 0),n([t.type("number"),t.step(.1)],o.prototype,"alpha",void 0),n([t.type("number"),t.step(1)],o.prototype,"zIndex",void 0),n([t.type("boolean")],o.prototype,"sortableChildren",void 0),n([t.type("number"),t.step(.1)],o.prototype,"resolution",void 0);let i=class extends r.Renderer{constructor(){super(...arguments),this.name="Render"}init(){this.renderSystem=this.game.getSystem(r.RendererSystem),this.renderSystem.rendererManager.register(this)}rendererUpdate(e){const t=e.getComponent("Render"),r=this.containerManager.getContainer(e.id);r.alpha=t.alpha,r.visible=t.visible,r.zIndex=t.zIndex}componentChanged(t){t.type!==e.OBSERVER_TYPE.ADD&&t.type!==e.OBSERVER_TYPE.REMOVE||this.add(t),t.type===e.OBSERVER_TYPE.CHANGE&&this.change(t),t.type===e.OBSERVER_TYPE.REMOVE&&this.remove(t)}add(e){if("Render"===e.component.name){this.setDirty(e);const t=e.component,r=this.containerManager.getContainer(e.gameObject.id);void 0!==t.resolution&&t.resolution>0&&this.applyResolution(r,t.resolution)}}change(e){if("Render"===e.component.name)if("zIndex"===e.prop.prop[0])this.setDirty(e);else if("resolution"===e.prop.prop[0]){const t=e.component,r=this.containerManager.getContainer(e.gameObject.id);void 0!==t.resolution&&t.resolution>0&&this.applyResolution(r,t.resolution)}}remove(e){if("Render"===e.component.name){this.containerManager.getContainer(e.gameObject.id).alpha=1}}setDirty(e){const t=e.gameObject.parent&&e.gameObject.parent.getComponent("Render");t&&(t.sortDirty=!0)}applyResolution(e,t){e&&window.requestAnimationFrame((()=>{if(e.children&&Array.isArray(e.children))for(const r of e.children)r.resolution=t}))}};i.systemName="Render",i=n([e.decorators.componentObserver({Render:["zIndex","resolution"]})],i);var s=i;exports.Render=o,exports.RenderSystem=s;
|
|
@@ -6,13 +6,84 @@ import { Renderer } from '@eva/plugin-renderer';
|
|
|
6
6
|
import { RendererManager } from '@eva/plugin-renderer';
|
|
7
7
|
import { RendererSystem } from '@eva/plugin-renderer';
|
|
8
8
|
|
|
9
|
+
/**
|
|
10
|
+
* 渲染属性组件
|
|
11
|
+
*
|
|
12
|
+
* Render 组件控制游戏对象的渲染相关属性，如可见性、透明度、层级等。
|
|
13
|
+
* 这些属性影响对象的显示效果和渲染顺序，
|
|
14
|
+
* 适用于需要控制显示状态、淡入淡出、层级排序等场景。
|
|
15
|
+
*
|
|
16
|
+
* 主要属性：
|
|
17
|
+
* - visible - 控制对象是否可见
|
|
18
|
+
* - alpha - 控制对象透明度（0-1）
|
|
19
|
+
* - zIndex - 控制对象渲染层级
|
|
20
|
+
* - sortableChildren - 是否对子对象按 zIndex 排序
|
|
21
|
+
* - resolution - 渲染分辨率，值越大越清晰但性能消耗越大
|
|
22
|
+
*
|
|
23
|
+
* @example
|
|
24
|
+
* ```typescript
|
|
25
|
+
* // 创建带渲染属性的对象
|
|
26
|
+
* const sprite = new GameObject('sprite');
|
|
27
|
+
* sprite.addComponent(new Img({ resource: 'player' }));
|
|
28
|
+
* sprite.addComponent(new Render({
|
|
29
|
+
* visible: true,
|
|
30
|
+
* alpha: 1,
|
|
31
|
+
* zIndex: 10
|
|
32
|
+
* }));
|
|
33
|
+
*
|
|
34
|
+
* // 控制可见性
|
|
35
|
+
* const render = sprite.getComponent('Render');
|
|
36
|
+
* render.visible = false; // 隐藏对象
|
|
37
|
+
*
|
|
38
|
+
* // 淡入淡出效果
|
|
39
|
+
* let alpha = 1;
|
|
40
|
+
* setInterval(() => {
|
|
41
|
+
* alpha -= 0.01;
|
|
42
|
+
* if (alpha <= 0) alpha = 1;
|
|
43
|
+
* render.alpha = alpha;
|
|
44
|
+
* }, 16);
|
|
45
|
+
*
|
|
46
|
+
* // 设置渲染层级
|
|
47
|
+
* render.zIndex = 100; // 越大越靠前
|
|
48
|
+
*
|
|
49
|
+
* // 启用子对象排序
|
|
50
|
+
* const container = new GameObject('container');
|
|
51
|
+
* container.addComponent(new Render({
|
|
52
|
+
* sortableChildren: true // 子对象将按 zIndex 排序
|
|
53
|
+
* }));
|
|
54
|
+
*
|
|
55
|
+
* // 设置渲染分辨率
|
|
56
|
+
* const text = new GameObject('text');
|
|
57
|
+
* text.addComponent(new Text({ text: 'High Resolution' }));
|
|
58
|
+
* text.addComponent(new Render({
|
|
59
|
+
* resolution: 2 // 2倍分辨率，使渲染更清晰
|
|
60
|
+
* }));
|
|
61
|
+
* ```
|
|
62
|
+
*/
|
|
9
63
|
export declare class Render extends Component<RenderParams> {
|
|
64
|
+
/** 组件名称 */
|
|
10
65
|
static componentName: string;
|
|
66
|
+
/** 排序脏标记 */
|
|
11
67
|
sortDirty: boolean;
|
|
68
|
+
/** 是否可见 */
|
|
12
69
|
visible: boolean;
|
|
70
|
+
/** 透明度（0-1，0 为完全透明，1 为完全不透明） */
|
|
13
71
|
alpha: number;
|
|
72
|
+
/** 渲染层级（数值越大越靠前） */
|
|
14
73
|
zIndex: number;
|
|
74
|
+
/** 是否对子对象按 zIndex 排序 */
|
|
15
75
|
sortableChildren: boolean;
|
|
76
|
+
/** 渲染分辨率（值越大越清晰但性能消耗越大，默认为 1） */
|
|
77
|
+
resolution: number;
|
|
78
|
+
/**
|
|
79
|
+
* 初始化组件
|
|
80
|
+
* @param obj - 初始化参数
|
|
81
|
+
* @param obj.visible - 是否可见
|
|
82
|
+
* @param obj.alpha - 透明度
|
|
83
|
+
* @param obj.zIndex - 渲染层级
|
|
84
|
+
* @param obj.sortableChildren - 是否对子对象排序
|
|
85
|
+
* @param obj.resolution - 渲染分辨率
|
|
86
|
+
*/
|
|
16
87
|
init(obj?: RenderParams): void;
|
|
17
88
|
}
|
|
18
89
|
|
|
@@ -21,6 +92,7 @@ export declare interface RenderParams {
|
|
|
21
92
|
zIndex?: number;
|
|
22
93
|
visible?: boolean;
|
|
23
94
|
sortableChildren?: boolean;
|
|
95
|
+
resolution?: number;
|
|
24
96
|
}
|
|
25
97
|
|
|
26
98
|
export declare class RenderSystem extends Renderer {
|
|
@@ -36,6 +108,10 @@ export declare class RenderSystem extends Renderer {
|
|
|
36
108
|
change(changed: ComponentChanged): void;
|
|
37
109
|
remove(changed: ComponentChanged): void;
|
|
38
110
|
setDirty(changed: ComponentChanged): void;
|
|
111
|
+
/**
|
|
112
|
+
* 递归应用 resolution 到容器中所有支持该属性的子对象
|
|
113
|
+
*/
|
|
114
|
+
private applyResolution;
|
|
39
115
|
}
|
|
40
116
|
|
|
41
117
|
export { }
|
|
@@ -24,19 +24,90 @@ function __decorate(decorators, target, key, desc) {
|
|
|
24
24
|
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
25
25
|
}
|
|
26
26
|
|
|
27
|
+
/**
|
|
28
|
+
* 渲染属性组件
|
|
29
|
+
*
|
|
30
|
+
* Render 组件控制游戏对象的渲染相关属性，如可见性、透明度、层级等。
|
|
31
|
+
* 这些属性影响对象的显示效果和渲染顺序，
|
|
32
|
+
* 适用于需要控制显示状态、淡入淡出、层级排序等场景。
|
|
33
|
+
*
|
|
34
|
+
* 主要属性：
|
|
35
|
+
* - visible - 控制对象是否可见
|
|
36
|
+
* - alpha - 控制对象透明度（0-1）
|
|
37
|
+
* - zIndex - 控制对象渲染层级
|
|
38
|
+
* - sortableChildren - 是否对子对象按 zIndex 排序
|
|
39
|
+
* - resolution - 渲染分辨率，值越大越清晰但性能消耗越大
|
|
40
|
+
*
|
|
41
|
+
* @example
|
|
42
|
+
* ```typescript
|
|
43
|
+
* // 创建带渲染属性的对象
|
|
44
|
+
* const sprite = new GameObject('sprite');
|
|
45
|
+
* sprite.addComponent(new Img({ resource: 'player' }));
|
|
46
|
+
* sprite.addComponent(new Render({
|
|
47
|
+
* visible: true,
|
|
48
|
+
* alpha: 1,
|
|
49
|
+
* zIndex: 10
|
|
50
|
+
* }));
|
|
51
|
+
*
|
|
52
|
+
* // 控制可见性
|
|
53
|
+
* const render = sprite.getComponent('Render');
|
|
54
|
+
* render.visible = false; // 隐藏对象
|
|
55
|
+
*
|
|
56
|
+
* // 淡入淡出效果
|
|
57
|
+
* let alpha = 1;
|
|
58
|
+
* setInterval(() => {
|
|
59
|
+
* alpha -= 0.01;
|
|
60
|
+
* if (alpha <= 0) alpha = 1;
|
|
61
|
+
* render.alpha = alpha;
|
|
62
|
+
* }, 16);
|
|
63
|
+
*
|
|
64
|
+
* // 设置渲染层级
|
|
65
|
+
* render.zIndex = 100; // 越大越靠前
|
|
66
|
+
*
|
|
67
|
+
* // 启用子对象排序
|
|
68
|
+
* const container = new GameObject('container');
|
|
69
|
+
* container.addComponent(new Render({
|
|
70
|
+
* sortableChildren: true // 子对象将按 zIndex 排序
|
|
71
|
+
* }));
|
|
72
|
+
*
|
|
73
|
+
* // 设置渲染分辨率
|
|
74
|
+
* const text = new GameObject('text');
|
|
75
|
+
* text.addComponent(new Text({ text: 'High Resolution' }));
|
|
76
|
+
* text.addComponent(new Render({
|
|
77
|
+
* resolution: 2 // 2倍分辨率，使渲染更清晰
|
|
78
|
+
* }));
|
|
79
|
+
* ```
|
|
80
|
+
*/
|
|
27
81
|
class Render$2 extends Component {
|
|
28
82
|
constructor() {
|
|
29
83
|
super(...arguments);
|
|
84
|
+
/** 排序脏标记 */
|
|
30
85
|
this.sortDirty = false;
|
|
86
|
+
/** 是否可见 */
|
|
31
87
|
this.visible = true;
|
|
88
|
+
/** 透明度（0-1，0 为完全透明，1 为完全不透明） */
|
|
32
89
|
this.alpha = 1;
|
|
90
|
+
/** 渲染层级（数值越大越靠前） */
|
|
33
91
|
this.zIndex = 0;
|
|
92
|
+
/** 是否对子对象按 zIndex 排序 */
|
|
34
93
|
this.sortableChildren = false;
|
|
94
|
+
/** 渲染分辨率（值越大越清晰但性能消耗越大，默认为 1） */
|
|
95
|
+
this.resolution = 1;
|
|
35
96
|
}
|
|
97
|
+
/**
|
|
98
|
+
* 初始化组件
|
|
99
|
+
* @param obj - 初始化参数
|
|
100
|
+
* @param obj.visible - 是否可见
|
|
101
|
+
* @param obj.alpha - 透明度
|
|
102
|
+
* @param obj.zIndex - 渲染层级
|
|
103
|
+
* @param obj.sortableChildren - 是否对子对象排序
|
|
104
|
+
* @param obj.resolution - 渲染分辨率
|
|
105
|
+
*/
|
|
36
106
|
init(obj) {
|
|
37
107
|
obj && Object.assign(this, obj);
|
|
38
108
|
}
|
|
39
109
|
}
|
|
110
|
+
/** 组件名称 */
|
|
40
111
|
Render$2.componentName = 'Render';
|
|
41
112
|
__decorate([
|
|
42
113
|
type('boolean')
|
|
@@ -51,7 +122,11 @@ __decorate([
|
|
|
51
122
|
], Render$2.prototype, "zIndex", void 0);
|
|
52
123
|
__decorate([
|
|
53
124
|
type('boolean')
|
|
54
|
-
], Render$2.prototype, "sortableChildren", void 0);
|
|
125
|
+
], Render$2.prototype, "sortableChildren", void 0);
|
|
126
|
+
__decorate([
|
|
127
|
+
type('number'),
|
|
128
|
+
step(0.1)
|
|
129
|
+
], Render$2.prototype, "resolution", void 0);
|
|
55
130
|
|
|
56
131
|
let Render = class Render extends Renderer {
|
|
57
132
|
constructor() {
|
|
@@ -83,11 +158,27 @@ let Render = class Render extends Renderer {
|
|
|
83
158
|
add(changed) {
|
|
84
159
|
if (changed.component.name === 'Render') {
|
|
85
160
|
this.setDirty(changed);
|
|
161
|
+
// 初始化时应用 resolution
|
|
162
|
+
const component = changed.component;
|
|
163
|
+
const container = this.containerManager.getContainer(changed.gameObject.id);
|
|
164
|
+
if (component.resolution !== undefined && component.resolution > 0) {
|
|
165
|
+
this.applyResolution(container, component.resolution);
|
|
166
|
+
}
|
|
86
167
|
}
|
|
87
168
|
}
|
|
88
169
|
change(changed) {
|
|
89
|
-
if (changed.component.name === 'Render'
|
|
90
|
-
|
|
170
|
+
if (changed.component.name === 'Render') {
|
|
171
|
+
if (changed.prop.prop[0] === 'zIndex') {
|
|
172
|
+
this.setDirty(changed);
|
|
173
|
+
}
|
|
174
|
+
else if (changed.prop.prop[0] === 'resolution') {
|
|
175
|
+
// 当 resolution 改变时，重新应用到子对象
|
|
176
|
+
const component = changed.component;
|
|
177
|
+
const container = this.containerManager.getContainer(changed.gameObject.id);
|
|
178
|
+
if (component.resolution !== undefined && component.resolution > 0) {
|
|
179
|
+
this.applyResolution(container, component.resolution);
|
|
180
|
+
}
|
|
181
|
+
}
|
|
91
182
|
}
|
|
92
183
|
}
|
|
93
184
|
remove(changed) {
|
|
@@ -102,11 +193,26 @@ let Render = class Render extends Renderer {
|
|
|
102
193
|
parentRender.sortDirty = true;
|
|
103
194
|
}
|
|
104
195
|
}
|
|
196
|
+
/**
|
|
197
|
+
* 递归应用 resolution 到容器中所有支持该属性的子对象
|
|
198
|
+
*/
|
|
199
|
+
applyResolution(container, resolution) {
|
|
200
|
+
if (!container)
|
|
201
|
+
return;
|
|
202
|
+
window.requestAnimationFrame(() => {
|
|
203
|
+
// 遍历容器的所有子对象
|
|
204
|
+
if (container.children && Array.isArray(container.children)) {
|
|
205
|
+
for (const child of container.children) {
|
|
206
|
+
child.resolution = resolution;
|
|
207
|
+
}
|
|
208
|
+
}
|
|
209
|
+
});
|
|
210
|
+
}
|
|
105
211
|
};
|
|
106
212
|
Render.systemName = 'Render';
|
|
107
213
|
Render = __decorate([
|
|
108
214
|
decorators.componentObserver({
|
|
109
|
-
Render: ['zIndex'],
|
|
215
|
+
Render: ['zIndex', 'resolution'],
|
|
110
216
|
})
|
|
111
217
|
], Render);
|
|
112
218
|
var Render$1 = Render;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@eva/plugin-renderer-render",
|
|
3
|
-
"version": "2.0.1-beta.
|
|
3
|
+
"version": "2.0.1-beta.30",
|
|
4
4
|
"description": "@eva/plugin-renderer-render",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"module": "dist/plugin-renderer-render.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.
|
|
22
|
+
"@eva/plugin-renderer": "2.0.1-beta.30",
|
|
23
|
+
"@eva/renderer-adapter": "2.0.1-beta.30",
|
|
24
|
+
"@eva/eva.js": "2.0.1-beta.30",
|
|
25
25
|
"pixi.js": "^8.8.1"
|
|
26
26
|
}
|
|
27
27
|
}
|