Jump to content

v3 upgrade MovieClip animationspeed


Recommended Posts

I'm in the process of upgrading from 1.6.2 to 3.0.7 and have noticed that the animationSpeed is now time based instead of frame based.


Pixi.js 1.6.2 (frame based):


this.currentFrame += this.animationSpeed;
 var round = (this.currentFrame + 0.5) | 0;
 this.currentFrame = this.currentFrame % this.textures.length;

Pixi.js 3.0.7 (time based):


    this._currentTime += this.animationSpeed * deltaTime;
    var floor = Math.floor(this._currentTime);

Currently I'm running my game at 30fps and my game logic relies on a fixed framerate. In the old version, I'd set animationSpeed to 0.5 in order to update the animation every 2 frames (15fps). Now in v3, the animation speed seems to run at full speed.


What should I now set animationSpeed to for this example? i.e. 15fps animation speed for for a game running at 30fps?  I'm not yet sure how deltaTime is calculated and whether it is dependent on CONST.TARGET_FPMS (which I'm not using btw).


Also is there any way of keeping the animation speeds fixed? At this stage I'm thinking of creating my own MovieClip or updating pixi's MovieClip to support fixed frame.


Thanks for your help.

Link to comment
Share on other sites

Movie clip does not use the render loop for animations anymore. It has a separate loop from the shared ticker instance (PIXI.ticker.shared).

You can change the speed of that ticker to achieve the speed you want. If you want it to just update with your render loop, you can do what the third example in the docs does:


Link to comment
Share on other sites

For my own future reference, this is the code which calculates deltaTime for the ticker:

Ticker.prototype.update = function update(currentTime)...this.deltaTime = elapsedMS * CONST.TARGET_FPMS * this.speed;// Invoke listeners added to internal emitterthis._emitter.emit(TICK, this.deltaTime);
Debug session:
elapsedMS: 16.999
this.speed: 1
this deltaTime: 1.02
Link to comment
Share on other sites

My game uses a fixed frame rate for movement and animation. i.e. it assumes that each frame will run at 30fps regardless of how fast the game is running. Just posting this here in case anyone else finds this helpful.


Opt-out of the auto ticker before your application runs:

// opt-out of auto tickervar ticker = PIXI.ticker.shared;ticker.autoStart = false;ticker.stop();ticker.speed = 0.5; // run at 30fps

Call the ticker and increment the time with a fixed value. 

var ticker = PIXI.ticker.shared;var forceCurrentTime = ticker.lastTime + (1000.0 / 30.0); // + 30fps//var currentTime = performance.now();ticker.update(forceCurrentTime);

This is working fine for now, however this may cause problems if the ticker ever compares ticker.lastTime with performance.not() because ticker.lastTime will not be inline with the clock...




Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...