바빌론JS - 모바일웹에서 캐릭터 이동

지난 시간 비를 피하던 케이군이 드디어 집을 얻었습니다.

https://itadventure.tistory.com/701

바빌론JS - 비를 피하고 싶어!

아쉬운 것은 모바일웹에서는 오류가 뜨는 문제가 있어 모바일웹 사용자분들에게는 실망감(?)을 안겨드렸는데요.
(너는 나에게 실망감을 안겨 주었고~)

신망감으로 바꿔드리는 시간을 가져 보겠습니다 :)

---

오류의 원인은?

---

개발자 도구(F12)에서 모바일 모드로 전환하면

원인을 볼 수 있는데요.

결론은 마우스 장치를 못 찾겠다는 겁니다.
모바일웹은 터치스크린이거든요. 그래서 다른 방식을 사용해야 합니다.

---

마우스 또는 터치스크린

---

아래 함수를 찾아,

// 마우스 피킹 시스템
function mousepickSystem(scene){
      :
}

아래와 같이 변경해 줍니다.
이 것만으로 에러는 해결되고, 집을 터치하면 작동하는 것도 잘 처리됩니다.

// 피킹 시스템
function pickSystem(scene){
    const deviceSourceManager = new BABYLON.DeviceSourceManager(scene.getEngine());
    deviceSourceManager.onDeviceConnectedObservable.add((deviceSource) => {
        if (deviceSource.deviceType === BABYLON.DeviceType.Mouse || deviceSource.deviceType === BABYLON.DeviceType.Touch) {
            deviceSource.onInputChangedObservable.add((eventData) => {
                let LeftClick = (eventData.inputIndex == BABYLON.PointerInput.LeftClick);
                let ClickType = eventData.type;
                if(LeftClick && ClickType == 'pointerdown')
                    pickObject(scene);
            });
        }
    });
}

function pickObject(scene)
{
    const picking = scene.pick(scene.pointerX, scene.pointerY);
    if(picking.hit==false) return;
    let pickedMesh = picking.pickedMesh;
    switch(pickedMesh.name)
    {
        case 'door':    // 문
            if(pickedMesh.open==true)
                pickedMesh.rotation = new BABYLON.Vector3(0, 0, 0);
            else
                pickedMesh.rotation = new BABYLON.Vector3(0, BABYLON.Tools.ToRadians(80), 0);
            pickedMesh.open = !pickedMesh.open;
            break;
        case 'button':  // 집 기능 버튼
            if(pickedMesh.press==true)
                scene.getMeshByName("body").position = new BABYLON.Vector3(0, 2, 0);
            else
                scene.getMeshByName("body").position = new BABYLON.Vector3(0, 0, 0);
            pickedMesh.press = !pickedMesh.press;
            break;
    }
}

그런데 한가지 문제가 있습니다.
모바일웹은 키보드가 없어 WASD 키로 캐릭터를 움직일수가 없습니다.
옆에 있던 PD, 한마디 합니다.

화면에 WASD 버튼을 만드는건 어때?

---

GUI 구성 - 이동 버튼

---

바빌론JS 화면에 이동 버튼을 배치하려면 몇가지 고려할 점이 있습니다.
화면 크기가 디바이스마다 다르기 때문에 화면 정렬은 어느쪽으로 할지
여백은 얼마나 띄울지 등등이 있는데요.

금번에 찾은 바빌론 GUI 에디터를 사용해보니 금방 익숙해질 수 있었습니다.

https://gui.babylonjs.com/

표와 같은 GUI 를 사용하려면 GRID 요소를 먼저 배치해야 합니다.

그리고 가로 3칸, 세로 2줄로 구성할거니 우측 속성 창에서 표시 부분을 각각 1번, 2번 눌러 줍니다.

그리드에 버튼을 바로 배치할수는 없고 StackPanel 이란걸 먼저 배치해야 합니다.

그리고 왼쪽창에서 StackPanel 요소을 마우스로 선택한 후

Grid 에 끌어다 놓아 부모 요소로 바꿔줍니다.

이 상태에서 StackPanel 을 3번 더 눌러 추가합니다.

이제 Grid 내에서 각 StackPanel 의 위치를 조정해 주어야 하는데요.
조정하지 않으면 모두 첫번째 칸에만 위치하기 때문입니다.

첫번째 StackPanel 을 선택하고 오른쪽 속성창에서
Row 0, Column 1을 입력합니다.

위치가 바뀌었군요.

두번째~네번째 StackPanel 은 각각 아래와 같이 속성을 변경합니다.

두번째 : Row 1, Column 0
세번째 : Row 1, Column 1
네번째 : Row 1, Column 2

이제 버튼 4개를 추가해 봅시다.
아래 아이콘을 4번 누릅니다.

왼쪽 창이 아래와 같을텐데요.

각 버튼 4개를 StackPanel 4개에 각각 드래그합니다.

이제 이걸로 WASD 버튼을 구성할 겁니다.
GRID 크기를 줄이고 오른쪽 상단에 정렬하겠습니다.
요소들이 겹쳐 있기 때문에 왼쪽 창엣 Grid 를 선택하고,

우측 속성창에서 우측, 상단 정렬 아이콘을 선택합니다.

이어서 W, H 값을 조정할텐데요. 먼저 %는 픽셀로 바꿔주도록 합시다.
빨간 위치를 각각 한번씩 클릭하여

PX 로 바꿔줍니다.

가로폭(W)은 160, 세로폭(H)은 100으로 값을 변경하면

화면이 이렇게 됩니다.

너무 구석에 붙어 있으면 터치가 어려우니 위쪽과 오른쪽에 약간 여백을 줍시다.
X 를 -20, Y를 20을 입력하면,

화면 구성이 이와 같이 됩니다.

각 버튼의 'Click Me' 글자를 각각 WASD로 변경하고, 버튼마다 이름을 부여하겠습니다.

왼쪽 트리창에서 첫번째 버튼을 더블클릭하여 

이름을 btnW 로 변경합니다.

2~4번째 버튼도 각각 이름을 아래와 같이 변경합니다.
2번째 : btnA
3번째 : btnS
4번째 : btnD

이제 버튼의 글자 'Click Me'를 변경하겠습니다.

첫번째 버튼의 글자 변경은 하위 요소 ( T자 아이콘) 을 선택해야 합니다.

그리고 우측 속성 창에서 TextBlock 를 찾아,
'Click Me' 글자를

'W'로 바꿔줍니다.

이와 같이 2~4번째 Button_button 요소들도 각각 아래와 같이 변경합니다.
2번째 : A
3번째 : S
4번째 : D

이제 편집이 끝났습니다.
좌측 상단이 삼선 아이콘 - SAVE 를 선택하여 구성한 GUI 파일을 다운받습니다.

※ 참고로 다운받은 파일은 LOAD 메뉴에서 불러와 다시 편집할 수 있습니다.

---

GUI 불러오기

---

이제 금방 편집한 GUI 파일을 코드에 적용해 봅시다.
파일명을 gui.json 으로 변경하고 main.js와 같은 폴더에 저장합니다.

대기했다가 다음 순서를 진행하는 async / await 코드를 적용해볼텐데요.
아래 코드를 찾아

function GUISystem(){

앞에 async 를 붙여주고, 코드를  추가합니다.

async function GUISystem(){    
    await advancedTexture.parseFromURLAsync("./gui.json");

 

PC 웹브라우저 화면,

모바일웹브라우저 화면

이 것으로 편집한 GUI 구성을 화면에 불러 왔습니다.
이제 버튼을 누르면 플레이어가 작동하도록 기능을 넣어 봅시다.

---

버튼에 플레이어 이동 기능 추가

---

금방 추가한 코드에

await advancedTexture.parseFromURLAsync("./gui.json");

아래 코드를  추가해 주세요.

// W 버튼 ( GUI )
const btnW = advancedTexture.getControlByName("btnW");
btnW.onPointerDownObservable.add(() => inputMap["W"]=true );
btnW.onPointerUpObservable.add(() => inputMap["W"]=false );

// A 버튼 ( GUI )
const btnA = advancedTexture.getControlByName("btnA");
btnA.onPointerDownObservable.add(() => inputMap["A"]=true );
btnA.onPointerUpObservable.add(() => inputMap["A"]=false );

// S 버튼 ( GUI )
const btnS = advancedTexture.getControlByName("btnS");
btnS.onPointerDownObservable.add(() => inputMap["S"]=true );
btnS.onPointerUpObservable.add(() => inputMap["S"]=false );

// D 버튼 ( GUI )
const btnD = advancedTexture.getControlByName("btnD");
btnD.onPointerDownObservable.add(() => inputMap["D"]=true );
btnD.onPointerUpObservable.add(() => inputMap["D"]=false );

이제 플레이어 케이로 변신한 다음 ( 모바일웹도 가능 )

화면의 WASD 버튼을 누르면 캐릭터가 이동하는 것을 보실 수 있습니다.

이런걸 가상 키보드라고 이름 붙여도 될것 같습니다 :)
오늘은 여기까지!
실습이 어려우신 분은 크레이가 마련한 아래 URL을 확인해 주세요.

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

---

마무~리

---

이제 모바일웹에서도 움직임이 가능해진 케이군,
다음에는 어떤 이야기가 기다리고 있을까요?

오늘도 방문해주신 분들께 감사드립니다!

---

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

바빌론JS - 타입 스크립트 + 웹팩