Loading an image by extending it to an object

[Polska296]

I am trying to load a character image along with the character object but am having trouble. Currently the game loads without any errors but my sprite does not appear on the screen. I have tried to find a solution online and have looked through the "including sprites/extending sprite demo" phaser example and another topic on here that was for extending phaser game objects. I think I may be close since the character object values appear on the screen but the character image does not. Below is my code.

function Hero() {

   this.name = "Hero"; 

   this.power = 3;

   this.defense = 3;

   this.health = 15;

   this.maxhealth = 15;

   this.powerExp = 0;

   this.defenseExp = 0;

   this.healthExp = 0;

   this.attackStance = "Aggressive";

}

 

class Scene1 extends Phaser.Scene {

   constructor() {

   super({key:"Scene1"});

}

 

preload() {

     this.load.image('hero', 'assets/sprites/characters/hero.png', 41, 55);

}

 

create() {

   this.hero = new Hero({

       scene: this,

       x: 300,

       y: 300,

       key: 'hero',

   })

}

Also, I just started using Phaser 3 and have no prior web game development experience so this might be something simple I am just missing.]

Thanks in advance. Let me know if you need to see more of the code because I just included what is related to the character I want to load.

[Polska296]

Just as an update and more info, I am able to get the sprite to show up and then assign it all the properties by using the below code. However I will have characters in this game that I will be reusing multiple times and do not want to have to write this each time the character appears.

this.hero = this.add.sprite(300, 300, 'hero');

 

// Hero character

this.hero.name = "Hero";

this.hero.power = 3;

this.hero.defense = 3;

this.hero.health = 15;

this.hero.maxhealth = 15;

this.hero.powerExp = 0;

this.hero.defenseExp = 0;

this.hero.healthExp = 0;

this.hero.attackStance = "Aggressive";

 

[YuPi]

Looks like you've created the image, but forgot to add it to the scene.

this.add.existing(this.hero);