DaaV

Creating Minimap as second Camera view

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

Share this post


Link to post
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?

Share this post


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

Share this post


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

Share this post


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

Share this post


Link to post
Share on other sites
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

Share this post


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

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

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.