[Unity] Unity 기초강의 내용 정리 (3-6강 ~ 3-9강)
educast 나동빈 님의 <Mobile Defence Game 제작으로 배우는 Unity 기초> 강의를 듣고 내용 정리.
———-
3-6. Interaction Component – How to make Button
(1) 하이어라키 뷰에서 UI – Canvas 로 캔버스 만들기
(2) 캔버스 안에 UI – Button 만들기 (이름 : Button)
Making a Button
1. Hierarchy View – 우클릭 – UI – Button
(Image + Button) Component + 자식으로 Text가 존재.
2. Hierarchy View – 우클릭 – UI – Image
Image Component 만 생김. 이후 Button Component 추가. Image 를 Button 처럼 사용.
3. Hierarchy View – 우클릭 – UI – Text
Text Component 만 생김. 이후 Button Component 추가. Text 를 Button 처럼 사용.
Normal Color : 일반 색상
Highlighted Color : 마우스 호버 시 색상
* 오래된 유니티 버그가 있음. 버튼을 마구 클릭하다 보면 마우스 호버 하지 않아도 하이라이티드 색상이 남아있음.
Disabled Color : 버튼을 비활성화 했을 때 색상 (Interactable 체크박스 해제 시 색상)
<버튼 비활성화하기 스크립트 예제>
(1) 프로젝트 뷰에 ButtonDisabledTest 라는 이름의 C# 스크립트 생성
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
public class ButtonDisabledTest : MonoBehaviour {
void Start () {
// using UnityEngine.UI; 코드 필요
GetComponent<Button>().interactable = false;
}
void Update () {
}
}
(2) 하이어라키 뷰의 Button 에 드래그앤 드랍으로 ButtonDisabledTest 컴포넌트를 add 처리
OnClick 의 과정
0. OnClick 아래의 + 버튼
1. 클릭 동작을 어떤 오브젝트에 연결할지 결정 (Monster, BlueThing, GameObject …)
2. 오브젝트의 어떤 컴포넌트에 접근할지 결정 (Sprite Renderer, ButtonTest, Transform …)
3. 해당 컴포넌트의 어떠한 함수에 접근할지 결정 (Sprite 등)
4. 그 함수의 매개변수를(필요하다면) 설정 (monster2 Sprite)
(1) 하이어라키 뷰에서 마우스 우클릭 – 2D Sprite – Sprite 클릭해서 스프라이트 오브젝트 생성
(2) 이름을 Blue Thing 으로 변경
(3) 프로젝트 뷰의 Blue_button 이미지 파일을 인스펙터 뷰의 Sprite 항목에 드래그앤드랍하여 Blue Thing의 모양을 파란색 버튼 모양으로 변경
(4) 하이어라키 뷰에서 버튼을 선택하고, 인스펙터 뷰의 On Click() 아래의 + 버튼 클릭
(5) 인스펙터 뷰의 On Click() 항목 내에 있는 None(Object) 부분에 Blue Thing 을 드래그앤드랍하기
(6) 인스펙터 뷰의 On Click() 항목 내에 있는 No Function 을 클릭하고 Sprite Renderer – Sprite sprite 선택
(7) None (Sprite) 부분에 몬스터 스프라이트를 드래그앤드랍하기
(8) 게임 실행해서 버튼을 클릭하면, 기존 Blue Thing 의 모양이 몬스터로 바뀌는 것을 확인 가능
———-
3-7. Interaction Component – Button & Script
(1) 하이어라키 뷰에서 UI – Canvas 로 캔버스 만들기
(2) 캔버스 안에 UI – Button 만들기 (이름 : Button)
(3) 인스펙터 뷰의 Source Image 에 Red_button 을 드래그앤드랍해서 이미지 적용하기
(4) 앵커 프리셋을 가운데로 설정 (alt 키 누르고 클릭)
(5) 프로젝트 뷰에 ButtonTest 라는 이름의 C# 스크립트 생성
(6) Sprite 폴더의 몬스터를 씬 뷰에 드래그앤드랍하여 Monster_1 오브젝트 생성
(7) 하이어라키 뷰의 몬스터 오브젝트에 ButtonTest 드래그앤드랍하여 스크립트 부여
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
public class ButtonTest : MonoBehaviour {
void Start () {
}
void Update () {
}
public void Fury() {
Debug.Log(“Fury!”);
}
}
(8) 하이어라키 뷰에서 버튼 클릭하고 우측 인스펙터 뷰에서 On Click() 아래의 + 버튼 클릭
(9) None (Object) 부분에 몬스터를 드래그앤드랍
(10) No Function 클릭해서 ButtonTest() – Fury() 선택
=> 이제 버튼을 클릭하면 콘솔에 “Fury!” 메시지 출력
(11) 다시 ButtonTest 파일 내용 수정
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
public class ButtonTest : MonoBehaviour {
void Start () {
}
void Update () {
}
public void Fury() {
Debug.Log(“Fury!”);
}
public void ChangeColor() {
GetComponent<SpriteRenderer>().color = Color.red;
}
}
(12) 하이어라키 뷰에서 버튼 클릭하고 우측 인스펙터 뷰에서 On Click() 아래의 우측 콤보박스 클릭해서 ButtonTest() – ChangeColor() 선택
=> 이제 버튼을 클릭하면 몬스터가 빨간색으로 변함
혹은 아래와 같이 코드를 짜면, 특정 오브젝트(예를 들어 몬스터 오브젝트)를 쉽게 조작할 수 있음.
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
public class ButtonTest : MonoBehaviour {
// 다른 오브젝트에 접근할 수 있게 변수 설정. 인스펙터 뷰에서 몬스터 오브젝트를 넣어주면 됨.
public GameObject monster = null;
void Start () {
}
void Update () {
}
public void Fury() {
Debug.Log(“Fury!”);
}
public void ChangeColor() {
GetComponent<SpriteRenderer>().color = Color.red;
}
}
———-
3-8. Interaction Component – Button & Layer
(1) 캔버스를 생성
(2) 렌더 모드를 카메라 모드로 바꾸고, 카메라를 메인 카메라로 설정해서 영역이 겹치도록 하자.
(3) UI – Image 를 만들고 Red_button 이미지를 부여. Add Component 로 Button 을 추가
(4) UI – Image 를 만들고 Blue_button 이미지를 부여. Add Component 로 Button 을 추가
(5) 프로젝트 뷰의 Red_button, Blue_button 을 각각 선택하고 우측 인스펙터 뷰의 Sprite Editor 를 눌러서 9등분을 잘해주자.
그림을 확대했을 때 중간 부분만 확대되고 상하좌우 테두리의 크기는 얇게 유지하도록 하려면 이러한 Sprite Editor 작업이 필요하다.
(6) 버튼 2개를 겹쳐보면, 겹쳐진 부분은 앞에 있는 버튼만 클릭 가능하다.
* 보통 하이어라키 뷰 상에서 위쪽에 위치한 오브젝트가, 씬 뷰에서는 아래쪽에 위치하게 된다. 먼저 출력하기 때문.
(7) 블루 버튼 오브젝트를 선택하고, Reycast Target 을 체크해제하면 광선의 영향을 받지 않는다.
다시 말해서 UI 상 겹치게 되어도, 블루 버튼 뒤쪽이 클릭 가능해진다.
———-
3-9. Button Practice – Scene Management
게임은 여러 씬으로 구성되어 있음.
시작화면 – 게임화면 – 스테이지별 게임화면 – 엔딩화면 등
(1) Example_Scenes.unitypackage 패키지 파일을 다운로드
(2) 해당 패키지 파일을 프로젝트 뷰로 드래그앤드랍 – Import 버튼 클릭
(3) 씬 3개가 추가된 것을 볼 수 있음.
(4) 하이어라키 뷰에서 마우스우클릭 – UI – Button 을 이용하여 Button1, Button2, Button3 를 생성.
참고로 Button 1~3 은 Canvas 오브젝트의 자식 오브젝트여야 한다.
(5) Canvas 의 Render Mode 를 Screen Space – Camera로 설정,
Render Camera를 Main Camera 로 설정.
(6) 버튼 크기를 모두 600 x 200 으로 수정
(7) 버튼 내의 폰트 크기를 모두 100 으로 수정 (Button 각각 자식 오브젝트로 Text 가 있을 것임)
(8) 버튼의 텍스트 내용을 각각 Scene 1, Scene 2, Scene 3 으로 변경
(9) SceneController 라는 이름의 C# 스크립트 생성
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.SceneManagement;
public class SceneController : MonoBehaviour {
void Start () {
}
void Update () {
}
public void MoveScene(string targetScene) {
SceneManager.LoadScene(targetScene);
}
}
(10) 빈 오브젝트를 생성 후 SceneChangeObject 로 이름 변경
(11) SceneChangeObject 에 Add Component 또는 드래그앤드랍으로 SceneController 컴포넌트를 add 처리
(12) 각 버튼을 선택하고 인스펙터 뷰에서 On Click() 아래의 + 버튼으로 온클릭 이벤트 생성.
오브젝트는 SceneChangeObject 를 고르고 메서드는 SceneController.MoveScene 선택
스트링은 버튼 1 ~ 3 각각 Example_Scene_1, Example_Scene_2, Example_Scene_3 라고 입력
=> 게임을 실행해보면 아래와 같은 오류 발생
Scene ‘Example_Scene_1’ couldn’t be loaded because it has not been added to the build settings or the AssetBundle has not been loaded.
To add a scene to the build settings use the menu File->Build Settings…
UnityEngine.SceneManagement.SceneManager:LoadScene(String)
SceneController:MoveScene(String) (at Assets/Scripts/SceneController.cs:17)
UnityEngine.EventSystems.EventSystem:Update()
(13) 씬이 빌드되어 있지 않기 때문에 위 오류가 발생한 것임.
상단 메뉴 File – Build Settings 윈도우를 열고,
프로젝트 뷰의 씬 3개를 Build Settings 윈도우 상단 Scenes In Build 박스 안에 드래그앤드랍할 것.
윈도우를 닫고 다시 게임을 실행해보면 잘된다.
* 씬 전환 주의사항
1. Using UnityEngine.SceneManagement; (씬 전환을 위한 라이브러리 임포트 필요)
2. Build를 한 Scene 끼리만 전환이 가능하다.
3. 스크립트명을 SceneManager 라고 짓지 말것. (라이브러리 이름임)