[Unity/유니티] 입문: 물리 충돌 이벤트[B11]~UGUI 기초[B12]

개요

유니티 입문/독학을 위해서 아래 링크의 골드메탈님의 영상들을 하루에 2~3개정도 보고, 각 영상별로 진행 상황 사진 또는 캡처를 올리고 배웠던 점을 요약해서 적는다.

https://youtube.com/playlist?list=PLO-mt5Iu5TeYI4dbYwWP8JqZMC9iuUIW2 

유니티 강좌 기초 채널 Basic

---

물리 충돌 이벤트[B11]

01.물리 충돌 이벤트

• 노란색 공과 부딪히면 색깔 바뀌게 만들기

MyBall 스크립트 파일

OtherBall 스크립트 파일. 주변 파란색 공이 사용한다.

실행 전 모습.

공이 닿으니 검은색으로 변했다.

노란 공에 닿고 떨어지니 흰색으로 변했다.

   -MeshRenderer : 오브젝트 재질을 접근할 때 사용하는 클래스.

   -OnCollisionEnter() : 물리적 충돌이 시작할 때 호출되는 함수. 매개 변수의 Collision은 충돌 정보 클래스다.

   -OnCollisionStay() : 물리적 충돌이 일어나는 중일 때 호출되는 함수.

   -OnCollisionExit() : 물리적 충돌이 끝났을 때 호출되는 함수. 

   -Color/Color32 클래스 : Color는 기본 색상 클래스, Color32는 그림판이나 포토샵에서 볼 수 있는 255 색상 클래스.

02.트리거 이벤트

• 점프 영역을 만들고 영역에 들어가면 떠오르게 만들기

점프 영역으로 사용할 투명 큐브 생성. 투명하게 만드는 방법은 Rendering Mode-Transparent를 설정하고, Albedo에서 R,G,B,A 중 A를 낮추면 된다.

투명 큐브의 Collider에서 Is Trigger 체크한다.

MyBall 스크립트 파일

큐브 안에 들어가자 공이 위로 떠오르는 모습

   -OnTriggerEnter : Collider가 충돌하면 호출되는 함수.

   -OnTriggerStay : Collider가 계속 충돌하고 있을 때 호출되는 함수.

   -OnTriggerExit : Collider가 충돌이 끝났을 때 호출되는 함수.

---

게임 인터페이스, UGUI 기초[B12]

01.캔버스

• Canvas 생성하기

Hierarchy 창에서 우클릭 - UI - Canvas로 생성

Canvas를 생성한 후, Scene 창의 2D 버튼을 눌러서 본 캔버스.

02.스크린

• 스크린 : 게임이 표시되는 화면, 해상도로 크기 결정. 기존의 3D 화면은 World라고 한다. 마우스 커서도 스크린 좌표계에 포함된다.

영상 속 설명 캡처

03.텍스트

• Text : 문자열을 표시하는 UI.

Text 생성 직후의 모습

Text의 Inspector 창

Text 내용 편집

   -텍스트 내용 편집은 Inspector 창의 Text(Script) 아래 박스에서 가능하다. 한글 또한 입력 가능.

Font Size를 키우니 일부가 잘린 모습

   -Font는 글자체를 선택할 수 있고(파일을 준비해야한다), Font Size는 글자 크기를 조절할 수 있다.

잘렸던 글자가 다 나오게 되었다.

   -Font Size를 너무 키워서 글자가 일부 잘리게된다. 이경우 Horizontal Overflow를 Wrap에서 Overflow로 바꾸면 나오게 된다. 만약 종 방향으로 크다면, Vertical Overflow를 Overflow로 조정하면 된다.

Line Spacing이 1일 때

Line Spacing이 2일 때

   -Line Spacing : 줄과 줄 사이의 거리, 즉 행간이다. 단위는 픽셀이 아닌, 칸으로 보면 될 것같다.

   -Alignment : 보이는 그림처럼, 정렬. 왼쪽/가운데/오른쪽 정렬과 위쪽/중간/아래쪽 정렬이 있다.

   -이외에도 Color를 통해서 색상을 변경할 수도 있다.

04.이미지

• Image : 이미지를 표시하는 UI.

Image 생성 직후의 모습

Image UI에 적용하려면, Texture Type을 Sprite로 바꿔야한다.

Image에 드래그&드롭해서 적용한 모습. Source Image에 넣으면 된다.

Image의 Inspector 창

Preseve Aspect 체크 후 크기를 늘렸다

   -Preserve Aspect : 비율 고정 선택 항목. 체크하게되면, 크기 조절시 고정된 비율로 조정된다.

Set Native Size 클릭 시 모습. 이미지 크기가 커서 캔버스를 크기를 넘어섰다.

   -Set Native Size : 이미지를 원본 사이즈로 설정하는 버튼.

   -Image Type : Simple, Sliced, Tiled, Filled로 구성되어있다. 기본적으로 Simple이 선택되어있다.

    =>Simple : 이미지 하나의 크기가 그냥 늘어난다.

영상 속 버튼 설명에서 캡처

    =>Sliced : 이미지의 양 옆 모서리를 잘라서 배치하고, 가운데를 채워준다. 위 캡처의 버튼처럼 테두리 부분만 원본으로 존재하고 중간은 비어있다. 빈 중간은 Image Type : Sliced 아래의 Fill Center 항목을 체크하면 채울 수 있다.

    =>Tiled : 크기가 원본 이미지 크기로 고정되고, 늘어난 길이만큼 이미지가 복사된다. 타일 붙이는 것과 같은 것.

Filled 선택시 항목이 늘어난다.

    =>Filled : 이미지를 어떻게 채울 것인지 선택한다. Fill Method는 방법, Origin은 시작 위치, Amount는 채움 양(?).

   +)UI는 Hierarchy의 순서에 따라 위 아래가 결정된다. 위에 있는 것이 그 아래에 있는 것보다 앞에 출력된다.

05.버튼

• Button : 클릭 이벤트를 가지고 있는 반응형 UI.

Button 생성 직후의 모습

Button 생성시 Text도 같이 생성된다.

Button의 Hierarchy 창 속 Button 항목

   -Interactable : 버튼 클릭시 반응 여부를 선택한다. 체크시 클릭하면 반응하고, 체크하지 않으면 반응하지 않는다.

Transition 선택 창

   -Transition : 반응 시 어떻게 반응할지 선택한다. None, Color Tint, Sprite Swap이 존재한다.

    =>Color Tint : 색깔 변경. Normal Color(기본)/Highlighted Color(마우스 올렸을 때)/Pressed Collor(눌렀을 때)/Disabled Color(비활성화시)/Fade Duration(색깔이 바뀌는 시간)/ColorMultiplier(색깔 섞는 강도?)를 설정할 수 있다.

    =>Sprite Swap : 이름대로 스프라이트 교체. Highlighted/Pressed/Disabled Sprite를 설정할 수 있다.

Navigation 선택 창

   -Navigation : 웹에서 Tab키를 누르면 UI 버튼들이 선택되는 것처럼 그런 설정을 한다.

아래 + 버튼으로 추가. 오브젝트를 넣을 수 있다.

MyBall 스크립트 파일. OnClick()에서 사용할 Jump()함수를 만들었다.

On Click()에 Jump()를 Function으로 선택. 클릭하면 점프하게된다.

점프 클릭시 점프를 하는 모습. 연속으로 누르니 공중에서도 점프한다.

   -On Click () : 버튼 클릭시 호출되는 이벤트 함수. 오브젝트를 넣어 그 오브젝트의 스크립트 파일의 함수를 사용할 수 있다.

06.앵커

• UI 고정시키기

Inspector 창을 좌측으로 늘리니 UI가 일그러졌다.

Text의 Inspector창 속 Rect TransForm의 그림을 클릭.

Scene 화면 가운데 앵커가 있다.

   -앵커(빨간점) : 캔버스의 기준점. Rect TransForm 그림 클릭시 나오는 그림들의 빨간점과 Scene의 바람개비 모양이 앵커다. 변경시 Pos X, Pos Y, Pos Z가 그에 맞게 변경된다.

앵커 파란점

   -앵커(파란점) : 컴포넌트에서의 기준점. Shift 키를 누르면 나타난다. 마찬가지로 변경시 Pos X, Y, Z 가 변경된다. 만약 왼쪽 상단 구석에 있고, 앵커 빨간점과 파란점이 모두 왼쪽 상단에 있다면, 캡처처럼 Pos X, Y, Z가 모두 0이 된다.

앵커 중앙 네모. shift와 동시에 눌렀다.

   -앵커(중앙 네모) : 컴포넌트의 위치. Alt 키를 누르면 나타난다.

수정 후 Scene의 모습. 창의 크기를 늘려도 계속해서 고정된다.