[유니티] UI/UX Samples

1. UI 다운

Kenney Asset 다운

- Game Icons

- UI Pack

- Alien UFO pack

 

2. Create -> Plane -> Cube

 

3. UI 아이콘 Texture Type 변경

Sprit (2D and UI)

 

 

4. 팝업

UI -> Canvas 추가

Canvas -> Button 하위에 추가

왼쪽 하단에 위치

이미지 변경

 

5. 버튼 깨짐 방지

Window -> Package Manager -> 2D Sprite 설치

Sprite Editor -> Apply

Button -> Sliced 

 

6.  버튼 이미지 추가

 

7. 프로필 뜨기

Canvas -> Panel 하위에 추가 -> Color 알파값 최대(불투명하게)

Button 추가

 

8. 프로필창 열기

패널에 여백 설정

Create Empty Object

C# Script -> 이름 바꾸기 UIManager

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

using UnityEngine.UI;

public class UIManager : MonoBehaviour
{
    // 프로필 팝업창 참조
    public GameObject profilePopup;

    //프로필창 열기 버튼 클릭
    public void OnOpenOnProfileButtonClick()
    {
        // 팝업창을 활성화 (게임오브젝트 활성화)
        profilePopup.SetActive(true);
    }
}

 

9. Close 버튼

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

using UnityEngine.UI;

public class UIManager : MonoBehaviour
{
    // 프로필 팝업창 참조
    public GameObject profilePopup;

    //프로필창 열기 버튼 클릭
    public void OnOpenOnProfileButtonClick()
    {
        // 팝업창을 활성화 (게임오브젝트 활성화)
        profilePopup.SetActive(true);
    }

    public void OnCloseProfileButtonClick()
    {
        // 팝업창을 비활성화 (게임오브젝트 비활성화)
        profilePopup.SetActive(false);
    }
}

 

10. 프로필 만들기

ProfilePopup -> UI -> image 하위에 추가 -> 

하위에 UI -> image 추가

 

11. UI->Text 추가 ->프로필 이름

font 바꾸기

 

12. UI->Text 추가 -> 레벨

그림판 -> 10*10 -> Blankbox.png 저장 -> Texture Type Sprite(2D and UI) 바꾸기 -> Source Image 연결

UI->Text 추가

 

13. 프로필 데이터 스트립트 직렬화

같은 데이터를 구조체로 관리할 수 있음

 

C# Script -> ProfilePopup 연결

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

public class UIProfileInfo : MonoBehaviour
{
    // 프로필 데이터 구조체 선언
    [Serializable]
    public class ProfileData
    {
        //데이터값
        public string ufoName;
        public int level;
    }

    public ProfileData profileData;

    // Start is called before the first frame update
    void Start()
    {
        
    }
       
}

 

UI 적용

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

using UnityEngine.UI;

public class UIProfileInfo : MonoBehaviour
{
    // 프로필 데이터 구조체 선언
    [Serializable]
    public class ProfileData
    {
        //데이터값
        public string ufoName;
        public int level;
    }

    public ProfileData profileData;

    // 레벨 프로그래스(이미지:Filled)
    public Image lvProgress;

    //이름 텍스트
    public Text ufoName;

    // Start is called before the first frame update
    void Start()
    {
        //이름 텍스트에 이름표시
        ufoName.text = profileData.ufoName;

        // 최대 100 레벨을 1로 환산해서 프로그래스에 적용
        lvProgress.fillAmount = profileData.level * 0.01f;
    }
       
}

 

14. 큐브회전

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

public class Character : MonoBehaviour
{


    // Start is called before the first frame update
    void Start()
    {
        
    }

    // Update is called once per frame
    void Update()
    {
        transform.Rotate(Vector3.up * 90f * Time.deltaTime);
    }
}

 

15. LoginPopup 추가

 

16. IDInputField 추가

Placeholder 설정

 

17. 비밀번호 화면 추가

IDInputField 복제 -> PWInputField ->Content Type : Password

 

18. 로그인버튼 추가

 

19. 버튼연결

 

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

using UnityEngine.UI;

// UI 관리자
public class UIManager : MonoBehaviour
{
    //팝업 열기
    public void OpenPopupButtonClick(GameObject popup)
    {
        popup.SetActive(true);
    }

    //팝업 닫기
    public void ClosePopupButtonClick(GameObject popup)
    {
        popup.SetActive(false);
    }
}

 

20. 로그인 버튼

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

using UnityEngine.UI;

//로그인 수행
public class UILogin : MonoBehaviour
{
    //아이디 인풋필드
    public InputField idInputField;

    //UIManager 참조
    public UIManager uiManager;

    // 로그인 버튼 클릭
    public void OnLoginButtonClick()
    {
        string msg = idInputField.text + " 유저가 로그인을 수행합니다.";
        uiManager.ShowToastMessage(msg, gameObject);
    }    
}

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

using UnityEngine.UI;

// UI 관리자
public class UIManager : MonoBehaviour
{
    //팝업 열기
    public void OpenPopupButtonClick(GameObject popup)
    {
        popup.SetActive(true);
    }

    //팝업 닫기
    public void ClosePopupButtonClick(GameObject popup)
    {
        popup.SetActive(false);
    }

    public void ShowToastMessage(string msg, GameObject popup)
    {
        Debug.Log(msg);
        popup.SetActive(false);
    }
}

 

21. 토스트메시지

- 로그인 창 실행

- 로그인 버튼 클릭

- UI매니저에서 토스트 메시지 출력을 요청

- 토스트 메시지 팝업 실행

- 토스트 메시지 출력

- 코루틴을 이용해 일정 시간 지연후 토스트 메시지 팝업 닫기

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

using UnityEngine.UI;

//로그인 수행
public class UILogin : MonoBehaviour
{
    //아이디 인풋필드
    public InputField idInputField;

    //UIManager 참조
    public UIManager uiManager;

    // 로그인 버튼 클릭
    public void OnLoginButtonClick()
    {
        string msg = idInputField.text + " User Login Secces!!";
        uiManager.ShowToastMessage(msg, gameObject);
    }    
}

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

using UnityEngine.UI;

// UI 관리자
public class UIManager : MonoBehaviour
{
    public GameObject toastMessagePopup;
    public float toastMessageTime;

    //팝업 열기
    public void OpenPopupButtonClick(GameObject popup)
    {
        popup.SetActive(true);
    }

    //팝업 닫기
    public void ClosePopupButtonClick(GameObject popup)
    {
        popup.SetActive(false);
    }

    public void ShowToastMessage(string msg, GameObject popup)
    {
        Debug.Log(msg);
        popup.SetActive(false);

        StopAllCoroutines(); //StopCoroutine("ToastMessageCroutine"); 써도됨(이전에 실행된 코루틴을 종료함)
        StartCoroutine("ToastMessageCroutine", msg);
    }

    //토스트 메시지 출력
    IEnumerator ToastMessageCroutine(string msg)
    {
        toastMessagePopup.SetActive(true);

        //메시지 출력
        UIToastMessage toast = toastMessagePopup.GetComponent<UIToastMessage>();
        if (toast !=null)
        {
            toast.PrintToastMessage(msg);
        }
        //토스트 메시지 오픈시간
        yield return new WaitForSeconds(toastMessageTime);

        //토스트 메시지창 비활성화
        toastMessagePopup.SetActive(false);
    }
}

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

using UnityEngine.UI;

public class UIToastMessage : MonoBehaviour
{
    //메시지 텍스트 참조
    public Text msgText;

    //토스트 메시지창에 메시지를 출력함
    public void PrintToastMessage(string msg)
    {
        msgText.text = msg;
    }
}

UI 연결이 복잡하다..

로그인 엔터 추가

 

22. 로그인 정보 저장(체크박스 만들기)

LoginPopup -> UI ->Toggle

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

using UnityEngine.UI;

//로그인 수행
public class UILogin : MonoBehaviour
{
    //아이디 인풋필드
    public InputField idInputField;

    //패스워드 인풋 필드
    public InputField pwInputField;

    //UIManager 참조
    public UIManager uiManager;

    public Toggle saveIdToggle;

    //현재 게임오브젝트의 Active가 활성상태로 전환됨
    // -> GameObject.SetActive(true)가 실행될때 호출
    public void OnEnable()
    {
        //아이디란은 비워줌
        idInputField.text = "";
        //패스워드란은 비워줌
        pwInputField.text = "";
        //아이디 저장 여부 : false
        saveIdToggle.isOn = true;

        //저장된 아이디키가 존재한다면
        bool hasIDKey = PlayerPrefs.HasKey("USER_ID");
        if (hasIDKey)
        {
            // 아이디값을 id 입력 필드에 출력
            idInputField.text = PlayerPrefs.GetString("USER_ID");
            // 아이디 저장 토글 체크
            saveIdToggle.isOn = true;
        }
    }

    // 로그인 버튼 클릭
    public void OnLoginButtonClick()
    {
        //아이디 저장 토글의 체크 상태가 on 이면
        if (saveIdToggle.isOn)
        {
            //PlayerPrefs에 USER_ID 키값으로 유저가 입력한 아이디를 저장
            PlayerPrefs.SetString("USER_ID", idInputField.text);
            PlayerPrefs.Save();
        }
        else
        {
            //PlayerPrefs에 저장된 값중 USER_ID 키값의 데이터를 제거
            PlayerPrefs.DeleteKey("USER_ID");
        }

        string msg = idInputField.text + " User Login Secces!!";
        uiManager.ShowToastMessage(msg, gameObject);


    }    

    
}

Toggle 연결

 

PWInputField On End Script 삭제