제페토를 플레이해보면 상호작용이 가능한 오브젝트가 있다.
가까이 가면 해당 오브젝트 위에 UI아이콘이 보이고 터치시 상호작용을 한다. (ex.의자 앉기, 위치이동, 손에 쥐기)
유니티에서 월드를 제작하는 경우 이런 시스템을 직접 구현해야하기에 방법을 찾아보았다.
먼저 오브젝트를 하나 생성해준다. 그리고 canvas와 canvas내에 button을 추가한다.
보통 canvas는 유저의 게임 플레이시 카메라에 그린다고 생각할 수 있다.
그래서 scene으로 canvas를 생성하고 여러 ui요소를 추가하면 아주 큰 사이즈로 생성이 된다.
플레이를 하면 게임화면이 보이는데
해당 이미지는 '배틀그라운드: 뉴 스테이트'의 화면이다.
화면에서 플레이어들이 있고 전투가 이루어지는데 이 요소들을 제외하고 화면에 보이는 버튼과 맵, 아이콘 등이 UI인데, 카메라로 무언갈 찍을때 렌즈 끝에 무언갈 붙이면 카메라가 촬영하는 물체의 모습이 보이고 붙어있는 물체가 그 위에 덮어씌워지는 걸 생각하면 된다.
잡설이 길었는데 아무튼, 이 UI를 기본값으로 둘 경우. 화면에 고정이 된다. 어딜가나 항상 있는 이동버튼 처럼.
(출처:https://studio.zepeto.me/guides/ui-events)
(상단 링크를 따라서 버튼을 클릭하면 콘솔에서 버튼이 클릭되었다는 문구를 출력하게 해두었다.)
내가 원하는 건 오브젝트 위에 상호작용 버튼이 있는 것이다.
먼저 canvas를 world space로 둔다.
여기서 world space란 world 좌표계를 사용한다는 것이다. 유니티에서 생성한 오브젝트의 transform값을 변경하여 위치를 잡는 것처럼 사용한다.
변경 후 위치를 원하는 오브젝트의 근처로 이동시킨다.
이상태로 플레이 테스트를 하면 버튼이 클릭되지 않는다.
event camera 때문이다.
이 카메라에 적합한 카메라를 설정해서 넣어주어야 터치가 된다.
하지만 현재 상황에서 카메라는 main camera뿐, 실제 게임 플레이를 하면 zepeto players에서 zepeto camera가 할당된다.
event camera에 이 zepeto camera를 넣어주어야 정상적으로 터치가 된다.
버튼이 클릭되어 콘솔에 나오게 된다.
import { ZepetoScriptBehaviour } from 'ZEPETO.Script'
import { Camera, Canvas, GameObject } from 'UnityEngine'
import { ZepetoPlayers } from 'ZEPETO.Character.Controller';
export default class CameraTest extends ZepetoScriptBehaviour {
Start() {
let camera = ZepetoPlayers.instance.ZepetoCamera.camera; // 생성된 플레이어의 카메라 가져오기
console.log(camera);
console.log('camera setting');
this.GetComponent<Canvas>().worldCamera = camera;
}
}카메라는 ZepetoPlayers의 인스턴스에 생긴 ZepetoCamera의 카메라를 가져왔다. 해당하는 카메라 정보를 canvas에 worldcamera로 설정하여, 작동하도록 했다.
참고
https://studio.zepeto.me/guides/ui-events
https://sunghojang.tistory.com/13
https://github.com/naverz/zepeto-studio-kor/discussions/370
https://github.com/naverz/zepeto-studio-kor/discussions/97
