[Oculus Go Unity] 메뉴 만들기(canvas에 메뉴 만들기) #2

레이저 포인터에 이어서 이번엔 메뉴를 만들겠습니다.

 

Hierarchy에서 우클릭 후 UI -> Panel을 클릭합니다.

그러면 캔버스와 패널이 생성됩니다.

 

 

 

Hierarchy에 있는 캔버스나 패널을 더블클릭 합니다.

위와 같이 패널이 보이게 됩니다.

 

캔버스를 우클릭 하여 자식 객체로 버튼을 생성합니다.

 

 

 

캔버스를 확대하면 위와같이 버튼이 생성된 것을 확인 할 수 있습니다. 

저는 현재 VR 을 활용하여 졸업작품을 만들어야 합니다.

그래서 재가 만들 컨텐츠를 위한 메인 화면을 만들어 보겠습니다.

 

버튼 width 와 height를 300으로 만들겠습니다.

Hierarchy에서 버튼을 누르고 Ctrl+D를 하여 복사합니다.

 

위와 같이 3개의 버튼을 만듭니다.

중앙의 버튼의 x축을 0으로 두고

왼쪽 버튼의 x축 좌표는 -356

오른쪽은 + 356으로 설정합니다.

 

오른쪽 버튼의 height를 140으로 만듭니다.

y축 좌표 값을 80을 줍니다.

ctrl + d를 활용해 버튼을 더 만들고 y축을 -80으로 설정합니다.

그러면, 위의 화면처럼 되게 됩니다.

 

첫번째 버튼의 하위 객체 text에 접근합니다. inspector 창에서 font size 를 40을 주고 가이드라고 넣습니다.

 

나머지도 위의 설명의 방식대로 위의 이미지처럼 만듭니다.

 

버튼 생김새는 다 만들었습니다.

이번에는 레이저가 버튼을 가르킬 시 색이 노랑색으로 변하도록 만들 겠습니다.

버튼의 인스펙터 창에서 Highligted Color를 위와 비슷한 색으로 바꿔봅시다.

본인이 원하는 색으로 해도 됩니다.

 

 

 

 

각각의 버튼에 맞는 이름을 지어서 구분을 쉽게 할 수 있도록 합니다.

 

 

패널의 자식으로 버튼을 넣어줍니다.

패널을 끌어다 Prefabs 폴더에 넣어줍니다. 없으면 Asset폴더에 생성합니다.

만약, 캔버스도 프리팹에 포함하게 될 경우 오류가 생길 수 있습니다.

 

이름은 main_menu로 바꿉니다.

이걸로 메인 메뉴 하나를 완성하였습니다.

 

이번에는 가이드 버튼을 눌렀을 때 나타날 가이드 메뉴 패널을 만들겠습니다.

 

 

main_menu의 체크를 풀어줍니다. 그에 따라, 메인 메뉴가 히어라키 창에 존재하지만 invisible 상태가 됩니다.

객체의 이름은 원래, Panel이였는데 삭제하였다 프리팹스 폴더에서 다시 캔버스 하위 객체로 넣었습니다.

 

가이드 매뉴 객체를 만들겠습니다.

다시 패널을 캔버스 하위 객체로 생성합니다.

 

버튼을 아래와 같이 구상합니다.

버튼은 패널의 하위 객체로 설정하고 프리팹으로 만들기 위해 객체를 끌어다 프리팹스 폴더에 이동시킵니다.

끌어다 이동 시키기 전에 패널 이름을 guide_menu라 설정하겠습니다. 객체를 클릭하고 F2번을 누르면 됩니다.

 

 

가이드 메뉴도 체크를 풀어 투명한 상태로 만들겠습니다.

 

다음은 설정 버튼을 눌렀을 때 나타날 option_menu 입니다.

 

 

옵션 메뉴에서는 음악 크기를 줄였다 키윘다를 할 수 있어야합니다.

위의 조건을 만족시키기위해 Silder를 활용합니다.

Silder는 우클릭 -> UI -> Silder라고 있습니다.

 

슬라이더가 작다면 Scale을 키위주시기 바랍니다.

 

아래 화면처럼 option_menu를 만들어주세요.

텍스트 폰트 사이즈를 키웠는데 안보인다면

text의 Width, Height값을 키우면 보이게 됩니다.

 

 

 

 

이번에는 종료 버튼을 누르면 나타날 exit_menu를 만들겠습니다.

종료 메뉴는 크기가 작기 때문에 패널 크기를 x,y 축 둘다 0.5로 줄이겠습니다.

 

 

위의 이미지처럼 exit_menu를 꾸며줍니다.

 

이것으로 필요한 메뉴들을 다 만들었습니다.

온라인 체험 메뉴는 이 단계에서는 만들지 않겠습니다.

 

이번에는 메인 메뉴에서 버튼을 눌렀을 때 버튼에 맞는 메뉴가 등장 할 수 있도록,

클릭시 동작을 구현하겠습니다.

 

Scripts 폴더에 C#Script 하나 생성합니다. 이름은 onClick_MainMenu 라고 만들겠습니다.

 

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
 
public class onClick_MainMenu : MonoBehaviour
{
    public GameObject optionMenu;
    public GameObject ExitMenu;
    public GameObject mainMenu;
    public GameObject guideMenu;
 
    public void guide_btn_clicked()
    {
        mainMenu.SetActive(false);
        guideMenu.SetActive(true);
 
    }
    public void guide_back_clicked()
    {
        guideMenu.SetActive(false);
        mainMenu.SetActive(true);
 
    }
    public void ExitMenu_btn_clicked()
    {
        mainMenu.SetActive(false);
        ExitMenu.SetActive(true);
    }
    public void ExitMenu_back_clicked()
    {
        ExitMenu.SetActive(false);
        mainMenu.SetActive(true);
    }
    public void option_btn_clicked()
    {
        mainMenu.SetActive(false);
        optionMenu.SetActive(true);
    }
    public void option_back_clicked()
    {
        optionMenu.SetActive(false);
        mainMenu.SetActive(true);
    }
}
 

SetActive() 메소드는 객체를 보이게 할 것이냐 아니냐를 선택할 수 있는 메소드입니다.

 

Canvas에 위의 스크립트를 넣어줍니다.

스크립트를 히어라키 창에있는 캔버스에 드래그엔 드랍을 하시면 됩니다.

 

넣어주게 되면 참조 객체 값이 None이라 됩니다.

 

히어라키 창에서 프리팹을 드래그 앤 드랍으로 가져오거나 옆에 동그라미를 클릭해서 객체를 검색하여

넣어줄 수 있습니다.

 

그런데 생각해보니 버튼들의 테그를 설정하지 않았습니다.

레이저 포인터에 충돌 발생시 태그가 Button이면 클릭이 진행 되게끔 코드를 만들었기 때문에

프리팹 수정이 필요합니다.

프로젝트에 들어가 우선 메인 메뉴의 프리팹에 들어갑니다.

 

guide_btn을 클릭합니다.

위의 이미지를 보면 태그가 Untagged라고 되있습니다. 클릭하고 재일 아레의 Add Tag를 클릭합니다.

List is Empty 아래 +를 클릭합니다.

Button 이라 치고 save 버튼을 누릅니다.

다시돌아오면 메뉴에 Button 이라는 태그가 생겼는데 태그를 클릭하여 위 화면처럼 수정합니다.

모든 메뉴 프리팹의 태그를 버튼으로 수정합니다.

 

이번엔 버튼에 박스 콜라이더를 설정해야 합니다.

모든 버튼의 컴포넌트에 박스 콜라이더를 넣고 x,y 스케일을 width, height의 크기로 맞춰 주시기 바랍니다.

 

 

확인해보면 프로젝트의 프리팹을 수정하면 히어라키 창에있는 프리팹에도 적용된다는 것을 알 수 있습니다.

 

이번엔 버튼을 클릭할 경우 액션을 주겠습니다.

 

프로젝트에서 메인 메뉴 프리팹을 더블클릭합니다.

 

guide_btn을 더블 클릭합니다. 밑에 Inspector 창의 아래에 보면

On Click() 이 있습니다. + 버튼을 눌러주세요

 

Runtime Only 아래에 Canvas를 넣어줍니다.

그리고 오른쪽 위의 버튼을 눌러  화면 처럼 만드시면 됩니다.

위에 넣어준 메소드 guide_btn_clicked()는 

메인 메뉴를 감추고 가이드 메뉴를 보여줍니다. 

 

나머지 버튼도 메소드들의 기능을 생각하여 각 버튼의 On Click()에 넣어줍니다.

 

다음으로 캔버스의 위치를 수정하겠습니다.

위 이미지 처럼 수정해주세요

 

캔버스의 속성을 바꾸겠습니다.

Render mode 를 World Space로 바꿔주세요

좌표 값도 위의 이미지처럼 변경해주세요

 

이로써 플레이어의 시각에는 항상 메뉴 판이 보이도록 하였습니다.

 

추가적으로 Slider를 조정 하는 기능을 넣어보겠습니다.

아쉽게도 Slider를 조작하는데 시간이 부족하여 버튼을 누르면 슬라이더를 

조작할 수 있게끔 만들겠습니다. 슬라이더를 좀더 재대로 만들고 싶다 하는 분은

https://developer.oculus.com/blog/easy-controller-selection/

Easy Controller Selection | Oculus

이곳을 참조해주세요

 

슬라이더를 버튼으로 조작할 수 있게끔 아래의 코드를 참조해주세요

핵심적으로, 한 가지만 말씀 드리면

slider.GetComponent<Slider>().value로 슬라이더를 조작할 수 있는 원의 위치를 변경 할

수 있습니다.

값의 범위는 0~1 까지이며 변수 타입은 float 입니다.

using System;
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
public class Slider_mover : MonoBehaviour
{
    public Slider slider;
    public Text text;
    private float Value = 0;
    private int p = 0;
 
 
    public void slider_plus()
    {
        if (Value < 1f)
        {
            Value += 0.1f;
            p += 10;
        }
        text.text = p.ToString()+"%";
        slider.GetComponent<Slider>().value = Value;
    }
    public void slider_minus()
    {
        if (Value > 0.01f)
        {
            Value -= 0.1f;
            p -= 10;
        }
        text.text = p.ToString() + "%";
        slider.GetComponent<Slider>().value = Value;
    }
 
    // Start is called before the first frame update
    void Start()
    {
        
    }
 
    // Update is called once per frame
    void Update()
    {
        
    }
}
 

https://www.facebook.com/100009279421433/videos/2502245443428079/?id=100009279421433

김종완