Jump to content

Phaser animation speed up on start


Recommended Posts

Hi, I have this problem with big animation.


I load texture from atlas:


game.load.atlas('anim', 'assets/anim.jpg', 'assets/anim.json');


i create a Sprite on 'anim', then create animation on using Sprite.


When I Play it first time is a little bit laggy but on next loop is faster .

Seems to be a cache matter.


Is there a possibility to force load all textures on cache before play animation?


Thanks in advance

Link to comment
Share on other sites

Complete guess here, but I think that's nothing to do with caching but rather Javascript warmup you are seeing there. As I understand things, browsers don't pre-compile code with the JIT, and run it with an interpreter for a while before they run it through the Just In Time Compiler to make the code execute faster.

Link to comment
Share on other sites

I get the same, it's with big animations, 1st play is initialy stuttery.  This doesn't happen on smaller animation so would seem less likely to have much to do with any browser optimisation of the js code as it's the same code playing the animation regardless of the texture sizes involved.  However I did seem that the stuttering wasn't so bad the longer I delayed before playing it, as if things had settled down.


I can't even explain it as being a texture->GPU upload effect unless it's getting clever and doing partial texture uploads.

Link to comment
Share on other sites

  • 6 months later...

I've just come across this as well. The spritesheet I'm using is 3072x3072 (it caters for a die rolling) and other than the first roll it works fine. I've added the workaround of having a delay which appears to resolve but I'm not sure why....

Die.prototype.roll = function() {
  if(this._firstRoll) {
    this._firstRoll = false;
   this.game.time.events.add(500, this.roll, this);
  else {

    this._rollComplete = false;
    var duration = 1000;//Maximum 2000ms for minimum 12fps
    var frameRate = Math.max(12, parseInt(24 / (duration / 1000))); //Minimum 12fps
    this._rollAnimations[this._value - 1].play(frameRate);
    this.x = this.game.width + (this.width * 0.5);
    this.y = this.game.height * 0.5;
    this.game.add.tween(this).to({x: this._targetX}, duration, Phaser.Easing.Quadratic.Out, true, this._rollDelay);
    var bounceTween = this.game.add.tween(this).to({y: this._targetY}, duration, Phaser.Easing.Bounce.Out, true, this._rollDelay);
    bounceTween.onUpdateCallback(this.onRollUpdate, this);
    this._yCache = this.y;
    this._bounceAcknowledged = false;

Is there a way to preload animations in the background so that they're ready for use first time?

Link to comment
Share on other sites

  • 4 months later...

I am going to make a guess that the stutter or delay may be because the texture is uploaded to the gpu, and this takes a little time with it being so large.

Solutions... in pixi i know there is a function to upload a container and it's contents to the gpu separate from rendering. I don't know if phaser has this, so give it a check. The more hacky way is, once the texture is loaded, 'draw' it to the screen somehow... For example, with a temp sprite, with alpha 0.01 so none can see it. This way, when you click past the loading screen, everything has been drawn once, assets have been decoded and on the gpu ready to be used.


Link to comment
Share on other sites


  • Recently Browsing   0 members

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