How to trigger one animation

[Nwankwo_Micheal]

Hello Everyone,
So im currently working with studio and i want to trigger some animations in a model via typescript how do it,
Also im working with the image target in studio, How do i trigger action only when image target is in frame , and perform another action when image target is lost

[Herman_Ptacnik]

@Nwankwo_Micheal

So im currently working with studio and i want to trigger some animations in a model via typescript how do it,
Also im working with the image target in studio, How do i trigger action only when image target is in frame , and perform another action when image target is lost

You can use a State Machine: State Machines | 8th Wall

By adding your animation and/or logic in an OnEnter function, you can trigger that state to activate it by using onEvent() or triggers.

Hope this helps!

[Nwankwo_Micheal]

@Herman_Ptacnik thanks for helping out, but i was precisely talking about how select individual animations state .
in the 8th wall editor i use "animation-mixer=“clip: *” to select individual animation of my desire whats the replica in studio

[Herman_Ptacnik]

Oh, to select or set an animation I believe you can just use this:

ecs.GltfModel.set(world, component.eid, {
  url: './assets/doty.glb',
  animationClip: 'idle',
  loop: false,
  paused: false,
  time: 0,
  timeScale: 1,
  collider: false,
  reverse: false,
  repetitions: -1,
  crossFadeDuration: 0
})

That way you can change its animation Clip.

Extra Info:
GltfModel | 8th Wall

[Nwankwo_Micheal]

@Herman_Ptacnik

ecs.GltfModel.set(world, component.eid, {
  url: './assets/doty.glb',
  animationClip: 'idle',
  loop: false,
  paused: false,
  time: 0,
  timeScale: 1,
  collider: false,
  reverse: false,
  repetitions: -1,
  crossFadeDuration: 0
})

@Herman_Ptacnik
Thanks for helping out but it didn’t work with swapping my animation clip maybe i integrated it wrongly. i have the idle animation playing on loop, but when i play it just freezes, my button work but the animation freezes and it also doesn’t swap

import * as ecs from '@8thwall/ecs'

type AnimationClip = 'idle' | 'walk' | 'attack'
const animationClips: AnimationClip[] = ['idle', 'walk', 'attack']

ecs.registerComponent({
  name: 'AntCntrl',
  schema: {
    nextButton: ecs.eid
  },
  data: {
    currentAnimation: ecs.string
  },
  stateMachine: ({world, eid, schemaAttribute, dataAttribute}) => {
    const schema = schemaAttribute.cursor(eid)

    const playAnimation = (clip: AnimationClip) => {
      console.log(`Playing animation: ${clip}`)
      ecs.GltfModel.set(world, eid, {
        animationClip: clip,
        loop: false,
        paused: false,
        time: 0,
        timeScale: 1,
        collider: false,
        reverse: false,
        repetitions: -1,
        crossFadeDuration: 0,
      })
    }

    ecs.defineState('idle')
      .initial()
      .onEnter(() => {
        const initial = 'idle' as AnimationClip
        dataAttribute.set(eid, { currentAnimation: initial })
        playAnimation(initial)

        world.events.addListener(schema.nextButton, ecs.input.SCREEN_TOUCH_START, () => {
          const current = dataAttribute.get(eid)?.currentAnimation as AnimationClip
          const currentIndex = animationClips.indexOf(current)
          const nextIndex = (currentIndex + 1) % animationClips.length
          const nextClip = animationClips[nextIndex]

          dataAttribute.set(eid, { currentAnimation: nextClip })
          playAnimation(nextClip)
        })
      })
  }
})

[Nwankwo_Micheal]

i fixed it with this .

 stateMachine: ({ world, eid, schemaAttribute, dataAttribute }) => {
    const animations = ['Idle', 'Walk', 'Attack']
    let currentIndex = 0  // To track which animation is next

    // the Function i used to play a specific animation on the player entity
    const playAnimation = (animationName, playSpeed, canLoop) => {
      const animationComponent = ecs.GltfModel.get(world, eid)
      if (animationComponent) {
        ecs.GltfModel.set(world, eid, {
          animationClip: animationName,
          timeScale: playSpeed,
          loop: canLoop,
        })

so i just trigger any animation i want via Playanimation