UI란 무엇이며 UI의 종류는?? ( 1 / 3 )

유니티 강좌라니!! 이게 얼마만 인것일까요???

으으..... 제가 최근 제작하던 게임 아실 것이라고 믿습니다.

그 게임에 버그가 많이  생겨버려서..... 흐으윽.....

는 한동안 이것만 할 것 같군요!

아무튼 이제 작성을 하도록 하겠습니다.

그러면 먼저 UI라는 것을 알아야 합니다.

UI라는 것이 무엇일까요??? 

그것은 간단합니다.

게임을 보다 더 게임답게 만들어주는 화면을 가득 채워주는 그런 것들입니다.

게임을 하다가 esc를 누르게 되면 환경설정 메뉴로 들어갈 수 있는 창이 뜨는데 그것도 UI라고 할 수 있을지도 모르겠습니다.

그럼 UnityGUI를 알아보도록 하겠습니다.

이것은 스크립트 기반으로 GUI를 구현하는 것입니다.

이 기능을 이용해서 버튼, 문자, 텍스처를 게임 화면에 그릴수 있게 됩니다.

UnityGUI의 스크립트는 전용 이벤트 함수인 OnGUI로 실행하도록 작성을 합니다.

OnGUI외의 이벤트 함수에선 반영되지 않으니 주의해 주시길 바랍니다.

텍스트나 이미지 배치(레이아웃), 그리기, 입력을 할 때 이벤트 처리등은 모두 OnGUI()의 안에 넣습니다.

다음은 화면에 문자와 버튼을 표시하는 예제 코드입니다.

using UnityEngine;

using System.Collections;

public class SampleGui : MonoBehaviour

{

void OnGUI()

{

GUI.Label (new Rect(10, 10, 100, 40), "Label");

if (GUI.Button(new Rect(10, 50, 100, 50), "Button"))

{

Debug.Log("Push Button");

}

}

}

그럼 이제 예제 코드를 실행하면 'Label'문자와 [Button] 버튼이 표시가 됩니다.

GUI.Label()은 화면에 텍스트와 이미지를, GUI.Button()은 화면에 버튼을 표시하고 그것을 누르게 되면 true를 반환하게 합니다.

그러면 버튼을 누르게 되었을 때에 if문이 실행! 그리고는 Debug.Log()를 표시합니다.

+ Rect클래스를 사용하면 위치와 표시 범위를 설정할 수 있습니다!

+ 그뒤에 " "로 오는 것은 작성될 문자열입니다!

----------------------------------------------------------------------------------------------

그러면 이제 UnityGUI컨트롤을 해보도록합시다!

라벨이나 버튼 말고도 다양한 UI 부품이 준비가 되어있습니다.

유니티에서는 이 UI부품을 컨트롤이라고 한답니다.

각 컨트롤과 예제 코드를 설명 들어가겠습니다.

_ Label / Box _

Label과 Box를 하나로 묶었는데요 그냥 간단합니다.

아까 Label을 체험해 보셨을 것이라고 저는 생각합니다.

그러면 이제 설명을 드리자면 Box는 Label에서 Button처럼 틀이 생기는 것 입니다...

(되게 적당한 설명....????)

아무튼 그런 겁니다.

+ 텍스트와 텍스쳐를 같이 표시할 때는 GUIContent 클래스로 모아서 지정할 수 있습다. 이건 모든 것들에게 해당이 됩니다. 그냥 보면 알아요

public Texture texture;

void OnGUI()

{

GUI.Label(new Rect(10, 10, 50, 50), "Label");

GUI.Label(new Rect(10, 70, 50, 50), texture);

GUI.Label(new Rect(10, 130, 100, 50), new GUIContent("Label", texture));

GUI.Box(new Rect(100, 10, 50, 50),"Box");

GUI.Box(new Rect(100, 70, 50, 50), textrue);

GUI.Box(new Rect(100, 130, 100, 50), new GUIContent("Box", texture));

}

----------------------------------------------------------------------------------------------

_ Button / RepeatButton _

뭐.... Button은 아실 겁니다.

아까 만져봐서....

그러면 이제 무엇이 문제인가???

RepeatButton이 문제인데요 이것은 누르고 있는 동안이 셋팅이 됩니다.

Button은 누르면 true가 반환이 되었죠?

RepeatButton은 누르고 있는 동안입니다.

public Texture texture;

void OnGUI()

{

if(GUI.Button(new Rect(10, 10, 50, 50), "Button"))

{

Debug.Log("Push Button 1");

}

if(GUI.Button(new Rect(10, 70, 50, 50), texture))

{

Debug.Log("Push Button 2");

}

if(GUI.Button(new Rect(10, 130, 100, 50), new GUIContent("Button", texture)))

{

Debug.Log("Push Button 3");

}

if(GUI.RepeatButton(new Rect(160, 10, 100, 50), "RepeatButton"))

{

DeBug.Log("Push RepeatButton 1");

}

if(GUI.RepeatButton(new Rect(160, 70, 100, 50), texture))

{

Debug.Log("Push RepeatButton 2");

}

if(GUI.RepeatButton(new Rect(160, 130, 150, 50), new GUIContent("RepeatButton", texture)))

{

Debug.Log("Push RepeatButton 3");

}

}

----------------------------------------------------------------------------------------------

_ TextField / TextArea / PasswordField _

TextField는 한 줄짜리 텍스트 입력란을 표시합니다.

인수에는 입력란에 표시할 텍스트를 지정합니다.

반환값으로 항상 입력란의 문자열을 돌려줍닏니다.

입력되어 도돌아온 텍스트를 다음 프레임에서 텍스트 입력란에 반영시키려고 인수로 지정하는 string 변수와 반환값을 받아들이는 string변수를 똑같이 했습니다.

TextArea는 여러 행으로 된 텍스트 입력란입니다.

PasswordField는 표시할 문자열을 지정한 문자로 모두 치환해서 표시합니다.

암호를 입력할 때 사용합니다.

string textFieldText = "TextField";

string textAreaText = "TextArea";

string passwordFieldText = "PasswordField";

char maskChar = '*';

void OnGUI()

{

textFieldText = GUI.TextField(new Rect(10, 10, 100, 30), textFieldText);

textAreaText = GUI.TextArea(new Rect(10, 50, 100, 80), textAreaText);

passwordFieldText = GUI.PasswordField(new Rect(10, 140, 100, 30), passwordFieldText, maskChar);

}

----------------------------------------------------------------------------------------------

_ Toggle / Toolbar / SelectionGrid _

Toggle은 On / Off 체크박스가 딸린 Label을 표시합니다. 인수로 선택 상태를 지정할 수 있습니다.

반환값은 현재 상태를 반환!

Toolbar는 버튼 여러 개를 하나의 행에 가로로 표시합니다.

버튼 여러 개 중에서 항상 버튼 하나를 선택한 버튼 그룹입니다. 

표시할 내용을 인수로 지정할 때 string 배열이면 텍스트, Texture배열이면 이미지, GUIContent 배열이면 텍스트와 Texture가 혼합된 버튼을 입니다.

반환값은 선택된 버튼의 인덱스가 됩니다.

SelectionGrid는 옆으로 나열할 버튼 수를 지정해서 버튼 여러 개의 열로 표시합니다.

그 밖의 동작은 Toolbar와 같습니다.

bool toggleValue = ture;

int toolbarSelected = 0;

string[] toolbarTexts = {"Toolbar 1", "Toolbar 2", "Toolbar 3"};

int gridSelected = 0;

string[] gridTexts = {"Grid 1", "Grid 2", "Grid 3", "Grid 4", "Grid 5"};

int gridXCount = 3;

void OnGUI()

{

toggleValue = GUI.Toggle(new Rect(10, 10, 100, 30), toggleValue, "Toggle");

toolbarSelected = GUI.Toolbar(new Rect(10, 50, 200, 80), toolbarSelected, toolbarTexts);

gridSelected = GUI.SelectionGrid(new Rect(10, 140, 200, 80), gridSelected, gridTexts, gridXCount);

}