From b4d89ad0a0f3c56f0c0561c64d31b51b1e4272f4 Mon Sep 17 00:00:00 2001 From: knoxHuang Date: Thu, 21 Nov 2024 14:54:21 +0800 Subject: [PATCH 1/2] Improving the spine preview ui control --- cocos/spine/skeleton.ts | 3 +++ editor/i18n/en/assets.js | 3 ++- editor/i18n/zh/assets.js | 1 + editor/inspector/assets/spine-preview.js | 23 ++++++++++++++++------- 4 files changed, 22 insertions(+), 8 deletions(-) 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..0eeb6fb6b1f 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').then(() => {}); panel.resizeObserver.unobserve(panel.$.image); }, }, @@ -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,6 +265,9 @@ const Elements = { ready() { const panel = this; + panel.$.timeScale.addEventListener('change', (event) => { + callFunction('setTimeScale', Number(event.target.value)).then(() => {}); + }); panel.$.loop.addEventListener('confirm', (event) => { callFunction('setLoop', Boolean(event.target.value)).then(() => {}); }); @@ -272,10 +281,11 @@ const Elements = { callFunction('stop').then(() => {}); }); }, - 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; From 7b071b8c9eae517bbc5d53ce41b2508adf8bacb1 Mon Sep 17 00:00:00 2001 From: knoxHuang Date: Thu, 21 Nov 2024 15:19:48 +0800 Subject: [PATCH 2/2] refine code --- editor/inspector/assets/spine-preview.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/editor/inspector/assets/spine-preview.js b/editor/inspector/assets/spine-preview.js index 0eeb6fb6b1f..1d1dd9c5ab7 100644 --- a/editor/inspector/assets/spine-preview.js +++ b/editor/inspector/assets/spine-preview.js @@ -194,7 +194,7 @@ const Elements = { close() { const panel = this; - callFunction('stop').then(() => {}); + callFunction('stop'); panel.resizeObserver.unobserve(panel.$.image); }, }, @@ -220,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); }, @@ -266,19 +266,19 @@ const Elements = { const panel = this; panel.$.timeScale.addEventListener('change', (event) => { - callFunction('setTimeScale', Number(event.target.value)).then(() => {}); + 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'); }); }, updateInfo(info) {