Trying to load an image as sprite, got nothing

[salsa2k]

Hey guys, I'm trying to load an image in my scene, but I got nothing.

scene:

export default class GameScene extends ex.Scene {
  constructor() {
    super();
  }

  public onInitialize(engine: ex.Engine) {
    var hello = new ex.Label({
      text: 'Game Scene',
      pos: this.engine.screen.center,
      color: ex.Color.White,
      font: new ex.Font({
        family: 'Segoe UI Light',
        size: 50,
        textAlign: ex.TextAlign.Center,
      }),
    });
    this.add(hello);

    const men = new MyActor();
    this.add(men);
  }
}

actor:

export default class MyActor extends ex.Actor {
  private image: ex.ImageSource;
  private sprite: ex.Sprite;

  constructor() {
    super();
  }

  public onInitialize(engine: ex.Engine) {
    this.SetAvatar();
    this.graphics.add(this.sprite);
  }

  public SetAvatar() {
    this.image = new ex.ImageSource("../assets/avatar/man.png");
    this.sprite = new ex.Sprite({
      image: this.image,
      sourceView: {
        x: 100,
        y: 100,
        width: 512,
        height: 512,
      },
      destSize: {
        width: 80,
        height: 80,
      },
    });
  }
}

What I'm doing wrong?
Why I can't see the image?

Thanks

[eonarheim]

Hi @salsa2k

ex.ImageSource needs to be loaded for it to work properly and display in the ex.Sprite. I'll make an issue to log a warning in the console about how to fix this if an unloaded image is detected, not displaying things is a rough failure mode.

You can either call this.image.load() as needed or create a loader and load up all the resources ahead of time, here is an example of a common pattern we employ

• Loader at start https://github.com/excaliburjs/sample-platformer/blob/main/src/main.ts#L32
• Resources added to the loader https://github.com/excaliburjs/sample-platformer/blob/main/src/resources.ts#L55

Let me know if this helps!

[eonarheim]

@salsa2k I've added a logged warning to help with this 👍 #2371