Jump to content
This forum will be closing down. Please move to the respective dedicated project forums.

Issue with loading assets


DonkeyKong
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...