diff --git a/cocos/spine/skeleton.ts b/cocos/spine/skeleton.ts index 62e7446cacd..2734df0e1ea 100644 --- a/cocos/spine/skeleton.ts +++ b/cocos/spine/skeleton.ts @@ -654,6 +654,9 @@ export class Skeleton extends UIRenderer { public __preload (): void { super.__preload(); + if (EDITOR_NOT_IN_PREVIEW) { + this.paused = true; + } this._updateSkeletonData(); this._updateDebugDraw(); } diff --git a/editor/i18n/en/assets.js b/editor/i18n/en/assets.js index e7ebef09e9b..1bb98009914 100644 --- a/editor/i18n/en/assets.js +++ b/editor/i18n/en/assets.js @@ -14,7 +14,8 @@ module.exports = { spine: { skin: 'Skin', animation: 'Animation', - loop: 'loop', + loop: 'Loop', + timeScale: 'Rate', }, }, diff --git a/editor/i18n/zh/assets.js b/editor/i18n/zh/assets.js index c042fb44007..a189c139a81 100644 --- a/editor/i18n/zh/assets.js +++ b/editor/i18n/zh/assets.js @@ -15,6 +15,7 @@ module.exports = { skin: '皮肤', animation: '动画', loop: '循环', + timeScale: '速率', }, }, diff --git a/editor/inspector/assets/spine-preview.js b/editor/inspector/assets/spine-preview.js index 5a79b52ece4..1d1dd9c5ab7 100644 --- a/editor/inspector/assets/spine-preview.js +++ b/editor/inspector/assets/spine-preview.js @@ -16,6 +16,10 @@ exports.template = /* html */` + + + +
@@ -46,16 +50,14 @@ exports.style = /* css */` .preview > .control { padding-top: 8px; padding-bottom: 8px; + padding-right: 8px; display: flex; - width: 100%; flex-direction: column; - align-items: flex-start; } .preview > .control[hidden] { display: none; } .preview > .control > ui-prop { - min-width: 250px; } .preview > .image { height: var(--inspector-footer-preview-height, 200px); @@ -102,6 +104,7 @@ exports.$ = { stop: '.stop', duration: '.duration', loop: '.loop-check-box', + timeScale: '.time-scale-slider', animationCtrl: '.anim-control', }; @@ -191,6 +194,7 @@ const Elements = { close() { const panel = this; + callFunction('stop'); panel.resizeObserver.unobserve(panel.$.image); }, }, @@ -216,11 +220,11 @@ const Elements = { panel.animationIndex = 0; panel.$.skinSelectPro.addEventListener('confirm', (event) => { - callFunction('setSkinIndex', Number(event.detail)).then(() => {}); + callFunction('setSkinIndex', Number(event.detail)); }); panel.$.animationSelectPro.addEventListener('confirm', (event) => { panel.animationIndex = Number(event.detail); - callFunction('play', panel.animationIndex).then(() => {}); + callFunction('play', panel.animationIndex); }); panel.spinUpdate = Elements.spine.update.bind(panel); }, @@ -229,6 +233,7 @@ const Elements = { if (!info) { panel.$.loop.setAttribute('disabled', ''); + panel.$.timeScale.setAttribute('disabled', ''); panel.$.play.setAttribute('disabled', ''); panel.$.stop.setAttribute('disabled', ''); panel.$.skinSelectPro.setAttribute('disabled', ''); @@ -237,6 +242,7 @@ const Elements = { } panel.$.loop.removeAttribute('disabled'); + panel.$.timeScale.removeAttribute('disabled'); panel.$.play.removeAttribute('disabled'); panel.$.stop.removeAttribute('disabled'); panel.$.skinSelectPro.removeAttribute('disabled'); @@ -246,7 +252,7 @@ const Elements = { Elements.spine.updateEnum.call(panel, panel.$.animationSelectPro, info.animation); Elements.spine.updateDuration.call(panel, 0, info.animation.durations[panel.animationIndex]); Elements.control.update.call(panel, false); - Elements.control.updateLoop.call(panel, info.loop); + Elements.control.updateInfo.call(panel, info); panel.isPreviewDataDirty = true; }, updateDuration(delay, duration) { @@ -259,23 +265,27 @@ const Elements = { ready() { const panel = this; + panel.$.timeScale.addEventListener('change', (event) => { + callFunction('setTimeScale', Number(event.target.value)); + }); panel.$.loop.addEventListener('confirm', (event) => { - callFunction('setLoop', Boolean(event.target.value)).then(() => {}); + callFunction('setLoop', Boolean(event.target.value)); }); panel.$.play.addEventListener('click', () => { - callFunction('play', panel.animationIndex).then(() => {}); + callFunction('play', panel.animationIndex); }); panel.$.pause.addEventListener('confirm', (event) => { - callFunction('pause').then(() => {}); + callFunction('pause'); }); panel.$.stop.addEventListener('confirm', (event) => { - callFunction('stop').then(() => {}); + callFunction('stop'); }); }, - updateLoop(loop) { + updateInfo(info) { const panel = this; - panel.$.loop.setAttribute('value', Boolean(loop)); + panel.$.loop.setAttribute('value', Boolean(info.loop)); + panel.$.timeScale.setAttribute('value', Number(info.timeScale)); }, update(playing) { const panel = this; @@ -334,7 +344,6 @@ exports.methods = { onAnimationUpdate(playing, delay, duration) { const panel = this; - // this.$.playState.setAttribute(''); Elements.spine.updateDuration.call(panel, delay, duration); Elements.control.update.call(panel, playing); panel.isPreviewDataDirty = true;