Animation Blending - keyboard input

var AnimationBlending = pc.createScript('animationBlending');

AnimationBlending.states = {
    idle: { 
        animation: 'Rifle Run.json' 
    },
    punch: { 
        animation: 'Great_Sword_Slash.json' 
    }
};

// initialize code called once per entity
AnimationBlending.prototype.initialize = function() {
    this.blendTime = 0.2;

    this.setState('Rifle Run');

    this.app.keyboard.on(pc.EVENT_KEYDOWN, this.keyDown, this);
    this.app.keyboard.on(pc.EVENT_KEYUP, this.keyUp, this);
};

AnimationBlending.prototype.setState = function (state) {
    var states = AnimationBlending.states;
    
    this.state = state;
    // Set the current animation, taking 0.2 seconds to blend from
    // the current animation state to the start of the target animation.
    this.entity.animation.play(states[state].animation, this.blendTime);
};

AnimationBlending.prototype.keyDown = function (e) {
    if ((e.key === pc.KEY_P) && (this.state !== 'Great Sword Slash')) {
        // Great Sword Slash
        //this.setState('Great sword Slash');
    }
};

AnimationBlending.prototype.keyUp = function (e) {
    if ((e.key === pc.KEY_P) && (this.state === 'Great Sword Slash')) {
        this.setState('Rifle Run');
    }
};

This is an animation blending script with a syntax error on it.
The point needed is a keyboard input to trigger Great Sword Slash

Your states are:

AnimationBlending.states = {
  idle: { 
    animation: 'Rifle Run.json' 
  },
  punch: { 
    animation: 'Great_Sword_Slash.json' 
  }
};

This creates a javascript object: https://www.w3schools.com/js/js_objects.asp

If you look at the setState function, you can see that it requires the property name of the animation to be passed to. In this case, ‘punch’ property is set to the ‘Great_Sword_Slash.json’ and ‘idle’ to ‘Rifle Run.json’.

So either:

  1. Change the property names in AnimationBlending.states to much what you want them to be
  2. Call the existing property names in AnimationBlending.states
1 Like

passed to. what?

or call names what?

that’s very vague did the link go through for you
call the existing properties what,
to get the character to respond to a key trigger
or that the .fbx is responsive to pressing_P

AnimationBlending.states = {
  idle: { 
    animation: 'Rifle Run.json' 
  },
  punch: { 
    animation: 'Great_Sword_Slash.json' 
  }
};

Is effectively doing this:

AnimationBlending.states = {};

AnimationBlending.states["idle"] = {};
AnimationBlending.states["idle"].animation = "Rifle Run.json";

AnimationBlending.states["punch"] = {};
AnimationBlending.states["punch"].animation = "Great_Sword_Slash.json";

Now if you look at the setState function:

AnimationBlending.prototype.setState = function (state) {
    var states = AnimationBlending.states;
    
    this.state = state;
    // Set the current animation, taking 0.2 seconds to blend from
    // the current animation state to the start of the target animation.
    this.entity.animation.play(states[state].animation, this.blendTime);
};

The param state is a string of the property that should refer to one of the properties in AnimationBlending.states which are currently “idle” or “punch”.

However, you are passing “Rifle Run” which doesn’t exist and you get an undefined error.

Therefore you have two ways to fix it:

  • Change the property names in AnimationBlending.states to be what you want them to be (I assume it be “Great Sword Slash” and “Rifle Run”)
  • Call setState with a property that already exists in AnimationBlending.states which is “idle” and “punch”.

how is this so @*!^ it’s literally the most basic thing you can call it an animation blend but it’s not, its a simple trigger it’s hardly a keyboard input, i want i press p and it triggers the punch in this case the riffle run

var AnimationBlending = pc.createScript(‘animationBlending’);

AnimationBlending.states = {
idle: {
animation: ‘male.json’
},
punch: {
animation: ‘Two Hand Spell Casting.json’
}

AnimationBlending.prototype.keyDown = function § {
if ((P.key === pc.KEY_P) && (this.state !== ‘Two Hand Spell Casting.json’)) {
this.setState(‘Two Hand Spell Casting.json’);
}

Hi,

It seems a long time has passed since your last post. If you are having an issue please share a project link so that someone can easily debug.

I’ve been trying to steer you in understanding the code by explaining what it is doing. Below is an ‘answer’ but I worry you will just run into similar problems.

Change

AnimationBlending.prototype.keyDown = function  {
  if ((P.key === pc.KEY_P) && (this.state !== 'Two Hand Spell Casting.json')) {
     this.setState('Two Hand Spell Casting.json');
  }
}

to

AnimationBlending.prototype.keyDown = function(e)  {
  if ((e.key === pc.KEY_P) && (this.state !== 'punch')) {
     this.setState('punch');
  }
}

(Yes, I 'm asking you to change it to the ‘punch’ state. Try it, if it works, refer back to my reply here that explains why: Animation Blending - keyboard input

If not, post a link to the project).

Edit: fixed error in code