Phaser 3로 게임 개발하기 - Tutorials(2)

part2 에서는 assets 폴더에 있는 이미지 파일들을 preload 한다.

preload 함수인 줄 모르고 처음에는 왜 아무 이미지도 안뜨는지 헤맸다.

function preload ()

{

// this.load.image('이미지 선언명', '이미지 파일 경로')
this.load.image('sky', 'assets/sky.png');
// 후에 'sky'로 sky.png 파일을 호출한다.

this.load.image("ground", "assets/platform.png");

this.load.image("star", "assets/star.png");

this.load.image("bomb", "assets/bomb.png");

// spritesheet는 애니메이션 효과를 위한 이미지이다. 지금은 넘어간다.
this.load.spritesheet("dude", "assets/dude.png", {

frameWidth: 32,

frameHeight: 48,

});

}

part3 파일에서는 드디어 화면에 무언가를 띄운다!

function create ()
{
//this.add.image(x좌표, y좌표, '이미지 이름')
this.add.image(400, 300, 'sky');
}

게임 안에 배경, 요소, 캐릭터 등을 create 함수 내에서 넣을 수 있다.

Phaser에서 이미지는 항상 이미지 파일 중앙을 기준으로 좌표를 설정하기 때문에, 게임 화면의 크기가 현재 800 * 600 이므로 중앙에 이미지를 배치하기 위해 좌표가 (400, 300)으로 설정되어 있다.

따라서 만약 좌표를 (0,0)으로 설정한다면,

function create ()
{
this.add.image(0, 0, 'sky');
}

이미지의 중앙이 화면 좌측 상단(0,0)으로 이동하게 된다.

추가적으로, 800 * 600 사이즈의 화면은 게임이 보이는 부분일 뿐 보이지 않는 영역 또한 게임 내에서 존재하는 공간이며, 상하좌우 방향으로 무한히 확장 될 수 있다고 한다.

part4 에서는 지형지물 생성을 준비한다.

var platforms;

function create() {

this.add.image(400, 300, "sky");

// platforms는 물리법칙이 적용되는 여러개의 발판(?)이다.
// 발판은 움직이지 않므로 staticGroup으로 선언해준다.
platforms = this.physics.add.staticGroup();

// 맵 바닥 사이즈에 맞춰 setScale로 크기를 조정한다.
// refreshBody 함수를 사용해야 조정된 크기에 맞춰 물리법칙이 다시 계산되어 적용된다.
// refreshBody 함수를 사용하지 않으면 이미지는 확대되지만 확대되지 않았을 때의 물리법칙 적용.
// 어차피 캐릭터 만들어 봐야 알 수 있으니 캐릭터 만들고 나서 확인해보자.
platforms.create(400, 568, "ground").setScale(2).refreshBody();

//나머지는 그냥 생성해주면 된다.
platforms.create(600, 400, "ground");

platforms.create(50, 250, "ground");

platforms.create(750, 220, "ground");

}

Written on Obsidian