Container

phaser에서는 다양한 object를 묶음으로 처리할 수 있다.
그중 하나가 일전에 다루었던 group 이다.
그룹을 만들고(디자인에서는 layer와 비슷..) 이곳에 다양한 object를 올려둘 수 있었다.
이것과 비슷한 것이 지금 다룰 container 이다.
group > container > object 가 아키텍쳐 일 것이다.

참조 : https://github.com/photonstorm/phaser/blob/v3.54.0/src/gameobjects/container/Container.js

이미지와 text를 결합하는 예제.

이미지와 텍스트를 결합한 후 group에 추가하고 클릭이벤트를 생성한다.

preload() {
  this.load.spritesheet('piecesSprite', 'Image Path', {frameWidth: 100, frameHeight: 100 });
}

create() {
  const piecesGroup = this.add.group(); // pieceGroup 이라는 그룹을 생성한다.
  let piece;
  let piecesIndex = 0;
  for (...) {
    // 1. sprite 이미지 및 텍스트라벨을 만들고
    const sprite = this.add.sprite(0, 0, 'piecesSprite', piecesIndex).setOrigin(0);
    const label = this.add.text(0, 0, piecesIndex.toString(), { fontSize: '10em' }).setOrigin(0);
    // 2. 새로운 콘테이너를 만든 후 1에서 만든 이미지와 라벨을 올린다.
    // sprite가 제일 아래에 디스플레이 되고 그 위로 label이 디스플레이 된다.
    const container: any = this.add.container(x, y, [sprite, label]);
    // 3. 콘테이너에 이벤트를 걸어준다.
    // sprite인 경우 바로  sprite.setInteractive().on('pointerdown', () => {}); 처럼 걸어두면 되지만 container의 경우 아래와 같이 setInteractive를 다시 정의해 주어야 한다.
    container.setInteractive(new Phaser.Geom.Rectangle(0, 0, this.pieceWidth, this.pieceHeight), Phaser.Geom.Rectangle.Contains);
    container.on('clicked', this.selectPiece, this);
    // 4. 그룹에 콘테이너를 추가한다.
    piecesGroup.add(container);
    piecesIndex ++;
  }

  this.input.on('gameobjectup',  (pointer: any, gameObject: any) =>
    {
      gameObject.emit('clicked', gameObject);
    }, this);
}

this.add.container 사용시 [sprite, label, ....] 순으로 화면에 디스플레이 된다.
container내의 element에 접근할 경우 container.list[n]. 식으로 접근하면 된다.

container내의 sprite 가져오기

위의 예제에서 우리는 두개의 object (sprite, text) 를 container에 올려 두었다.

const container: any = this.add.container(x, y, [sprite, label]);

프로그램 중에 각각의 sprite와 label을 제어할때는 어떻게 할 수 있을까?
하나는 list를 사용한 방식이고 하나는 getByName을 이용하여 각각에 접근 할 수 있다.

list

const container: any = this.add.container(x, y, [sprite, label]);
container.list[0] // sprite에 접근
container.list[1] // label에 접근

list를 사용한 방법으로 간단히 object에 접근 할 수 있으나 복잡한 프로그램에서는 가독성이 떨어진다.

child 접근

container에 존재하는 child를 가져오는 방식은 다양하다.
getAt(index), getByName('name)

getByName 을 이용한 접근법

const sprite = ....
const label = ....

sprite.name = 'mySprite'; // 각각의 이름을 지정
label.name = 'myLabel';

const container: any = this.add.container(x, y, [sprite, label]);
container.getByName('mySprite') // sprite에 접근
container.getByName('myLabel') // label에 접근