Anim State Graph / Best ways for Animation sequences

Help & Support
, , ,
1

Hello,

I have a question about the Anim State Graph. Can I use it to animate elements and transitions / sound triggers / etc. for an animation sequence in the 3D scene?

I have a sequence where entities need to move from a to b - when they arrive, c (and probably d) fires and so on. basically its a a sequence of visual events.

I saw that the animation state graph is basically designed for character/3D model animation states. But I would like to know if I could also animate other things like I would in (for example) Unity3D animator.

I ask because I haven’t used it before. I’d have to try it - but would like to ask if it’s feasible - or if I should think about other options.

Thank you very much

2

It is not feasable. The anim state graph is used to control and blend the animations of the skinned meshes, which came from your imported models. It is not suitable for moving normal entities. For that you would need to move them with a script, or some animation framework, like Theatre.js.

3

Have a look at the example of how to animate light properties for example:
https://playcanvas.github.io/#/animation/component-properties

You could do something like this. But there’s no Animation Editor for this, so it’d be script based.

4

Hi LeXXik / mvaligursky,

thanks for your answers. Hmm thats challenging, because i have some kind of animation orders. For example: Object a moves to b, then blends out, another element blends in, sound or next action happens. its some kind of sequence for different things which happens in the scene, the user can look at.

Would have been easy done with some kind of animator like i used to know in unity3d, so i hoped i have some kind of similar option in playcanvas. dont know if you can achive smooth transitions via script too but i have no other option except trying it out.

Thanks both of you for the clarification :slight_smile:

@LeXXik can you use theatre.js within playcanvas?

5

See here: PlayCanvas + Theatre.js

6

@mvaligursky

Thank you! I’ll take a look into it. One Question in advance: Is this mobile friendly? The application im developing is targeting mobile devices (iOS / Android) do you have some experience using this library?

7

I have not tried it but I assume it is mobile friendly, it’s just an JS library without specific device requirements. Clone the project and see if the launcher link works on mobile, easy to test.

8

Youre right :slight_smile:

9

I just remembered, @commention had made a project to help with animations. Worth checking it out as well.

10

Hi LeXXik,

thanks for the Link - i’ll take a look into it.

I also tried the PlayCanvas Theatre.js Example but i have to admit, that im a bit confused in terms of the usability. Yet i could not figure out how to add other transform properties like opacity into it (i could add it into the example.js script and make it visible in the porperties window but not in the animation window below).

If i get it right the idea is, that the example.js script just creates the posability to create anims during runtime and export them as .json file i would have to load and play animations from later on?

Its like you would have to customize each animation for each entity seperately for each sequence with its own specific script right (some kind of diy animator :slight_smile: )? Could be a bit difficult in terms of creating sequences i guess

11

This looks very promising. This script currently would have to setup on each entity seperately but i think you could adjust it for a complete sequnce of different actions.

otherwise you would anyway have to create a sequence handler, which triggers differend events on the seperate entity timeline.js script.

(i have to create 5 different animation sequences - and i think using just tween.js should be fine, because its simple move from a to b, opacity or trigger sounds at second X, things)

12

@LeXXik
@mvaligursky

hi together, i have a short (syntax) question:
So i tried out the script mentioned by LeXXik, which basically works, but for opacity i have a problem i cant figure out. The template is coded for element components, but i’m working with model / render components, so the syntax is slightly differend.

You would have to take a look into the project (LeXXik’s link to the timeline script) to understand it a bit better but i try to explain the relevant problem below.

In the template (line 338) he coded a tween function fo the opacity with:

this.opacityFrames = this.entity.tween(
            this.entity.element
        ).to({
            opacity : frame.opacity
        }, this.duration, this.getEase()).delay(options.delay);

I tried to modify it like:

this.opacityFrames = this.entity.tween(this.entity.render.meshInstances[0].material)
        .to({
            opacity : frame.opacity
        }, this.duration, this.getEase()).delay(options.delay);

Note: i also tried to access the opacity channel by:
this.entity.render.meshInstances[0].getParameter("material_opacity");
but none of them seems to work. I also have no errors within the console. Do you know why this is not working or whats the misstake?

If im accessing the material of the meshInstance, the opacity parameter should be correct if im right.

Thank you very much!

13

The mesh instance does not store “material_opacity” parameter by default. Those are stored on the material that the mesh instance uses.

Setting it on the mesh instance only allows you to override the value from the material.

So ideally you would:

  • animate that property on the material
  • alternatively set it on the mesh instance first, before you can get it from there.
14

Hi mvaligursky,

thanks for your answer. Im not sure but would it be possible to tween a float in this context simply update the material?

i would like to keep the way it is coded in the timeline.js script.

Lets say i declared a opacityValue and would like to adapt it to the provided code for the element

this.opacityFrames = this.entity.tween(
            this.entity.element
        ).to({
            opacity : frame.opacity
        }, this.duration, this.getEase()).delay(options.delay);

Would it be possible? Some kind of:

     this.opacityFrames = this.entity.tween()
        .to({
            opacityValue: frame.opacity
        }, this.duration, this.getEase())
        .delay(options.delay)
        .on('update', function(tween) {
            this.entity.render.meshInstances[0].setParameter("material_opacity", opacityValue);
        })
        .start();

Not sure if this is possible - the element component has a opacity value which is tweened the same way, so i thought its a float value at last i can use and attach to the material later on.

(right now im tweening the element.opacity and in an update function i set the material to this value - this is some kind of weird workaround but i think completely unnecessary)