[SOLVED] Animations only plays first frame

Help & Support
1

Hi, anim state graph, does ‘Duration’ stand for animation duration or for transition time? Thanks

2

Transition time.

3

Any reason why it would act as animation time? Downloaded new animation, setted a trigger, and transition from ANY, acts weird, may be a bug? Or it’s better to download and use the model with all anims in the pack? That one wasn’t included in original project

4

What do you mean with this? Probably there is a conflict with another transition. I suggest to check the conditions of other transitions.

5

Found the problem, but not the solution, animation only plays in 1 frame, originally the anim has like 30+ frames, any ideas? Tested many different anims, same problem

6

Maybe the animation keep starting over because you execute the trigger in the update?

7

Seems like something is preventing it from playing, theorically once triggered the anim should play to the end right?

// Temp variable to avoid garbarge colleciton
PlayerMovement.worldDirection = new pc.Vec3();
PlayerMovement.tempDirection = new pc.Vec3();

PlayerMovement.prototype.update = function (dt) {
    var app = this.app;
    var worldDirection = PlayerMovement.worldDirection;
    worldDirection.set(0, 0, 0);
    
    var tempDirection = PlayerMovement.tempDirection;
    
    var forward = this.entity.forward;
    var right = this.entity.right;

    var x = 0;
    var z = 0; 
    
    if (app.keyboard.isPressed(pc.KEY_A)) {
        x -= 1;
    }

    if (app.keyboard.isPressed(pc.KEY_D)) {
        x += 1;
    }

    if (app.keyboard.isPressed(pc.KEY_W)) {
        z += 1;
    }

    if (app.keyboard.isPressed(pc.KEY_S)) {
        z -= 1;
    }

    if (this.app.keyboard.isPressed(pc.KEY_SPACE)) {
        if (this.jumpTimer <= 0) {
            this.jumpTimer = 0.5;
            
            setTimeout(function(){
                this.entity.rigidbody.applyImpulse(0, 1000, 0);
               this.entity.anim.setTrigger('Jumping');
            }.bind(this), 100);
        }
    }
    
    else if (this.jumpTimer >= 0) {
        this.jumpTimer -= dt;
    }
    
    else {
        this.jumpTimer = 0;
    }
   

act = this.entity.anim.baseLayer.activeState;
console.log(act);
    


    if (x !== 0 || z !== 0) {
        worldDirection.add(tempDirection.copy(forward).mulScalar(z));
        worldDirection.add(tempDirection.copy(right).mulScalar(x));        
        worldDirection.normalize();
        
        var pos = new pc.Vec3(worldDirection.x * dt, 0, worldDirection.z * dt);
        pos.normalize().scale(this.speed);
        pos.add(this.entity.getPosition());

        var targetY = this.cameraScript.eulers.x + 180;
        var rot = new pc.Vec3(0, targetY, 0);

        this.entity.rigidbody.teleport(pos, rot);
    }
    
    this.entity.anim.setFloat('xDirection', x);
    this.entity.anim.setFloat('zDirection', z);
 

};
8

The jump function looks like it’s made by myself. :upside_down_face: Is it a problem with the jump animation? Can you tell me what happens after one frame?

9

It’s easier to learn when there’s examples, thank you for that, let’s say I’m walking, so in my console I can see current animation of each frame act = this.entity.anim.baseLayer.activeState; console.log(act);

As soon as I press space, console shows that curr anim is Jumping, as supposed, the problem its only played in one frame, if I set the ‘Duration’ to 2sec, all full anim plays, checked the settings, all other anims has duration of 0.15sec, no exits, no other rules, so after one frame other animations starts playing instanlt, if im Idling its idle, if moving forward - its forward and etc

10

Exactly what I expect. Currently there is no function to ensure an animation is played completely first (if your transitions are from Any state). You need to add an extra condition to every transition when the player is jumping. Otherwise the other animations will override the jump animation.

@yaustar did that in the example project below.

https://playcanvas.com/project/816302/overview/third-person-controller-with-jum

11

Wow, great example! Used it in your code:
What’s left to find better ‘matching’ animation, but works nicely

  if (this.app.keyboard.isPressed(pc.KEY_SPACE)) {
        if (this.jumpTimer <= 0) {
            this.jumpTimer = 0.5;

            setTimeout(function(){
                this.entity.rigidbody.applyImpulse(0, 1000, 0);
               this.entity.anim.setTrigger('Jumping');
               this.entity.anim.setBoolean('justJumped', false);
            }.bind(this), 100);
        }
    }
    
    else if (this.jumpTimer >= 0) {
        this.jumpTimer -= dt;
    }
    
    else {
        this.jumpTimer = 0;
                    this.entity.anim.setBoolean('justJumped', true);
    }

Cool feature - you can copy and paste elements inside editor from seperate windows
Thank you again!