Jump to content

Creating Minimap as second Camera view


DaaV
 Share

Recommended Posts

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

 

Zrzut ekranu 2018-05-02 o 16.15.07.png

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 1 year later...
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 by lupo
Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

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