4-유니티 ui첫 화면 만들기

2023. 3. 5. 16:01언어/유니티

728x90

#2021. 3.16f 버전 시작

#출처 유튜브 Dev GomDol  -https://www.youtube.com/watch?v=EhJObA5bN2c

 

ui >> image 클릭

컴포넌트를 outline 추가해 준다.(버튼인걸 인지하기 쉽게 해 줌+ 테두리 효과)

위치 정해주고 이름을 Btn으로 임시로 바꿔줌

 

ui>> Button-TextMeshPro

만들어주고

 

위치를

우측 맨아래쪽 클릭

여백 10씩 다 생김 Trabnsform 위치 참고

색 변환 시킬수있음

normal Color 평상시

Highlighted Color 마우스 오버

pressed Color 클릭

Selected Color클릭 후 선택된 상태

Dlsabled Color 비활성화

 

 

 

캔버스에 ui >> panal 추가 후 mainmane로 이름 변경

아까 만든 btn 버튼 mainmane로 넣어줌 

 

 

mainmane의 lmage 컴포넌트는 삭제

 

 

그 후

Raycast Target 체크 해제 후

 

 

 

컴포넌트 추가

canvas Group 은 자식 오브젝트의 요소를 한 번에 처리하게 해주 준다.

 

MainMane에 

MainUi 스크립트 추가

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


public enum BTYNType //열거형 BTYNType선언 그안에 변수선언 및 할당
{
    New,
    Continue,
    Option,
    Sound,
    Back,
    Quit

}
public class MainUi : MonoBehaviour
{
}

그리고 스크립트 하나 더 만들어서 BtnType이라고 만들어줌

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.EventSystems; //인터페이스 사용시

public class BtnType : MonoBehaviour,IPointerEnterHandler,IPointerExitHandler//인터페이스
{
    public BTYNType currentType;
    public Transform buttonScale;
    Vector3 defaultScale;
    public CanvasGroup mainGroup;
    public CanvasGroup optionGroup;

    void Start()
    {
        defaultScale = buttonScale.localScale; //버튼초기화
    }
    bool isSound;
    public void OnBtnClick() //OnBtnClick 이라는 함수 선언
    {
        switch (currentType)
        {  //currentType 이코드와 값이 같으면 
            case BTYNType.New://new와 같을때 play라는 0번쨰 인덱스의 씬을 불러온다.
                SceneLoader.LoadSceneHandle("Play", 0); 
                break;
            case BTYNType.Continue:
                SceneLoader.LoadSceneHandle("Play", 1);
                break;
            case BTYNType.Option:
                CanvasGroupOn(optionGroup);
                CanvasGroupOff(mainGroup);

                break;
            case BTYNType.Sound:
                if (isSound)
                {
                    Debug.Log("사운드off");
                }
                else
                {
                    Debug.Log("사운드on");
                }
                isSound = !isSound;
                break;

            case BTYNType.Back:
                CanvasGroupOn(mainGroup);
                CanvasGroupOff(optionGroup);
                break;


            case BTYNType.Quit:
                Application.Quit();
                Debug.Log("app 종료");
                break;
        }
        
    }

    public void CanvasGroupOn(CanvasGroup cg)
    {
        cg.alpha = 1;
        cg.interactable = true;
        cg.blocksRaycasts= true;
    }

    public void CanvasGroupOff(CanvasGroup cg)
    {
        cg.alpha = 0;
        cg.interactable = false;
        cg.blocksRaycasts = false;
    }




    public void OnPointerEnter(PointerEventData eventData)
    { //마우스가 닿으면 온포인트 엔터가 호출된다.(아까 인터페이스를 이용한것)
        buttonScale.localScale = defaultScale * 1.2f;
    }

    public void OnPointerExit(PointerEventData eventData)
    { //마우스에 닿지 않을때 온포인트 는 나간다.
        buttonScale.localScale = defaultScale;
    }//defaultScale 값은 버튼 초기화 버튼이다.
}

https://docs.unity3d.com/kr/530/Manual/SupportedEvents.html

코드내용 중 인터페이스에 대한 내용(IPointerEnterHandler, IPointerExitHandler)

 

 

Btton에 넣어주고 넣은 스크립트를 끌어다가(무조건 끌어 땅겨야 됨 )

onclik에도 따로 넣어준다.

넣어준 후 두 번째 화살표 No Function을 클릭>> BtnType클릭

>>OnBtnClik()

 

이렇게 해주는 이유는 switch문에서 new라는 코드와 동일하게 만들기 위해서이다.

 

 

그런 후 재생하고 클릭하면

로그가 뜬다

잘 뜨면

 

 

Btn 이름을 NewBtn으로 바꿔주고 ContBtn버튼을 복제해서 한 개더 만들어준다

그리고 Pos y축 이동

 

Button Scale에 부모 오브젝트를 연결

똑같이 복제해서 입맛대로 만들어준다.

 

다 만들어 줬으면 캔버스 그룹 컴포넌트 수정

 

 

option Button에 스크립트 추가 후 메인메뉴에 메인메뉴 옵션메뉴에 옵션메뉴

마찬가지로 back 버튼에도 추가

 

 

 

결과물

 

 

로딩창도 

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

public class SceneLoader : MonoBehaviour
{
    public Slider progressbar;
    public Text loadtext; //ui추가
    public static string loadScene;
    public static int loadType;

    private void Start()
    {
        StartCoroutine(LoadScene());
    }//
    public static void LoadSceneHandle(string _name, int _loadType)
    {
        loadScene = _name;
        loadType = _loadType;
        SceneManager.LoadScene("Loading");
    }

    IEnumerator LoadScene() //코루틴 반환형으로 시작
    {
        yield return null; // yield return + 조건
        AsyncOperation operation = SceneManager.LoadSceneAsync("play"); //넘어갈 로딩씬
        operation.allowSceneActivation = false;
        //로딩이 끝나도 멈추게 만든다.

        while (!operation.isDone) //로딩이 끝나고 isdone이 true값이 되기전까지 반복
        {
            yield return null;
            if (loadType == 0) //인덱스 값0이나오면 
            {
                if (Input.GetMouseButtonDown(0)) //화면을 터치하면
                {
                    operation.allowSceneActivation = true; //다음 로딩씬으로넘어간다
                }
            }
            else if (loadType == 1)
            {
                Debug.Log("헌게임");
            }

            if (progressbar.value < 0.9f)
            {
                progressbar.value = Mathf.MoveTowards(progressbar.value, 0.9f, Time.deltaTime);
            }
            else if (operation.progress >= 0.9f)
            {
                progressbar.value = Mathf.MoveTowards(progressbar.value, 1f, Time.deltaTime);
            }

        }
    }
}

코드 하나 만들어준다.

다음씬으로 넘어가려면 로딩이 다되고 터치하면 넘어가게 된다.

728x90

'언어 > 유니티' 카테고리의 다른 글

6- 룰렛 만들기 (배경)  (0) 2023.03.18
5-유니티 탭 메뉴  (0) 2023.03.09
3- 2d 이미지 자르기  (1) 2023.03.02
2- 유니티 HP체력 바 만들기  (0) 2023.02.25
1- 유니티 타일 맵 만들기  (0) 2023.02.24