ECS GraphicsSystem not working

[chrispytoes]

I am trying to use the ECS and get the GraphicsSystem working. I create an actor and give it a TransformComponent and a GraphicsComponent but it still does not render. I did add the GraphicsSystem to the world.

class Game {
  public engine: Engine;
  public player: Actor = new Actor({
    width: 128,
    height: 128
  });
  public gameScene: Scene = new Scene();

  constructor() {
    this.player.addComponent(new TransformComponent());
    this.player.addComponent(new GraphicsComponent({
      current: 'triangle',
      graphics: {
        triangle: new Polygon({
          points: [
            vec(-64, -64),
            vec(64, 0),
            vec(-64, 64),
          ],
          color: Color.Red,
          strokeColor: Color.Black,
        }),
      }
    }));
  }

  public async start() {
    this.engine = new Engine({
      width: window.innerWidth,
      height: window.innerHeight,
      canvasElementId: 'game',
      displayMode: DisplayMode.FillScreen
    });

    this.gameScene.world.add(new GraphicsSystem());

    this.gameScene.world.add(this.player);
    this.gameScene.camera.strategy.lockToActor(this.player);

    this.engine.addScene('game', this.gameScene);
    this.engine.goToScene('game');

    await this.engine.start();
  }
}

The player is not rendering its GraphicsComponent. Setting the color of the player gives me a solid colored square, but it still doesn't render the polygon. Other parts of the ECS do seem to work though, like the actor does respond to changes to its TransformComponent position.

[eonarheim]

Hi @chrispytoes

This is a good issue!

Actor comes as a pre-baked Entity with a lot of components already added to it, including the TransformComponent and GraphicsComponent. Additionally Excalibur already has the GraphicsSystem added to the ECS world.

So to render the triangle all you need to do is this:

class Game5 {
  public engine: ex.Engine;
  public player: ex.Actor = new ex.Actor({
    width: 128,
    height: 128
  });
  public gameScene: ex.Scene = new ex.Scene();

  constructor() {
    this.player.graphics.use(new ex.Polygon({
      points: [
        ex.vec(-64, -64),
        ex.vec(64, 0),
        ex.vec(-64, 64),
      ],
      color: ex.Color.Red,
      strokeColor: ex.Color.Black,
      padding: 2 // stroke takes up 1 pixel of space so gave it a little extra
    }))
  }

  public async start() {
    this.engine = new ex.Engine({
      width: window.innerWidth,
      height: window.innerHeight,
      canvasElementId: 'game',
      displayMode: ex.DisplayMode.FillScreen
    });
    // switched this to scene.add() for actors
    this.gameScene.add(this.player);

    this.gameScene.camera.strategy.lockToActor(this.player);

    this.engine.addScene('game', this.gameScene);
    this.engine.goToScene('game');

    await this.engine.start();
  }
}

However if you want to live in the ECS world

Here is an example that's using plain old ECS and ejecting all the excalibur defaults

class Game5 {
  public engine: ex.Engine;
  public player: ex.Entity = new ex.Entity([], 'player');
  public gameScene: ex.Scene = new ex.Scene();

  constructor() {
    this.player.addComponent(new ex.TransformComponent());
    
    this.player.addComponent(new ex.GraphicsComponent({
      current: 'triangle',
      graphics: {
        triangle: new ex.Polygon({
          points: [
            ex.vec(-64, -64),
            ex.vec(64, 0),
            ex.vec(-64, 64),
          ],
          color: ex.Color.Red,
          strokeColor: ex.Color.Black,
          padding: 2
        }),
      }
    }));
  }

  public async start() {
    this.engine = new ex.Engine({
      width: window.innerWidth,
      height: window.innerHeight,
      canvasElementId: 'game',
      displayMode: ex.DisplayMode.FillScreen
    });
    // Eject all the default Excalibur systems
    this.gameScene.world.clearSystems();

    // Add only the systems you want
    this.gameScene.world.add(new ex.GraphicsSystem());
    this.gameScene.world.add(this.player);

    // Grab the transform component
    const transform = this.player.get(ex.TransformComponent);
    transform.pos = this.engine.screen.center;

    // Write a new strategy to work on entities
    // this.gameScene.camera.strategy.lockToActor(this.player as ex.Actor);

    this.engine.addScene('game', this.gameScene);
    this.engine.goToScene('game');

    await this.engine.start();
  }
}

Also I think you found a bug too!

You should be able to override existing components on Actor's, but it doesn't seem to be working for me! The above code examples do work though.

[eonarheim]

Pr fixing the override = true .addComponent(myComponent, true) flag #2686