Phaser3 게임 제작(4) : 씬전환

오늘 할 일

1. 게임 씬 분리하기

씬 분리만으로 거의 2주가량을 헤맸다.... js의 문제인줄알고 ts로 변환했었는데,
다시 js로 작업해서 해결책을 찾았다.

🎬 씬 추가하기

우선 씬을 만들기 위해, 기존의 코드를 Class로 새로 작성해주었다.

title.js 에 첫 시작화면을 넣고, ingame에서 리듬게임을 진행하도록 씬을 분리했다.

씬을 추가했는데 잘 작동하지 않아서 살펴보니, 가장 처음으로 실행될 씬과 함께 config, game 정의를 넣어줘야 했다.

const config = {
    type: Phaser.WEBGL,
    width: 1200,
    height: 853,
    audio: {
        disableWebAudio: true
    },
    physics: {
        default: 'arcade',
        arcade: {
            debug: false,
            gravity: {
                y: 0
            }
        }
    },
    backgroundColor: '#FFF',
    parent: 'phaser_canvas',
    scene : [S_Title,S_InGame]
};

let game = new Phaser.Game(config);

🐞 class 내부에서 함수 호출이 안 됨!

계속해서 function is undefined 에러가 발생했다.
create 함수 내부에서 함수를 호출하게 했더니 발생한 문제였다

create 함수는 씬이 생성될 때 실행되고, class 내부의 다른 함수는 사용될 때 생성돼서 발생하는 문제인 것 같다.

씬 내부에서는 preload->create->update 순서로 진행된다.
디버깅 과정에서 이 순서를 잘 지키지 못해 TDZ 문제가 발생하기도 했다.

class의 constructor에 메소드 변수를 선언하고 create에서 사용하게 했다

export default class S_InGame extends Phaser.Scene {
    constructor() {
        ...
       	this.startGame = () => { //람다식으로 메소드 변수 생성
            this.startTime = new Date();
            return;
        };
        ...
    }
    create(){
        ...
    	this.startGame(); //create 내부에서 실행
        ...
    }
 }

+ 변수명 재정의

최근에 내가 코드의 변수명을 잘 지키지 않는다는 것을 알고, 이에 따라 변수명과 메소드, 클래스명을 규칙에 맞게 작성해주었다.

  this.line; // 라인 변수. 변수는 CamelCase로 짓는다
  this.textEval;
  this.startGame = () => {} //메소드도 CamelCase로 짓는다.

  this.scorenumarr = [500, 300, 100]; // const 상수로 사용할 변수. 상수는 snake_case로 짓는다
  export default class S_InGame extends Phaser.Scene  // Class 이름. Class 이름은 Pascal로 짓는다.

참고

• 변수명
  https://bamtory29.tistory.com/entry/Javascript-%EB%B3%80%EC%88%98-%EC%84%A0%EC%96%B8%EA%B3%BC-%EB%AA%85%EB%AA%85-%EA%B7%9C%EC%B9%99
• phaser3 코드구조 참고
  https://codepen.io/samme/pen/zYvmWBR
• phaser3 홈페이지 examples 코드 참고
• ts로 만든 Phaser3 유튜브
  https://www.youtube.com/watch?v=wDOym-mXxO4
• TDZ
  https://ui.toast.com/weekly-pick/ko_20191014