phaser 기본구조 알아보기 preload,create,update

phaser는 js기반의 2d게임엔진으로 canvas에다가 결과물이 나온다

따로 전용 에디터까지 있어 편리해 보인다

1.Phaser.Game()로 기본구조 잡기

   const config = {
        type: Phaser.AUTO,
        width: 800, //캔바스 가로사이즈
        height: 600, //캔바스 세로사이즈
        physics: {
          default: "arcade", //게임엔진에 물리법칙 지정
          arcade: {
            gravity: { y: 500 }, //중력
            debug: true, //디버그 모드
          },
        },
        scene: { //장면
          preload,
          create,
          update,
        },
      };

      const game = new Phaser.Game(config); //phaser세팅 넣기

physics를 통해물리엔진, 중력, 디버그를 선택할 수 있다

개발단계에서는 debug를 true로 해두는 게 좋다. 게임에 들어가 있는 sprite(요소)들을 자세하게 볼 수 있다(예를 들어 충돌 판정되는 영역 같은 거)

-default 종류

arcade(기본 내장)	점프, 충돌, 중력 같은 캐주얼 게임용
matter	실제 물리에 가까운 엔진

 

2. preload(), create() , update()

preload(), create() , update()는 게임의 생명주기(lifecycle)를 담당한다. 

-preload

게임이 시작되기 전에, 필요한 자원(이미지,스프라이트 시트,사운드,폰트, 타일맵 등 )을 미리 불러오는 단계

-create

preload를 통해 로드된 자원을 이용해서 실제 게임 화면을 만드는 단계

-update

게임이 실행되는 동안 계속 반복되는 루프로 캐릭터이동,충돌 체크,키보드 입력에 따른 반응을 역할 하는 단계

 

3. 전체적인 사용법

preload, create, update순으로 코드를 작성해야 된다

      const config = {
        type: Phaser.AUTO,
        width: 800,
        height: 600,
        physics: {
          default: "arcade",
          arcade: {
            gravity: { y: 500 },
            debug: true,
          },
        },
        scene: {
          preload,
          create,
          update,
        },
      };

      const game = new Phaser.Game(config);

      function preload() {
        this.load.image("player", "player.png");
        this.load.image("sky", "sky.png");
      }

      function create() {
        this.player = this.physics.add.sprite(200, 300, "player");
        this.sky = this.add.image(400, 300, "sky");
        this.player.setScale(0.5);
        this.sky.setScale(0.5);
      }

      function update() {}

-  this.load.image('에셋 키 이름','이미지경로')

이미지를 phaser에 등록하는 코드로 첫 번째 인자 에셋 키를 가지고 이미지를 식별함

- this.physics.add.sprite(x축위치,y축위치,'에셋 키')

sprite는 이미지에 중력, 충돌판정등을 받게 한다.

물리엔진의 계산대상의 포함된다. 

-this.add.image(x축위치,y축위치,'에셋 키')

sprite랑은 다르게 중력, 충돌판정을 안 받는다.

게임진행과 상관없는 단순히 배경에 떠있는 구름, 태양 그런 거라고 보면 된다

-setScale(0.5)

preload에서 등록된 원본이미지를 얼마큼 확대축소할지를 정하는 거다 

(0.5배 줄여진다 생각하면 됨)

 

-코드 예제

https://github.com/bsanjun0417/phaser-study/tree/master/basic1