Forums » Code » Blink animation on idle

Hi Impact Community,

I am extremely new to the framework and to game development, but I am so excited to dive in.

I have a problem I am trying to solve.

1) I would like to have my player blink after a few seconds of inactivity (e.g. no keyboard input).
2) While in this state, I would like the player to blink every few seconds.
3) Finally, The blinking would stop abruptly once the game resumed (player presses any key)

A real world example would be how Mega Man does it in the old NES games.
A more extreme, but equally relevant example would be how Sonic would start tapping his foot and getting annoyed with you if you put the controller down for an extended period of time. And of course, who could forget when Mario takes a nap in Mario64?

I've been able to get my character to blink every 4 seconds. Of course, he continues to blink even when he is moving. I am stuck on the "only blink when the game is idle" requirement.

Is there a method or property for the game being in an idle state after a certain time interval of inactivity? What about ig.input.isUsingKeyboard? Is there an "any input", or would I have to check all bound inputs?

Thanks in advance for reading this.

init: function(x, y, settings){
this.parent(x, y, settings);

// Add the animations
this.addAnim( 'idle', 1, [0], true );
this.addAnim( 'blink', 0.15, [0,1,0], true );
this.addAnim( 'jump', 1, [2] );

// Set "blink" timer for 4 seconds
this.timer = new ig.Timer();
this.timer.set(4);
},

update: function(){
// blink
if (this.timer.delta() >= 0) {
this.currentAnim = this.anims.blink;
this.anims.blink.rewind();
this.timer.reset();
}
}

I think you may need to make a few code changes. I don't have access to the code base right now to give proper code examples so the examples below are pseudocode really.

1. Add some extra code to the ig.Input class - it has keydown() and keyup() functions. You could add an extra variable e.g. lastTimeSinceKeyUp - that stores the time when a keyup event occurs, this way it will be overwritten every time the event occurs.

2. Do a check to see how much of a time change there has been between the current time and lastTimeKeyUp. If the time change >= "idle time" set isInputIdle = true. You could do this check in your game's update() function.

So in ig.Input:

...
lastTimeSinceKeyUp: 0,

...
...

keyup: function(event) {
    lastTimeSinceKeyUp = ig.System.tick;
    ...
}

In the game's update() function:

isInputIdle: false,

update: function() {
   if (Math.abs(ig.input.lastTimeSinceKeyUp - ig.system.tick) >= <insert idle time>) 
   {
      this.isInputIdle = true;
   }
   else 
   {
      this.isInputIdle = false;
   }

3. In your player's update() function then keep checking ig.Input.isInputIdle, start your timer and if it expires then set the currentAnim = this.anims.blink.

update:function() {
    if (ig.game.isInputIdle) {
       if (this.timer.delta() >= 0) {
           this.currentAnim = this.anims.blink;
      }
    }
}

Thanks so much for your feedback!
The isInputIdle logic works well.

I cannot get the lastTimeSinceKeyUp = ig.System.tick; part to work.
Never-the-less, I am 2/3 of the way there. I am closer to a solution than I was before.

Thanks again!

Quote from toma
Thanks so much for your feedback!
The isInputIdle logic works well.

I cannot get the lastTimeSinceKeyUp = ig.System.tick; part to work.
Never-the-less, I am 2/3 of the way there. I am closer to a solution than I was before.

Thanks again!

Are you getting an 'undefined' error message in your browser's console? If so it's because I made a typo, it should be 'system' and not 'System' (note the lower case 's').

A better way to set the time might be to use new Date().getTime() (which will give you time in milliseconds). There is the side effect of creating a new Date object every time, but from looking at the documentation ig.system.tick is not game time and can be affected by the FPS count.

In ig.Input:

keyup: function( event ) {
		this.lastTimeSinceKeyUp = new Date().getTime();
...
}

In the game's update():

var diff = Math.round( (new Date().getTime() - ig.input.lastTimeSinceKeyUp) / 1000);

if (diff >= 4) {
   console.log('4 seconds...');
   ig.input.lastTimeSinceKeyUp = new Date().getTime();  // update last time 
}

UPDATE! JavaScript events have a timeStamp property so you can use that instead of new Date().getTime() in ig.Input.keyup! https://developer.mozilla.org/en-US/docs/Web/API/event.timeStamp

keyup: function( event ) {

		this.lastTimeSinceKeyUp = event.timeStamp;
...
}