Async load images while game is running

Phaser 3
1

hi there,

i’ve trying to load images async while the game is allready running. E.g.: user walks around and start talking to a npc. NOW start loading his image.
Or he walks into an area the images not allready loaded, start loading different images and add them to the object.

here is my code:

    setImage( dlgImage ){
        let imgName = dlgImage.substr( dlgImage.lastIndexOf("/") + 1 );
        this.dlg.setIcon( "no_hero" );
        if( !imgName || imgName == "") return this;

        if( !this.scene.textures.exists( imgName ) ){
            this.scene.load.image( imgName, `images/${dlgImage}.png`)
            this.scene.load.once(Phaser.Loader.Events.COMPLETE, () => {
                // texture loaded so use instead of the placeholder
                this.dlg.setIcon( imgName )
            })
            this.scene.load.start()
        }else{
            dlgImage&&this.dlg.setIcon( imgName );
        }
        return this;
    }

I followed this example here:

But i discoverd some problems with this approche:
the event “Phaser.Loader.Events.COMPLETE” is fired for any of this files. So if i start loading 10 images from a loop with this function, first image loaded fires event, all other 9 objects get also triggered this event, but there image is not loaded right now!

Seems like this approche only works for single images async loaded…

any tipp on how i can get the complete event for each image separated?

thx a lot!
(hope u understand my example)

Greetings

1 Like
2

Use the filecomplete-image-${imgName} event instead.

3

AH. I missed this! Thx. :slight_smile: seems to work :wink: