바빌론JS - 이동하는 NPC

지난 시간에는 마을을 달리는 미니 자동차에 대해 다뤄보았습니다.

https://itadventure.tistory.com/693

미니자동차 마을을 달리다

한방향으로만 달리는 자동차라니 좀 심심한 것 같아 이동하는 NPC 를 추가하겠습니다 :)

이 컨텐츠는 공식 튜토리얼의 내용을 소화하여 크레이 입맛에 맞게 재구성하였습니다.

---

캐릭터 준비!

---

바빌론 공식 튜토리얼에 기본 제공 NPC가 있긴 한데요.
직접 캐릭터와 걷기 애니메이션을 만들어 보고 싶은 욕심에
블렌더3D 프로그램으로 로우폴리 캐릭터와 걷기 애니메이션을 준비했습니다.

걷기 동작이 약간 어색하긴 하나 직접 만들어서인지 애착이 가네요 :)

아래 glb 파일을 다운받아 

character01.glb

0.05MB

main.js 와 같은 폴더에 넣어 주세요.

---

캐릭터 월드에 불러오기

---

캐릭터도 마을에 모델을 불러오는건 미니자동차와 별반 다를건 없는데요.
자동차를 불러오는 코드 뒤에 아래 코드를 추가해 보세요.

BABYLON.SceneLoader.ImportMeshAsync(
    "", 
    "./", "character01.glb", scene).then((result) => {
    var mesh = result.meshes[0];
    mesh.scaling = new BABYLON.Vector3(0.08, 0.08, 0.08);
    mesh.position.y = 0.55;
    // 코드 추가
});

카메라 앞방향인 북쪽을 향해 하염없이 제자리 걸음을 하는 NPC를 보실 겁니다.

만일 걷기 동작을 멈추려면 아래코드를 사용하고

scene.getAnimationGroupByName("walk").stop();

다시 걷기 동작을 멈추려면 아래 코드를 사용하면 되는데요.

scene.getAnimationGroupByName("walk").play(true);

play(true)에서 true는 애니메이션 무한 반복을 의미합니다.
play(false)로 사용할 경우 애니메이션을 1회만 재생합니다.우리는 걷기 애니메이션을 그대로 사용할거나 코드 추가는 안해도 됩니다.이제 캐릭터가 바라보는 방향을 왼쪽으로 돌려보겠습니다.
// 코드 추가 영역에 아래 코드를 추가하면

// 왼쪽을 바라보게 회전
mesh.rotate(
    BABYLON.Axis.Y, 
    -Math.PI / 2, 
    BABYLON.Space.LOCAL
);

캐릭터가 왼쪽으로 향합니다.
걷기 동작은 여전하구요.

---

캐릭터를 앞으로 이동

---

모든 모델은 앞 방향이란게 있는데요.
보통 블렌더3D 프로그램에서 캐릭터 모델링을 하면 캐릭터가 바라보는 방향이 앞방향입니다.

바빌론JS에서 앞방향 기준으로 이동하는 함수는 모델.movePOV() 입니다.

금방 추가한 코드에 아래 코드를 추가하면

// 앞방향으로 0.5 이동
mesh.movePOV(0, 0, -0.5);

캐릭터가 앞방향으로 0.5 단위 이동하는데요.
실행하자마자 순식간에 이동하기 떄문에 이동과정이 보이지는 않습니다.

서서히 이동하면서 과정을 보여주려면 어떻게 해야 할까요?
scene.onBeforeRenderObservable.add 를 사용하면 됩니다.

금방 코드를 삭제하고,

// 앞방향으로 0.5 이동
mesh.movePOV(0, 0, -0.5);

아래 코드를 추가하세요.
이 코드는 매번 프레임 단위마다 호출하는 코드입니다.

// 랜더 프레임별 실행 코드
scene.onBeforeRenderObservable.add(() => {
    mesh.movePOV(0, 0, -0.001);
    // 렌더 프레임 코드
});

그러면 마치 슬로우 비디오처럼 느리게 걷는 NPC를 보실 겁니다.

약간 속도를 높여보죠.
그리고 2단위까지만 걷도록 코드를 수정하겠습니다.

아래 코드를

// 랜더 프레임별 실행 코드
scene.onBeforeRenderObservable.add(() => {
    mesh.movePOV(0, 0, -0.001);
    // 렌더 프레임 코드
});

아래코드로 수정해 주세요.

let distance = 0;
let step = 0.005;

// 랜더 프레임별 실행 코드
scene.onBeforeRenderObservable.add(() => {            
    if (distance < 2) {
        mesh.movePOV(0, 0, -step);
        distance += step;
    }
});

그러면 NPC 가 어느 시점에서 더 이상 이동하지 않을 겁니다.
distance 값이 누적되다 2 이상이면 이동 코드를 실행하지 않기 때문이죠.

하나 더 해봅시다.
p라는 변수를 추가해  NPC가 왼쪽, 아래, 오른쪽, 위로 이동하려면 아래 코드를 사용하면 되는데요.

let distance = 0;
let step = 0.005;
let p = 0;

// 랜더 프레임별 실행 코드
scene.onBeforeRenderObservable.add(() => {        
    mesh.movePOV(0, 0, -step);
    distance += step;    
    if (distance > p + 1) {                    
        mesh.rotate(
            BABYLON.Axis.Y, 
            BABYLON.Tools.ToRadians(-90), 
            BABYLON.Space.LOCAL
        );
        p++;
        if (p === 4) {
            p = 0;
            distance = 0;
        }
    }
});

p변수가 0, 1, 2, 3 값을 가지며 한자리에서 빙글빙글 돌며 움직이는 NPC를 볼 수 있습니다.

실습이 어려우신 분은 크레이가 준비한 아래 결과물 페이지를 참조해 주세요.

http://dreamplan7.cafe24.com/babylon/ex12/

---

마무~리

---

흥미로우셨나요? :) 다음 시간에는 NPC가 마을 전체를 돌아다니는 부분을 다룹니다.
방문하신 모든 분들께 감사드립니다.

---

다음 게시글 : https://itadventure.tistory.com/696

바빌론JS - 경로 우대? 경로 따라 걷는 NPC