Scene 호출하기

앞선 내용을 간략히 구조화 하자면 아래와 같을 것이다.
여기서는 Scene이 호출되는 순서와 scene내부의 method의 호출 순서등에 대해 간략히 기술할 것입니다.

import * as Phaser from 'phaser';
import Scene1 from './phaser/Scene1';
import Scene2 from './phaser/Scene2';
import Scene3 from './phaser/Scene3';
..........
export class GameComponent implements OnInit, OnDestroy {
  private config = {
    .....
    scene: [ // 먼저 정의된 모든 Scene을 넣어둡니다. 
      Scene1,
      Scene2,
      Scene3,
      .....
    ],
  }

  ngOnInit() {
    this.game = new Phaser.Game(this.config);
    // 위와 같이 new로 정의하는 순간 this.config.scene 중에 제일 먼저 정의한 Scene1 을 불러옮니다.
  }

Scene 의 구조

Scene의 구조는 아래와 같습니다.
그리고 Scene이 호출될 때 실행되는 순서를 별도의 주석문으로 기술 하였습니다.

import * as Phaser from 'phaser';
..........
export default class Scene extends Phaser.Scene {

  constructor() { // 1 번째 자동 실행
    super('scenename'); // 이곳에 scene의 이름을 정의하여 나중에라도 이 scene만을 호출 할때 유용합니다.
  }

  init() { // 2 번째 자동 실행 (주로 환경 파일들을 초기화 한다.)
  }

  preload() { // 3 번째 자동 실행 (주로 게임에 필요한 assets을 불러온다)
  }

  create() { // 4 번째 자동 실행 (load된 asset을 게임 object로 변환한다.)
  }

  override update() { // 프로그램에서 object의 변화가 있을때 자동으로 display한다.
  }

}

위와 같이 처리하면 Scene1이 호출되고 constructor->init->preload->create->update 로 처리가 될 것입니다.

Scene 이동

만약 Scene이 완료된 후 Scene2를 호출하고 싶을 경우

this.game.scene.start('scene name', options); 

이렇게 하면 Scene1에서 [scene name]을 호출하는데 호출되는 Scene 에서는 init()로 부터 시작하게 됩니다.
물론 별도의 this.game.scene.start를 하지 않아도 어느 정도의 시간 후에는 scene에 정의된 다음단계로 넘어 갑니다. Scene2의 이름이 scene2이라면 아래와 같은 모습일 것입니다.

• Scene1에서 Scene2 호출

this.game.scene.start('scene2', {row: 3, column: 3}); 

• Scene2

init(o: any) {
  this.row = o.row;
  this.column = o.column;
}

// init 에서 수시한 parameter값을 이용하여 이후 프로그램 작성
preload() {
}

create() {

}

Scene 내의 함수 호출

new Phaser.Game() 을 호출후 외부에서 Phaser.Game내의 scene을 호출하는 방법 입니다.

this.game = new Phaser.Game(this.config);
this.game.scene.keys['gameKey'].shuffle();

위의 key는 아래의 key에 정의한 값이 됩니다.

export class Game extends Phaser.Scene {
 constructor() {
    super({
      key: 'main'
    });
  }