[Phaser] 미니맵

 

미니맵 생성 코드

미니맵 뒤에 처리를 하기 위한 사각형을 만들어주고 있다.

실제 맵 크기의 0.1을 곱하여 적절하게 나오도록 값을 설정해준다.

(비율은 개발하는 환경에 맞추어 변경되어야 한다. mapWidth, mapHeight 값도 마찬가지)

   // 미니맵 추가

    let { width, height } = this.game.canvas;

    // offset 0.5, leftTop을 기준으로 배치한다.

    this.minimapBackground = this.add

      .rectangle(

        parseInt(this.mapWidth * 0.05 + width - this.mapWidth * 0.1) - 4,

        parseInt(this.mapHeight * 0.05 + height - this.mapHeight * 0.1) - 4,

        parseInt(this.mapWidth * 0.1) + 8,

        parseInt(this.mapHeight * 0.1) + 8,

        0x9dde85

      )

      .setDepth(100)

      .setScrollFactor(0);

    this.minimap = this.cameras

      .add(

        parseInt(width - this.mapWidth * 0.1) - 4,

        parseInt(height - this.mapHeight * 0.1) - 4,

        parseInt(this.mapWidth * 0.1),

        parseInt(this.mapHeight * 0.1)

      )

      .setZoom(0.1)

      .setName("MiniMap")

      .setScroll(this.mapWidth * 0.45, this.mapHeight * 0.45)

      .ignore(this.minimapBackground); // ignore background object

    // 미니앱이 off 상태인 경우, 생성까지만 진행한다.

    if (!this.game.global.minimap) {

      this.minimapBackground.setActive(false).setVisible(false);

      this.cameras.remove(this.minimap, false);

    }

미니맵은 카메라 manager에 추가를 요청해야 한다. setZoom을 통해 처리하는 비율을 조정한다. 

초기에 미니맵과 배경을 생성하고, 글로벌 변수값에 따라 비활성화 처리를 해준다. 

미니맵 활성화/비활성화

미니맵 버튼을 하나 두고 활성화/비활성화 처리를 해주고 있다.

글로벌 변수에 값을 하나 추가해둔 상태로 업데이트에 사용하고 있다.

  static toggleMinimap(scene) {

    let flag = !scene.minimapBackground.active;

    scene.game.global.minimap = flag;

    scene.minimapBackground.setActive(flag).setVisible(flag);

    // remove: 카메라를 재사용하는 경우 2번째 인자를 false로 주고,

    // 나중에 CameraManager에 해당 카메라를 추가하여 사용한다.

    if (flag) scene.cameras.addExisting(scene.minimap);

    else scene.cameras.remove(scene.minimap, false);

  }

미니맵에는 active, visible 값이 없으므로 백그라운드 용으로 출력한 사각형의 값을 토대로 처리한다.

 

카메라 매니저에서 관리하는 배열에서는 날려주고, 실제 카메라를 없애지는 않는다.
데이터는 유지되며 나중에 카메라 매니저에 추가하여 다시 사용한다. 

미니맵 카메라 예제
https://phaser.io/examples/v3/view/camera/minimap-camera