유니티 3D 에서 사용자 인터페이스에 GUI Skin 적용하는 예
유니티에서 제공하는 사용자 인터페이스는 Button, Label, Box 등이 있는데 유니티에서 제공되는 스킨을 그대로 사용할 수도 있지만 좀더 특성을 살리기 위해 색상이나 배경 이미지, 테두리 등을 나름대로 정의할 수도 있다.
개발자 정의 GUI Skin 파일을 생성하고 Inspector 뷰에서 배경이나 색상 등의 속성을 지정하고 OnGUI 함수 안에 선언만 해주면 된다.
앞의 페이지에서 다루었던 GUI 에 GUI Skin 을 적용하는 절차를 간단히 알아보고자 한다
별도의 GUI Skin 파일을 지정하지 않아서 디폴트 스킨이 적용된 GUI 의 상태
위의 GUI 출력화면을 좀더 설명하자면 Hierarchy 뷰에 빈 게임 오브젝트(GUIs)를 추가하고 GUI를 정의한 스크립트 파일(GUITest.js)을 드래그하여 할당하고 실행모드로 테스트하면 위의 결과를 볼 수 있다
GUI를 정의한 스크립트 파일(GUITest.js)
#pragma strict
var gt:GUIText;
function Start () {
}
function Update () {
}
function OnGUI() {
GUI.Label(Rect(10,10,300,40), "고정 문자열을 표시하는 GUI.Label()함수");
if(GUI.Button(Rect(10,60,200,40), "GUI.Button()함수로 만든 버튼")) {
var str = "버튼이 눌렸습니다";
print(str);
gt.text = str;
}
GUI.Box(Rect(10, 110, 250, 150), "Select Menu");
GUI.Label(Rect(20,140,400,50), "다음 메뉴를 선택해주세요");
if(GUI.Button(Rect(20, 190, 200, 30), "Level 1")){
str = "[ Level 1 ] 을 선택했습니다";
print(str);
gt.text = str;
}
if(GUI.Button(Rect(20, 220, 200, 30), "Level 2")){
str = "[ Level 2 ] 를 선택했습니다";
print(str);
gt.text = str;
}
}
화면에서 볼 수 있는 것 중에서 위의 스크립트에 정의되지 않은 것은 GUI Text 오브젝트인데, GameObject > Create Other > GUI Text 항목을 선택하여 Scene 뷰에 추가할 수 있다.
위와 같이 디폴트 스킨이 적용된 GUI 에 개발자 정의 스킨을 적용하는 절차는 매우 간단하다.
1. GUI Skin 파일 생성
2. GUI Skin 속성 설정
3. GUISkin 형 변수 선언 및 할당 (위에서 생성한 파일을 드래그하여 할당)
4. OnGUI() 함수에서 GUI.skin=위의 변수 할당
Project 뷰의 Assets 폴더 안에 마우스 우측을 눌러 아래 그림처럼 GUI Skin 항목을 선택하면 New GUISkin 파일이 생성된다
생성된 New GUISkin 파일을 선택하고 Inspector 뷰에서 다음과 같이 다양한 속성들을 변경하여 설정하면 된다
OnGUI 함수 안에 커스텀 스킨을 선언한다
#pragma strict
var gt:GUIText;
var mySkin :GUISkin;
function Start () {
}
function Update () {
}
function OnGUI() {
GUI.skin = mySkin;
GUI.Label(Rect(10,10,300,40), "고정 문자열을 표시하는 GUI.Label()함수");
if(GUI.Button(Rect(10,60,200,40), "GUI.Button()함수로 만든 버튼")) {
var str = "버튼이 눌렸습니다";
print(str);
gt.text = str;
}
GUI.Box(Rect(10, 110, 250, 150), "Select Menu");
GUI.Label(Rect(20,140,400,50), "다음 메뉴를 선택해주세요");
if(GUI.Button(Rect(20, 190, 200, 30), "Level 1")){
str = "[ Level 1 ] 을 선택했습니다";
print(str);
gt.text = str;
}
if(GUI.Button(Rect(20, 220, 200, 30), "Level 2")){
str = "[ Level 2 ] 를 선택했습니다";
print(str);
gt.text = str;
}
}
Inspector 뷰에서 스크립트에 선언된 GUISkin 변수에 New GUISkin 파일(위의 스크립트 파일)을 드래그하여 할당한다
스킨의 속성을 변경하고 실행모드로 테스트하면 아래와 같이 변경된 스킨이 적용된 결과를 볼 수 있을 것이다.
아래의 그림은 Box의 배경색과 글자색상을 변경 적용한 예이다
