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

 

  1. 김현기 2015.05.27 00:58  Address  Edit/Delete  Reply

    유용한 정보 고맙습니다.

  2. 유후 2015.07.30 02:31  Address  Edit/Delete  Reply

    유니티5 넘어와서 어떻게 쓰는지 헤메다 들어왔습니다. 고맙습니다!

    추신. 예제 사진 예쁜걸 쓰셨네요 ㅋㅋ 어디서 구하셨나요?

  3. BlogIcon kannas2 2015.09.30 09:47  Address  Edit/Delete  Reply

    잘보고 갑니다.

  4. 도와주세요 2016.09.18 03:51  Address  Edit/Delete  Reply

    제가 UGUI를 이용해서 모바일 방향키를 만들려고 합니다.

    좌키 우키 UGUI로 만들어 놓았구요. 퍼블릭 오브젝트 A를
    좌키 UGUI를 누르면 좌로 우키 UGUI를 누르면 우로 움직이게 하고 싶습니다.

    public GameObject Mic;
    public float MoveSpeed;


    public void PressKey(int nKey){
    switch(nKey)
    {
    case 1: //left
    Mic.transform.Translate (Vector3.left * MoveSpeed * Time.deltaTime);
    case 2: //right
    Mic.transform.Translate (Vector3.right * MoveSpeed * Time.deltaTime);
    }
    }

    이렇게 했더니 Assets/Move_1.cs(11,17): error CS0163: Control cannot fall through from one case label to another
    라고 나오더라구요. ㅜㅜ
    스크립트를 오브젝트 A가 아니라 매니저 역할을 하는 empty에 넣어서 그런걸까요?

    • Favicon of https://blog.danggun.net BlogIcon 당근천국 2016.09.18 11:10 신고  Address  Edit/Delete

      이거 기본적인 문법오류인데요-_-;;;;
      c#은 'switch'문에서 내용있을때 'break'안쓰면 에러납니다.

      이거 구글링망해도 바로 나오는 내용입니다.
      검색이 빠른 코딩에 도움이된다는거 잊지 마세요~

  5. 와우 2020.02.17 15:39  Address  Edit/Delete  Reply

    내용이 너무 유익해요... 잘 보고 갑니다...

    (근데 저 느낌의
    남잦사진은 없나효..?
    제가 남자를 조화해서리... 크흡..
    다음번엔
    남ㅈ자.. 사진으로 부탁해요... 하하)

댓글 작성

이름
패스워드
홈페이지
비밀글