Skip to content

Commit

Permalink
improve spine preview (#17989)
Browse files Browse the repository at this point in the history 
* improve spine preview

* refine i18n
  • Loading branch information
@knoxHuang
knoxHuang authored Dec 2, 2024
1 parent b645c4d commit b499e96
Show file tree
Hide file tree
Showing 3 changed files with 84 additions and 20 deletions.
5 changes: 5 additions & 0 deletions editor/i18n/en/assets.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,11 @@ module.exports = {
animation: 'Animation',
loop: 'Loop',
timeScale: 'Rate',
premultipliedAlpha: 'Premultiplied Alpha',
useTint: 'Use Tint',
debugSlots: 'Debug Slots',
debugBones: 'Debug Bones',
debugMesh: 'Debug Mesh',
},
},

Expand Down
5 changes: 5 additions & 0 deletions editor/i18n/zh/assets.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,11 @@ module.exports = {
animation: '动画',
loop: '循环',
timeScale: '速率',
premultipliedAlpha: '启用贴图预乘',
useTint: '启用染色效果',
debugSlots: '调试槽',
debugBones: '调试骨骼',
debugMesh: '调试网格',
},
},

Expand Down
94 changes: 74 additions & 20 deletions editor/inspector/assets/spine-preview.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,32 @@ exports.template = /* html */`
</ui-prop>
<ui-prop class="loop">
<ui-label slot="label" value="i18n:ENGINE.inspector.spine.loop"></ui-label>
<ui-checkbox slot="content" class="loop-check-box"></ui-checkbox>
<ui-checkbox slot="content" class="loop-checkbox"></ui-checkbox>
</ui-prop>
<ui-prop class="timeScale">
<ui-label slot="label" value="i18n:ENGINE.inspector.spine.timeScale"></ui-label>
<ui-slider slot="content" class="time-scale-slider" value="1"></ui-slider>
</ui-prop>
<ui-prop class="premultipliedAlpha">
<ui-label slot="label" value="i18n:ENGINE.inspector.spine.premultipliedAlpha"></ui-label>
<ui-checkbox slot="content" class="premultiplied-alpha-checkbox"></ui-checkbox>
</ui-prop>
<ui-prop class="useTint">
<ui-label slot="label" value="i18n:ENGINE.inspector.spine.useTint"></ui-label>
<ui-checkbox slot="content" class="use-tint-checkbox"></ui-checkbox>
</ui-prop>
<ui-prop class="debugSlots">
<ui-label slot="label" value="i18n:ENGINE.inspector.spine.debugSlots"></ui-label>
<ui-checkbox slot="content" class="debug-slots-checkbox"></ui-checkbox>
</ui-prop>
<ui-prop class="debugBones">
<ui-label slot="label" value="i18n:ENGINE.inspector.spine.debugBones"></ui-label>
<ui-checkbox slot="content" class="debug-bones-checkbox"></ui-checkbox>
</ui-prop>
<ui-prop class="debugMesh">
<ui-label slot="label" value="i18n:ENGINE.inspector.spine.debugMesh"></ui-label>
<ui-checkbox slot="content" class="debug-mesh-checkbox"></ui-checkbox>
</ui-prop>
</div>
<div class="image">
<canvas class="canvas"></canvas>
Expand Down Expand Up @@ -103,11 +123,38 @@ exports.$ = {
pause: '.pause',
stop: '.stop',
duration: '.duration',
loop: '.loop-check-box',
loop: '.loop-checkbox',
useTint: '.use-tint-checkbox',
timeScale: '.time-scale-slider',
debugSlots: '.debug-slots-checkbox',
debugBones: '.debug-bones-checkbox',
premultipliedAlpha: '.premultiplied-alpha-checkbox',
debugMesh: '.debug-mesh-checkbox',
animationCtrl: '.anim-control',
};

const CheckBox = [
'loop',
'useTint',
'debugSlots',
'debugBones',
'debugMesh',
'premultipliedAlpha',
];

const Slider = [
'timeScale',
];

const Other = [
'play',
'stop',
'skinSelectPro',
'animationSelectPro',
];

const Properties = CheckBox.concat(Slider).concat(Other);

async function callFunction(funcName, ...args) {
return await Editor.Message.request('scene', 'call-preview-function', 'scene:spine-preview', funcName, ...args);
}
Expand Down Expand Up @@ -195,6 +242,7 @@ const Elements = {
const panel = this;

callFunction('stop');
callFunction('close');
panel.resizeObserver.unobserve(panel.$.image);
},
},
Expand Down Expand Up @@ -232,21 +280,15 @@ const Elements = {
const panel = this;

if (!info) {
panel.$.loop.setAttribute('disabled', '');
panel.$.timeScale.setAttribute('disabled', '');
panel.$.play.setAttribute('disabled', '');
panel.$.stop.setAttribute('disabled', '');
panel.$.skinSelectPro.setAttribute('disabled', '');
panel.$.animationSelectPro.setAttribute('disabled', '');
Properties.forEach(property => {
panel.$[property].setAttribute('disabled', '');
});
return;
}

panel.$.loop.removeAttribute('disabled');
panel.$.timeScale.removeAttribute('disabled');
panel.$.play.removeAttribute('disabled');
panel.$.stop.removeAttribute('disabled');
panel.$.skinSelectPro.removeAttribute('disabled');
panel.$.animationSelectPro.removeAttribute('disabled');
Properties.forEach(property => {
panel.$[property].removeAttribute('disabled');
});

Elements.spine.updateEnum.call(panel, panel.$.skinSelectPro, info.skin);
Elements.spine.updateEnum.call(panel, panel.$.animationSelectPro, info.animation);
Expand All @@ -265,12 +307,20 @@ const Elements = {
ready() {
const panel = this;

panel.$.timeScale.addEventListener('change', (event) => {
callFunction('setTimeScale', Number(event.target.value));
Slider.forEach((key) => {
panel.$[key].addEventListener('change', (event) => {
callFunction('setProperties', key, Number(event.target.value));
});
});
panel.$.loop.addEventListener('confirm', (event) => {
callFunction('setLoop', Boolean(event.target.value));

CheckBox.forEach((key) => {
panel.$[key].addEventListener('confirm', (event) => {
callFunction('setProperties', key, Boolean(event.target.value)).then((() => {
this.isPreviewDataDirty = true;
}));
});
});

panel.$.play.addEventListener('click', () => {
callFunction('play', panel.animationIndex);
});
Expand All @@ -284,8 +334,12 @@ const Elements = {
updateInfo(info) {
const panel = this;

panel.$.loop.setAttribute('value', Boolean(info.loop));
panel.$.timeScale.setAttribute('value', Number(info.timeScale));
CheckBox.forEach((key) => {
panel.$[key].setAttribute('value', Boolean(info[key]));
});
Slider.forEach((key) => {
panel.$[key].setAttribute('value', Number(info[key]));
});
},
update(playing) {
const panel = this;
Expand Down

0 comments on commit b499e96

Please sign in to comment.