@eva/plugin-renderer-sprite-animation 2.1.0-beta.2 → 2.1.0-beta.3
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/package.json +4 -4
- package/dist/EVA.plugin.renderer.spriteAnimation.js +0 -453
- package/dist/EVA.plugin.renderer.spriteAnimation.min.js +0 -1
- package/dist/plugin-renderer-sprite-animation.cjs.js +0 -407
- package/dist/plugin-renderer-sprite-animation.cjs.prod.js +0 -1
- package/dist/plugin-renderer-sprite-animation.d.ts +0 -147
- package/dist/plugin-renderer-sprite-animation.esm.js +0 -402
|
@@ -1,407 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
var eva_js = require('@eva/eva.js');
|
|
6
|
-
var inspectorDecorator = require('@eva/inspector-decorator');
|
|
7
|
-
var pluginRenderer = require('@eva/plugin-renderer');
|
|
8
|
-
var rendererAdapter = require('@eva/renderer-adapter');
|
|
9
|
-
var pixi_js = require('pixi.js');
|
|
10
|
-
|
|
11
|
-
/******************************************************************************
|
|
12
|
-
Copyright (c) Microsoft Corporation.
|
|
13
|
-
|
|
14
|
-
Permission to use, copy, modify, and/or distribute this software for any
|
|
15
|
-
purpose with or without fee is hereby granted.
|
|
16
|
-
|
|
17
|
-
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
|
18
|
-
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
|
19
|
-
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
|
20
|
-
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
|
21
|
-
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
|
22
|
-
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
|
23
|
-
PERFORMANCE OF THIS SOFTWARE.
|
|
24
|
-
***************************************************************************** */
|
|
25
|
-
|
|
26
|
-
function __decorate(decorators, target, key, desc) {
|
|
27
|
-
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
28
|
-
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
29
|
-
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
30
|
-
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
function __metadata(metadataKey, metadataValue) {
|
|
34
|
-
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
function __awaiter(thisArg, _arguments, P, generator) {
|
|
38
|
-
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
39
|
-
return new (P || (P = Promise))(function (resolve, reject) {
|
|
40
|
-
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
41
|
-
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
42
|
-
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
43
|
-
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
44
|
-
});
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
|
|
48
|
-
var e = new Error(message);
|
|
49
|
-
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
|
|
50
|
-
};
|
|
51
|
-
|
|
52
|
-
/**
|
|
53
|
-
* 精灵动画组件
|
|
54
|
-
*
|
|
55
|
-
* SpriteAnimation 组件用于播放帧动画(序列帧动画)。
|
|
56
|
-
* 通过快速切换精灵图集中的不同帧,实现动画效果,
|
|
57
|
-
* 适用于角色动作、特效、UI 动画等场景。
|
|
58
|
-
*
|
|
59
|
-
* 主要功能:
|
|
60
|
-
* - 支持自动播放和手动控制
|
|
61
|
-
* - 可配置播放速度和循环次数
|
|
62
|
-
* - 支持跳转到指定帧
|
|
63
|
-
* - 提供播放完成事件
|
|
64
|
-
* - 支持 forwards 模式(停在最后一帧)
|
|
65
|
-
*
|
|
66
|
-
* @example
|
|
67
|
-
* ```typescript
|
|
68
|
-
* // 基础用法 - 自动播放
|
|
69
|
-
* const character = new GameObject('character');
|
|
70
|
-
* character.addComponent(new SpriteAnimation({
|
|
71
|
-
* resource: 'walkAnimation', // 帧动画资源
|
|
72
|
-
* autoPlay: true,
|
|
73
|
-
* speed: 100 // 播放速度(毫秒/帧)
|
|
74
|
-
* }));
|
|
75
|
-
*
|
|
76
|
-
* // 控制播放
|
|
77
|
-
* const anim = character.getComponent('SpriteAnimation');
|
|
78
|
-
* anim.play(3); // 播放 3 次
|
|
79
|
-
* anim.play(Infinity); // 无限循环
|
|
80
|
-
* anim.stop(); // 停止播放
|
|
81
|
-
* anim.gotoAndPlay(10); // 跳到第 10 帧并播放
|
|
82
|
-
* anim.gotoAndStop(0); // 跳到第 0 帧并停止
|
|
83
|
-
*
|
|
84
|
-
* // 监听播放完成
|
|
85
|
-
* anim.on('complete', () => {
|
|
86
|
-
* console.log('动画播放完成');
|
|
87
|
-
* });
|
|
88
|
-
* ```
|
|
89
|
-
*/
|
|
90
|
-
class SpriteAnimation$2 extends eva_js.Component {
|
|
91
|
-
constructor(params) {
|
|
92
|
-
super(params);
|
|
93
|
-
/** 帧动画资源名称 */
|
|
94
|
-
this.resource = '';
|
|
95
|
-
/** 是否自动播放 */
|
|
96
|
-
this.autoPlay = true;
|
|
97
|
-
/** 播放速度(毫秒/帧) */
|
|
98
|
-
this.speed = 100;
|
|
99
|
-
/** 是否在最后一帧停止(forwards 模式) */
|
|
100
|
-
this.forwards = false;
|
|
101
|
-
/** 命名动画片段,供编辑器和脚本按动作名播放 */
|
|
102
|
-
this.animations = {};
|
|
103
|
-
/** 等待播放标志(资源加载前调用 play) */
|
|
104
|
-
this.waitPlay = false;
|
|
105
|
-
this.waitLoop = false;
|
|
106
|
-
/** 等待停止标志 */
|
|
107
|
-
this.waitStop = false;
|
|
108
|
-
/** 播放次数 */
|
|
109
|
-
this.times = Infinity;
|
|
110
|
-
/** 当前已播放次数 */
|
|
111
|
-
this.count = 0;
|
|
112
|
-
/** 是否播放完成 */
|
|
113
|
-
this.complete = false;
|
|
114
|
-
this.listenerBound = false;
|
|
115
|
-
this.init(params);
|
|
116
|
-
}
|
|
117
|
-
/**
|
|
118
|
-
* 初始化组件
|
|
119
|
-
* @param obj - 初始化参数
|
|
120
|
-
* @param obj.resource - 帧动画资源名称
|
|
121
|
-
* @param obj.autoPlay - 是否自动播放
|
|
122
|
-
* @param obj.speed - 播放速度
|
|
123
|
-
* @param obj.forwards - 是否停在最后一帧
|
|
124
|
-
*/
|
|
125
|
-
init(obj) {
|
|
126
|
-
obj && Object.assign(this, obj);
|
|
127
|
-
if (!this.listenerBound) {
|
|
128
|
-
this.listenerBound = true;
|
|
129
|
-
this.on('loop', () => {
|
|
130
|
-
var _a;
|
|
131
|
-
if (++this.count >= this.times) {
|
|
132
|
-
if (this.forwards) {
|
|
133
|
-
this.gotoAndStop(this.totalFrames - 1);
|
|
134
|
-
}
|
|
135
|
-
else {
|
|
136
|
-
(_a = this.animate) === null || _a === void 0 ? void 0 : _a.stop();
|
|
137
|
-
}
|
|
138
|
-
this.complete = true;
|
|
139
|
-
this.emit('complete');
|
|
140
|
-
}
|
|
141
|
-
});
|
|
142
|
-
this.on('complete', () => {
|
|
143
|
-
var _a;
|
|
144
|
-
(_a = this.onComplete) === null || _a === void 0 ? void 0 : _a.call(this);
|
|
145
|
-
});
|
|
146
|
-
this.on('frameChange', () => {
|
|
147
|
-
var _a;
|
|
148
|
-
(_a = this.onFrameChange) === null || _a === void 0 ? void 0 : _a.call(this, this.currentFrame);
|
|
149
|
-
});
|
|
150
|
-
}
|
|
151
|
-
}
|
|
152
|
-
play(nameOrTimes = Infinity, loop = false) {
|
|
153
|
-
let times = typeof nameOrTimes === 'number' ? nameOrTimes : loop ? Infinity : 1;
|
|
154
|
-
let startFrame;
|
|
155
|
-
if (typeof nameOrTimes === 'string') {
|
|
156
|
-
this.currentAnimation = nameOrTimes;
|
|
157
|
-
const clip = this.animations[nameOrTimes];
|
|
158
|
-
if (clip) {
|
|
159
|
-
startFrame = clip.start;
|
|
160
|
-
if (clip.speed !== undefined)
|
|
161
|
-
this.speed = clip.speed;
|
|
162
|
-
}
|
|
163
|
-
}
|
|
164
|
-
if (times === 0) {
|
|
165
|
-
return;
|
|
166
|
-
}
|
|
167
|
-
this.times = times;
|
|
168
|
-
if (!this.animate) {
|
|
169
|
-
this.waitPlay = true;
|
|
170
|
-
this.waitAnimation = typeof nameOrTimes === 'string' ? nameOrTimes : undefined;
|
|
171
|
-
this.waitLoop = loop;
|
|
172
|
-
}
|
|
173
|
-
else {
|
|
174
|
-
if (this.complete) {
|
|
175
|
-
this.gotoAndStop(0);
|
|
176
|
-
}
|
|
177
|
-
if (startFrame !== undefined) {
|
|
178
|
-
this.animate.gotoAndPlay(startFrame);
|
|
179
|
-
}
|
|
180
|
-
else {
|
|
181
|
-
this.animate.play();
|
|
182
|
-
}
|
|
183
|
-
this.count = 0;
|
|
184
|
-
this.complete = false;
|
|
185
|
-
}
|
|
186
|
-
}
|
|
187
|
-
stop() {
|
|
188
|
-
if (!this.animate) {
|
|
189
|
-
this.waitStop = true;
|
|
190
|
-
}
|
|
191
|
-
else {
|
|
192
|
-
this.animate.stop();
|
|
193
|
-
}
|
|
194
|
-
}
|
|
195
|
-
set animate(val) {
|
|
196
|
-
this._animate = val;
|
|
197
|
-
if (this.waitPlay) {
|
|
198
|
-
this.waitPlay = false;
|
|
199
|
-
const waitAnimation = this.waitAnimation;
|
|
200
|
-
this.waitAnimation = undefined;
|
|
201
|
-
this.play(waitAnimation !== null && waitAnimation !== void 0 ? waitAnimation : this.times, this.waitLoop);
|
|
202
|
-
}
|
|
203
|
-
if (this.waitStop) {
|
|
204
|
-
this.waitStop = false;
|
|
205
|
-
this.stop();
|
|
206
|
-
}
|
|
207
|
-
}
|
|
208
|
-
get animate() {
|
|
209
|
-
return this._animate;
|
|
210
|
-
}
|
|
211
|
-
gotoAndPlay(frameNumber) {
|
|
212
|
-
this.animate.gotoAndPlay(frameNumber);
|
|
213
|
-
}
|
|
214
|
-
gotoAndStop(frameNumber) {
|
|
215
|
-
this.animate.gotoAndStop(frameNumber);
|
|
216
|
-
}
|
|
217
|
-
get currentFrame() {
|
|
218
|
-
var _a, _b;
|
|
219
|
-
return (_b = (_a = this.animate) === null || _a === void 0 ? void 0 : _a.animatedSprite) === null || _b === void 0 ? void 0 : _b.currentFrame;
|
|
220
|
-
}
|
|
221
|
-
get totalFrames() {
|
|
222
|
-
var _a, _b;
|
|
223
|
-
return (_b = (_a = this.animate) === null || _a === void 0 ? void 0 : _a.animatedSprite) === null || _b === void 0 ? void 0 : _b.totalFrames;
|
|
224
|
-
}
|
|
225
|
-
}
|
|
226
|
-
/** 组件名称 */
|
|
227
|
-
SpriteAnimation$2.componentName = 'SpriteAnimation';
|
|
228
|
-
__decorate([
|
|
229
|
-
inspectorDecorator.type('string'),
|
|
230
|
-
__metadata("design:type", String)
|
|
231
|
-
], SpriteAnimation$2.prototype, "resource", void 0);
|
|
232
|
-
__decorate([
|
|
233
|
-
inspectorDecorator.type('boolean'),
|
|
234
|
-
__metadata("design:type", Boolean)
|
|
235
|
-
], SpriteAnimation$2.prototype, "autoPlay", void 0);
|
|
236
|
-
__decorate([
|
|
237
|
-
inspectorDecorator.type('number'),
|
|
238
|
-
inspectorDecorator.step(10),
|
|
239
|
-
__metadata("design:type", Number)
|
|
240
|
-
], SpriteAnimation$2.prototype, "speed", void 0);
|
|
241
|
-
__decorate([
|
|
242
|
-
inspectorDecorator.type('boolean'),
|
|
243
|
-
__metadata("design:type", Boolean)
|
|
244
|
-
], SpriteAnimation$2.prototype, "forwards", void 0);
|
|
245
|
-
|
|
246
|
-
const resourceKeySplit = '_s|r|c_';
|
|
247
|
-
eva_js.resource.registerInstance(eva_js.RESOURCE_TYPE.SPRITE_ANIMATION, ({ name, data }) => {
|
|
248
|
-
return new Promise(r => {
|
|
249
|
-
var _a;
|
|
250
|
-
const textureObj = data.json.data;
|
|
251
|
-
const texture = data.image instanceof pixi_js.Texture ? data.image : pixi_js.Texture.from(data.image);
|
|
252
|
-
// Normalize Phaser JSONArray (`frames: [...]`) to PixiJS-compatible hash (`frames: {name: {...}}`).
|
|
253
|
-
let frames = textureObj.frames || {};
|
|
254
|
-
if (Array.isArray(frames)) {
|
|
255
|
-
const hashFrames = {};
|
|
256
|
-
for (const f of frames) {
|
|
257
|
-
const key = (_a = f.filename) !== null && _a !== void 0 ? _a : f.name;
|
|
258
|
-
if (key)
|
|
259
|
-
hashFrames[key] = f;
|
|
260
|
-
}
|
|
261
|
-
frames = hashFrames;
|
|
262
|
-
}
|
|
263
|
-
const animations = textureObj.animations || {};
|
|
264
|
-
const newAnimations = {};
|
|
265
|
-
const newFrames = {};
|
|
266
|
-
for (const key in frames) {
|
|
267
|
-
const newKey = name + resourceKeySplit + key;
|
|
268
|
-
newFrames[newKey] = frames[key];
|
|
269
|
-
}
|
|
270
|
-
for (const key in animations) {
|
|
271
|
-
const spriteList = [];
|
|
272
|
-
if (animations[key] && animations[key].length >= 0) {
|
|
273
|
-
for (const spriteName of animations[key]) {
|
|
274
|
-
const newSpriteName = name + resourceKeySplit + spriteName;
|
|
275
|
-
spriteList.push(newSpriteName);
|
|
276
|
-
}
|
|
277
|
-
}
|
|
278
|
-
newAnimations[key] = spriteList;
|
|
279
|
-
}
|
|
280
|
-
const spriteSheet = new pixi_js.Spritesheet(texture, Object.assign(Object.assign({}, textureObj), { frames: newFrames, animations: newAnimations }));
|
|
281
|
-
spriteSheet.parse().then(() => {
|
|
282
|
-
const { textures } = spriteSheet;
|
|
283
|
-
const spriteFrames = [];
|
|
284
|
-
for (const key in textures) {
|
|
285
|
-
spriteFrames.push(textures[key]);
|
|
286
|
-
}
|
|
287
|
-
r(spriteFrames);
|
|
288
|
-
});
|
|
289
|
-
});
|
|
290
|
-
});
|
|
291
|
-
eva_js.resource.registerDestroy(eva_js.RESOURCE_TYPE.SPRITE_ANIMATION, ({ instance }) => {
|
|
292
|
-
if (!instance)
|
|
293
|
-
return;
|
|
294
|
-
for (const texture of instance) {
|
|
295
|
-
texture.destroy(true);
|
|
296
|
-
}
|
|
297
|
-
});
|
|
298
|
-
let SpriteAnimation = class SpriteAnimation extends pluginRenderer.Renderer {
|
|
299
|
-
constructor() {
|
|
300
|
-
super(...arguments);
|
|
301
|
-
this.name = 'SpriteAnimationSystem';
|
|
302
|
-
this.animates = {};
|
|
303
|
-
this.autoPlay = {};
|
|
304
|
-
}
|
|
305
|
-
init() {
|
|
306
|
-
this.renderSystem = this.game.getSystem(pluginRenderer.RendererSystem);
|
|
307
|
-
this.renderSystem.rendererManager.register(this);
|
|
308
|
-
}
|
|
309
|
-
rendererUpdate(gameObject) {
|
|
310
|
-
const { width, height } = gameObject.transform.size;
|
|
311
|
-
if (this.animates[gameObject.id]) {
|
|
312
|
-
this.animates[gameObject.id].animatedSprite.width = width;
|
|
313
|
-
this.animates[gameObject.id].animatedSprite.height = height;
|
|
314
|
-
}
|
|
315
|
-
}
|
|
316
|
-
componentChanged(changed) {
|
|
317
|
-
return __awaiter(this, void 0, void 0, function* () {
|
|
318
|
-
const gameObjectId = changed.gameObject.id;
|
|
319
|
-
if (changed.componentName === 'SpriteAnimation') {
|
|
320
|
-
const component = changed.component;
|
|
321
|
-
this.autoPlay[changed.gameObject.id] = component.autoPlay;
|
|
322
|
-
if (changed.type === eva_js.OBSERVER_TYPE.ADD) {
|
|
323
|
-
const asyncId = this.increaseAsyncId(gameObjectId);
|
|
324
|
-
const { instance: frames } = yield eva_js.resource.getResource(component.resource);
|
|
325
|
-
if (!this.validateAsyncId(gameObjectId, asyncId))
|
|
326
|
-
return;
|
|
327
|
-
if (!frames) {
|
|
328
|
-
console.error(`GameObject:${changed.gameObject.name}'s Img resource load error`);
|
|
329
|
-
}
|
|
330
|
-
this.add({
|
|
331
|
-
frames: frames,
|
|
332
|
-
id: changed.gameObject.id,
|
|
333
|
-
component,
|
|
334
|
-
});
|
|
335
|
-
}
|
|
336
|
-
else if (changed.type === eva_js.OBSERVER_TYPE.CHANGE) {
|
|
337
|
-
if (changed.prop && changed.prop.prop[0] === 'speed') {
|
|
338
|
-
this.animates[changed.gameObject.id].speed = 1000 / 60 / component.speed;
|
|
339
|
-
}
|
|
340
|
-
else {
|
|
341
|
-
const asyncId = this.increaseAsyncId(gameObjectId);
|
|
342
|
-
const { instance: frames } = yield eva_js.resource.getResource(component.resource);
|
|
343
|
-
if (!this.validateAsyncId(gameObjectId, asyncId))
|
|
344
|
-
return;
|
|
345
|
-
if (!frames) {
|
|
346
|
-
console.error(`GameObject:${changed.gameObject.name}'s Img resource load error`);
|
|
347
|
-
}
|
|
348
|
-
this.change({
|
|
349
|
-
frames: frames,
|
|
350
|
-
id: changed.gameObject.id,
|
|
351
|
-
component,
|
|
352
|
-
});
|
|
353
|
-
}
|
|
354
|
-
}
|
|
355
|
-
else if (changed.type === eva_js.OBSERVER_TYPE.REMOVE) {
|
|
356
|
-
this.increaseAsyncId(gameObjectId);
|
|
357
|
-
this.remove(changed.gameObject.id);
|
|
358
|
-
}
|
|
359
|
-
}
|
|
360
|
-
});
|
|
361
|
-
}
|
|
362
|
-
add({ frames, id, component }) {
|
|
363
|
-
const animate = new rendererAdapter.SpriteAnimation({ frames });
|
|
364
|
-
this.animates[id] = animate;
|
|
365
|
-
this.containerManager.getContainer(id).addChildAt(animate.animatedSprite, 0);
|
|
366
|
-
animate.animatedSprite.onComplete = () => {
|
|
367
|
-
component.emit('complete');
|
|
368
|
-
};
|
|
369
|
-
animate.animatedSprite.onFrameChange = () => {
|
|
370
|
-
component.emit('frameChange');
|
|
371
|
-
};
|
|
372
|
-
animate.animatedSprite.onLoop = () => {
|
|
373
|
-
component.emit('loop');
|
|
374
|
-
};
|
|
375
|
-
component.animate = this.animates[id];
|
|
376
|
-
this.animates[id].speed = 1000 / 60 / component.speed;
|
|
377
|
-
if (this.autoPlay[id]) {
|
|
378
|
-
animate.animatedSprite.play();
|
|
379
|
-
}
|
|
380
|
-
}
|
|
381
|
-
change({ frames, id, component }) {
|
|
382
|
-
this.remove(id, true);
|
|
383
|
-
this.add({ frames, id, component });
|
|
384
|
-
}
|
|
385
|
-
remove(id, isChange) {
|
|
386
|
-
const animate = this.animates[id];
|
|
387
|
-
if (!animate)
|
|
388
|
-
return;
|
|
389
|
-
this.autoPlay[id] = animate.animatedSprite.playing;
|
|
390
|
-
this.containerManager.getContainer(id).removeChild(animate.animatedSprite);
|
|
391
|
-
animate.animatedSprite.destroy();
|
|
392
|
-
delete this.animates[id];
|
|
393
|
-
if (!isChange) {
|
|
394
|
-
delete this.autoPlay[id];
|
|
395
|
-
}
|
|
396
|
-
}
|
|
397
|
-
};
|
|
398
|
-
SpriteAnimation.systemName = 'SpriteAnimationSystem';
|
|
399
|
-
SpriteAnimation = __decorate([
|
|
400
|
-
eva_js.decorators.componentObserver({
|
|
401
|
-
SpriteAnimation: ['speed', 'resource'],
|
|
402
|
-
})
|
|
403
|
-
], SpriteAnimation);
|
|
404
|
-
var SpriteAnimation$1 = SpriteAnimation;
|
|
405
|
-
|
|
406
|
-
exports.SpriteAnimation = SpriteAnimation$2;
|
|
407
|
-
exports.SpriteAnimationSystem = SpriteAnimation$1;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@eva/eva.js"),t=require("@eva/inspector-decorator"),i=require("@eva/plugin-renderer"),n=require("@eva/renderer-adapter"),s=require("pixi.js");function a(e,t,i,n){var s,a=arguments.length,o=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(e,t,i,n);else for(var r=e.length-1;r>=0;r--)(s=e[r])&&(o=(a<3?s(o):a>3?s(t,i,o):s(t,i))||o);return a>3&&o&&Object.defineProperty(t,i,o),o}function o(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)}function r(e,t,i,n){return new(i||(i=Promise))(function(s,a){function o(e){try{m(n.next(e))}catch(e){a(e)}}function r(e){try{m(n.throw(e))}catch(e){a(e)}}function m(e){var t;e.done?s(e.value):(t=e.value,t instanceof i?t:new i(function(e){e(t)})).then(o,r)}m((n=n.apply(e,t||[])).next())})}"function"==typeof SuppressedError&&SuppressedError;class m extends e.Component{constructor(e){super(e),this.resource="",this.autoPlay=!0,this.speed=100,this.forwards=!1,this.animations={},this.waitPlay=!1,this.waitLoop=!1,this.waitStop=!1,this.times=1/0,this.count=0,this.complete=!1,this.listenerBound=!1,this.init(e)}init(e){e&&Object.assign(this,e),this.listenerBound||(this.listenerBound=!0,this.on("loop",()=>{var e;++this.count>=this.times&&(this.forwards?this.gotoAndStop(this.totalFrames-1):null===(e=this.animate)||void 0===e||e.stop(),this.complete=!0,this.emit("complete"))}),this.on("complete",()=>{var e;null===(e=this.onComplete)||void 0===e||e.call(this)}),this.on("frameChange",()=>{var e;null===(e=this.onFrameChange)||void 0===e||e.call(this,this.currentFrame)}))}play(e=1/0,t=!1){let i,n="number"==typeof e?e:t?1/0:1;if("string"==typeof e){this.currentAnimation=e;const t=this.animations[e];t&&(i=t.start,void 0!==t.speed&&(this.speed=t.speed))}0!==n&&(this.times=n,this.animate?(this.complete&&this.gotoAndStop(0),void 0!==i?this.animate.gotoAndPlay(i):this.animate.play(),this.count=0,this.complete=!1):(this.waitPlay=!0,this.waitAnimation="string"==typeof e?e:void 0,this.waitLoop=t))}stop(){this.animate?this.animate.stop():this.waitStop=!0}set animate(e){if(this._animate=e,this.waitPlay){this.waitPlay=!1;const e=this.waitAnimation;this.waitAnimation=void 0,this.play(null!=e?e:this.times,this.waitLoop)}this.waitStop&&(this.waitStop=!1,this.stop())}get animate(){return this._animate}gotoAndPlay(e){this.animate.gotoAndPlay(e)}gotoAndStop(e){this.animate.gotoAndStop(e)}get currentFrame(){var e,t;return null===(t=null===(e=this.animate)||void 0===e?void 0:e.animatedSprite)||void 0===t?void 0:t.currentFrame}get totalFrames(){var e,t;return null===(t=null===(e=this.animate)||void 0===e?void 0:e.animatedSprite)||void 0===t?void 0:t.totalFrames}}m.componentName="SpriteAnimation",a([t.type("string"),o("design:type",String)],m.prototype,"resource",void 0),a([t.type("boolean"),o("design:type",Boolean)],m.prototype,"autoPlay",void 0),a([t.type("number"),t.step(10),o("design:type",Number)],m.prototype,"speed",void 0),a([t.type("boolean"),o("design:type",Boolean)],m.prototype,"forwards",void 0);const c="_s|r|c_";e.resource.registerInstance(e.RESOURCE_TYPE.SPRITE_ANIMATION,({name:e,data:t})=>new Promise(i=>{var n;const a=t.json.data,o=t.image instanceof s.Texture?t.image:s.Texture.from(t.image);let r=a.frames||{};if(Array.isArray(r)){const e={};for(const t of r){const i=null!==(n=t.filename)&&void 0!==n?n:t.name;i&&(e[i]=t)}r=e}const m=a.animations||{},p={},d={};for(const t in r){d[e+c+t]=r[t]}for(const t in m){const i=[];if(m[t]&&m[t].length>=0)for(const n of m[t]){const t=e+c+n;i.push(t)}p[t]=i}const h=new s.Spritesheet(o,Object.assign(Object.assign({},a),{frames:d,animations:p}));h.parse().then(()=>{const{textures:e}=h,t=[];for(const i in e)t.push(e[i]);i(t)})})),e.resource.registerDestroy(e.RESOURCE_TYPE.SPRITE_ANIMATION,({instance:e})=>{if(e)for(const t of e)t.destroy(!0)});let p=class extends i.Renderer{constructor(){super(...arguments),this.name="SpriteAnimationSystem",this.animates={},this.autoPlay={}}init(){this.renderSystem=this.game.getSystem(i.RendererSystem),this.renderSystem.rendererManager.register(this)}rendererUpdate(e){const{width:t,height:i}=e.transform.size;this.animates[e.id]&&(this.animates[e.id].animatedSprite.width=t,this.animates[e.id].animatedSprite.height=i)}componentChanged(t){return r(this,void 0,void 0,function*(){const i=t.gameObject.id;if("SpriteAnimation"===t.componentName){const n=t.component;if(this.autoPlay[t.gameObject.id]=n.autoPlay,t.type===e.OBSERVER_TYPE.ADD){const s=this.increaseAsyncId(i),{instance:a}=yield e.resource.getResource(n.resource);if(!this.validateAsyncId(i,s))return;a||console.error(`GameObject:${t.gameObject.name}'s Img resource load error`),this.add({frames:a,id:t.gameObject.id,component:n})}else if(t.type===e.OBSERVER_TYPE.CHANGE)if(t.prop&&"speed"===t.prop.prop[0])this.animates[t.gameObject.id].speed=1e3/60/n.speed;else{const s=this.increaseAsyncId(i),{instance:a}=yield e.resource.getResource(n.resource);if(!this.validateAsyncId(i,s))return;a||console.error(`GameObject:${t.gameObject.name}'s Img resource load error`),this.change({frames:a,id:t.gameObject.id,component:n})}else t.type===e.OBSERVER_TYPE.REMOVE&&(this.increaseAsyncId(i),this.remove(t.gameObject.id))}})}add({frames:e,id:t,component:i}){const s=new n.SpriteAnimation({frames:e});this.animates[t]=s,this.containerManager.getContainer(t).addChildAt(s.animatedSprite,0),s.animatedSprite.onComplete=()=>{i.emit("complete")},s.animatedSprite.onFrameChange=()=>{i.emit("frameChange")},s.animatedSprite.onLoop=()=>{i.emit("loop")},i.animate=this.animates[t],this.animates[t].speed=1e3/60/i.speed,this.autoPlay[t]&&s.animatedSprite.play()}change({frames:e,id:t,component:i}){this.remove(t,!0),this.add({frames:e,id:t,component:i})}remove(e,t){const i=this.animates[e];i&&(this.autoPlay[e]=i.animatedSprite.playing,this.containerManager.getContainer(e).removeChild(i.animatedSprite),i.animatedSprite.destroy(),delete this.animates[e],t||delete this.autoPlay[e])}};p.systemName="SpriteAnimationSystem",p=a([e.decorators.componentObserver({SpriteAnimation:["speed","resource"]})],p);var d=p;exports.SpriteAnimation=m,exports.SpriteAnimationSystem=d;
|
|
@@ -1,147 +0,0 @@
|
|
|
1
|
-
import { Component } from '@eva/eva.js';
|
|
2
|
-
import { ComponentChanged } from '@eva/eva.js';
|
|
3
|
-
import { ContainerManager } from '@eva/plugin-renderer';
|
|
4
|
-
import { GameObject } from '@eva/eva.js';
|
|
5
|
-
import { Renderer } from '@eva/plugin-renderer';
|
|
6
|
-
import { RendererManager } from '@eva/plugin-renderer';
|
|
7
|
-
import { RendererSystem } from '@eva/plugin-renderer';
|
|
8
|
-
import { SpriteAnimation as SpriteAnimation_2 } from '@eva/renderer-adapter';
|
|
9
|
-
|
|
10
|
-
/**
|
|
11
|
-
* 精灵动画组件
|
|
12
|
-
*
|
|
13
|
-
* SpriteAnimation 组件用于播放帧动画(序列帧动画)。
|
|
14
|
-
* 通过快速切换精灵图集中的不同帧,实现动画效果,
|
|
15
|
-
* 适用于角色动作、特效、UI 动画等场景。
|
|
16
|
-
*
|
|
17
|
-
* 主要功能:
|
|
18
|
-
* - 支持自动播放和手动控制
|
|
19
|
-
* - 可配置播放速度和循环次数
|
|
20
|
-
* - 支持跳转到指定帧
|
|
21
|
-
* - 提供播放完成事件
|
|
22
|
-
* - 支持 forwards 模式(停在最后一帧)
|
|
23
|
-
*
|
|
24
|
-
* @example
|
|
25
|
-
* ```typescript
|
|
26
|
-
* // 基础用法 - 自动播放
|
|
27
|
-
* const character = new GameObject('character');
|
|
28
|
-
* character.addComponent(new SpriteAnimation({
|
|
29
|
-
* resource: 'walkAnimation', // 帧动画资源
|
|
30
|
-
* autoPlay: true,
|
|
31
|
-
* speed: 100 // 播放速度(毫秒/帧)
|
|
32
|
-
* }));
|
|
33
|
-
*
|
|
34
|
-
* // 控制播放
|
|
35
|
-
* const anim = character.getComponent('SpriteAnimation');
|
|
36
|
-
* anim.play(3); // 播放 3 次
|
|
37
|
-
* anim.play(Infinity); // 无限循环
|
|
38
|
-
* anim.stop(); // 停止播放
|
|
39
|
-
* anim.gotoAndPlay(10); // 跳到第 10 帧并播放
|
|
40
|
-
* anim.gotoAndStop(0); // 跳到第 0 帧并停止
|
|
41
|
-
*
|
|
42
|
-
* // 监听播放完成
|
|
43
|
-
* anim.on('complete', () => {
|
|
44
|
-
* console.log('动画播放完成');
|
|
45
|
-
* });
|
|
46
|
-
* ```
|
|
47
|
-
*/
|
|
48
|
-
export declare class SpriteAnimation extends Component<SpriteAnimationParams> {
|
|
49
|
-
/** 组件名称 */
|
|
50
|
-
static componentName: string;
|
|
51
|
-
/** 帧动画资源名称 */
|
|
52
|
-
resource: string;
|
|
53
|
-
/** 是否自动播放 */
|
|
54
|
-
autoPlay: boolean;
|
|
55
|
-
/** 播放速度(毫秒/帧) */
|
|
56
|
-
speed: number;
|
|
57
|
-
/** 是否在最后一帧停止(forwards 模式) */
|
|
58
|
-
forwards: boolean;
|
|
59
|
-
/** 命名动画片段,供编辑器和脚本按动作名播放 */
|
|
60
|
-
animations: Record<string, SpriteAnimationClip>;
|
|
61
|
-
/** 当前正在播放或等待播放的动画名 */
|
|
62
|
-
currentAnimation?: string;
|
|
63
|
-
/** 动画完成事件回调 */
|
|
64
|
-
onComplete?: () => void;
|
|
65
|
-
/** 帧变化事件回调 */
|
|
66
|
-
onFrameChange?: (frame?: number) => void;
|
|
67
|
-
/** 动画引擎实例 */
|
|
68
|
-
_animate: SpriteAnimation_2;
|
|
69
|
-
/** 等待播放标志(资源加载前调用 play) */
|
|
70
|
-
private waitPlay;
|
|
71
|
-
private waitAnimation?;
|
|
72
|
-
private waitLoop;
|
|
73
|
-
/** 等待停止标志 */
|
|
74
|
-
private waitStop;
|
|
75
|
-
/** 播放次数 */
|
|
76
|
-
private times;
|
|
77
|
-
/** 当前已播放次数 */
|
|
78
|
-
private count;
|
|
79
|
-
/** 是否播放完成 */
|
|
80
|
-
private complete;
|
|
81
|
-
private listenerBound;
|
|
82
|
-
constructor(params?: SpriteAnimationParams);
|
|
83
|
-
/**
|
|
84
|
-
* 初始化组件
|
|
85
|
-
* @param obj - 初始化参数
|
|
86
|
-
* @param obj.resource - 帧动画资源名称
|
|
87
|
-
* @param obj.autoPlay - 是否自动播放
|
|
88
|
-
* @param obj.speed - 播放速度
|
|
89
|
-
* @param obj.forwards - 是否停在最后一帧
|
|
90
|
-
*/
|
|
91
|
-
init(obj?: SpriteAnimationParams): void;
|
|
92
|
-
play(nameOrTimes?: string | number, loop?: boolean): void;
|
|
93
|
-
stop(): void;
|
|
94
|
-
set animate(val: SpriteAnimation_2);
|
|
95
|
-
get animate(): SpriteAnimation_2;
|
|
96
|
-
gotoAndPlay(frameNumber: any): void;
|
|
97
|
-
gotoAndStop(frameNumber: any): void;
|
|
98
|
-
get currentFrame(): number;
|
|
99
|
-
get totalFrames(): number;
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
declare interface SpriteAnimationClip {
|
|
103
|
-
start: number;
|
|
104
|
-
end: number;
|
|
105
|
-
speed?: number;
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
export declare interface SpriteAnimationParams {
|
|
109
|
-
resource: string;
|
|
110
|
-
autoPlay?: boolean;
|
|
111
|
-
speed?: number;
|
|
112
|
-
/** Stop at last frame */
|
|
113
|
-
forwards?: boolean;
|
|
114
|
-
animations?: Record<string, SpriteAnimationClip>;
|
|
115
|
-
onComplete?: () => void;
|
|
116
|
-
onFrameChange?: (frame?: number) => void;
|
|
117
|
-
}
|
|
118
|
-
|
|
119
|
-
export declare class SpriteAnimationSystem extends Renderer {
|
|
120
|
-
static systemName: string;
|
|
121
|
-
name: string;
|
|
122
|
-
animates: {
|
|
123
|
-
[propName: number]: SpriteAnimation_2;
|
|
124
|
-
};
|
|
125
|
-
autoPlay: {
|
|
126
|
-
[propName: number]: boolean;
|
|
127
|
-
};
|
|
128
|
-
renderSystem: RendererSystem;
|
|
129
|
-
rendererManager: RendererManager;
|
|
130
|
-
containerManager: ContainerManager;
|
|
131
|
-
init(): void;
|
|
132
|
-
rendererUpdate(gameObject: GameObject): void;
|
|
133
|
-
componentChanged(changed: ComponentChanged): Promise<void>;
|
|
134
|
-
add({ frames, id, component }: {
|
|
135
|
-
frames: any;
|
|
136
|
-
id: any;
|
|
137
|
-
component: any;
|
|
138
|
-
}): void;
|
|
139
|
-
change({ frames, id, component }: {
|
|
140
|
-
frames: any;
|
|
141
|
-
id: any;
|
|
142
|
-
component: any;
|
|
143
|
-
}): void;
|
|
144
|
-
remove(id: any, isChange?: boolean): void;
|
|
145
|
-
}
|
|
146
|
-
|
|
147
|
-
export { }
|