[Phaser3] Survival Game(13) - player가 충돌 체에 충돌할 수 있도록 Player.js 수정하기

player가 움직이는지 여부에 따라 애니메이션 전환하기

이전 포스팅에서 player를 MainScene.js에서 분리시켰습니다.

 

player가 충돌체에 충돌할 수 있게 수정하기 전에 player가 움직이는지 여부에 따라 애니메이션을 전환하도록 만들어주겠습니다.

 

Player.js 파일 update()에 다음의 코드를 추가합니다.

if (Math.abs(this.velocity.x) > 0.1 || Math.abs(this.velocity.y) > 0.1) {
      this.anims.play("princess_walk", true);
    } else {
      this.anims.play("princess_idle", true);
    }

움직임이 0.1보다 크면 걷기 애니메이션을 재생하고 아니면 서 있는 애니메이션을 재생합니다.

 

실제로 velocity엔 속도가 없습니다.

 

그래서 속도에 대한 get velocity()를 생성하여 해당 player 몸체 속도를 반환받을 수 있도록 코드를 추가해야 합니다.

get velocity() {
        return this.body.velocity;
    }

이렇게 하면 velocity에 속도 속성을 제공할 수 있습니다.

player가 충돌 체에 충돌할 수 있도록 constructor에 코드 추가하기

반응형

이제 player가 나무나 바위등에 충돌했을 때 충돌할 수 있도록 해보겠습니다.

 

Player.js 파일 constructor에 player의 Body와 Bodies가 자체 충돌체를 감지할 수 있도록 코드를 추가합니다.

const { Body, Bodies } = Phaser.Physics.Matter.Matter;

여기에 Bodies.circle을 사용하여 player 충돌체를 생성합니다.

var playerCollider = Bodies.circle(this.x, this.y, 12, { isSensor: false, label: 'playerCollider' });

player의 x좌표가 원의 중심이 되게 하고, player의 y좌표를 반경 12로 하여 player 주변에 원이 만들어지게 합니다.

 

센서는 Collider냐고 묻는 것이기 때문에 false라고 해줍니다.

 

그리고 "playerCollider"라고 label을 지정해 줍니다.

 

이후 player의 Collider로 구성된 compoundBody를 만들어 줍니다.

const compoundBody = Body.create({});

parts속성에 playerCollider를 넣어줍니다.

const compoundBody = Body.create({
      parts: [playerCollider],
    });

마찰을 주기 위해서 frictionAir 속성에 0.35를 넣어줍니다.

const compoundBody = Body.create({
      parts: [playerCollider],
      frictionAir: 0.35,
    });

그 이후에 기존 Body에 생성한 compoundBody를 넣어줍니다.

this.setExistingBody(compoundBody);

실행해 보기

이제 원형이 player에게 생겼는지 확인해 보겠습니다.

 

index.html 파일에서 우클릭 후 Open with Live Server를 클릭합니다.

player 주변에 원이 생긴 게 보이시면 성공입니다.

player가 충돌 체에 충돌해도 고정되게 하기

이제 마지막으로 player가 얼음, 나무, 바위등에 충돌했을 때 회전하지 않도록 코드를 추가하겠습니다.

 

Player.js 파일 constructor 맨 마지막 부분에 다음 코드를 추가합니다.

this.setFixedRotation();

실행하기

드디어 끝났습니다!(휴...😎)

 

index.html 파일 우클릭 후 Open with Live Server를 클릭합니다.

 

이후 player를 W, S, A, D 키로 움직이면서 물체에 충돌하게 해 봅니다.

Debug true

Debug false