rive-app / rive-wasm

Wasm/JS runtime for Rive
MIT License
660 stars 46 forks source link

Using StateMachines with StateMachineNames #315

Open ecenazelverdi opened 1 year ago

ecenazelverdi commented 1 year ago

Hello, I was trying to create a dynamic rive where I can get State Machine Name without looking at it in Rive Editor but I can't find a way to use it with stateMachines. I searched documents, I looked examples but I couldn't see any example doing it so I fonder if there is a way or not. If there isn't a way to use it with stateMachines with stateMachineNames, it would be great to create one! This is what I tried to do so far (I'm using Vue2):

mounted() {
    let rive = new Rive({
      src: 'https://public.rive.app/community/runtime-files/4075-8441-blobby-button.riv',
      canvas: this.$el.children[0],
      autoplay: true,
      layout: new Layout({
        fit: Fit.Contain,
        alignment: Alignment.Center,
      }),
      onLoad: () => {
        rive.resizeDrawingSurfaceToCanvas();
        let stateMachine = {
          artboard: rive.artboard,
          inputs: rive.stateMachineInputs(`${rive.stateMachineNames[0]}`), //This do not work
          playing: true,
          name: rive.stateMachineNames[0],
        };
        rive.animator.stateMachines.push(stateMachine); //This wont work
      },
    });
  },

I also tried this :

mounted() {
    let rive = new Rive({
      src: 'https://public.rive.app/community/runtime-files/4075-8441-blobby-button.riv',
      canvas: this.$el.children[0],
      autoplay: true,
      layout: new Layout({
        fit: Fit.Contain,
        alignment: Alignment.Center,
      }),
      stateMachines: rive.stateMachineNames,
      onLoad: () => {
        rive.resizeDrawingSurfaceToCanvas();     
       },
    });
  },

Am I doing something wrong or is there currently no way to do that. Thanks in advance