feat(spx-gui): automatically bind generated animation to appropriate sprite state (#2801)

* generated animation auto bind to default state

* fix condition

* use inferred animation bindings from aigc

* fix type

* use animation gen-id instead of name

* fix type

* fix type assertion

Author: cn0809

spx-gui/src/apis/aigc.ts

@@ -13,6 +13,7 @@ import {
   type UniversalUrl
 } from './common'
 import type { AssetExtraSettings, AssetType } from './asset'
+import type { State } from '@/models/sprite.ts'
 
 export type ProjectSettings = {
   name: string
@@ -277,6 +278,7 @@ export async function enrichAssetSettings(
 export type SpriteContentSettings = {
   costumes: CostumeSettings[]
   animations: AnimationSettings[]
+  animationBindings: Partial<Record<State, string>>
 }
 
 export async function genSpriteContentSettings(

spx-gui/src/models/gen/aigc-mock.ts

@@ -17,6 +17,7 @@ import {
 } from '@/apis/aigc'
 import { AnimationLoopMode, ArtStyle, BackdropCategory, Perspective, SpriteCategory } from '@/apis/common'
 import * as aigcApis from '@/apis/aigc'
+import { State } from '@/models/sprite.ts'
 
 export function setupAigcMock() {
   vi.mock('@/apis/aigc', { spy: true })
@@ -167,7 +168,11 @@ export class MockAigcApis {
           loopMode: AnimationLoopMode.Loopable,
           referenceFrameUrl: null
         }
-      ]
+      ],
+      animationBindings: {
+        [State.Default]: 'walk',
+        [State.Step]: 'jump'
+      }
     }
   }
 

spx-gui/src/models/gen/sprite-gen.test.ts

@@ -6,6 +6,7 @@ import * as fileHelpers from '@/models/common/file'
 import { makeProject } from '../common/test'
 import { setupAigcMock, MockAigcApis } from './aigc-mock'
 import { SpriteGen } from './sprite-gen'
+import { State } from '../sprite'
 import type { CostumeGen } from './costume-gen'
 import type { AnimationGen } from './animation-gen'
 import { RotationStyle } from '../sprite'
@@ -145,6 +146,8 @@ describe('SpriteGen', () => {
     expect(sprite.animations.length).toBe(2)
     expect(sprite.animations[0].name).toBe('walk')
     expect(sprite.animations[1].name).toBe('jump')
+    expect(sprite.getAnimationBoundStates(sprite.animations[0].id)).toEqual([State.Default])
+    expect(sprite.getAnimationBoundStates(sprite.animations[1].id)).toEqual([State.Step])
   })
 
   it('should validate sprite name correctly', async () => {

spx-gui/src/models/gen/sprite-gen.ts

@@ -13,7 +13,7 @@ import {
   adoptAsset
 } from '@/apis/aigc'
 import { Project } from '../project'
-import { RotationStyle, Sprite } from '../sprite'
+import { RotationStyle, Sprite, State } from '../sprite'
 import { Costume } from '../costume'
 import type { Animation } from '../animation'
 import { getProjectSettings, Phase, Task } from './common'
@@ -38,6 +38,7 @@ export class SpriteGen extends Disposable {
   private genImagesTask: Task<TaskType.GenerateCostume>
   private genImagesPhase: Phase<File[]>
   private prepareContentPhase: Phase<void>
+  private animationGenIdBindings: Partial<Record<State, string>> = {}
 
   constructor(i18n: I18n, project: Project, initialDescription = '') {
     super()
@@ -179,7 +180,18 @@ export class SpriteGen extends Disposable {
         () => this.animations.map((a) => a.result).filter((a): a is Animation => a != null),
         (generatedAnimations) => {
           generatedAnimations.forEach((a) => {
-            if (!sprite.animations.includes(a)) sprite.addAnimation(a)
+            if (!sprite.animations.includes(a)) {
+              sprite.addAnimation(a)
+              // Auto bind states based on recommended animation bindings
+              const aGen = this.animations.find((gen) => gen.result?.id === a.id)
+              if (aGen == null) return
+              const statesToBind = (Object.entries(this.animationGenIdBindings) as Array<[State, string]>)
+                .filter(([, genId]) => genId === aGen.id)
+                .map(([state]) => state)
+              if (statesToBind.length > 0) {
+                sprite.setAnimationBoundStates(a.id, statesToBind, false)
+              }
+            }
           })
           sprite.animations.slice().forEach((a) => {
             if (!generatedAnimations.includes(a)) sprite.removeAnimation(a.id)
@@ -223,6 +235,20 @@ export class SpriteGen extends Disposable {
       this.animations = settings.animations.map(
         (s) => new AnimationGen(this, project, { ...s, referenceCostumeId: defaultCostume.id })
       )
+      // Store recommended animation bindings. Replace animation names with animation-gen IDs in case of name changes.
+      const recommendedBindings = settings.animationBindings || {}
+      const animationNameToGenIdMap = new Map(this.animations.map((gen) => [gen.name, gen.id]))
+      // Only support Default, Step, and Die states (turn and glide are not supported for now)
+      const supportedStates = [State.Default, State.Step, State.Die] as const
+      this.animationGenIdBindings = Object.fromEntries(
+        supportedStates
+          .map((state) => {
+            const animationName = recommendedBindings[state]
+            const genId = animationName ? animationNameToGenIdMap.get(animationName) : null
+            return [state, genId]
+          })
+          .filter(([, genId]) => genId != null)
+      )
     })
   }