[Unity] Unity 기초강의 내용 정리 (2-18강 ~ 3-5강)
educast 나동빈 님의 <Mobile Defence Game 제작으로 배우는 Unity 기초> 강의를 듣고 내용 정리.
———-
2-18. 형변환
형변환(Type Conversion)
형변환 : 특정한 데이터를 다른 데이터 형으로 변환시키는 기법
대표적인 예시) 정수(int) -> 실수(float)
1) 정수/실수 -> 문자열 : 변수명.ToString();
2) 문자열 -> 정수 : int.Parse(변수명);
3) 문자열 -> 실수 : float.Parse(변수명);
프로젝트 뷰에 CastingTest 라는 이름의 C# 스크립트 생성
float a = 5.5f;
int b = 10;
// 정수를 실수로 형 변환은 가능
a = b;
// 실수를 정수로 형 변환은 오류
// b = a; 는 오류
b = (int)a;
Debug.Log(“a : ” + a);
Debug.Log(“b : ” + b);
숫자를 문자열로 바꾸기
string a = “777”;
int b;
float c;
b = int.Parse(a);
c = float.Parse(a);
Debug.Log(“b : ” + b);
Debug.Log(“c : ” + c);
문자열을 숫자로 바꾸기
int b = 10;
float c = 5.5f;
string a1 = b.ToString();
string a2 = c.ToString();
Debug.Log(“a1 : ” + a1);
Debug.Log(“a2 : ” + a2);
———-
Part3. UI
3-1. Canvas와 Render Mode
(1) Sprites 폴더 생성
Character_1.png, Monster_1.png 파일 프로젝트 뷰에 드래그앤드랍으로 넣기
(2) Images 폴더 생성
UI_Basic.png 파일 프로젝트 뷰에 드래그앤드랍으로 넣기
(3) 캐릭터 위치시키기
메인 카메라 영역에 Character_1.png, Monster_1.png 를 드래그앤드랍으로 가져다 놓을 것
(4) 좌측 하이어라키 뷰에서 마우스우클릭 – UI – Image 클릭
좌측 하이어라키 뷰에 Canvas, Image, EventSystem 이 생길 것이다.
Image : Canvas 안에 속해있다. 참고로 속해있는 구조를 <부모 자식 계층구조> 라고 한다.
EventSystem : 캔버스를 하나 만들면 자동으로 1개 만들어지는 것임. 캔버스를 n개 만들어도 1개 만들어짐.
(5) 하이어라키 뷰의 Image 를 더블클릭하면 흰색 네모가 보일 것임. 기본 이미지임.
캔버스는 UI 전용 카메라라고 생각하면 편하다.
게임을 실행해보면 (a)메인 카메라 영역과 (b)캔버스 영역이 겹쳐져서 보인다.
캔버스는 메인 카메라와 상관없이 배치하면 된다.
(6) UI_Basic(피망) 파일을 캔버스에 위치시키기. 캔버스 내의 이미지를 선택하고 우측의 인스펙터 뷰에서 UI_Basic(피망) 그림을 부여할 것.
(7) 캔버스의 내용은 메인 카메라 영역 내용보다 위쪽에 보이게 된다.
(8) 캔버스 렌더링 방식은 여러가지가 있다. 좌측 하이어라키 뷰에서 캔버스를 고르고, 우측 인스펙터 뷰의 Render Mode 콤보박스를 보자.
Canvas – Render Mode : UI를 렌더링하는 방식
1) Screen Space – Overlay : 다른 Object 들과 UI Object 들을 따로따로 작업할 때 유용. 카메라 영역과 Canvas 영역이 씬 뷰에서도 아예 다르게 표시됨.
2) Screen Space – Camera : 다른 Object 들과 UI Object 들을 씬 뷰에서 동시에 보고 작업할 때 사용. 카메라 영역과 Canvas 영역을 씬 뷰에서 같이 표시할 수 있음.
카메라와 사이즈를 같은 크기로 그려주게 되므로, 기준이 될 카메라를 선택해줘야 함.
잊지 말아야 할 것이 Plane Distance 를 바꿔야 함. 값을 10을 줘야 메인 카메라와 캔버스가 일치하게 됨. 이유는 메인 카메라의 인스펙터 뷰를 보면 Position의 Z 값이 -10 이기 때문임.
Screen Space – Overlay 와의 차이점은, Plane Distance 값을 수정하면 캔버스의 내용이 메인 카메라(캐릭터) 앞이나 뒤에 올 수 있도록 수정 가능하다.
캔버스 자체의 위치 변경 불가.
3) World Space : 다른 Object 들과 UI Object들을 동일한 Object 로 취급함.
캔버스 위치도 바꿀 수 있음. z값도 변경 가능.
———-
3-2. 부모자식 계층구조
Canvas 내에서,
부모 오브젝트가 이동 -> 자식 오브젝트도 이동
자식 오브젝트가 이동 -> 부모 오브젝트는 그대로임.
(1) 캔버스를 만든다.
(2) 캔버스의 Render Mode 를 World Space 로 바꾼다.
(3) 캔버스를 이동하면 자식 객체(Image)가 따라오는 것을 알 수 있다.
캔버스를 부모로, 이미지들을 자식으로 넣는 것이 권장됨.
(1) 피벗
Rect 툴(단축키 t) 선택했을 때
캔버스 가운데에 있는 파란색 동그라미가 보일 것임. 이것을 피벗이라고 부름. 중심이 되는 위치, 중심축이라는 뜻.
씬 뷰 위 쪽에 있는 Center 버튼을 한 번 더 눌러주면 피벗의 위치를 자유롭게 옮길수 있음.
캔버스 가장자리에 마우스를 갖다대고 드래그 하면 피벗을 중심으로 캔버스가 한 바퀴 돌아가게 됨.
실제로 캔버스의 피벗을 고치거나 캔버스를 회전하는 일은 거의 없음.
(2) Global, Local : 트랜스폼의 기준을 오브젝트로 할 것인지, 씬 전체로 할 것인지 결정 가능
씬 뷰 위쪽의 Local 버튼을 눌러서 Grobal 모드로 변경할 수 있음.
좌측 상단에 Local 이라고 쓰여 있으면 특정 오브젝트를 기준으로 삼는 것임.
좌측 상단에 Global 이라고 쓰여 있으면 씬 전체를 기준으로 삼는 것임.
피망 이미지를 회전시킨 후, Local로 해놓고 이동시켜보고 Global로 해놓고 이동시켜 보면서 이해할 것.
———-
3-3. Rect Transform, Anchors
캔버스의 인스펙터 뷰를 보면 Rect Transform 이라는 객체가 들어 있음.
그냥 Transform 이 아니라 Rect Transform 인 이유는 Anchor 개념이 있기 때문임.
이미지의 부모(캔버스)가 Rect Transform 을 갖고 있기 때문에, 이미지 오브젝트(피망)는 Anchor[앵커] 를 사용할 수 있음.
캔버스 중간에 보이는 바람개비 같은 것이 Anchor임.
인스펙터 뷰에서 Anchor를 고를 때, alt 키를 누르면 자식 오브젝트까지 다 같이 움직일 수 있음.
이미지를 우상단으로 마우스를 이용해 이동시키는 것과, Anchor로 우상단으로 위치시키는 것의 차이는 해상도를 변경했을 때 차이가 남.
Anchor로 이미지 위치를 잡아놓으면 해상도를 어떻게 바꾸더라도 화면에 따라 변경됨.
UI-Image 와 Sprite의 가장 큰 차이점임.
앵커를 선택할 때 보면 바람개비 모양이 한 점에 모이는 앵커도 있지만, 사방으로 확장되는 앵커도 있음.
부모(캔버스)의 크기에 따라 UI이미지의 크기를 변경해주는 것임.
해상도 상관없이 화면 가로 20%, 세로 50%를 차지하도록 이미지를 표시하려면 어떻게 해야할까?
인스펙터 뷰의 Anchors 항목 내 Min, Max, Pivot 값을 바꾸면 된다.
가로길이 20% 만들기
Min 의 X 를 0.4
Max 의 X 를 0.6
순서가 중요. 먼저 Anchors 항목 내의 X, Y 값들을 모두 지정한 후, Left, Top, Right, Bottom 값을 바꿔야 한다.
———-
3-4. Visual Components – Text
Visual Components : 실질적으로 보여지는 부분을 의미함.
비주얼 컴포넌트는 하나의 UI 안에 하나만 들어간다. 예를 들어서 피망콘(캔버스 내의 이미지)에 Add Component 로 Text를 추가하려면 안된다.
(1) 캔버스 안에 Text 컴포넌트를 새로 만들자.
하이어라키 뷰의 캔버스 위에서 마우스우클릭 – UI – Text
(2) 메인카메라 배경색을 흰색으로 바꾸자. 그래야 폰트가 잘 보인다.
(3) Font Size 크기를 늘린다.
(4) Font Size 를 늘리면 텍스트가 나오지 않을 것이다. Width와 Height를 늘려야 한다. 폰트 크기가 텍스트 영역보다 크면 표시되지 않는다.
Font Size 100 으로 설정
가로 가운데 정렬
세로 가운데 정렬
Width 1024
Height 720
(5) 앵커를 이용해 alt를 누른채 아래쪽에 앵커가 가도록 설정하자.
hp 등을 표시할 때 이러한 앵커 기술이 유용할 것이다. 해상도 상관없이 화면 아래쪽에 나와야 하기 때문이다.
(6) Add Component 로 Outline 을 추가해보고 색상을 바꿔보자.
(7) Anchors 의 X 값 Min 을 0.3, Max를 0.7, Y 값 Min 을 0.3, Max 를 0.7 로 설정해보자.
이후 Left, Top, Right, Botton 값을 0 으로 설정해보자.
(8) 텍스트를 어떻게든 간에 보이게 하려면 Horizontal Overflow 를 Overflow, Vertical Overflow 를 Overflow 로 설정한다.
(9) 해상도에 따라 글자 크기를 다르게 보여주려면, 스크립트를 이용해 Font Size를 바꿔주면 된다.
만약 비율 그대로를 유지하려고 한다면 Scale 값을 변경해서 텍스트 크기를 조절할 수도 있다.
단, Scale 값을 이용할 경우 텍스트 모양이 깨질 수 있다.
———-
3-5. Visual Components – Image & Panel
(1) 프로젝트 뷰에 Images 폴더 생성
(2) 프로젝트 뷰 Images 폴더 안에 Blue_button, Red_button 파일을 드래그앤드랍으로 추가
(3) 좌측 하이어라키 뷰에서 캔버스 생성 (UI – Canvas)
(4) 캔버스 안에 이미지 생성 (UI – Image)
(5) Canvas 의 Render Mode 를 Screen Space – Camera 로 변경
Render Camera 콤보박스 값을 Main Camera 로 선택
(6) 캔버스의 Plane Distance 값을 10 으로 수정하기
값을 10을 줘야 메인 카메라와 캔버스가 일치하게 됨. 이유는 메인 카메라의 인스펙터 뷰를 보면 Position의 Z 값이 -10 이기 때문임.
(7) 이미지의 Source Image 값을 Red_button 으로 지정
(8) Anchors 항목에서 alt 키 누르고 정중앙 선택
(9) Image Type 항목 선택
– Simple : 이미지 그대로 사용
– Sliced : Simple 과 아무런 차이가 없어보이지만 9개 이미지로 나누어져 있는 이미지의 경우 적용 가능함
원본 이미지
– Tiled : 반복출력
– Filed : 이미지를 비우거나 채우는 방식. HP 나 레벨업 바 등 진행척도를 알려줄 때 많이 사용하여 프로그레스 바라고도 불림.
Fill Method, Fill Origin, Fill Amount 등 수정 필요
* Sliced 이미지 만들기
– 프로젝트 뷰에서 Red_button 이미지 선택
– 인스펙터 뷰에서 Sprite Editor 클릭
– 주어진 선을 마우스로 드래그 하여 하나의 타일을 9조각으로 나누기
(10) Scripts 폴더 만들기
(11) 프로젝트 뷰에서 FillAmountTest 라는 이름의 C# 라이브러리 추가
(12) FillAmountTest 내용 수정
소스코드 상단에 다음 코드 넣기.
using UnityEngine.UI;
(13) 코드 작성
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
public class FillAmountTest : MonoBehaviour {
public Image image;
public float waitTime = 30.0f;
void Start () {
}
void Update () {
// 30초 동안 체력 감소구현
if (image.fillAmount > 0) {
image.fillAmount = image.fillAmount – 1.0f / waitTime * Time.deltaTime;
}
}
}
* Canvas 마우스우클릭 – UI – Panel
Panel 은 여러 개의 UI를 모아놓는 경우
크고, 투명도가 미리 적용된 UI 이미지라고 이해하면 됨.