TheCocce Posted January 8, 2016 Share Posted January 8, 2016 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 More sharing options...
chg Posted January 8, 2016 Share Posted January 8, 2016 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. Tilde 1 Link to comment Share on other sites More sharing options...
stupot Posted January 8, 2016 Share Posted January 8, 2016 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 More sharing options...
jbattersby Posted August 5, 2016 Share Posted August 5, 2016 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? MichaelD 1 Link to comment Share on other sites More sharing options...
MichaelD Posted December 24, 2016 Share Posted December 24, 2016 any news on this? having the same issue with texture 1200x3000 Link to comment Share on other sites More sharing options...
themoonrat Posted December 25, 2016 Share Posted December 25, 2016 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 More sharing options...
Recommended Posts