How to shift animations in Studio?

[Sandy_Cheng]

I have a scene with multiple chickens, and I want them to play a looping Idle animation. However, right now, all the chickens are perfectly in sync, which looks unnatural.

Is there a way to offset their animations so they start at different times and feel more natural?

[GeorgeButler]

Good question! You could create a custom component that waits for a random amount of time and then applies the animation.

As a test I did it here and I turned out quite nice! I even added a little animation for them coming into view so the user doesn’t see them suddenly pop into existance. Feel free to experiment with my code!

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

ecs.registerComponent({
  name: 'chicken',
  schema: {
  },
  schemaDefaults: {
  },
  data: {
  },
  stateMachine: ({world, eid, schemaAttribute}) => {
    ecs.defineState('loading')
      .initial()
      .onEnter(() => {
        ecs.Hidden.set(world, eid)
        ecs.GltfModel.set(world, eid, {
          animationClip: '',
        })
      })
      .wait(Math.random() * 1000 + Math.random() * 100, 'anim1')

    ecs.defineState('anim1')
      .onEnter(() => {
        ecs.Hidden.remove(world, eid)
        ecs.ScaleAnimation.set(world, eid, {
          fromX: 0,
          fromY: 0,
          fromZ: 0,
          toX: 1,
          toY: 1,
          toZ: 1,
          loop: false,
          duration: 500 + Math.random() * 100,
          easeIn: false,
          easeOut: true,
          easingFunction: 'Bounce',
        })
        ecs.GltfModel.set(world, eid, {
          animationClip: 'Idle',
        })
      })
  },
})

[Sandy_Cheng]

Wow , that’s amazing! Many thanks!