Issue with loading assets

[DonkeyKong]

Hello All,

I am completely new to Phaser.

For learning purposes, I did a little game from a recent book that I bought, and put it on my website, that I use for testing my stuff.

Here is the URL:

http://www.retroinvaders.net/shump/build/index.html
 

The issue is that the game assets won't load properly at first time, it's only when I refresh the page, at least 4 times, that I see all the assets of the game properly loaded.

The Web Console (Firefox) says: 

Phaser.Cache.getImage: Key "enemyBullet" not found in Cache. 

Same error for all the game assets is repeated again and again, so not just "enemyBullet", but all the assets.

Here is the code of the Preload.js file.

 

export default class Preload {

  constructor() {
  	this.asset = null;
    this.ready = false;
  }

  preload() {
    this.load.image('loading_bg', '../assets/images/loading_bg.jpg');
  }

  create() {

    //background for game
    this.add.sprite(0,0, "loading_bg");

    this.asset = this.add.sprite(this.game.width/2,this.game.height/2, 'preloader');
    this.asset.anchor.setTo(0.5, 0.5);

    this.load.onLoadComplete.addOnce(this.onLoadComplete, this);
    this.load.setPreloadSprite(this.asset);

    //do all your loading here
    
    //this.load.image('player', '../assets/images/player.png'); //width and height of sprite
    this.load.image('bg', '../assets/images/bg.jpg');
    this.load.image('bullet', '../assets/images/bullet.png');
    this.load.image('enemy', '../assets/images/enemy.png');
    this.load.image('explosion', '../assets/images/explosion.png');

    this.load.spritesheet('player', '../assets/images/gunbot.png', 214, 269); //width and height of sprite
    this.load.image('hexagon', '../assets/images/hexagon_particle.png');
    //this.load.image('bullet', '../assets/images/bullet.png');
    this.load.image('enemyBullet', '../assets/images/enemyBullet.png');
    //this.load.image('bg', '../assets/images/bg.jpg');

    this.load.image('health_bar', '../assets/images/health_bar.png');
    this.load.image('health_holder', '../assets/images/health_holder.png');
    this.load.image('circle', '../assets/images/circle.png');

    //staaaart load
    this.load.start();
  }

  update() {

    if(this.ready) {
      this.game.state.start('game');
    }

  }

  onLoadComplete() {
    this.ready = true;
  }

}

What am I doing wrong?

Aany help, would be greatly appreciated.

Thank you.

[mattstyles]

I'm no expert on Phaser loading patterns but its sounds like something isn't waiting for all the assets to load (your code looks like it is though...), when you keep hitting refresh the browser will be caching them so when it does work, I wonder if the browser cache is loaded up so that all the images have been loaded super quick, whereas your earlier attempts are still going over the wire and are too slow.

Try some logging in your various different states to make sure that your main game state (presumably where you're trying to use the assets) isn't being fired earlier than you're expecting.

I've just tried your url and this is exactly what I'm seeing, the gunbot.png is the most obvious, where its large it was taking nearly a second to get delivered to the browser but the game started way before that, almost immediately (given the first image takes just 54ms to arrive, it really is almost immediately, unless your main game state is actually starting before your preloader, I can't check that from the network tab).

Definitely seems to be a case of running the main game before loading has completed.

[rich]

I'd strongly recommend against this way of loading assets. Split it over 2 states (Boot and Preload). Load the preloader sprite graphic in Boot, then move to the Preload state, and in there load everything else.

Failing that, reset the Loader in the create function before doing anything else with it.

[DonkeyKong]

Thanks for your comments.

I thought that I already done that, here is the Boot.js state:

export default class Boot {

  preload() {
    this.load.image('preloader', '../assets/images/loading_bar.png');
  }

  create() {
    this.game.input.maxPointers = 1;
    this.game.state.start('preload');
  }

}

And here is app.js
 

var game;

import Boot from "./states/Boot.js";
import Preload from "./states/Preload.js";
import Game from "./states/Game.js";
import StartScreen from "./states/StartScreen.js";
import GameOver from "./states/GameOver.js";


window.onload = function () {
  game = new Phaser.Game(1024, 768, Phaser.AUTO, 'game');
  game.state.add('boot', Boot);
  game.state.add('preload', Preload);
  game.state.add('game', Game);
  game.state.add('gameOver', GameOver);
  game.state.add('startScreen', StartScreen);
  game.state.start('boot');
};

I can't understand what's wrong, I thought it was a local issue with my browser but as it turns out it's not the case.
 

EDIT: Game assets seem to load OK now, after I linked Phaser.min.js, instead of Phaser.js, in my index.html file.

 

[phreaknation]

Have you tested it in other browsers? made sure it works in other browsers to narrow it down? BTW, game wise, I would speed up the player character and allow her legs to go off screen. Cant shoot the guys at the bottom and shes quite large. End up getting shot more than anything else and cant dodge. I recommend making her no more than 1/6 the game screen

[DonkeyKong]

37 minutes ago, phreaknation said:

Have you tested it in other browsers? made sure it works in other browsers to narrow it down? BTW, game wise, I would speed up the player character and allow her legs to go off screen. Cant shoot the guys at the bottom and shes quite large. End up getting shot more than anything else and cant dodge. I recommend making her no more than 1/6 the game screen

For some reasons (beyond my current knowledge) it  now works "OK" with Phaser.min.js, rather than Phaser.js, that I used before. 

And sure, the game is from a book and it is just for learning purposes. As it is it now, it's hardly playable.

Thanks for the comments.

[phreaknation]

Ohhh hey, I wasnt knocking it. Giving creative feed back to make it better

[DonkeyKong]

Just now, phreaknation said:

Ohhh hey, I wasnt knocking it. Giving creative feed back to make it better

Sure that was appreciated! 

[phreaknation]

if you need any help, suggestions, ideas, let me know. I also mean for the learning aspect as well. I have thrown together a vertical shooter and have lots of nifty things I can help with.

[DonkeyKong]

Great and thanks, I'd like to write a vertical shooter as one of my first "real" projects. I'll be in touch!

[phreaknation]

I plan to take out my projectile code and make that a plugin soon. I have a few more plugins to setup and release first though.