[Phaser3.js 배우기] 1. Phaser3.js의 라이프사이클 파악

들어가며

어떤 프레임워크, 환경이든 라이프사이클(쉬운말로 동작 흐름?)을 제대로 이해하는게 핵심적인 공부방법이다.

다른 예시로, 리액트 컴포넌트의 라이프사이클을 이해하고 나서야

리렌더링 방식과 memo/callback 등의 최적화 방식을 알 수 있듯이,

Phaser로 게임개발을 경험하려면 Phaser의 동작 흐름을 파악해보려 한다.

 

 

태초의 게임 생성

어떤 Phaser 프로젝트든 Config를 new Phaser.Game(...)에 패러미터로 제공하여 새로운 인스턴스를 생성한다.

Phaser객체는 게임 생성을 위한 모든 하위 클래스들을 가지고 있다. (Action, Scenes, Camera, Animation, GameObject, ...)

import LoadingScene from "./scenes/LoadingScene";
import PlayingScene from "./scenes/PlayingScene";

const Config = {
  width: 800, // 게임 화면의 크기와 색을 설정하는 부분
  height: 600,
  backgroundColor: 0x000000,

  scene: [LoadingScene, PlayingScene], // 사용할 scene은 config의 scene 프로퍼티의 배열에 추가.

  pixelArt: true, // pixelArt를 사용할 경우 pixelArt: true로 설정해야 선명하게 보임.

  physics: {
    default: "arcade",  // 물리엔진은 arcade, matter 등이 있고 arcade가 좀 더 단순한 물리엔진
    arcade: {
      debug: process.env.DEBUG === "true",  // .env 파일에 DEBUG=true로 설정되어 있으면 디버그 모드로 실행됩니다.
    },
  },
};

const game = new Phaser.Game(Config);

export default game;

 

 

Scene 단위로 게임이 진행된다.

이전 코드에서도 잠깐 보였듯이 Scene들을 Config.scene의 배열 안에 제공한다. 

import LoadingScene from "./scenes/LoadingScene";
import PlayingScene from "./scenes/PlayingScene";

const Config = {
  width: 800, // 게임 화면의 크기와 색을 설정하는 부분
  height: 600,
  backgroundColor: 0x000000,

  scene: [LoadingScene, PlayingScene], // 사용할 scene은 config의 scene 프로퍼티의 배열에 추가.

 

메인 화면도 Scene이다.

탑뷰 플레이화면부터 맵 등 모든 것이 scene이다.

 

 

Scene의 생애주기

scene도 Phaser.Scene을 상속하는 클래스이다.

클래스답게 constructor에서 생성할 때 주입할 패러미터를 받거나,

상위 클래스의 속성들을 상속받을 수 있다.

 

여기서는 당연히 Phaser.Scene의 속성들을 상속받겠지만..

그런데 super()에 웬 string 하나를 제공하는 것을 볼 수 있다.

이게 phaser만의 특이한 점인데, Scene의 이름을 이곳에서 고유값으로 지정하는 것이다.

 

이 scene의 이름은 외부에서 이 씬 안에 들어있는 변수들과 메소드에 접근할 때 계속 쓰인다.

 

export default class loadingScene extends Phaser.Scene {
  constructor() {
    super("loadingScene"); // scene의 이름 지정
  }
  
  init() {
    // constructor 이후 가장 먼저 실행된다. scene의 초기 설정을 하는 부분
  }
  
  preload() {
    // init 다음 실행된다. image나 audio 등을 불러오는 부분
  }

  create() {
    // preload 다음 실행된다. 
    // load된 resource로 캐릭터나 UI를 생성하는 곳이다. 예를 들어 로딩 글자를 아래처럼 만들 수 있다.
    this.add.text(20, 20, "Loading Game...");
  }
  
  update() {
    // create 다음에 실행된다.
    // create에서 만든 요소들을 움직이거나 없애거나 다시 생성하는 등을 할 수 있다.
  }
}

 

실제 preload와 create까지의 예시

create에서 Scene의 메소드인 add를 통해 실제 화면 상에 요소를 추가할 수 있다.

이때 this.add로 생성된 오브젝트는 Phaser의 GameObject를 반환하므로, 다양한 메서드를 호출하여 조작할 수 있다.

예를 들어 해당 요소의 setX와 setY를 조절할 수 있는데, 이건 Phaser.GameObject가 가지고 있는 메소드인 것이다.

  // ...
  constructor() {
    super("mainScene");
  }
  
  preload() {
    // this.load.image("key", "경로")
    this.load.image("background1", bgImg1);
    this.load.image("background2", bgImg2);
    this.load.image("background3", bgImg3);
    this.load.image("beam", beamImg);
  	this.sound.pauseOnBlur = false;
    // ...
  }

  create() {
    // preload했던 리소스를 활용하여 Scene안에 실제 요소들을 생성해준다.
    // scene은 add라는 메소드도 가지고 있다. add로 추가된 요소들은 Phaser.GameObject를 상속받는다.
    this.background = this.add.image(0, 0, "background1");
    this.background.setOrigin(0,0);
  }
  
  update() {
    this.movePlayerManager();

    /* 
      setX와 setY를 정의한 적이 없는데 사용 가능한 이유:
      이것들은 Phaser.GameObjects.GameObject에 있는 메소드이고,
      Phaser의 모든 오브젝트들은 Phaser.GameObjects.GameObject를 상속하기 때문이다.
      이를 통해 게임 내에서 게임 오브젝트의 위치, 크기, 스케일, 회전, 투명도 등을 제어할 수 있는 많은 기본 도구를 제공한다.
    */
    this.m_background.setX(this.m_player.x - Config.width / 2);
    this.m_background.setY(this.m_player.y - Config.height / 2);
  }

 

이동, 충돌, 상호작용이 필요한 요소라면 Physics 인스턴스가 필요하다

 

GameObject가 아닌 Phaser.Physics의 인스턴스를 만들어야 한다.

GameObject는 인터랙션 메소드는 포함하지 않은 요소이기 때문이다.

그래서 주로 배경이나 UI, 일회성 파티클 효과 정도로만 사용한다.

 

게임 캐릭터, 적, 아이템 등은 Physics를 사용해야된다.

add메소드
scene의 add메소드는 Phaser의 GameObject Factory를 통해 게임 오브젝트를 생성하고 현재 씬에 추가한다.
- 생성된 오브젝트는 물리 연산을 포함하지 않는다.
- 오브젝트는 Phaser의 렌더링 엔진에서만 동작하며, 충돌 검사나 중력 등의 물리 계산은 적용되지 않는다.
- 반환값: Phaser.GameObjects의 인스턴스.

physics의 add메소드
this.physics.add는 Phaser의 Physics.Arcade 시스템을 통해
물리 기반의 게임 오브젝트를 생성하고, 물리 연산(속도, 중력, 충돌 등)을 적용한다. 
- 생성된 오브젝트는 물리 엔진(Physics.Arcade)에 자동으로 등록된다.
- 반환값: Phaser.Physics.Arcade의 인스턴스.

요런 배경은 GameObject의 인스턴스로 충분하다..

이렇게 움직이면서 공격하고 피격 당할 수 있는 애들은 physics.arcade의 인스턴스이다.