Quiz Master - 1 (1강 - 6강)

1. UI Canvas

Quiz Master라는 게임을 새로 만들어보기로 했다

먼저 UI를 다루게 되는데 UI로 구성하는 게임도 재밌다고 생각해서 되게 설레는 기분이다...

UI를 다룰 때는 먼저 캔버스를 생성해야 한다.

그리고 Sort Order 를 통해 레이어 순서를 정할 수 있는데

이 게임에서는 예시용 레이어를 맨 위에 올려 투명도를 조정해야하기 때문에 100으로 올렸다

그리고 그 밑에 Image를 만들어준다

이미지에는 실질적으로 들어갈 사진을 넣는다

캔버스는 이미지가 들어갈 수 있는 판 같은 것이고, 이미지는 거기 속해있다

캔버스가 있어야 이미지가 보여서 밑에 이미지를 넣어야한다!!!

 

예) 

Canvas
└── Image 

 

이미지는 크기 조정이 가능한데,

Game 뷰에 있는 화면 비율에 맞춰 이미지를 맞춰야한다

이미지를 맞추려면 Rect Transform 에서

Shift + alt를 눌러서 Anchor Preset (앵커 프리셋)을 조작한다

Shift + alt는 앵커 + 피봇 + 위치를 동시에 조절하는 단축키인데

보다시피 Shift는 피봇을 alt는 위치(포지션)을 조정한다

 

🌷정리 비유

개념	비유	역할
Anchor	"포스터를 벽 어디에 붙일까?"	부모 기준 위치
Pivot	"포스터의 중심점은 어디일까?"	회전·확대의 기준점
Position	"벽에 붙인 뒤, 조금 오른쪽으로 옮길까?"	앵커로부터의 오프셋

2. TextMeshPro

다음은 텍스트를 붙일 차례다

텍스는 TextMeshPro를 사용하는데 뭐... 더 좋나보다

필요하면 뭔갈 설정해야하는데 나는 있어서 그냥 썼다

 

텍스트를 설정하고 인스펙터에서 수정 가능하다

텍스트 인풋은 텍스트에 들어갈 내용이고

박스 크기, 텍스트 크기도 조정 가능하다

폰트를 넣을 때에는 폴더 안에 새로 넣어준다음에 조금 설정해줘야하는데

위로 들어간 다음에

소스 폰트 파일에 해당하는 내가 고른 파일을 갖고와 넣는다

그런 다음 Save as를 통해 저장해주면 Font Asset에서 설정가능하다

 

근데 나는 한글 폰트를 가져와도 깨지는 문제가 발생했는데

 

https://penguin-kim.tistory.com/107

[Unity] TextMeshPro에서 한글이 'ㅁ'으로 출력되는 문제 해결 방법

이 글을 보고 해결하였다

Dynamic으로 바꿔도 안된다면 위 글을 보도록 하자

 

이건 내가 그린 배경 그림인데 귀여워서 채용되었다

앞으로는 이 그림으로 진행할 것이다

 

3. 버튼 레이아웃

버튼을 생성할 차례인데,

버튼은 UI 만드는 곳에서 찾을 수 있다

우리는 4가지 선택지를 만들거라

버튼 4개를 만들면 되지만,

좀 더 이쁘고 정갈하게 만들기 위해 레이아웃을 사용한다

 

빈 그룹을 만들어준 후 버튼을 2개씩 할당시켜준다

그런 후 Add Component를 통해 Vertical Layout Group을 생성하고

Middle Center로 정리해준다

 

4. 스크럽터블 오브젝트

이건... 그냥 데이터 컨테이너라고 한다

스크립트에서 제외되고, 메모리 절약에 도움된다

오브젝트에 부착되지 않아도되어서 편하다

일종의 템플릿같은 느낌이다 (데이터 일관성)

 

우리는 질문 데이터를 저장하는데 쓸 것이다

 

코드를 만들어서 QuestionSO라 이름 붙인 후 상단에 [CreateAssetMenu()] 을 붙여주고

MonoBehavior는 ScriptableObject로 바꾼다

(오타...가...있지만 넘기자)

[CreateAssetMenu()]을 쓰면 스크립트를 생성하는 부분에서 우클릭을 누르면

위와 같이 QuestionSO(파일명)을 생성할 수도 있다

 

그리고 

[CreateAssetMenu(menuName = "Quiz Question", fileName = "New Question")]

다음과 같이 적게되면 QuestionSO로 생성되는 게 아니라 Quiz Question으로 생성되고,

파일명도 New Question이 된다

 

스크립트의 괄호 안 쪽에는

[SerializeField]string question = "Enter new question text here";

를 이용해 변수를 하나 생성해주는데,

보고나면 생각보다 칸이 작다...

그래서 칸을 늘릴 수 있는 코드도 있다!

 

[TextArea(2,6)]

이 코드를 위에 적게되면 최소 2줄로 보이고, 최대 6줄까지 보이게 쓸 수 있다

 

5. 게더 메소드

게더 메소드를 이용해 private 변수를 읽기 전용으로 가져올 수 있다...

라고 하면 솔직히 뭔말인지 모르겠다 바로 실습에 들어가보자

 

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

[CreateAssetMenu(menuName = "Quiz Question", fileName = "New Question")]
public class QuestionSO : ScriptableObject

{
    [TextArea(2, 6)]
    [SerializeField] string question = "Enter new question text here";
    
    public string GetQuestion()
    {
        return question;
    }
}

 

보면 public string GetQuestion()을 추가했다

아무것도 표시하지 않은 변수는 기본적으로 private기 때문에 다른 클래스로 사용할 수 없다

그래서 public인 GetQuestion을 이용해 읽기전용으로 쓸 수 있도록 만든 것이다

6. 배열

우리는 4개의 선택지를 가지고있기 때문에

변수를 4개 만들어서 저장하면 되나? 싶을 수도 있지만 실은 더 좋은 방법이 있다

그게 이번에 배울 배열이다

같은 타입의 변수를 여러 개 보관할 수 있는 걸 배열이라고 한다

 

배열에 저장된 요소라고 하며, 각 요소는 인덱스 번호를 통해 접근할 수 있다

주목해야할 것은 배열은 0부터 시작한다는 것이다!!!

0부터 인덱스 번호가 붙으니 5번째 요소라면 인덱스 번호는 4일 것이다.