chizui/aklive2d
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: added ability to handle sp variant

Browse Source
This commit is contained in:
Haoyu Xu
2025-08-03 13:09:24 +08:00
parent 2690eee3b9
commit 53e6ca4c71
11 changed files with 107 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
apps/directory/src/routes/path/Operator.jsx
View File

@@ -77,6 +77,7 @@ export default function Operator() {
const [voiceSrc, setVoiceSrc] = useState(null)
const [isVoicePlaying, _setIsVoicePlaying] = useState(false)
const isVoicePlayingRef = useRef(isVoicePlaying)
const [spineAnimationList, setSpineAnimationList] = useState([])
const setVoiceLang = (value) => {
voiceLangRef.current = value
@@ -154,7 +155,7 @@ export default function Operator() {
useEffect(() => {
if (config) {
setTitle(getPartialName('name', config.codename[language]))
setTitle(config.codename[language])
}
}, [config, language, key, setTitle])
@@ -180,6 +181,9 @@ export default function Operator() {
fps: 60,
defaultMix: 0.3,
success: (player) => {
setSpineAnimationList(
player.skeleton.data.animations.map((e) => e.name)
)
if (
player.skeleton.data.animations
.map((e) => e.name)
@@ -283,9 +287,9 @@ export default function Operator() {
(animation) => {
if (voiceLangRef.current) {
let id = null
if (animation === 'Idle') id = 'CN_011'
if (animation === 'Interact') id = 'CN_034'
if (animation === 'Special') id = 'CN_042'
if (animation.startsWith('Idle')) id = 'CN_011'
if (animation.startsWith('Interact')) id = 'CN_034'
if (animation.startsWith('Special')) id = 'CN_042'
if (id) {
setCurrentVoiceId(id)
setVoiceSrc(
@@ -320,29 +324,15 @@ export default function Operator() {
const spineSettings = [
{
name: 'animation',
options: [
{
name: 'idle',
onClick: () => setSpineAnimation('Idle'),
options: spineAnimationList.map((name) => {
return {
name,
onClick: () => setSpineAnimation(name),
activeRule: () => {
return spineAnimationName === 'Idle'
return spineAnimationName === name
},
},
{
name: 'interact',
onClick: () => setSpineAnimation('Interact'),
activeRule: () => {
return spineAnimationName === 'Interact'
},
},
{
name: 'special',
onClick: () => setSpineAnimation('Special'),
activeRule: () => {
return spineAnimationName === 'Special'
},
},
],
}
}),
},
{
name: 'voice',

38
apps/showcase/src/components/player.js
View File

@@ -16,6 +16,7 @@ export default class Player {
#resetTime = window.performance.now()
#isPlayingInteract = false
#spine
#animationList = []
#default = {
fps: 60,
padding: {
@@ -62,6 +63,9 @@ export default class Player {
fps: 60,
defaultMix: 0,
success: function (widget) {
_this.#animationList = widget.skeleton.data.animations.map(
(e) => e.name
)
if (
widget.skeleton.data.animations
.map((e) => e.name)
@@ -70,10 +74,15 @@ export default class Player {
) {
widget.animationState.setAnimation(0, 'Start', false)
}
widget.animationState.addAnimation(0, 'Idle', true, 0)
widget.animationState.addAnimation(
0,
_this.#selectRandomAnimation('Idle'),
true,
0
)
widget.animationState.addListener({
end: (e) => {
if (e.animation.name == 'Interact') {
if (e.animation.name.startsWith('Interact')) {
_this.#isPlayingInteract = false
}
},
@@ -85,13 +94,13 @@ export default class Player {
_this.#resetTime = performance.now()
let entry = widget.animationState.setAnimation(
0,
'Special',
_this.#selectRandomAnimation('Special'),
false
)
entry.mixDuration = 0.3
widget.animationState.addAnimation(
0,
'Idle',
_this.#selectRandomAnimation('Idle'),
true,
0
)
@@ -105,11 +114,16 @@ export default class Player {
_this.#isPlayingInteract = true
let entry = widget.animationState.setAnimation(
0,
'Interact',
_this.#selectRandomAnimation('Interact'),
false
)
entry.mixDuration = 0.3
widget.animationState.addAnimation(0, 'Idle', true, 0)
widget.animationState.addAnimation(
0,
_this.#selectRandomAnimation('Idle'),
true,
0
)
}
document.dispatchEvent(Events.Ready.handler())
},
@@ -124,10 +138,7 @@ export default class Player {
success() {
this.#loadViewport()
updateHTMLOptions(
this.#spine.skeleton.data.animations.map((e) => e.name),
'animation-selection'
)
updateHTMLOptions(this.#animationList, 'animation-selection')
}
resetPadding() {
@@ -176,6 +187,13 @@ export default class Player {
})
}
#selectRandomAnimation(name) {
const animationList = this.#animationList.filter((animation) =>
animation.startsWith(name)
)
return animationList[Math.floor(Math.random() * animationList.length)]
}
get usePadding() {
return this.#config.usePadding
}