[Phaser3] Survival Game(7) - create()에 player 추가 및 키보드 이벤트

MainScene.js의 create()에 player 추가하기

이전 포스팅에서 MainScene.js의 대략적인 구조를 잡았습니다.

 

이제 실제 움직이는 player를 생성해 보겠습니다.

create()에 player 생성 및 키보드 이벤트 추가

create()에 아래의 코드를 추가시켜 player를 생성해 봅니다.

간단한 코드 설명

Phaser.Physics.Matter.Sprite는 Matter Physics Sprite 게임 오브젝트이며, 게임에서 정적 이미지와 애니메이션 이미지를 모두 표시하는 데 사용됩니다.

 

Sprite는 입력 이벤트와 물리 몸체를 가질 수 있고, 또한 색조 지정 및 스크롤, 애니메이션을 적용할 수 있습니다.

 

이러한 Phaser.Physics.Matter.Sprite를 이용해 player를 생성해 줍니다.

 

이후 키보드 이벤트를 추가합니다.

이렇게 추가하면, 키보드 이벤트를 통해 player를 움직일 수 있게 됩니다.

 

키보드 이벤트를 넣었으니 실제로 player가 움직일 수 있게 해 줘야겠죠?

반응형

update()에 player 속도 및 위치, 좌표 값 설정

update()에 player가 움직일 때 속도, player의 위치 값 및 움직일 때의 이동될 좌표 값을 설정해 줍니다. 

코드 설명

Phaser.Math.Vector2는 2D 공간에서 벡터를 표현한 것입니다.

위에서 등록해 놓은 키보드 이벤트를 연결시켜 키보드 이벤트 발생 시 벡터 값이 바뀌도록 했습니다.

 

normalize()는 해당 벡터를 정규화합니다. 벡터를 같은 방향의 단위 길이 벡터(크기 1)로 만듭니다.

 

scale(value)는 주어진 값으로 이 벡터를 확장합니다.

실행

index.html로 돌아가 다시 우클릭 후 Open with Live Server를 클릭하면 다음처럼 화면이 뜹니다.

up: W, down: S, left: A, right: D의 키보드를 눌러 player를 움직여봅시다.

형광색 네모 박스가 안 보인다면

저처럼 형광색 네모 박스나 점이 안 보인다면, survival-game.js 파일에서 debug를 true로 바꿔주시면 됩니다.