Canvas
캔버스는 UI 요소를 화면에 그리기 위한 도화지 역할을 하는 컴포넌트이다. 모든 UI는 캔버스의 하위 객체로 존재해야하며 캔버스에서는 렌더링과 위치 지정 방식을 제어할 수 있다.
생성
Scene에서 2D를 선택하고 Canvas를 더블 클릭하면 캔버스를 하이어라키 창에 추가할 수 있다. 캔버스의 하위 객체로 버튼과 이미지등을 생성하는 경우 하이어라키 창 기준으로 맨 위에서부터 그려지기 때문에 이를 고려하여 레이어를 설정하면된다.
RectTransform
Anchors와 Pivot들이 추가되어있는 Transform Component으로 배치와 크기를 설정할 수 있다. 픽셀 기준으로 값을 입력할 수 있으며, 위치 뿐만이 아닌 가로(Width), 세로(Height) 크기도 가지고 있다.
Anchors
position을 결정할 때의 화면 상에서의 기준을 의미하며 버튼의 위치를 더 직관적으로 설정하기 위해 Anchor를 활용한다.
스킬 버튼을 만들 때 Anchor를 왼쪽 아래로 놓고 position을 설정하면 해상도가 바뀌어도 버튼의 위치가 해상도에 상관없이 고정된다.
다른 예시로 우측 상단에 미니맵 UI를 고정하려면 Anchor를 우측 상단으로 설정한 뒤 position을 조절하면 된다.
Anchor Preset
자주 사용하는 Anchor의 위치를 프리셋으로 만들어놓은 것이다.
해상도에 따라 비율이 달라지도록 만들기 위해서는 Anchor를 Stretch로 설정하는 것으로 해결할 수 있는데, Anchor의 핸들을 드래그하여 화면의 비율에 해당하는 값을 지정할 수 있다.
Pivot
버튼 UI의 기준을 의미한다. 버튼을 회전시킬 때 pivot을 기준으로 하여 회전하는 것을 볼 수 있다.
Render Mode
Screen Space - Overlay
UI가 화면에 직접 렌더링되는 기본 UI 모드로, 별도의 카메라 설정 없이 사용할 수 있다.
Screen Space - Camere
UI가 지정한 카메라에 따라 렌더링되기에 깊이감을 줄 수 있고, UI가 카메라의 위치와 회전에 영향을 받는다.
World - Space
UI가 게임 오브젝트처럼 월드에 존재하며, 몬스터의 HP바와 같이 3D 공간 안에서 UI를 배치할 때 사용된다.
Sort Order
캔버스 간의 렌더링 우선도를 설정할 때 사용한다. 값이 작을수록 먼저 그려진다.
Scaler
Constant Pixel Size : UI의 크기를 pixel로 정한다. 모니터의 해상도가 커지면 상대적으로 UI가 작게 보인다.
Scale With Screen Size : 스크린의 크기를 기준으로 UI의 크기를 비율로 정할 수 있다. 모니터의 해상도에 상관없이 비율의 값에 해당하는 크기를 가진다.
Reference Resolution : 보통 개발자가 디자인한 기준 해상도로 설정한다.(1920 x 1080)
Graphic Raycaster
마우스의 클릭 위치를 알려주는 Component이다.
EventSystem
EventSystem을 활용하면 여러 컴포넌트를 통해 다양한 UI 이벤트를 감지할 수 있다. 버튼을 예시로 들면 버튼을 클릭했을 때 버튼의 종류에 따라 효과를 지정할 수 있다.
Standalone Input Module
여러 키를 통해 버튼과 같은 컴포넌트와 상호작용을 하도록 만들 수 있다. 예를 들어 상하좌우 키를 눌러 활성화시키고자 하는 버튼을 선택할 수 있다.
주요 UI Component
Button
Transition
- Color Tint : 버튼 상태에 따른 단순 색상 지정
- Sprite Swap : 버튼 상태에 따라 sprite 이미지 변동
- Animation : Animator를 통해 전환 효과 지정
Color
- Normal Color : 평소 색상
- Highlighted Color : 마우스를 올려놓을 때 색상
- Pressed Color : 버튼을 누르고 있을 때의 색상
- Selected Color : 버튼을 누를 때의 색상
- Disabled Color : 비활성화 되어있을 때의 색상
On Click()
이벤트에 메서드를 구독하여 버튼 눌렀을 때의 효과를 인스펙터 상에서 지정하는 것이 가능하다.
Image
Source Image에서 원하는 이미지를 넣는 것이 가능하다.
로컬 저장소의 이미지를 사용하기 위해서는 이미지를 드래그하여 유니티에 프로젝트에 넣고, 해당 이미지의 type을 sprite(2D and UI)로 설정한 뒤 Source Image에 드래그하면 된다.
RawImage
일반 Image의 경우 Sprite 전용이지만, RawImage는 texture를 그대로 사용할 수 있다. RenderTexture를 연결하여 미니맵, 카메라 뷰포드, 영상 등을 화면에 출력할 때 활용한다.
Text(TMP)
Canvas에 글자를 입력할 때 사용한다. 폰트를 사용하는 경우 그래픽 표현이 가능하게끔 하기 위해 변환 과정이 필요하며, Window창에서 TMP의 Font Asset Creator를 눌러 폰트 에셋으로 변환하여 사용한다.
태그를 지원하며 <color=#FF0000>의 태그를 사용하여 중간에 있는 글자의 색상만 바꾸는 것이 가능하며 <size=150%>, <b>굵게</b>, <i>기울임</i> 등도 사용이 가능하다.
Wrapping & Overflow
입력 칸보다 글자가 많아질 경우에 이를 처리하는 방식을 정할 수 있다.
InputField(TMP)
유저의 입력을 받을 수 있는 텍스트 필드로, Content type을 지정하여 필터링된 입력 모듈을 생성하는 것이 가능하다.
Slider
값을 조절할 수 있는 UI 요소로 HP바나 음량 조절 등을 구현할 때 사용한다. Min Value, Max Value, Value등의 속성으로 현재 상태를 관리할 수 있다.
Scene
유니티에서 게임 월드를 구성하는 단위
프로젝트에 원하는 수만큼 씬을 포함할 수 있고 씬 전환을 통해 다른 게임월드를 불러올 수 있다.
다중 씬을 이용하여 여러 씬을 동시에 열어 같은 게임 월드에서 사용도 가능하다.
빌드 설정
유니티에서 여러 씬을 사용하기 위해서는 빌드 설정에서 씬을 포함해야한다.
File - Build Settings - 드래그로 씬 등록
빌드 설정에서 포함한 씬이 게임 빌드 결과물에 포함된다.
씬 전환
프로젝트에 포함된 다른 씬을 로딩하고 기존의 씬 내용을 삭제한다.
public void ChangeScene(string SceneName)
{
SceneManager.LoadScene(sceneName, LoadSceneMode.Single);
}씬 추가
public void AddScene(string SceneName)
{
SceneManager.LoadScene(sceneName, LoadSceneMode.Additive);
}
// 맵에 가까워지면 해당 맵을 로딩하게끔 활용(메트로베니아)
private void OnTriggerEnter(Collider other)
{
if(!other.CompareTag("Player")) return;
AddScene("Stage2Scene");
}비동기 씬 로드
씬 로딩을 백그라운드로 진행하여 게임 중 멈춤이 없도록하는 비동기 방법으로 로드에 오래걸리는 맵에 활용한다.
public void ChangeSceneASync
{
AsyncOperation operation = SceneManager.LoadSceneAsync
("Stage2Scene", LoadSceneMode.Additive);
// 씬 로딩 완료시 바로 씬 전환 진행 여부
// false로 설정할 경우 progress가 0.9(90%)에서 멈춘다.
operation.allowSceneActivation = true;
// 씬 로딩의 완료여부 확인
bool isLoaded = operaion.isDone;
// 씬 로딩의 진행률 확인
float progress = operation.progress;
// 씬 로딩 이후 진행할 이벤트 추가
operation.completed += (oper) => { Debug.Log("Stage2Scene 로딩 완료!") };
}
private void OnTriggerEnter(Collider other)
{
// OnTrigger관련 충돌자 필터링
if(!other.CompareTag("Player")) return;
AsyncOperation operation = SceneManager.LoadSceneAsync
("Stage2Scene", LoadSceneMode.Additive);
operation.allowSceneActivation = true;
}씬 언로드
로딩되어있는 씬을 언로드 시키는 방법이다.
public void UnloadScene()
{
Scene scene = SceneManager.GetSceneByName("Stage2Scene");
if(scene.isLoaded)
{
// 언로드는 반드시 비동기로 처리한다. (Async 사용)
SceneManager.UnloadSceneAsync(scene);
}
}
public void OnTriggerExit(Collider other)
{
if(!other.CompareTag("Player")) return;
UnloadScene();
}실습
ScoreText (MVC Pattern)
using TMPro;
using UnityEngine.UI;
public class ScoreTextUI : MonoBehaviour
{
[SerializeField] TMP_Text textUI;
private void Awake()
{
if(textUI == null)
{
textUI = GetComponent<TMP_Text>();
}
}
/* 업데이트마다 확인하는 것은 효율적이지 않다.
private void Update()
{
textUI.text = GameManager.Instance.Score.ToString();
}
*/
private void OnEnable()
{
// UI 텍스트 현재 점수로 초기화
SetScore(GameManager.Instance.Score);
// 점수 바뀔 때마다 자동으로 호출되도록 이벤트 등록
GameManager.Instance.OnScoreChanged += SetScore;
}
private void OnDisable()
{
// 비활성화 시 이벤트 정리 → null 참조 오류 방지
GameManager.Instance.OnScoreChanged -= SetScore;
}
private void SetScore(int score)
{
textUI.text = score.ToString();
}
}
public class GameManager : SingleBehaviour<GameManager>
{
private int score;
public int Score
{
get => score;
set
{
if(score == value) return;
score = value;
OnScoreChanged?.Invoke(score);
}
}
public event Action<int> OnScoreChanged;
}
public class Monster : MonoBehaviour
{
private void Died()
{
GameManager.Instance.Score += 10;
}
}