Noaml1

Image Not Displaying in Phaser

Recommended Posts

I'm following the rougelike tutorial and for some reason the preloader images arent displaying.
I load them in the boot state:

preload() {//changed the file names to make it easier to type            this.load.image('preloaderBackground', 'assets/progBarBack.png');            this.load.image('preloaderBar', 'assets/progBar.png');            this.game.state.start('Preloader');        }

and i try to display them here:
 

module RougeLikeClone {    export class Preloader extends Phaser.State{        background: Phaser.Sprite;        preloadBar: Phaser.Sprite;        create() {            this.stage.backgroundColor = "#FF0000"; //just to check            this.background = this.add.sprite(this.game.width / 2 - 250, this.game.height / 2 - 70, 'preloaderBackground');            this.preloadBar = this.add.sprite(this.game.width / 2 - 250, this.game.height / 2 - 70, 'preloaderBar');        }    }} 

I get a red background with a greenoutlined black box when this runs. Whats the problem? (see attatched)

post-8681-0-95012800-1400682419.png

Share this post


Link to post
Share on other sites

Also, it did load correctly once, and then it didn't
i didnt touch the add portion of the code but i tried adding the line 

			this.load.setPreloadSprite(this.preloadBar);

then, even after taking this line out the problem persisted

Share this post


Link to post
Share on other sites

The black/green box means "your image key is correct, but there's no image in the cache for it" which nearly always happens as a result of a load error on the server. I.e. the image isn't in the path specified, or you tried to open the html file locally and not via a server, or something along those lines. Open DevTools in your browser, you'll see the cause there.

Share this post


Link to post
Share on other sites

In fact this is causing it:

preload() {//changed the file names to make it easier to type            this.load.image('preloaderBackground', 'assets/progBarBack.png');            this.load.image('preloaderBar', 'assets/progBar.png');            this.game.state.start('Preloader');        }

You're changing state before the loader has had a chance to complete. The state.start line should be in the create method, not preload.

Share this post


Link to post
Share on other sites

Hi there. I'm getting a problem just like that but I do get the images in a webserver!! Here are the lines:

assets/dude.png:1 GET http://localhost/DoodleJumpPhaser/assets/dude.png 404 (Not Found)
phaser.js:70272 Phaser.Loader - image[pixel]: error loading asset from URL assets/pixel_1.png
phaser.js:70272 Phaser.Loader - image[hero]: error loading asset from URL assets/dude.png
10phaser.js:67355 Phaser.Cache.getImage: Key "pixel" not found in Cache.
phaser.js:67355 Phaser.Cache.getImage: Key "hero" not found in Cache.
 
What should I do? PLEASE HALP!

Share this post


Link to post
Share on other sites

Now it's working when I use Safari to see it. But when I go to Chrome it still says I cannot load the image. And now it's saying this:

pixel_1.png:1 GET http://localhost/DoodleJumpPhaser/pixel_1.png 403 (Forbidden)
phaser.js:70272 Phaser.Loader - image[hero]: error loading asset from URL dude.png
phaser.js:70272 Phaser.Loader - image[pixel]: error loading asset from URL pixel_1.png
10phaser.js:67355 Phaser.Cache.getImage: Key "pixel" not found in Cache.
phaser.js:67355 Phaser.Cache.getImage: Key "hero" not found in Cache.
 
It's error 403. That's a problem with my browser(Chrome), right?

Share this post


Link to post
Share on other sites

I know it's old but for anyone that ends up here in search for a solution:)

 

If you will encounter the message about `Phaser.Cache.getImage: Key "pixel" not found in Cache.` then check if you start new state with clear cache enabled:) if so change 3rd param to true

this.game.state.start(Level.KEY, true, true);//clear cache
this.game.state.start(Level.KEY, true, false);//keep cache

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

  • Recently Browsing   0 members

    No registered users viewing this page.