2015. 4. 3. 15:00

유니티가 5.0이 되면서 플러그인 몇 개를 흡수해서 GUI를 구성하는 방법이 비주얼 적으로 바뀌었습니다.

(4.6 때 바뀐 거 같지만 넘어가고 ㅎㅎㅎ)

새로워진 GUI 작성방법을 배워 봅시다.

 

이전 포스팅을 참고하시면 좋을 듯 하네요.

참고 : [Unity] GUI 작성하기

 

 

0. 테스트 화면 만들기

방향키를 'GUI'로 만들고 방향키를 누르면 카메라가 이동하도록 만들 것입니다.

 

테스트를 위해 프로젝트를 생성하고 3D 큐브를 하나 추가 합니다.

테스트용이니 적당한 이미지를 큐브에 적용합니다.

 

 

1. 버튼 만들기

이제 'GameObject'메뉴에 'UI'카테고리가 생겼습니다!!!!

 

1-1. 버튼 추가 하기

UI > Button

을 눌러 GUI 버튼을 추가 합니다.

 

 

 

이제 트랜스폼툴에 새로 추가된 'UI 툴'을 눌러 UI 편집을 활성화 시킵니다.

 

 

 

게임창을 확인하면 버튼이 추가 된것을 알 수 있습니다.

 

1-2. 방향키 만들기

위와 같은 방법으로 4개의 버튼을 만듭니다.

 

하이어라키에 보면 'Canvas>Button'이 추가 된 것을 볼 수 있습니다.

이곳에 'Button'을 확장해보면 'Text'가 포함되어 있음을 볼 수 있습니다.

이 'Text'를 수정하면 버튼에 표시되는 텍스트를 꾸밀 수 있습니다.

 

 

 

우리는 방향키에 맞게 각각의 버튼의 텍스트를 수정 합시다.

 

 

 

모양도 이쁘게 배치해 봅시다.

 

 

2. 기능 연결하기

이제 스크립트를 만들어 버튼과 카메라를 연결해 봅시다.

 

2-1. 스크립트 만들기

c# 스크립트를 생성하여 메인카메라에 추가 합니다.

 

 

 

버튼을 누르면 카메라가 움직이도록 하기위해 카메라 오브젝트를 가지고 있을 변수 'GameObject goCamera;'를 추가합니다.

/// <summary>
/// 움직일 카메라
/// </summary>
GameObject goCamera;

void Start () 
{
	//움직일 카메라를 찾는다.
	this.goCamera_Minmap = GameObject.Find("Main Minmap");
}

 

 

버튼을 누르면 카메라를 움직여줄 함수 'PressKey(int nKey)'를 만듭니다.

public void PressKey(int nKey)
{
	//처음 데이터 받기
	Vector3 rectTemp = this.goCamera.transform.localPosition;
	
	switch (nKey)
	{
	case 1:	//left
		rectTemp.x -= 0.1f;
		break;
	case 2:	//up
		rectTemp.y += 0.1f;
		break;
	case 3:	//right
		rectTemp.x += 0.1f;
		break;
	case 4:	//down
		rectTemp.y -= 0.1f;
		break;
		
	}
	
	//완성된 데이터 저장
	this.goCamera.transform.localPosition = rectTemp;
}

 

2-2. 스크립트 연결하기

 

이제는 스크립트 안에서 모든 GUI를 관리하던 방식이 아니기 때문에 작성한 스크립트를 GUI와 연결하는 작업이 필요합니다.

 

하이어라키에 있는 버튼을 클릭하고 인스팩터의 'Button'에 보면 'On Click ()'이라는 이벤트가 있습니다.

 

 

 

이 이벤트에 '+'를 눌러 구성요소를 추가합니다.

'None'이라고 쓰여있는 곳에 메인카메라를 끌어서 넣고 'No Function'을 눌러보면 카메라에 추가한 'claArrowKeys'클래스가 보입니다.

이 클래스를 선택하면 포함된 멤버들이 표시되는데 아까 우리가 만든 'PressKey(int)'를 선택해 줍니다.

 

 

 

그러면 아래와 같이 'PressKey(int)'에 넘겨줄 파라메타를 써줄 칸이 생깁니다.

여기에 버튼이 눌렸을 때 보낼 값을 넣어 줍니다.

 

버튼별로 같은 작업을 한 후 아래와 같이 버튼별로 다른 값을 넣어 줍니다.

Left : 1

Up : 2

Right : 3

Down : 4

 

 

 

3. 테스트

이제 완성된 코드를 테스트 해봅시다.

 

 

카메라가 움직이는 것이므로 큐브가 반대로 움직이는 것처럼 보입니다.

 

 

마무리

UI작업은 비주얼적인 측면이 생산성에 많은 영향을 주기 때문에 이러한 플러그인을 흡수한 유니티는 상당히 좋습니다.

문제는....했던걸 다시 배워야 하잖아 ㅋㅋㅋㅋ

 

여하튼 유니티5가 출시되었지만 mono버전은 그대로라는 게 충격.

자마린 가격정책을 보니 납득간다는 게 두 번째 충격-_-;;;;

 

전체 소스입니다.

 

GUI5_Test.zip