Using toLocal to make a minimap

[TufanMeric]

I've spent the last hour trying to use toLocal to make a minimap for my game but I probably misunderstood how it works, I've tried (almost) every combination possible, none of them worked. (Yes, I often try things randomly when they don't work)

Here's how it looks

class Minimap {
  constructor(game) {
    this.game = game;
  }

  init() {
    this.container = new PIXI.Container();
    this.background = new PIXI.Graphics();
    this.background.lineStyle(2, 0x000, 1);
    this.background.beginFill(0x650a5a, 0.25);
    this.background.drawRect(0, 0, 200, 200);
    this.background.endFill();
    this.container.addChild(this.background);
    this.container.x = window.app.screen.width / 2;
    this.container.y = window.app.screen.height / 2;
    this.container.pivot.x = this.container.width / 2;
    this.container.pivot.y = this.container.height / 2;

    window.app.stage.addChild(this.container);
  }

  update() {
    for (let i = 0; i < this.game.entities.length; i += 1) {
      const p = this.container.toLocal(
        this.game.camera,
        this.game.entities[i].container
      );
      const entity = new PIXI.Graphics();
      entity.lineStyle(2, 0x000, 1);
      entity.beginFill(0xffff00, 0.25);
      entity.drawRect(0, 0, 10, 10);
      entity.endFill();
      entity.x = p.x;
      entity.y = p.y;
      this.container.addChild(entity);
    }
  }
}

 

[ivan.popelyshev]

People spend hours on it, yeah, that math is kinda hard. I'd like to help but even I cant pinpoint the issue here, make a full demo please

Your approach is correct, i mean, trying things. That's how I learned all that.

[TufanMeric]

13 hours ago, ivan.popelyshev said:

People spend hours on it, yeah, that math is kinda hard. I'd like to help but even I cant pinpoint the issue here, make a full demo please

Your approach is correct, i mean, trying things. That's how I learned all that.

For me, even 2 + 2 is hard ¯\_(ツ)_/¯

Here's a playground demo: https://www.pixiplayground.com/#/edit/AF06lEACh_Mw3xqXmNRtp

[Exca]

With toLocal you get the given coordinate in the objects local coordinates. So if you would change the toLocal into toLocal( entities.position, app.stage) then the rectangles would be drawn where the bunnies are.

In order to make that work as minimap what you want is to calculate the relative coordinates and calculate that on minimap instead of calculating where the object is in the minimaps scope.

So you could say somethign like:

p.x = entities.x / screen.width * minimapWidth;

p.y = entities.y / screen.height * minimapWidth;

This assumes your map is the size of screen. If it's not, just change the screensize in the calculation to mapsize.