Sign in to follow this  
syntaxidermy

Is there a way to load images into a loading scene in Phaser 3? My images keep failing to load.

Recommended Posts

My image keeps displaying as a green box with a cross through it, even though I'm nearly exactly the same loader event code given in the examples given here and here.
 

My code looks something like this, but for some reason the image is always displayed as a geen box with a line through it, as though it failed to load the image correctly. Any insights as to what this might be? I promise it's not a typo!

var config = {
    type: Phaser.AUTO,
    width: 1000,
    height: 600,
    scene: {
        preload: preload,
        create: create,
        pack: {
            files: [
                { type: 'image', key: 'loading', url: 'assets/laptop.png' }
            ]
        }
    }
};

var game = new Phaser.Game(config);

function preload ()
{
    loading = this.add.image(500, 300, 'loading');

    var progress = this.add.graphics();

    this.load.on('progress', function (value) {

        progress.clear();
        progress.fillStyle(0xffffff, 1);
        progress.fillRect(300, 270, 800 * value, 60);

    });

    this.load.on('complete', function () {

        progress.destroy();
        loading.destroy();

    });

    //...load other files

}

Share this post


Link to post
Share on other sites

I would suggest you load your images the same way as in the official tutorial

function preload()
{
// in this function you LOAD all files images and so on
// first parameter is the key, second the path to your png
this.load.image('loading','assets/laptop.png')
}

function create()
{
// in this function you actually add the images to the scene
// with the next line you actually add the image to your scene
this.add.image(500, 300, 'loading');
}

I got the same error when the file was unable to load for a different reason, i.e. No access right to the folder

Share this post


Link to post
Share on other sites

Thanks for the reply samme, the issue is that I'm trying to load an image onto the loading scene, because my game has a lot of image files to load before the create/update functions can run.  The tutorials seem to suggest loading the files inside of the game config variable, but I haven't managed to get this to work.

Share this post


Link to post
Share on other sites

I managed to get it working on my end, but with a slightly different structure.  I'm using multiple scenes, not just one, as the demo above entails. But in either case, here is whats working for me...

 


class preloadScene extends Phaser.Scene {
    constructor() {
        super({
            key: 'preLoadScene',
            active: true,
            physics: {
                default: 'arcade',
                arcade: {
                    debug: true
                }
            },
            pack: {
                files: [
                    {
                        type: 'image',
                        key: 'image01',
                        url: 'knife.png'
                    }
                ]
            }
        });
    }

    preload() {

        this.add.image(100, 0, 'image01').setOrigin(0);
    }

}


//my configuration is using the a loader property to set the default path to my image assets...

const config = {
...
loader: {
        baseURL: 'game/media'
    },
scene: [preloadScene, playGame]
...
}

...and my knife displays as my pre-loading sequence takes place...

For dev's still stuck, there could be an issue with how the relative path is defined in the gaming environment...

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.