Let's make a lottery machine!! Chapter 2. Make UI. 로또 번호 생성기 만들기 두 번째 챕터 UI만들기!

지난 시간에는 로또 번호 추첨하는 기능을 만들어보았습니다.

(지난 글) https://dnddkqja21.tistory.com/33

Let's make a lottery machine!! 로또 번호 생성기 만들기

 

 

하지만 현재는 별다른 UI작업을 하지 않았기 때문에 콘솔창으로 확인할 수 밖에 없어서 진정한 유니티 프로그램이라고 보기는 어렵습니다.

 

이번에는 유니티에서 제공하는 도구를 이용하여 간단하게 UI를 꾸며볼까합니다.

 

Hierarchy의 + 버튼을 눌러 UI - Image를 선택해주세요.

 

 

Canvas를 포함하여 하위의 오브젝트로 Image가 생성되고 맨 아래 EventSystem 오브젝트 또한 함께 생성되었습니다.

Canvas란 쉽게 말해서 UI를 그리는 공간이라고 생각하시면 됩니다.

EventSystem이 같이 생성되는 이유는 우리가 그려놓은 UI들이 말 그대로 이미지일 뿐 어떠한 기능을

수행할 수 는 없습니다. EventSystem은 UI에 입력된 값을 전달받아 기능을 수행할 수 있도록 해주는 역할을 담당합니다.

 

 

씬탭과 게임탭이 저와 비슷하거나 동일하게 보일 겁니다.

게임 탭을 보시면 우리가 만든 UI Image가 실제 플레이 화면에 어떻게 위치하고 보이는지 확인할 수 있습니다.

씬탭에서 2D인 UI를 쉽게 편집하려면 우리도 2D로 보면서 작업을 해야 합니다.

 

 

 

씬 탭의 아무 공간에 마우스를 올리고 클릭하세요. 그 다음으로 키보드의 숫자키 중 2번을 누르세요.

그럼 UI를 편집하기 좋도록 화면의 시점이 전환됩니다.

 

 

빨간 동그라미 친 곳이 활성화됨과 동시에 씬 탭의 화면이 2D로 변경된 것을 보실 수 있습니다.

숫자 키 2번을 누르거나 위의 버튼을 눌러 언제든 2D 와 3D의 뷰모드를 변경할 수 있습니다.

 

하이어라키의 이미지 오브젝트를 더블클릭하면 위 사진처럼 포커싱이 이미지 오브젝트에 맞춰지면서 씬 탭의 중앙에 위치하게됩니다. 이 상태에서 마우스 휠을 스크롤링하여 줌아웃을 원하는 크기만큼 조절합니다. 

 

 

Alt키를 누르고 씬탭의 화면을 드래그하여 원하는 위치로 옮길 수 있습니다.

저는 씬 탭과 게임 탭이 최대한 동일하게 보이도록 위치시켜보았습니다.

 

이후에 이미지 오브젝트의 인스펙터 탭에서 동그라미 친 영역을 클릭합니다.

 

위 사진처럼 앵커 프리셋이 펼쳐집니다.

 

위의 상태에서 Alt와 Shift를 동시에 누르고 있으면 위 사진처럼 피벗과 포지션을 동시에 변경하게 되는데요.

UI를 원하는 위치에 이쁘게 배치하기 위해서는 이러한 옵션을 잘 다룰 수 있어야 합니다.

자세한 사용법은 검색을 활용해보시기 바랍니다^^!

우선은 그냥 따라해보자구요! 빨간 동그라미 영역을 클릭해주세요!

 

 

하얀 이미지가 화면 전체를 덮는 크기로 늘려진 것을 보실 수 있습니다.

 

 

이후에 Image -> Background로 이름을 변경해주세요.

 

Background 오브젝트에 마우스 우클릭을하여 Create Empty를 해줍니다.

생성된 오브젝트의 이름을 Layout Group으로 바꿔줍니다.

 

 

Layout Group오브젝트에 Add Component 버튼을 눌러 UI를 정렬할 때 사용하는 기능을 추가해보겠습니다.

 

 

Vertical 중 ver까지만 타이핑하여도 Vertical Layout Group이라는 컴포넌트가 나오는데요. 클릭하여 추가합니다.

이 컴포넌트는 UI를 가로로 예쁘게 정렬할 때 쓰입니다.

 

 

 

비어있는 오브젝트에 Vertical Layout Group 컴포넌트가 추가되었습니다.

Add Component 버튼을 눌러 Content Size Fitter 또한 추가시켜줍니다.

Content Size Fitter 는 레이아웃 요소의 크기를 제어하는 컨트롤러라고 생각하시면 됩니다.

 

 

위 사진과 같이 Horizontal Layout Group의 Spacing을 50으로, Child Alignment를 Middle Center로, Child Force Expend의 Width와 Height를 체크해제해주세요. 

이후에 Content Size Fitter의 Horizontal Fit을 Preferred Size로 변경해주세요.

 

 

 

세팅이 끝난 Layout Group 오브젝트에 마우스 우클릭을 하여 UI - Image를 선택해주세요!

 

 

 

 

만들어진 오브젝트의 이름을 Ball로 변경하고, 이미지 컴포넌트의 Source Image 를 클릭합니다.

 

 

 

Select Sprite 창이 뜨면 Knob를 선택해주세요.

 

 

저는 Width와 Height를 각각 200으로 키워주겠습니다.

 

 

 

이후 Ball 오브젝트에 우클릭하여 Text - TextMeshPro를 선택해주세요.

 

위와 같은 창이 뜨면 체크된 영역을 클릭해줍니다.

 

Ball 의 자식으로 Text 오브젝트가 생성되었습니다.

 

 

 

Text 오브젝트의 이름을 Number로 수정해준 뒤 인스펙터에서 Font Size, Alignment 등을 수정해줍니다.

 

 

게임 탭을 보았을 때 위 사진처럼 나왔다면 성공! 

 

 

Ball 오브젝트 좌측에 있는 화살표를 클릭하여 하위 오브젝트들이 안 보이도록 정리할 수 있습니다.

 

Ball 오브젝트를 선택한 후에 Ctrl + D 키를 눌러 오브젝트를 복사해봅시다!

한국의 로또는 6개의 번호를 맞춰야 하므로 저는 5개를 복사해볼게요.

 

 

위 사진과 같이 숫자가 적힌 공들이 나열되는 것이 확인되었습니다.

이는 우리가 이전에 Layout 세팅을 해주었기 때문에 스스로 정렬이 되는 것입니다.

확인을 하였으면 전에 만들어두었던 Lotto 스크립트를 수정하러 갑시다.

 

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

public class Lotto : MonoBehaviour
{
    [SerializeField]
    List<int> numList = new List<int>();
    [SerializeField]
    int[] arr = new int[6];

    [Header("--- UI ---")]
    [SerializeField]
    Color[] colorList = new Color[5];
    [SerializeField]
    Image[] balls;
    [SerializeField]
    TextMeshProUGUI[] numbers;

    void Update()
    {
        if(Input.GetKeyDown(KeyCode.Space))
        {
            for (int i = 0; i < 45; i++)
            {
                numList.Add(i + 1);
            }

            for (int i = 0; i < arr.Length; i++)
            {
                int num = UnityEngine.Random.Range(0, numList.Count);
                arr[i] = numList[num];
                numList.RemoveAt(num);
            }

            Array.Sort(arr);

            for (int i = 0; i < arr.Length; i++)
            {
                Debug.Log(arr[i]);
            }

            numList.Clear();
            Array.Clear(arr, 0, 6);
        }
    }
}

 

 

 

새로 추가된 영역입니다.

첫 줄부터 설명드리자면 Header는 아래의 변수들이 어떻게 쓰일지를 구분하기 쉽도록 표시해주는 역할입니다.

다섯 개의 컬러 배열을 만들어 주었는데요. 이는 로또의 번호 별 색상은 다섯가지로 구분되기 때문입니다.

번호 별 색상을 지정해주기 위해 Image 타입의 배열을 만들어주었고,

볼의 번호를 변경하기위한 TextMeshProUGUI 배열도 만들어 주었습니다.

스크립트를 저장한 후 다시 인스펙터로 와서 Lotto스크립트가 추가되어 있는 Lotto Number Creator 오브젝트를

선택하여 인스펙터를 확인해봅시다.

 

 

스크립트에서 추가해 준 헤더와 변수들을 인스펙터에서 확인할 수 있습니다.

인스펙터는 유니티 개발자 뿐만아니라 기획자, 그래픽 아티스트들도 볼 수 있는 영역이기 때문에

원만한 협업을 위하여 깔끔하게 꾸며주는 것이 좋습니다.

 

로또는 1~10 번까지는 노란색, 11~20번은 파란색, 21~30은 빨간색, 31~40은 회색, 41~45는 녹색으로 구성되어있습니다.

Color List의 컬러에 접근하여 색상을 지정해줍니다.

 

 

이와같이 색상을 지정했을 때 중요한 점은 컬러의 알파 기본값이 0이기 때문에 색상을 지정한 들 눈에 보이지 않습니다.

따라서 알파 영역또한 255로 수정해주셔야 합니다.

 

 

 

이번에는 Balls와 Numbers 변수에 대입을 해줄 건데요. 

우선 인스펙터의 우측 상단에 자물쇠 모양의 아이콘이 있는데 한 번 클릭하면 위 사진처럼 잠기게 됩니다.

이렇게 자물쇠를 잠궈놓으면 다른 오브젝트를 선택하여도 인스펙터는 선택한 오브젝트의 속성을 보여주는 것이

아니라 자물쇠로 잠궈놓은 오브젝트를 계속하여 보여줍니다.

 

 

이 상태에서 여섯 개의 Ball 오브젝트를 한꺼번에 선택한 후 인스펙터의 Balls 변수에 드래그 앤 드롭으로 대입할 겁니다.

 

위 사진처럼 여섯 개의 오브젝트가 배열에 잘 할당된 것을 볼 수 있습니다.

Number변수 또한 마찬가지의 방법으로 할당해줍시다!

 

 

사진과 같이 잘 할당이 되었다면 다음 스텝으로 넘어가도록 하죠!

 

 

Lotto 스크립트에서 이 부분이 당첨 번호를 콘솔창에 출력해주는 부분이었습니다.

마찬가지로 지금까지 미리 작업해 놓은 것을 보여주는 것 또한 이곳에서 처리해주면 됩니다.

로또 번호는 여섯개이므로 우리의 처리 또한 여섯번 반복해주면 되기 때문입니다.

 

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

public class Lotto : MonoBehaviour
{
    [SerializeField]
    List<int> numList = new List<int>();
    [SerializeField]
    int[] arr = new int[6];

    [Header("--- UI ---")]
    [SerializeField]
    Color[] colorList = new Color[5];
    [SerializeField]
    Image[] balls;
    [SerializeField]
    TextMeshProUGUI[] numbers;

    void Update()
    {
        if(Input.GetKeyDown(KeyCode.Space))
        {
            for (int i = 0; i < 45; i++)
            {
                numList.Add(i + 1);
            }

            for (int i = 0; i < arr.Length; i++)
            {
                int num = UnityEngine.Random.Range(0, numList.Count);
                arr[i] = numList[num];
                numList.RemoveAt(num);
            }

            Array.Sort(arr);

            for (int i = 0; i < arr.Length; i++)
            {
                Debug.Log(arr[i]);

                if (arr[i] >= 1 && arr[i] <= 10)
                {
                    balls[i].color = colorList[0];
                    numbers[i].text = arr[i].ToString();
                }
                else if (arr[i] >= 11 && arr[i] <= 20) 
                {
                    balls[i].color = colorList[1];
                    numbers[i].text = arr[i].ToString();
                }
                else if (arr[i] >= 21 && arr[i] <= 30)
                {
                    balls[i].color = colorList[2];
                    numbers[i].text = arr[i].ToString();
                }
                else if (arr[i] >= 31 && arr[i] <= 40)
                {
                    balls[i].color = colorList[3];
                    numbers[i].text = arr[i].ToString();
                }
                else if (arr[i] >= 41 && arr[i] <= 45)
                {
                    balls[i].color = colorList[4];
                    numbers[i].text = arr[i].ToString();
                }
            }

            numList.Clear();
            Array.Clear(arr, 0, 6);
        }
    }
}

 

 

위와 같이 처리해주었는데요. 간단하게 설명드리자면,

우리는 여섯 개의 당첨 번호를 뽑아두었습니다.

그 번호 중 첫 번째 번호가 1~10 사이의 숫자라면 공의 컬러는 우리가 지정한 ColorList의 색상 중 첫 번째 색인 노란색을 지정하고, number text의 text는 당첨 번호를 그대로 가져와서 .ToString(); 함수를 통해 int형인 번호를 string 형인 text로 표시해줄 겁니다. 11~20, 21~30, 31~40, 41~45 의 처리 또한 마찬가지 방법으로 분기해줍니다.

 

 

 

스크립트를 저장한 후 에디터를 실행시켜 Space bar를 연속해서 눌러보면 스페이스바를 누를 때마다 여섯개의 로또 번호가 쓰여진 공이 각각의 번호 별 색상에 맞춰서 출력되는 것을 보실 수 있습니다.

 

긴 시간 함께해주셔서 감사합니다.

여러분은 그럴싸한 로또 번호 추첨기를 만들 수 있게되었습니다!

이처럼 유니티는 간단하게 앱을 개발할 수 있는 훌륭한 도구입니다.

여러분의 창의력을 추가하여 더 멋진 앱을 만들어보세요!!

 

오늘 마무리 된 Lotto 스크립트 또한 첨부파일로 업로드하였으니 따라하기 어려우신 분들은 다운받아서 사용해주세요.

 

다음 시간에 또 다른 컨텐츠로 뵙겠습니다 :D

 

 

 

Lotto.cs

0.00MB

 

 

글 : 작성자 본인

사진 : 작성자 본인