[Unity]23.구글 카드보드 사용 #2 - 게이지와 순간이동

안녕하세요 유랑입니다.

오늘은 구글 카드보드를 이용해 게이지와 순간이동에 대해 알아보겠습니다.

레티클이 반응했을 때 게이지가 채워지며 캐릭터가 순간이동 하는 방식입니다ㅎㅎ

1. 게이지와 순간이동

1-1) 프로젝트 준비 - ㉠UI

게이지를 구성하기 위해 UI를 다운받겠습니다.

에셋스토어에서 해당 에셋을 받아주세요^^

1-2) 프로젝트 준비 - ㉡이벤트 발생처리

지난시간에도 언급했듯이 이벤트 발생처리 조건은 Collider와 Event Trigger입니다.

큐브를 다음과 같이 만들어 주세요.

해당 큐브를 이용해 이벤트 처리 후 순간이동을 할 예정입니다.

이 떄 태그는 Teleport라고 지정해 주겠습니다!!!

1-3) 게이지 만들기 - ㉠Circle

UI 써클 이미지를 이용해 게이지가 차는걸 구현해 볼텐데요.

구성은 3개의 써클 이미지를 사용했습니다.

안쪽에 있는 써클의 크기와 이미지는 다음과 같습니다.

바깥쪽에 있는 써클의 크기와 이미지는 다음과 같습니다.

자식인 부분의 이미지 타입을 Filled로 변경한 후 색깔 또한 다음과 같이 변경해 주세요.

Fill 값을 조절해 게이지가 차는걸 표현해 줄 겁니다.

1-4) 게이지 만들기 - ㉡VRCircle 스크립트

<VRCircle 스크립트>

VRCircle은 레티클이 반응했을 때 게이지를 채우는 스크립트입니다.

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class VRCircle : MonoBehaviour
{
    public Image imgCircle; // 사용될 써클 이미지

    public float totalTime = 2.0f; // 게이지가 차는데 걸리는 시간
    bool gvrStatus; // 레티클 반응여부
    float gvrTimer;

    void Update()
    {
        // 써클 이미지 채우기
        if (gvrStatus)
        {
            gvrTimer += Time.deltaTime;
            imgCircle.fillAmount = gvrTimer / totalTime;
        }
    }

    public void GVROn()
    {
        gvrStatus = true;
    }

    public void GVROff()
    {
        gvrStatus = false;
    }

}

스크립트 작성이 끝나셨으면 Player에 추가한 후 이미지 또한 적용해 주세요^^

텔레포트 오브젝트에 있는 이벤트 트리거에는 

PointerEvnter가 됐을 경우에는 GVROn,

PointerExit가 됐을 경우에는 GVROff를 실행시켜 주세요.

레티클이 바라보거나 바라보지 않았을 경우 실행되게 됩니다.

1-5) 게이지 만들기 - ㉢캔버스 설정

이대로 실행하면 만든 이미지가 보이지 않습니다.

이유는 VR상에서 구현하기 때문이져.

캔버스 설정을 Screen Space - Camera로 바꾼 후 카메라를 연결해 주세요.

그리고 거리를 1로 바꿔주겠습니다.

이 방법이 아닌 월드 스페이스로 설정하셔서 구현하셔도 괜찮습니다.

레티클 이미지는 필요 없으니 쓰지 않겠습니다.

실행시키면 이렇게 게이지가 채워지게 됩니다ㅎㅎ

1-6) 텔레포트 - ㉠Teleport 스크립트

<Teleport 스크립트>

Teleport는 스크립트가 연결된 오브젝트로 순간이동하는 스크립트입니다.

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class Teleport : MonoBehaviour
{
    public GameObject player;

    public void TeleportPlayer()
    {
        player.transform.position = new Vector3(transform.position.x, transform.position.y + 1.5f, transform.position.z);
    }
}

스크립트는 Teleport 오브젝트들에게 연결해 주겠습니다.

1-7) 텔레포트 - ㉡VRCircle 스크립트

VRCircle 스크립트에서 게이지가 다 차면 레이캐스트를 쏘아

텔레포트 스크립트가 실행되도록 내용을 추가해 주겠습니다.

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class VRCircle : MonoBehaviour
{
    public Image imgCircle; // 사용될 써클 이미지

    public float totalTime = 2.0f; // 게이지가 차는데 걸리는 시간
    bool gvrStatus; // 레티클 반응여부
    float gvrTimer;

    public int distanceOfRay = 10;
    private RaycastHit _hit;

    void Update()
    {
        // 써클 이미지 채우기
        if (gvrStatus)
        {
            gvrTimer += Time.deltaTime;
            imgCircle.fillAmount = gvrTimer / totalTime;
        }

        Ray ray = Camera.main.ViewportPointToRay(new Vector3(0.5f, 0.5f, 0f));

        if (Physics.Raycast(ray, out _hit, distanceOfRay))
        {
            if (imgCircle.fillAmount == 1 && _hit.transform.CompareTag("Teleport"))
            {
                _hit.transform.gameObject.GetComponent().TeleportPlayer();
            }
        }
    }

    public void GVROn()
    {
        gvrStatus = true;
    }

    public void GVROff()
    {
        gvrStatus = false;
        gvrTimer = 0;
        imgCircle.fillAmount = 0;
    }

}
 

2. 마무리

오늘 강의는 여기까지입니다.

구글 카드보드를 이용해 게이지와 순간이동에 대해 배워보았습니다.

다음 시간에는 이벤트 처리와 VR UI에 대해 알아보겠습니다.

오늘도 고생하셨습니다.

감사합니다.

수업자료: 구글 카드보드 사용 #2 - 게이지와 순간이동