자동 전투 게임 - 로비 UI 만들기

 전부터 만들어보고 싶었던 자동 전투 게임을 만들려고 한다.

 기왕 만드는거 클라이언트부터 서버까지 만들어볼까 한다.

 

 사실 이미 서버-클라이언트간 tcp 통신을 하는 기능과 간단한 로그인/회원가입 기능까지 만들었다.

 

 오늘 할 일은 클라이언트 - 로비 UI 제작이다.

 

 기본적인 플로우는 이렇다.

1. 회원가입 및 로그인
2. 로그인을 하면 로비 UI로 진입한다.
3. 로비 UI에서는 빠른 매칭, 커스텀 게임을 이용할 수 있다.
4. 그 외에 게임 정보, 플레이어 정보, 순위표, 설정, 상점 등의 주요 기능들에 접근할 수 있다.

 내가 해본 게임중에는 프리코네R, 이터널 리턴, 도타, 슈퍼셀과 같은 게임들의 UI가 깔끔하고 좋다고 생각했다.

 

 특히 프리코네R의 UI에 대해 찾아보던 중, 이런 게시글을 발견했다.

[CEDEC 2018] "공주 커넥트! Re .. : 네이버블로그

[CEDEC 2018] "공주 커넥트! Re : Dive"제작 사례에서 배울 UI를 빠르고 고품질로 만들기위한 프로토 타

 그래서 UI 레퍼런스는 프리코네R로 하기로 했다.

 

 우선 오늘의 목표는 위와같은 디자인의 메인 UI를 제작하고, 푸터(헤더인가)를 통해 여러 UI를 자연스럽게 이동하는 것이다.

 

 이런 UI를 네비게이션바 라고 한다.

 

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

public class LobbyUI : MonoBehaviour
{
    private enum Contents
    {
        MAIN = 0,
        SHOP = 1,
        ITEMS = 2,
        DATABASE = 3,
        LEADERBOARD = 4,
    }

    public Button header_main, header_shop, header_items, header_database, header_leaderboard;
    public UIBase content_main, content_shop, content_items, content_database, content_leaderboard;
    private Dictionary<Contents, UIBase> contents;

    // Start is called before the first frame update
    void Start()
    {
        header_main.onClick.AddListener(() => SwitchContents(Contents.MAIN));
        header_shop.onClick.AddListener(() => SwitchContents(Contents.SHOP));
        header_items.onClick.AddListener(() => SwitchContents(Contents.ITEMS));
        header_database.onClick.AddListener(() => SwitchContents(Contents.DATABASE));
        header_leaderboard.onClick.AddListener(() => SwitchContents(Contents.LEADERBOARD));
        contents = new Dictionary<Contents, UIBase>{
            {Contents.MAIN, content_main},
            {Contents.SHOP, content_shop},
            {Contents.ITEMS, content_items},
            {Contents.DATABASE, content_database},
            {Contents.LEADERBOARD, content_leaderboard},
        };
    }

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

    }

    private void SwitchContents(Contents target)
    {
        foreach (var content in contents.Values)
        {
            content.Hide();
        }
        contents[target].Show();
    }
}

 사용할 메뉴 목록을 enum 형태로 정의했다.

 미리 네비게이터의 메뉴 버튼과 컨텐츠를 인스펙터를 통해 지정한다.

 enum Contents를 매개변수로 받아 타겟 컨텐츠만을 표시하는 함수를 정의하고, 네비게이터의 메뉴 버튼에 연결한다.

 enum Contents와 컨텐츠UI를 미리 Dictionary 형태로 저장해 더 빨리 접근할 수 있도록 했다.

 

 UIBase는 RequireComponent 어트리뷰트를 통해 CanvasGroup을 가지는 스크립트이다.

 Show, Hide, Toggle의 세 함수를 구현하고 있다.

 UI는 보이지 않는 상태라도 어떤 기능을 수행하고 있는 경우가 있다. 이런 UI는 SetActive를 통해 완전히 비활성화 해버리면 문제가 생길 수 있다. 그래서 CanvasGroup을 통해 기능은 유지한 채 그래픽 표현과 상호작용만 막는다.

 

완성

 

 오늘은 여기까지만 하고, 다음은 매치메이킹 기능을 구현해보려고 한다.