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

---

• Part 5, 6

지형지물을 생성했으니 이제는 돌아다닐 캐릭터를 만들 차례다.

먼저 스프라이트에 대해 알아야하는데

스프라이트란 애니메이션 효과를 위한 이미지로, 이미지 배열 이미지라고 생각할 수 있다.

예를 들어, 0번째 이미지부터 3번째 이미지가 반복된다면 왼쪽으로 이동하는 듯한 애니메이션을 적용할 수 있다. 애니메이션 효과를 쉽게 관리하기 위해 여러개의 이미지를 하나의 이미지로 합쳐서 관리한다.

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');


//플레이어를 선언한다. 플레이어는 스프라이트 이미지이다.
player = this.physics.add.sprite(100, 450, 'dude');

//플레이어의 탄력도(?) 설정. 숫자가 커질 수록 착지 후 탄성이 강해진다
player.setBounce(0.2);

//화면 경계와의 충돌 설정. false로 설정하거나 설정하지 않으면 화면 바깥으로 나가진다.
player.setCollideWorldBounds(true);

//플레이어의 애니메이션 설정
this.anims.create({

key: 'left',

//스프라이트의 0~3번째 인덱스의 이미지 적용
frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }),

//초당 10프레임
frameRate: 10,

// -1로 설정 시 무한 반복 
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

});

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

}

각 애니메이션 효과를 설정했으나, 아직 키 설정을 할당하지 않아 작동하는 모습은 볼 수 없다.

심지어 아직 플랫폼과 상호작용도 되지 않으므로, create 함수 내에

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

를 추가해 준다.

바닥 플랫폼을 밟고 캐릭터가 서있다!

Written on Obsidian