Sign in to follow this  

Unable to load texture in extended Sprite/Image class

Recommended Posts


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 -, into classes. To do this I have been looking at this repo:

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) {

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

The scene:

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

export class SimpleScene extends Phaser.Scene {

  constructor() {
      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() {




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);


    // 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

    // Shows that we get a different result if what is passed to TextureManager
    // isn't actually a texture within it.

    // End testing section


  update(keys) {

    if (keys.up.isDown && this.body.touching.down)

    if (keys.left.isDown)
    else if (keys.right.isDown)
    else if (this.body.touching.down)




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:

Thank you for any help,


Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.