Unable to load texture in extended Sprite/Image class

[jimnarey]

Hi,

I hope somebody can help me. I am unable to get a texture applied to an extended Sprite or Image class. I have had a good look through this forum and, if anything, it's shown people using similar code having no problems. 

I have been trying to adapt a very basic game (it has a movable player and a platform) I'm building with a friend,  based on this boilerplate - https://github.com/snowbillr/phaser3-webpack-es6-dev-starter, into classes. To do this I have been looking at this repo: https://github.com/nkholski/phaser3-es6-webpack.

This is the game:

import 'phaser';

import { SimpleScene } from './scenes/simple-scene';

const gameConfig = {
  width: 800,
  height: 600,
  scene: SimpleScene,
};


class Game extends Phaser.Game {
	constructor(config) {
		super(config);
	}
}


window.onload = () => {
	const game = new Game(gameConfig);
};

The scene:

import { Player } from '../characters/player';

export class SimpleScene extends Phaser.Scene {

  constructor() {
    super({
      key: 'level1',
      physics: {
        arcade: {
          debug: true,
          gravity: { y: 300}
        }
      }
    });
  }

  preload() {
    this.load.image('cokecan', 'assets/cokecan.png');
    this.load.image('ground', 'assets/ground.png');
  }

  create() {

    this.keys = {
      up: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.UP),
      left: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.LEFT),
      right: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.RIGHT),
      down: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.DOWN)
    };

    this.player =  new Player({
      scene: this,
      x: 500,
      y: 300,
      key: 'cokecan'
    });

    var platforms = this.physics.add.staticGroup();
    platforms.create(400, 568, 'ground').setScale(1).refreshBody();
    this.physics.add.collider(this.player, platforms);
  }

  update() {

    this.player.update(this.keys);

  }
}

 

The player:

// Initially this was an attempt to extend Phaser.Sprite but reverted
// to Image in case Sprite expects an animation. The result is exactly the same
export class Player extends Phaser.GameObjects.Image {
  constructor(config) {
    super(config.scene, config.x, config.y, config.key);

    config.scene.physics.add.existing(this);
    this.body.setCollideWorldBounds(true);

    // Following section contains attempts to get texture showing

    console.log(config.key); // The string is being passed as expected
    console.log(this.texture); // The string refers to a real item in the TextureManager

    this.setActive(true); // Makes no difference
    this.setVisible(true); // Makes no difference

    // Doesn't throw an error, so finds texture, but no difference
    this.setTexture('cokecan');

    // Shows that we get a different result if what is passed to TextureManager
    // isn't actually a texture within it.
    this.setTexture('not_a_valid_name');
    console.log(this.texture);

    // End testing section

  }

  update(keys) {

    if (keys.up.isDown && this.body.touching.down)
    {
        this.body.setVelocityY(-300);
    }

    if (keys.left.isDown)
    {
        this.body.setVelocityX(-100);
    }
    else if (keys.right.isDown)
    {
        this.body.setVelocityX(100);
    }
    else if (this.body.touching.down)
    {
        this.body.setVelocityX(0);
    }

  }

}

 

The cokecan image displays properly when snowbillr's repo is cloned and run but when I moved the player into a separate class, the sprite or image is blank. A green box of the correct size does appear and the console output also indicates that the image file is being found, as before. The correct key appears in texture manager.

The full code can be found here: https://github.com/EdwardAndress/scary_narey/blob/try_to_load_image_texture/src/characters/player.js

Thank you for any help,

Jim.