유니티에서 GUI Style 을 설정하는 예
유니티에서 화면에 출력될 모든 GUI 에 일괄적으로 스킨을 적용할 때는, 즉 디폴트 스킨이 아니라 개발자가 정의한 스킨을 모든 GUI 에 적용하고자 할 때는 개발자가 Project 뷰에 새로운 스킨파일을 생성하고 생성된 스킨 파일을 OnGUI() 함수에 선언해주어야 한다
여기서는 우선 디폴트 스킨을 오버라이드하기 위해 새로운 GUISkin 파일을 생성하여 모든 GUI에 일괄적으로 적용하는 방법과 특정 GUI에는 예외적으로 다른 스킨을 적용하는 방법으로 GUIStyle을 사용하는 절차에 대해서 알아보고자 한다
예를 들어 다음과 같이 OnGUI() 함수가 포함된 스크립트가 있을 때 OnGUI() 함수에서 생성하는 모든 GUI 에게 적용할 새로운 스킨이 필요한 경우를 생각해보자. 여기서 생성되는 모든 GUI에 새로이 적용할 스킨 변수를 선언해주고 Project 뷰에서 새로운 스킨 파일을 생성하고 Inspector 뷰에서 새로 생성한 스킨 파일을 드래그하여 스크립트의 GUISkin 변수에 할당해주면 된다
#pragma strict
var gt:GUIText;
var mySkin:GUISkin; // Project 뷰에서 새로 생성한 GUISkin 파일을 Inspector 뷰의 이 변수에 드래그해주면 된다
function Start () {
}
function Update () {
}
function OnGUI() {
GUI.skin = mySkin; // GUI 에 새로 적용할 GUISkin 을 할당한다
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;
}
}
Project 뷰에 새로운 스킨파일을 생성하고 설정을 임의로 변경한다.
여기서는 커스텀 폰트를 모든 GUI에 설정하고자 한다
Project 뷰에 새로 생성된 스킨파일을 클릭하면 Inspector 뷰에 스킨의 속성을 변경할 수 있도록 다양한 항목이 나타난다.
그 중에서 가장 위에 있는 항목이 Font 설정인데, 디폴트로 Arial 폰트가 지정된 것을 확인할 수 있다
새로 생성한 스킨파일의 폰트에 시스템 폰트가 아닌 커스텀 폰트를 아래처럼 드래그하여 설정한다
스킨 파일의 설정이 완료되면 스크립트의 GUISkin 변수에 새로 생성한 스킨 파일을 드래그하여 할당해준다
위와같이 설정을 마치고 실행모드로 테스트해보면 NGUI 에서 추가한 Label 과 OnGUI() 함수에서 추가한 모든 GUI 들의 폰트가 일괄적으로 새로운 스킨에 설정한 폰트로 변경되는 것을 확인할 수 있다. 아래 그림 참조
만약 위와 같이 일괄적으로 적용된 폰트를 적용하지 않고 특정 GUI에는 다른 폰트를 설정하고자 한다면 스크립트에 GUIStyle 변수를 선언하고 해당 GUI를 생성할 때 아규먼트로 전달해주면 된다
스크립트에 선언된 GUIStyle 변수는 할당할 필요는 없으나 Inspector 뷰에서 설정을 변경할 수가 있다.
#pragma strict
var gt : GUIText;
var mySkin : GUISkin;
var myStyle : GUIStyle; // Inspector 뷰에서 설정을 변경하면 된다. 별도의 GUIStyle 파일을 생성하는 것이 아니다
function Start () {
}
function Update () {
}
function OnGUI() {
GUI.skin = mySkin;
GUI.Label(Rect(10,10,300,40), "고정 문자열을 표시하는 GUI.Label()함수", myStyle);
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;
}
}
위의 스크립트에서 선언한 GUIStyle 변수는 별도로 할당할 필요가 없으며 Inspector 뷰에서 설정을 변경하기만 하면 된다. 여기서는 폰트 설정만 다른 것으로 변경하려고 한다
위의 GUIStyle 설정은 스크립트의 GUI.Label()에 적용되므로 실행모드로 테스트하면 한개의 Label 만이 Arial 폰트로 화면에 출력될 것이다
