[phaser] phaser로 웹게임 만들기

phaser.io/tutorials/making-your-first-phaser-3-game/part1

Phaser - A fast, fun and free open source HTML5 game framework

phaser 공식 홈페이지의 튜토리얼에 대한 해설겸 해서 정리해둡니다

============================================================================

var config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    scene: {
        preload: preload,
        create: create,
        update: update
    }
};

var game = new Phaser.Game(config);

function preload ()
{
}

function create ()
{
}

function update ()
{
}

part1.html의 JS부분입니다.

config 객체에 phaser의 설정을 해주는 부분입니다.

type의 경우 AUTO로 지정해주었는데 이는 phaser에서 지원해주는 canvas와 WebGL을 자동적으로 선택하게 해주는 옵션입니다. 기본적으로는 WebGL을 미지원 브라우저 사용시에는 canvas를 지정해줍니다.

width와 height는 말 그대로 phaser의 게임 크기를 지정해줍니다.

============================================================================

function preload ()
{
    this.load.image('sky', 'assets/sky.png');
    this.load.image('ground', 'assets/platform.png');
    this.load.image('star', 'assets/star.png');
    this.load.image('bomb', 'assets/bomb.png');
    this.load.spritesheet('dude', 
        'assets/dude.png',
        { frameWidth: 32, frameHeight: 48 }
    );
}

part2.html의 preload() 함수부입니다.

phaser는 시작할 떄 자동으로 이 함수를 호출하고 안에 정의된 파일들을 로드하게됩니다.

첫번째 인자는 에셋명으로 사용되게 되고 뒤에는 각 에셋의 주소가 오게됩니다.

이렇게 불러와준 에셋들은 create() 함수부에서 호출 가능해집니다.

function create () 
{ 
    this.add.image (400, 300, 'sky'); 
    this.add.image (400, 300, 'star'); 
}

이런식으로 호출 가능해집니다.

위에 있는 코드들을 합쳐서 실행하면

위와 같은 이미지를 볼 수 있습니다.

P.S

add.image()의 첫번째 인자로 주어지는 좌표는 이미지의 중심부가 해당 좌표로 온다는 것을 인지하고 불러와 주어야 합니다.
============================================================================

이미지만 불러와서는 아무 의미가 없습니다.

이제 본격적으로 맵을 구성해 봅시다.

var config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    physics: {
        default: 'arcade',
        arcade: {
            gravity: { y: 300 },
            debug: false
        }
    },
    scene: {
        preload: preload,
        create: create,
        update: update
    }
};

config 객체에 physics를 추가해줍시다. 이는 물리법칙을 설정해주는 부분입니다.

설정된 arcade의 경우 캐주얼한 게임에 적용하였을때 자연스러운 설정입니다.

gravity를 y에 대해 지정해주므로서 위에서 아래로 중력을 지정해줄 수 있습니다. 

var platforms;

function create ()
{
    this.add.image(400, 300, 'sky');

    platforms = this.physics.add.staticGroup();

    platforms.create(400, 568, 'ground').setScale(2).refreshBody();

    platforms.create(600, 400, 'ground');
    platforms.create(50, 250, 'ground');
    platforms.create(750, 220, 'ground');
}

platform 객체를 만들어주고 해당 객체에 위에서 설정해준 물리법칙을 적용해줍시다.

physics.add.staticGroup();을 통하여 물리법칙을 적용해줍니다.

물리법칙 적용에는 Dynamic과 Static이 있는데 platform의 경우 움직이지 않고 고정적으로 맵역할을 해줄것이기 때문에 static으로 적용한 것입니다.

실행해주면 위와 같이 platform 객체가 적용된 화면을 볼 수 있습니다.

지금은 물리법칙을 확인할 수 없으나 차후 캐릭터등을 추가해준다면 물리법칙이 적용해서 해당 객체에 부딪히는 등의 확인을 할 수 있습니다.

physics를 적용하지 않은 배경의 경우 그러한 상호동작이 일어나지 않을 것입니다.

============================================================================

이제 맵을 그려주었으니 플레이어를 추가해줍시다.

part5.html의 코드를 봅시다.

player = this.physics.add.sprite(100, 450, 'dude');

player.setBounce(0.2);
player.setCollideWorldBounds(true);

this.anims.create({
    key: 'left',
    frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }),
    frameRate: 10,
    repeat: -1
});

this.anims.create({
    key: 'turn',
    frames: [ { key: 'dude', frame: 4 } ],
    frameRate: 20
});

this.anims.create({
    key: 'right',
    frames: this.anims.generateFrameNumbers('dude', { start: 5, end: 8 }),
    frameRate: 10,
    repeat: -1
});

 

 

마찬가지로 플레이어 객체를 생성해주고 물리법칙을 추가해줍시다. 기본적으로 Dynamic으로 생성되게 됩니다.

setBounce를 설정해주어서 얼마나 다른 객체들과 부딪힐 때 튕길지 적용해주고

그 밑줄은 게임(화면)의 경계에 부딪히는지 여부를 설정해줍니다. 이를 통하여 플레이어가 화면 밖으로 나가지 못하게 해줍니다.

그 밑의 줄들을 애니메이션 지정부입니다.

player.body.setGravityY(300)

이 코드를 추가해줌으로서 중력을 적용할 수 있게 됩니다.

실행 해보면 플레이어가 생성되 밑으로 떨어지는 것을 관찰 할 수 있습니다.

맵에 서있지 못하고 화면 경계까지 떨어지는 것을 확인 할 수 있는데 우리가 충돌 설정을 해주지 않았기 때문입니다.

this.physics.add.collider(player, platforms);

이 코드를 추가해서 충돌이 일어나도록 해줍시다.

이제 정상적으로 맵과 상호작용함을 볼 수 있습니다.(part6.html)

자세히 보시면 아까 bounce도 설정해 주었기 때문에 살짝 튕기는것도 보입니다.

============================================================================

cursors = this.input.keyboard.createCursorKeys();

이제 입력을 받아주기위한 커서를 만들어 줍시다.

키보드 입력을 받아줍니다.

if (cursors.left.isDown)
{
    player.setVelocityX(-160);

    player.anims.play('left', true);
}
else if (cursors.right.isDown)
{
    player.setVelocityX(160);

    player.anims.play('right', true);
}
else
{
    player.setVelocityX(0);

    player.anims.play('turn');
}

if (cursors.up.isDown && player.body.touching.down)
{
    player.setVelocityY(-330);
}

이제 update()함수부에 위 코드를 넣어 줌으로서 플레이어가 입력을 적당히 처리할 수 있게 해줍시다.

이제 플레이어를 움직일 수 있습니다.

============================================================================이정도면 기본적인 게임 구성은 익힐 수 있기 때문에 8~10은 생략합니다.