Search the Community

Hi everyone, I am currently using Phaser,io with ES6 syntax , gulp, babelify, browserify and browsersync that is something similar to the ES6 boilerplate but I am using my own gulp file. I am encountering a bug where I import an image there is a green square behind it and there is a warning of "Phaser.Cache.getImage: Key "player" not found in Cache." on the Chrome browser debug tool show on the attached image. I have a GameState.js file as so: import Player from "../objects/Player"; class GameState extends Phaser.State { constructor(){ super(); } preload(){ let lander = new Player(this.game,0, 0); lander.loadImage(); } create() { let lander = new Player(this.game,0,0); lander.setSprite(); } } export default GameState; I am importing the image from the Player.js file: import {Images} from "../global"; class Player extends Phaser.Image { constructor(game, x, y, key,frame){ super(game, x, y, key, frame); this.loadImage(); this.setSprite(); } loadImage(){ this.game.load.image("player", Images.lander); } setSprite(){ this.game.add.sprite(10,10,"player"); } } export default Player; the global.js file contains variables like so: var gameScreen = { Width: window.innerWidth, Height: window.innerHeight }; var Images = { lander: '/images/player.png' }; export {gameScreen, Images}; Is there anyway to fix this bug? Thanks