Jump to content

PixiJS Spritesheet sometimes doesn't load (appears as as a blue background)


Recommended Posts

Hello,

I am experiencing a weird glitch in which spritesheets don't load properly sometimes (every 5th time?) and it shows up as just blue empty background.

Here is my code:

var frames = []
for (let i = 0; i < 48; i++) {
    frames.push("spritesheets/frame/" + (i+1) + ".png")
}

myApp.background = new PIXI.AnimatedSprite.fromFrames(frames);
myApp.background.width = Constants.WIDTH;
myApp.background.height = Constants.HEIGHT;
myApp.background.x = myApp.renderer.renderer.width / 2 - Constants.WIDTH / 2;
myApp.background.y = myApp.renderer.renderer.height / 2 - Constants.HEIGHT / 2;

myApp.renderer.stage.addChild(myApp.background);
myApp.background.animationSpeed = 0.125;
myApp.background.play();                       
                       
                       

I hope you can help me!

Link to post
Share on other sites

Think you have a cache related issue.
Write some debugger handlers i guess and check the browser debugger like Exca said.
Else i have no clue, pretty new the scene

You use Pixi.Loader ?

Edited by Teckniel
Link to post
Share on other sites
14 hours ago, htmlgivesmedepression said:

How would I go about checking if it loads? I don't use PIXI.Loader, the code is all there is, PIXI.AnimatedSprite.fromFrames loads it all for me. Would it be a better approach to use PIXI.Loader to load the frames individually?

You can check the network tab in browser debugger (f12) to see if the textures are visible there and with a result of 200 (http ok). Also using pixi loader is a good idea, as then the assets are already loaded when you are going to play the animation. Otherwise it might happen that images are still loading when the animation is about to play.

Link to post
Share on other sites
On 5/6/2021 at 6:51 PM, htmlgivesmedepression said:

How would I go about checking if it loads? I don't use PIXI.Loader, the code is all there is, PIXI.AnimatedSprite.fromFrames loads it all for me. Would it be a better approach to use PIXI.Loader to load the frames individually?

Check documets for loader but it go somthing like this

 

create a var that holds the loader.

add you assets to the loader.

hook the loader on event  and set the boolean to true -> 

this.loader.onComplete.add(() =>  {
            this.assetsLoaded = true;
            console.log("Assets Loader State:" + this.assetsLoaded);
        })

and in you render function do

 while (this.assetsLoaded = false)
            return;      

 

Link to post
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.

Guest
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.

Loading...
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...