State Machine for changing influence

I’m trying to implement a state machine that will help me change the influence of a morph target back to 0 after using BABYLON.TransitionTo but for some reason the influence is not changing back to 0 and I’m having trouble figuring out how I can get the state machine I created to do that? Am I missing something? If you need a playground of my work I’ve attached a link below

You should probably try to change the influence without the state machine first to see if works :slight_smile:

1 Like

It does but I’m trying to change the influence of casiBody.morphTargetManager back to 0 using the state machine after each BABYLON.TransitionTo statement happens but I’m having trouble figuring out how to do that

Well if it’s working without it then it’s probably a matter of the state machine implementation, I recommend reading up on some existing implementations: Implementing a simple state machine library in JavaScript (kentcdodds.com), State (refactoring.guru)

Do you know how I can get the state machine to accept morph targets as an input

Does not look like you are using the ‘onAnimationEnd’ (last) parameter. I use a state machine here - you should be able to use that callback the same way I use setTimeout on this Babylon.js example:

I tried using the command yarn add xmachina in windows powershell but for some reason it gave me the error message the term yarn is not recognized as the name of a cmdlet function, script file, or operable program. Check the spelling of the name, or if a path was included, verify that the path was correct and try again. Am I missing something?

You need to install yarn first if you did not

You can use ‘npm install’ instead of yarn. My point was more that it looks like you aren’t capturing events to advance your state machine - maybe onAnimationEnd would meet your needs in that regard.

I used onAnimationEnd in my playground but I’m confused on how I’m supposed to capture events to advance my state machine. Should I pass a morph target as a parameter into the createMachine function or do I need to do something else. Here’s a playground of my work so far.

I tried using createMachina from xmachina but when I did I got the error message:
Uncaught Reference error: createMachina is not defined. Am I missing something?

There are npm libraries for state machines, but you may be better suited starting with a simple one made from a JS function* generator. At runtime, you can leverage Coroutines to host and run your state machine logic.

HTH!

1 Like

It’s an explicit export, so you can import it like:

import { createMachina } from 'xmachina';

Having said that I would encourage using a popular library like xstate with a large community and more active repo. That was more of a fun experiment from ~2 years ago. To answer your question though about onAnimationEnd is it looks like you want to chain your state transitions. I do that like this in the example:
xmachina-semaforo/Automated.tsx at main · brianzinn/xmachina-semaforo (github.com)

Your example might look something like this:

onEnter: async (nodeState, machina) => {
    var transAnim = BABYLON.Animation.TransitionTo("influence", 1.0, casiBody.morphTargetManager.getTarget(9), ...);
    transAnim.onAnimationEnd = () => {
         // you can put logic here to choose the next state
          machina.transition(YourTransitionTypes.NextState);
    }
}

I drew most of my inspiration from a c# state library called Stateless. Mainly I didn’t like how other state machines are not strongly typed and bulky. When I build State machines I like to have the state dependencies external, so I brought in casiBody by closure to make it available.

edit: Just want to add that when you transition to the next state it’s onEnter will fire and there you trigger the appropriate animation(s) based on your logic. That is the chaining.

I’ve used generator functions as proposed by Jelster with good success as well and also with a library called redux-saga. Generator functions have a bit of a learning curve if you haven’t used them before though.

2 Likes

I tried using import { createMachina } from ‘xmachina’ but it gave me an error message saying import declarations may only appear at the top level of the module. I trying to use a script tag with type module but I’m having trouble figuring out what source url I should use to import createMachina.

Then the “from” is where you are importing from - like a path, but I’ve never used modules with script tags. You can await an import as well using something like jsdelivr. Again, if I was you I’d go back to the original PG and fix it or use a popular state machine library - I was just trying to share a working example of a state machine with Babylon.js and how I would chain the transitions.

You should probably read up on modules to get more accustomed with the syntax JavaScript modules - JavaScript | MDN (mozilla.org) :smiley: