[javascript] Phaser에서 게임 스테이지 전환 및 스킵 기능 추가하기

22 Nov 2023

javascript

Phaser는 HTML5 기반의 게임 개발 프레임워크로, 다양한 게임 스테이지를 만들고 전환하는 기능을 제공합니다. 이번 글에서는 Phaser를 사용하여 게임 스테이지 전환 및 스킵 기능을 구현하는 방법을 알아보겠습니다.

스테이지 전환

게임에서는 여러 개의 스테이지를 가질 수 있습니다. 스테이지 전환을 위해서는 Phaser.Scene을 확장한 자식 클래스를 만들어야 합니다. 예를 들어, MainMenu과 Gameplay이라는 두 개의 스테이지를 가진 게임을 만들어보겠습니다.

class MainMenu extends Phaser.Scene {
    constructor() {
        super({ key: 'MainMenu' });
    }

    create() {
        // 메인 메뉴 초기화 코드 작성
    }
}

class Gameplay extends Phaser.Scene {
    constructor() {
        super({ key: 'Gameplay' });
    }

    create() {
        // 게임 플레이 초기화 코드 작성
    }
}

// 스테이지 등록
const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    scene: [MainMenu, Gameplay]
};

const game = new Phaser.Game(config);

MainMenu과 Gameplay은 Phaser.Scene을 상속받는 자식 클래스로 정의되어 있습니다. 각각의 스테이지는 create() 메서드를 구현하여 초기화 코드를 작성합니다.

const config 객체에서 scene 속성에 스테이지를 등록하면, 게임이 시작될 때 해당 스테이지가 실행됩니다.

스테이지 전환하기

게임 중에 다른 스테이지로 전환하려면 this.scene.start() 메서드를 사용하면 됩니다. 예를 들어, 메인 메뉴에서 게임 플레이로 전환하는 코드는 다음과 같습니다.

// MainMenu 스테이지에서 Gameplay 스테이지로 전환
this.scene.start('Gameplay');

스킵 기능 추가하기

게임 중에 스킵 기능을 추가하기 위해서는 사용자의 입력을 감지하여 스킵 동작을 처리해야 합니다. 사용자가 입력을 받으면 update() 메서드가 호출되므로, 해당 메서드에서 입력을 감지하고 필요한 동작을 수행할 수 있습니다.

class Gameplay extends Phaser.Scene {
    constructor() {
        super({ key: 'Gameplay' });
    }

    create() {
        // 게임 플레이 초기화 코드 작성
    }

    update() {
        // 사용자의 입력 감지
        if (this.input.keyboard.checkDown(this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.SPACE), 500)) {
            // 스페이스바가 눌렸을 때 스킵 동작 실행
            this.skip();
        }
    }

    skip() {
        // 스킬 동작 코드 작성
    }
}

위의 코드는 update() 메서드에서 this.input.keyboard.checkDown()을 사용하여 스페이스바의 입력을 감지합니다. this.skip() 메서드는 스킵 동작을 수행하는 코드로 구현되어 있습니다.

이제 게임 스테이지를 전환하고 스킵 기능을 추가하는 방법에 대해 알아보았습니다. Phaser를 사용하여 다양한 기능을 구현하고 게임을 더욱 흥미롭게 만들 수 있습니다. 참고 자료를 통해 추가적인 정보를 확인해보세요.