[javascript] Phaser를 이용하여 캐릭터 및 스프라이트 애니메이션 구현하기

22 Nov 2023

javascript

Phaser는 HTML5 기반의 게임 개발 프레임워크로, 다양한 게임 기능을 구현할 수 있습니다. 이번 글에서는 Phaser를 사용하여 캐릭터 및 스프라이트 애니메이션을 구현하는 방법을 알아보겠습니다.

필요한 준비물

Phaser 설치
캐릭터 이미지 및 애니메이션 스프라이트 시트

캐릭터 이미지 로드하기

먼저, Phaser에서 사용할 캐릭터 이미지를 로드해야 합니다. 이 예제에서는 “character.png” 파일을 사용합니다. 다음은 로드하는 코드입니다.

let game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update });

function preload() {
    game.load.image('character', 'character.png');
}

function create() {
    // 이곳에서 실제 게임을 만듭니다.
}

function update() {
    // 게임 업데이트 로직
}

애니메이션 스프라이트 시트 사용하기

캐릭터의 애니메이션을 구현하기 위해 스프라이트 시트를 사용합니다. 스프라이트 시트는 여러 프레임으로 구성된 이미지입니다. 먼저, 캐릭터의 스프라이트 시트 이미지를 로드하는 코드를 추가합니다.

let game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update });

function preload() {
    game.load.spritesheet('character', 'character.png', 32, 48);
}

function create() {
    // 이곳에서 실제 게임을 만듭니다.
}

function update() {
    // 게임 업데이트 로직
}

애니메이션 생성하기

캐릭터의 애니메이션을 생성하기 위해서는 Phaser.Animation 클래스를 사용해야 합니다. 캐릭터 스프라이트 시트에서 애니메이션의 각 프레임에 해당하는 영역을 정의합니다.

let game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update });

function preload() {
    game.load.spritesheet('character', 'character.png', 32, 48);
}

function create() {
    let character = game.add.sprite(100, 100, 'character');
    let walkAnimation = character.animations.add('walk', [0, 1, 2, 3, 4, 5], 10, true);
    character.animations.play('walk');
}

function update() {
    // 게임 업데이트 로직
}

위의 코드에서 game.add.sprite()로 캐릭터 스프라이트를 생성하고, character.animations.add()로 walk라는 이름의 애니메이션을 정의합니다. 이후 character.animations.play()로 애니메이션을 실행시킵니다.

결과 확인하기

위의 코드를 실행하면 캐릭터가 워킹 애니메이션을 보여줄 것입니다. 필요한 경우 다른 애니메이션을 추가하거나 애니메이션 속도 등을 조정할 수도 있습니다.

이제 Phaser를 이용하여 캐릭터와 스프라이트 애니메이션을 구현하는 방법을 알아보았습니다. 추가적인 기능을 추가하거나 복잡한 애니메이션을 구현하기 위해서는 Phaser의 다른 기능과 클래스를 참고해야 합니다. 관련 문서나 예제 코드를 참고하여 더 많은 기능을 사용해보세요.