Jump to content

Using toLocal to make a minimap


Recommended Posts

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


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


Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
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.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...