Creating Minimap as second Camera view

[DaaV 0]

Hello,

I'm new here, so firstly I want to greet with all of you.

 

Regarding my question, or maybe problem - some background here: I want to create minimal for My 2D space shooter. I check tutorials on labs.phaser where I saw example with creating MiniMap with second camera - it sounds good. So I created class for My MiniMap:

import Phaser from 'phaser'

export default class MiniMap extends Phaser.Cameras.Scene2D.Camera {
  constructor ({
    scene,
    x = 10,
    y = 10,
    width = 192,
    height = 192,
    zoom = 0.1,
    scroll = { x: 960, y: 960 }
  }) {
    super(x, y, width, height)
    this.scene = scene
    this.zoom = zoom
    this.scroll = scroll
  }

  init () {
    this.scene.cameras.cameras.push(this)
    this.scene.cameras.addExisting(this)
    this.setZoom(this.zoom)
    this.setScroll(this.scroll.x, this.scroll.y)
    return this
  }
}

And I'm creating it in My GameScene in create() function:

create () {
    this.bgImage = new BackgroundImage({ scene: this }).init()
    this.miniMap = new MiniMap({ scene: this }).init()
    this.miniMap.setBackgroundColor('black')

    this.player = new Spaceship({ scene: this, x: 0, y: 0 }).init()
    this.camera.startFollow(this.player)
}

About My sizing, BackgroundImage and Bounds are 1920 x 1920 px, so in MiniMap we had 192 x 192 and also zoom as 0.1 (1/10 of real game world).

It should create Map with the whole world, but it is cut on left and top and have free space at right and bottom (attachment).

How to fix it? Also, maybe you can give me some tips how to change Spaceship sprite on MiniMap (second camera) as for example dot?

Thanks for advance!

Best,

DaaV

 

[nkholski 61]

Might be related to this issue when zooming in:

https://github.com/photonstorm/phaser/issues/3547

[DaaV 0]

Thanks for linking @nkholski, yes you could be right and it could be related to this issue. So is there now any way to create fully working MiniMap with Phaser3?

Best,
DaaV

[samme 719]

On 5/2/2018 at 7:16 AM, DaaV said:

It should create Map with the whole world, but it is cut on left and top and have free space at right and bottom (attachment).

Is that from x=10, y=10?

[DaaV 0]

No, @samme, this x & y is position of second camera (here as MiniMap) on our screen, it's not position of where camera starts. For example, if we create MiniMap like this:

this.miniMap = new MiniMap({ scene: this, x: 0, y: 0 }).init()

we still have this issue with moved camera screen, but now MiniMap is starting from top left corner. Unfortunately, I didn't notice anything more.

[samme 719]

https://codepen.io/samme/pen/zjdgEm?editors=0010

[DaaV 0]

@samme, sorry but I didn't get it - on your example we had this same problem: the circle is cut on MiniMap (attachment)?

[samme 719]

Yes, it's the same problem. I guess it's a bug.

[DaaV 0]

@rich I think we found some bug here, should we create issue on GitHub?

@samme - what is funny, change zoom value from 0.1 to 0.09 and it's working fine. 😅 

Someone could help with changing Sprites on this MiniMap (Spaceship as dot for example)?

Best,
DaaV.

[samme 719]

28 minutes ago, DaaV said:

Someone could help with changing Sprites on this MiniMap (Spaceship as dot for example)?

You can make two sprites (spaceship, dot), tell main camera to ignore the dot, mini camera to ignore the spaceship.

[nkholski 61]

2 hours ago, DaaV said:

@rich I think we found some bug here, should we create issue on GitHub?

1

I added a link to this thread and the codepen to the issue I mentioned above (https://github.com/photonstorm/phaser/issues/3547)

[lupo 0]

On 5/6/2018 at 6:23 PM, samme said:

You can make two sprites (spaceship, dot), tell main camera to ignore the dot, mini camera to ignore the spaceship.

unfortunately this advice doesn't seem to work

https://codepen.io/LupoG/pen/abzEZOK

which i adapted from the above and https://labs.phaser.io/edit.html?src=src/input/camera/camera ignore.js&v=3.21.0

could anyone help me solving this issue or is there a better way creating a mini-map with phaser 3 - this solution seems elegant.

EDIT: Found a working Solution when following the code on this Example: https://labs.phaser.io/edit.html?src=src\camera\minimap camera.js

 

Edited January 6 by lupo