[Unity / C#] 2D 젤리 키우기 게임 - 2. 인터페이스 제작 및 기능 구현

해당 글은 유튜버 골드메탈님의 강의를 바탕으로 작성되었습니다.

 

 

이번 강의에서는 게임에 활용되는 인터페이스와 해당 인터페이스의 기초적인 기능을 구현해보았습니다.

 

이번 강의는 영상만 보고도 어느정도 따라할 수 있을 정도의 난이도였으며, 볼트로 구현한 기능을 코드로 바꾸는 것 또한 그다지 어렵지 않았습니다.

---

먼저 인터페이스를 화면 상에 배치하기 위해 Canvas 오브젝트를 추가한 뒤, 다음과 같이 설정합니다.

 

 

 

다음으로 Canvas에 UI -> Image를 추가한 뒤 이름을 'Left Btn'으로 설정하고 Source Image를 'Panel'로 지정해줍니다.

 

 

 

생성한 Left Btn의 위치를 Anchor를 사용하여 왼쪽 하단에 위치하도록 조절해줍니다.

 

Shift + Alt를 함께 누른 뒤 좌측 하단 아이콘  클릭

 

 

이후 위치와 크기를 조정하여 배치합니다.

 

 

 

다음으로 Button 오브젝트를 Left Btn 오브젝트의 자식 오브젝트로 생성한 뒤 이름을 'Jelly Button'으로 설정해줍니다.

마찬가지로 Source Image를 'Icon 2'로 설정한 뒤 'Set Native Size' 버튼을 클릭하여 크기를 조정해줍니다.

 

 

 

다음으로 Buttom 컴포넌트의 'Transition'을 'Sprite Swap'으로 변경한 뒤, 아래에 있는 'Highlighted Sprite', 'Pressed Sprite', 'Selected Sprite'의 Sprite Image를 'Icon 2 Over'로 지정해줍니다.

 

Navigation 옵션은 필요 없으므로 None으로 설정

 

 

이후 위치를 조정해줍니다.

 

 

 

다음으로 Jelly Button을 복사(Ctrl + D)하여 위치를 조정한 뒤, 이름을 'Plant Button'으로 변경하고 마찬가지로 Sprite Image를 변경해줍니다.

 

 

 

다음으로 버튼의 그림자를 추가하기 위해 또다시 Left Btn의 자식 오브젝트로 Image를 추가한 뒤, Sprite Image를 'Icon Shadow'로 바꾸어 주고 'Set Native Size' 버튼을 클릭하여 크기를 조절해줍니다.

 

 

 

이후 버튼 아래에 그림자가 생기도록 오브젝트 순서를 조절해줍니다.

 

 

 

위의 과정을 모두 수행한 뒤의 모습

 

 

 

다음으로 오른쪽 하단에 버튼을 추가하기 위해 Left Btn을 복사하여 위치와 크기를 조절하고 Sprite Image를 변경합니다.

 

---

다음으로 화면 위쪽에 나타나는 텍스트 인터페이스를 구현해보도록 하겠습니다.

 

먼저 Canvas의 자식 오브젝트로 Image를 추가한 뒤, 이름을 'Left Text'로 변경하고 Source Image를 'Panel'로 설정합니다. 마찬가지로 Anchor를 사용하여 위치와 크기를 적절히 조절해줍니다.

 

 

 

버튼에 투명도를 주기 위해 Color의 Alpha 값을 조절합니다.

 

 

 

버튼의 테두리를 버튼과 똑같은 위치에 겹치도록 조절하여 마무리 합니다.

 

 

 

다음으로 아이콘을 추가하기 위해 Image 오브젝트를 추가로 생성하여 Source Image를 설정하고 위치와 크기를 조절해줍니다.

 

 

 

이후 텍스트를 나타내기 위해 Text 오브젝트를 추가하여 다음과 같이 설정해줍니다.

 

 

 

설정이 끝났다면 Left Text를 그대로 복사하여 오른쪽 상단에 위치하도록 배치해줍니다. 이후 아이콘의 Source Image를  'Icon 1'로 변경한 뒤 Scene을 확인해보면 다음과 같이 모든 인터페이스가 적절히 배치된 것을 확인할 수 있습니다.

 

---

 

이를 위해 저는 먼저 GameManager 오브젝트를 만들어 스크립트를 추가해주었습니다.

 

 

 

이후 스크립트를 열어 다음과 같이 코드를 작성해주었습니다.

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

public class GameManager : MonoBehaviour
{
    public int jelatin;
    public int gold;

    public Text jelatin_text;
    public Text gold_text;

    void LateUpdate()
    {
        jelatin_text.text = string.Format("{0:n0}", Mathf.SmoothStep(float.Parse(jelatin_text.text), jelatin, 0.5f));
        gold_text.text = string.Format("{0:n0}", Mathf.SmoothStep(float.Parse(gold_text.text), gold, 0.5f));
    }
}​

 

SmoothStep 함수를 통해 숫자가 변환되는 사이에 적절한 애니메이션을 추가해주었으며, Format 함수를 통해 숫자 텍스트의 표현식을 지정해주었습니다.

 

jelatin_text와 gold_text의 경우 접근 지정자를 public으로 설정하여 유니티 프로그램에서 따로 지정해주었습니다.

 

 

 

이후 Jelatin과 Gold 변수에 숫자를 대입해보면 애니메이션과 함께 텍스트가 변경되는 것을 확인할 수 있습니다.