Post

메인 메뉴 생성

메인 메뉴 인터페이스를 제작한 내용

Unity Version : 2022.3.16f1 LTS

메인 메뉴 UI 구현

Untitled

Metaverse Game은 가제임

요구사항 명세서의 CT-001-1을 구현하기 위해 우상단의 프로필, 좌측에 Login 버튼을 생성함

추후에 Start 버튼을 클릭하면 어떤 월드에서 플레이 할 것인지 선택 가능하게 할 예정(CT-001-2)

기능 인터페이스 제작

일단은 인터페이스부터 만드는걸로 시작함

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
// MainMenu.cs

public class MainMenu : MonoBehaviour
{
    // Start is called before the first frame update
    void Start()
    {

    }

    // Update is called once per frame
    void Update()
    {

    }

    public void OnClickLogin()
    {
        Debug.Log("Login Clicked");
    }

    public void OnClickStart()
    {
        Debug.Log("Start Clicked");
    }

    public void OnClickOption()
    {
        Debug.Log("Option Clicked");
    }

    public void OnClickQuit()
    {
#if UNITY_EDITOR
        UnityEditor.EditorApplication.isPlaying = false; // 유니티 에디터에서 실행 중일 때에 종료하는 함수
#else
        Application.Quit(); // 추후 배포한 앱을 실행했을 때 종료하는 함수
#endif
    }

    public void OnClickProfile()
    {
        Debug.Log("Profile Clicked");
    }

}

작성한 MainMenu.cs 스크립트를 MainMenuCanvas에 부착

Untitled

그리고 각 버튼에서 On Click () 부분에 추가함

Untitled

이러면 해당 버튼이 눌렸을 때 어떤 함수를 호출할지 설정 가능함

이후, 테스트에서 각 버튼을 클릭하면 다음과 같이 로그가 출력됨

Untitled

로그인 팝업창 구현

일단 팝업창 UI를 만듬

Untitled

그리고 LoginCanvas에서 동작할 C# 스크립트 생성

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// LoginPopup.cs

public class LoginPopup : MonoBehaviour
{
    public Button closeBtn;

    public void Init()
    {

    }

    public void Open()
    {
        this.gameObject.SetActive(true);
    }

    public void Close()
    {
        this.gameObject.SetActive(false);
    }

    
}

일단 팝업 띄우기와 닫기만 가능하게 함수를 만들어둠. 이 함수를 부르는건 MainMenu.cs 에서 할 예정

1
2
3
4
5
6
7
8
9
// MainMenu.cs 일부
public void OnClickLogin()
{
    this.loginPopup.closeBtn.onClick.AddListener(() =>
    {
        this.loginPopup.Close();
    });
    this.loginPopup.Open();
}

OnClickLogin 함수를 구현함.

익명 함수 방식을 사용해서 로그인 팝업의 X 버튼에 리스너를 구현하고, 로그인 팝업이 열리도록 함

Untitled

팝업이 열리는 것을 확인하였으니 UI를 완성함

로그인 기능은 추후에 웹 로그인 서버 성공하면 그때 기능 합칠 예정

로그인 성공하면 필요한 기능

  • 로그인 한 ID가 메인 화면 우측 상단에 표시되어야 함
  • 로그인 버튼이 사라져야 함
  • 메인 화면 우측 상단 프로필 누르면 프로필 팝업 나와야함 (여기에 로그아웃 구현)
  • 프로필 팝업에 내 정보가 나와야 함(아이디, 이메일 등)

참고자료

UGUI 기초 유니티

유니티 UI (UGUI) PopupLogin 팝업 로그인

[유니티 C# 강좌] 18. 익명 형식, 익명 메서드, 람다식, Func 대리자, Action 대리자

This post is licensed under CC BY 4.0 by the author.