*본 강좌는 www.unitystudy.net에 게재되고 있으며, 링고게임즈의 재산입니다. 무단 불펌을 혀용하지 않습니다.

지난번 강좌 마친뒤로 NGUI는 강좌를 마감하려 했습니다만...
"이호민"님의 낚시질에 낚여서 파닥거리며 강좌 1~2개를 더하기로 했어요.
(유니티 코리아 입사하시려면 낚시를 잘하셔야 합니다. ㅋㅋㅋ)
* 월척이구나~~~
사용자 삽입 이미지

오늘 급하게 결정한거라 딱히 뭐할까? 고민하다가 NGUI쓰시면서 부딪히는 가장 큰 문제가 Object와 NGUI간의 Position을 Match시키는 것 아닐까? 하는 생각에 급히 글을 써보기로 했습니다.
먼저 Unity의 카메라 좌표구조를 한번 흩어 보겠습니다.
첫째는 월드좌표입니다. 우리가 알고 있는 "왼손좌표계"입니다.
사용자 삽입 이미지
두번째는 스크린좌표입니다.
사용자 삽입 이미지

세번째는 뷰포트(Viewport)좌표입니다.
사용자 삽입 이미지
스크린좌표와 유사하면서도 다른 좌표계를 가지고 있습니다.
정확한 개념은 다음의 그림을 보시면 조금 이해될 것 같네요. (물론 유니티와 좌표축이 다릅니다.)
사용자 삽입 이미지
조금 감이 오시나요? 카메라를 저 눈이라고 생각하시면 될듯 싶습니다.
오늘은 여기서 부터 출발해보죠.
우리가 사용하는 WorldToScreenPoint같은 Vector3를 Vector2로 어떻게 내부적으로 변환하고 있을까요?
이득우님께서는 아마도 정확히 알고 계시겠지만, 카메라에 착~ 달라 붙어 있는 저 ViewPort를 통해서 Screen좌표로 전환하는게 아닐까?하는 추정을 하고 있습니다.
(예를 들어 camera.WorldToScreenPoint(transform.position)을 하면 Y축이 반전되어 출력됩니다. 현재의 제 지식으로는 이러한 현상을 봤을때, World좌표<->Viewport좌표<->Screen좌표로 변환되지 않을까? 하는 생각이 들어요.)
암튼 이런게 있다는 것과 뭔가 가상세계의 좌표를 2D로 변환하려면 Viewport라는 녀석을 거치면 편하다는 걸 알게되었으니 이걸 이용해 World좌표의 Object를 따라다니는 Label을 하나 만들어 보죠.
암튼 UI Root를 추가해서 (물론 2D GUI 레이어로...) 다음과 같이 만들었습니다.
사용자 삽입 이미지

그리고 Cube를 하나 추가 했고... (어두우시면 Camera에 Light를 하나 넣으시길...)
사용자 삽입 이미지

그리고 1강에서 했었던 Label을 위젯툴을 사용해 생성합니다.
사용자 삽입 이미지

다음과 같이 됐다면 잘 된 겁니다. (여기서는 NGUI가 가지고 있는 폰트를 사용했습니다.)
사용자 삽입 이미지

이제 Scene에디트에서 Cube를 움직여 보겠습니다.
(Cube의 좌표는 x 2, y -1, z 0입니다. 카메라의 좌표는 x 0, y 0, z -5)
사용자 삽입 이미지

이제 코딩질~!
사용자 삽입 이미지

위와 같이 FollowText를 하나 만들고 다음과 같이 코딩을 합니다.
using UnityEngine;
using System.Collections;
public class FollowText : MonoBehaviour {

   //큐브를 할당할 녀석입니다.
    public GameObject target;

// Update is called once per frame
void Update () {
        //월드좌표의 카메라객체입니다.
        Camera worldCam = NGUITools.FindCameraForLayer(target.layer);
        //GUI객체의 카메라 객체입니다.
        Camera guiCam = NGUITools.FindCameraForLayer(gameObject.layer);

        //타겟의 포지션을 월드좌표에서 ViewPort좌표로 변환하고 다시 ViewPort좌표를 NGUI월드좌표로 변환합니다.
        Vector3 pos = guiCam.ViewportToWorldPoint(worldCam.WorldToViewportPoint(target.transform.position));
        //Z는 0으로...
        pos.z = 0f;

        //Label의 좌표를 설정합니다.
        transform.position = pos;
}
}
이제 다음과 같이 Label에 Attach하고 Cube를 할당합니다.
사용자 삽입 이미지

이제 플레이~~~
사용자 삽입 이미지

사용자 삽입 이미지

이리 저리 움직여보시면 될 듯 싶네요.
몇가지 조합하시면 이런게 가능합니다. =)
사용자 삽입 이미지
그럼~ 오늘은 여기까지 =)
수고하세욤~!
2013/01/27 23:39 2013/01/27 23:39
TAG ,

트랙백 주소 :: 이 글에는 트랙백을 보낼 수 없습니다