[유니티 기초] #3. 간단한 2D UI 구현 - 텍스트 추가 및 버튼으로 화면 전환(이동)하기 (SceneManager.LoadScene)

오랜만에 글을 씁니다.

공부는 꾸준히 하고 있는데 글을 쓰는 걸 잠시 잊어버렸습니다.

 

오늘은 유니티에서 두 화면을 만들고 버튼을 통해 장면을 전환하는 과정을 기록해보려 합니다.

배운지 조금 된 내용이라 기억이 가물가물한데 (이래서 복습이 중요..)

공부했던 것들을 찾아보면서 다시 정리해보겠습니다.

 

---

두 개의 장면 만들기

먼저, 유니티에서 Scene을 추가하여 두 개의 장면을 만들어보자.

Scene을 추가하는 방법은 Project창에서 [오른쪽 마우스 클릭]하고 [Create] -> [Scene]을 누르면 생성된다.

 

사진이 잘 안보이면 사진을 클릭해보세요.

 

 

 

UI 오브젝트 추가하기 - 버튼과 텍스트

두 장면 A, B가 있다면 우리는 A -> B로 넘어가는 버튼을 장면 A에 만들어 볼 것이다.

첨부하는 사진에서는 "Title" Scene이 A가 될 것이다.

그럼 장면 A로 가서 UI 오브젝트 버튼과 텍스트를 추가해보자.

Hierarchy창에서 [+]버튼을 누른 후 [Create] -> [Text]와 [Create] -> [Button]을 각각 누르면 각각 생성된다.

 

 

추가하고 나면 Canvas의 자식으로 Text UI와 Button UI가 생겼음을 확인할 수 있다.

 

 

 

 

UI 오브젝트 편집하기 - 텍스트 편집 및 주의점

 

UI를 추가해봤으니 먼저 텍스트를 입력해보자.

Hierarchy에서 Text를 클릭하면 Inspector창이 뜨는데

중간의 Text로 적힌 부분에 입력하고자 하는 글을 작성하면 된다. (아레 사진의 빨간 네모 부분)

 

그리고 Inspector창의 다른 기능들을 통해 글씨 색, 글꼴 모양, 크기, 정렬 방법 등을 바꿀 수 있다.

(보면 뭐가 어떤 것인지 쉽게 알 수 있을 것이다.)

 

본인은 퀴즈 프로그램을 만든다는 가정으로 "Math Riddles"란 이름으로 입력하였다.

 

 

이 때 주의한 점이 글씨를 입력해도 정작 화면에 안 보일수가 있다.

위의 사진 중 파란 네모를 보자.

위의 파란 네모의 Width와 Height가 텍스트를 담는 틀같은 것인데

아레 파란 네모의 글씨 폰트 크기(Font Size)가 너무 커지면 글 넘침이 발생해 글씨가 보이지 않는다.

 

Width와 Height의 크기를 키워보자.

덤으로, 위 파란 네모 가장 왼쪽의 center, middle이 적힌 네모를 클릭해 중심점을 설정할 수 있고

이 중심정을 기준으로 Pos X, Y, Z의 값을 변경해 텍스트의 배치 위치를 바꿀 수 있다.

 

 

 

 

UI 오브젝트 편집하기 - 버튼 편집

이제 버튼의 크기와 위치를 조절해보자.

미리 말하자면, 화면 전환 기능을 추가할 때는 간단한 스크립트가 필요하다.

 

먼저, Button의 Inspector창을 보자.

텍스트 편집을 할 때와 마찬가지로 아래 사진의 Rect Transform에서 중심점 설정 및 Pos X, Y, Z의 값으로 버튼의 배치 위치를 바꿀 수 있다.

그리고 Width와 Height로 버튼 자체의 크기를 조절할 수 있다.

또한, Hierarchy창의 Button UI 오브젝트 안에 Text를 선택해 버튼 내 문구를 변경할 수 있다.

변경 방법은 텍스트 UI를 수정하는 방법과 같다.

 

사진이 잘 안보이면 사진을 클릭해보세요.

 

 

 

버튼 UI 오브젝트에 '장면 전환 기능' 추가하기

이제 오늘의 하이라이트인, 위에서 만들고 편집한 버튼 UI에 장면 전환 기능을 구현해보자.

화면 전환 기능을 추가하려면 간단한 스크립트가 필요하다.

 

Project창에서 Asset폴더에 들어가 오른쪽 마우스 누르고 [Create] -> [C# Script]를 눌러 스크립트를 생성하자.

 

 

참고로 C# 스크립트를 만들 때 스크립트 이름은 그 자리에서 바로 바꿔주는 것이 좋다.

 

왜냐하면 나중에 스크립트 이름을 수정해도 스크립트에서의 클래스 이름은 바뀌지 않기 때문에 직접 가서 수정해주어야 하기 때문이다.

 

다음 아래의 코드를 생성한 스크립트에 입력해주자.

 

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
//SceneManagement
using UnityEngine.SceneManagement;

public class StartGame : MonoBehaviour
{
    public void StartButton()
    {
        SceneManager.LoadScene("Quiz 1"); // 전환하고자 하는 화면인 B의 이름을 ""에 넣어준다.
    }
}

 

여기서 SceneManager.LoadScene("Quiz 1"); 이 부분이 장면을 전환해주는 코드이다.

 

 

다 입력했으면 스크립트를 드래그해서 Button 오브젝트에 넣어주자.

완료하면 Button의 Inspector창에 스크립트가 추가된 것이 보일 것이다. 

 

사진이 잘 안보이면 사진을 클릭해보세요.

 

그리고 나서, On Click()이란 부분이 보일텐데, Runtime Only 있는 곳의 아래 부분에 Button 오브젝트를 드래그 해서 넣어준다.

 

그리고 오른쪽에 [스크립트 이름] -> [화면 전환 코드가 들어간 함수 이름]을 선택해준다.

 

사진이 잘 안보이면 사진을 클릭해보세요.

 

 

참고로 이 부분은 게임이 실행되는 동안에만(Runtime Only) Button을 클릭(On Click)했을 때

해당 스크립트의 함수(StartGame.StartButton)를 실행하라는 의미다.

 

마지막으로, [File] -> [Build Setting]에 들어가서 [Scenes in Build]에 두 개의 Scene를 추가해주자.

이 때 장면 실행 순서도 꼭 맞춰주도록 하자. (장면 A가 위로 가게끔)

 

이렇게 빌드 세팅을 해주지 않은 채 실행하면 에러가 발생한다.

 

 

여기까지 하고 실행을 하면 정상적으로 버튼을 통해 장면이 전환되는 것을 확인하실 수 있을 것이다.