아름다운 메뉴를 만드는 Unity 게임의 사운드 볼륨을 변경합니다. 포커스가 없는 맞춤 팝업
인터넷에는 Unity3D로 게임을 만드는 레슨이 많이 있지만 최상위 레이어에는 초보자를 대상으로 한 레슨이 거의 없습니다.
이번 강의 시리즈에서는 비표준 구성 요소를 사용하지 않고 표준 GUI를 사용하여 게임 메뉴를 만드는 방법을 설명합니다.
이 강의는 게임에서 자신만의 메뉴를 만드는 방법을 배우고 싶은 초보자를 대상으로 합니다.
첫 번째 강의가 끝나면 작동하는 버튼이 있는 게임 메뉴를 갖게 됩니다.
이 단원에서는 다음 기능을 사용합니다.
1) 공개 정수- 숫자 값에 변수 할당
2) GUI.BeginGroup - GUI 생성여러 떼
3) GUI.버튼- GUI 버튼 만들기
4) 디버그.로그- 콘솔에 메시지 출력
5) 애플리케이션.로드레벨- 레벨 로딩
6) 응용 프로그램.종료- 게임을 종료합니다
그럼 시작해 보겠습니다.
1 단계:프로젝트 C# 창에서 스크립트를 생성하고 이를 자체적으로 호출합니다.
2 단계:게임 카메라 만들기:
* 프로그램 상단 메뉴에서 해당 항목을 클릭하세요. 게임오브젝트
* 클릭 후 드롭다운 메뉴가 나타나면 해당 항목을 클릭하세요. 기타 만들기
* 나타나는 목록에서 카메라라는 줄을 클릭하면 이 작업 후에 개체가 계층 창에 나타납니다. 카메라
3단계:첫 번째 단계에서 만든 스크립트를 Camera 개체에 할당합니다. 이렇게 하려면 프로젝트 창에서 스크립트를 찾아 메뉴라고 하는 스크립트를 계층 창의 카메라 개체로 끌어 놓습니다.
이동이 올바른지 확인하려면 다음을 수행해야 합니다. 계층 창에서 카메라 개체를 클릭합니다. Inspector 창에서 개체에 대한 다음 개체를 볼 수 있습니다.
이미지에 스크립트 이름과 함께 강조 표시된 줄이 보이면 모든 작업을 올바르게 수행한 것입니다.
4단계:편집기에서 스크립트를 열어 보겠습니다. 이렇게 하려면 스크립트를 클릭하세요. 더블 클릭프로젝트 창에서 마우스 왼쪽 버튼을 누릅니다. 스크립트 편집기가 열립니다. 제 경우에는 MonoDevelop입니다. 편집기를 열면 완전히 비어 있지만 기본 내용이 포함된 스크립트가 여러분 앞에 나타납니다.
200?"200px":""+(this.scrollHeight+5)+"px");">
UnityEngine 사용;
System.Collections 사용;
공개 클래스 Menu1: MonoBehaviour(
// 초기화에 사용합니다.
무효 시작() (
}
무효 업데이트() (
}
}
선
200?"200px":""+(this.scrollHeight+5)+"px");">공개 클래스 [u]메뉴: MonoBehaviour(
말 대신 메뉴스크립트 이름이 포함됩니다. 선을 만지거나 변경할 필요가 없습니다. 적어도 이번 강의에서는요.
5단계:메뉴 아래의 스크립트를 편집해 보겠습니다. 이를 위해 이 강의에서 필요하지 않은 일부 줄을 제거할 수 있습니다.
200?"200px":""+(this.scrollHeight+5)+"px");">
// 초기화에 이것을 사용합니다. 이 주석은 필요하지 않습니다.
// 업데이트는 프레임당 한 번씩 호출됩니다.
무효 업데이트() (
) - Void 메소드도 필요하지 않습니다
6단계:우리의 스크립트는 게임 메뉴를 생성할 준비가 되어 있습니다.
방법 전 무효 시작게임 메뉴에서 창 번호를 매기기 위한 변수를 만들어 보겠습니다.
줄의 내용은 다음과 같습니다.
200?"200px":""+(this.scrollHeight+5)+"px");">공개 int 창;
공개 정수- 변수의 숫자 값을 설정합니다.
창문- 숫자 값과 함께 스크립트에서 사용될 변수의 이름
6단계:을 위한 올바른 작동메뉴에서 스크립트가 실행되기 시작하면 하나의 콘텐츠를 표시해야 합니다. 이를 위해 메소드에서 무효 시작추가하자 시작 값변하기 쉬운 창문. 전체 방법은 다음과 같습니다.
200?"200px":""+(this.scrollHeight+5)+"px");">
무효 시작() (
창 = 1;
}
스크립트가 실행되기 시작하면 메서드는 창 변수에 값 1을 할당합니다.
[b]7단계: GUI 메뉴 출력 작업을 시작해 보겠습니다. 이를 위해 GUI 출력 메서드 아래에 void Start 메서드를 만듭니다. 다음과 같이 보일 것입니다:
200?"200px":""+(this.scrollHeight+5)+"px");">
무효 OnGUI() (
}
Unity3D 프로그램과 생성된 응용 프로그램에서 이 메서드를 사용하면 출력이 발생합니다. 그래픽 요소.
8단계:메뉴가 화면 중앙에 표시되고 각 버튼의 위치를 계산할 필요가 없도록 하기 위해 해당 내용을 화면 중앙에 표시하는 그룹을 만듭니다.
200?"200px":""+(this.scrollHeight+5)+"px");">
GUI.EndGroup();
GUI.BeginGroup- 그룹을 생성
(새 직사각형- 그룹 자체의 위치에 대한 추가 데이터가 제공되는 값을 설정합니다.
(화면.너비 / 2 - 100,- 화면 너비를 기준으로 그룹의 위치를 설정합니다.
화면.높이 / 2 - 100,- 화면 높이를 기준으로 그룹의 위치를 설정합니다.
200
- 그룹 너비 설정
200
- 그룹의 높이를 설정
너비와 높이에 대한 값을 직접 설정할 수 있지만 모든 것이 중앙에 깔끔하게 정렬되도록 합니다. 화면.폭 / 2 - 100, 화면.높이 / 2 - 100값 100을 우리의 값으로 바꿉니다. 즉, 그룹의 너비와 높이가 300인 경우 100 대신 너비 300의 절반을 입력해야 합니다. 입력된 값은 150이 됩니다.
9단계:창 변수 = 1이면 메뉴 출력을 생성합니다. 이를 위해 8단계에서 생성된 그룹의 시작과 끝 사이, 즉
200?"200px":""+(this.scrollHeight+5)+"px");">
GUI.BeginGroup(new Rect(Screen.width / 2 - 100, Screen.height / 2 - 100, 200, 200));
여기!!!
GUI.EndGroup();
window = 1일 때 출력 값을 작성해 보겠습니다.
200?"200px":""+(this.scrollHeight+5)+"px");">
if(창 == 1)
{
if(GUI.Button (새 Rect (10,30,180,30), "재생"))
{
창 = 2;
}
if(GUI.Button (새 Rect (10,70,180,30), "설정"))
{
창 = 3;
}
if(GUI.Button (new Rect (10,110,180,30), "게임 정보"))
{
창 = 4;
}
if(GUI.Button (새 Rect (10,150,180,30), "종료"))
{
창 = 5;
}
}
if(창 == 1)- windows가 값 1과 같으면 출력을 생성합니다.
if(GUI.Button (새 Rect (10,30,180,30), "재생"))- "재생" 버튼 생성
(창 = 2;)- "재생" 버튼을 누르면 창은 값 2를 받습니다.
나머지 버튼은 동일합니다.
10단계:창 변수가 2인 경우 출력 생성
200?"200px":""+(this.scrollHeight+5)+"px");">
if(창 == 2)
{
{
애플리케이션.로드레벨(1);
}
{
애플리케이션.로드레벨(2);
}
{
애플리케이션.로드레벨(3);
}
{
창 = 1;
}
}
"재생" 버튼을 클릭하면 사용할 수 있는 버튼이 표시됩니다. 출력은 이전 버튼과 다르지 않습니다. 새로운 기능만 해독하겠습니다.
Debug.Log("레벨 1 로드됨"); -
애플리케이션.로드레벨(1);- 게임 레벨을 로드하는 함수를 호출합니다. 1 - 필요한 수준으로 변경할 수 있습니다. 숫자 값은 조합을 클릭하여 얻을 수 있습니다. Ctrl 키+ 쉬프트 + B.
11단계:창이 3인 경우 출력을 생성합니다.
200?"200px":""+(this.scrollHeight+5)+"px");">
if(창 == 3)
{
{
}
{
}
{
}
if(GUI.Button (새 Rect (10,160,180,30), "뒤로"))
{
창 = 1;
}
}
이 단계에서는 새로운 기능을 사용하지 않으므로 그냥 추가합니다. 다음 강의에서는 게임을 구성하는 기능을 만드는 방법을 설명합니다.
12단계:값이 윈도우 4이면 내용을 표시합니다.
200?"200px":""+(this.scrollHeight+5)+"px");">
if(창 == 4)
{
{
창 = 1;
}
}
13단계:창 변수를 5로 설정하고 "종료" 버튼을 누르면 내용을 표시합니다.
200?"200px":""+(this.scrollHeight+5)+"px");">
if(창 == 5)
{
{
응용 프로그램.종료();
}
{
창 = 1;
}
}
이 새로운 함수의 출력에서는 다음과 같습니다.
응용 프로그램.종료(); - 이 기능"예" 버튼을 누르면 애플리케이션이 꺼집니다.
추신 이 기능은 Unity3D 편집기에서는 작동하지 않으며, 컴파일된 프로젝트에서만 작동합니다.
스크립트는 준비되었지만 모든 단계를 단계별로 수행했다면 처음에 이미지에 표시된 메뉴가 표시됩니다.
If(창 == 2)
{
GUI.Label(new Rect(50, 10, 180, 30), "레벨 선택");
if(GUI.Button (새 Rect (10,40,180,30), "레벨 1"))
{
Debug.Log("레벨 1 로드됨");
애플리케이션.로드레벨(1);
}
if(GUI.Button (새 Rect (10,80,180,30), "레벨 2"))
{
Debug.Log("레벨 2 로드됨");
애플리케이션.로드레벨(2);
}
if(GUI.Button (새 Rect (10,120,180,30), "레벨 3"))
{
Debug.Log("레벨 3 로드됨");
애플리케이션.로드레벨(3);
}
if(GUI.Button (새 Rect (10,160,180,30), "뒤로"))
{
창 = 1;
}
}
If(창 == 3)
{
GUI.Label(new Rect(50, 10, 180, 30), "게임 설정");
if(GUI.Button (새 Rect (10,40,180,30), "게임"))
{
}
if(GUI.Button (새 Rect (10,80,180,30), "오디오"))
{
}
if(GUI.Button (새 Rect (10,120,180,30), "비디오"))
{
}
if(GUI.Button (새 Rect (10,160,180,30), "뒤로"))
{
창 = 1;
}
}
If(창 == 4)
{
GUI.Label(new Rect(50, 10, 180, 30), "게임 정보");
GUI.Label(new Rect(10, 40, 180, 40), "개발자 및 게임에 대한 정보");
if(GUI.Button (새 Rect (10,90,180,30), "뒤로"))
{
창 = 1;
}
}
If(창 == 5)
{
GUI.Label(new Rect(50, 10, 180, 30), "아직 떠나시겠습니까?");
if(GUI.Button (새 Rect (10,40,180,30), "예"))
{
응용 프로그램.종료();
}
if(GUI.Button (새 Rect (10,80,180,30), "아니요"))
{
창 = 1;
}
}
GUI.EndGroup();
}
}
~에 이 순간이것은 첫 번째 강의입니다. 앞으로는 완전한 기능을 갖춘 메뉴를 만드는 방법을 가르쳐 줄 몇 가지 강의가 더 있을 것입니다.
게임을 만들 때 일시 중지는 인터페이스의 필수적인 부분입니다. 일시 중지 메뉴를 통해 다음과 같은 게임 기능을 구현할 수 있습니다.
이 스크립트에서는 게임을 중지하고 메인 메뉴로 나가는 것을 구현합니다. 이렇게 하려면 프로젝트에 두 개의 장면을 만들고 다음 줄을 작성하는 C# 스크립트를 만들어야 합니다.
UnityEngine 사용; System.Collections 사용; 공개 클래스 puse: MonoBehaviour ( 공개 부동 타이머; 공개 bool ispuse; 공개 bool guipuse; void Update() ( Time.timeScale = 타이머; if (Input.GetKeyDown(KeyCode.Escape) && ispuse == false) ( ispuse = true; ) else if (Input.GetKeyDown(KeyCode.Escape) && ispuse == true) ( ispuse = false; ) if (ispuse == true) ( timer = 0; guipuse = true; ) else if (ispuse = = false) ( 타이머 = 1f; guipuse = false; ) ) public void OnGUI() ( if (guipuse == true) ( Cursor.visible = true;// 커서 표시 활성화 if (GUI.Button(new Rect( (float)(Screen.width / 2), (float)(Screen.height / 2) - 150f, 150f, 45f), "계속")) ( ispuse = false; 타이머 = 0; Cursor.visible = false; ) if (GUI.Button( new Rect((float)(Screen.width / 2), (float)(Screen.height / 2) - 100f, 150f, 45f), "저장")) ( ) if (GUI.Button (new Rect((float )(Screen.width / 2), (float)(Screen.height / 2) - 50f, 150f, 45f), "로드")) ( ) if (GUI.Button(new Rect(( float)(Screen.width / 2), (float)(Screen.height / 2), 150f, 45f), "메뉴에서")) ( ispuse = false; 타이머 = 0; Application.LoadLevel("메뉴"); // 여기서 버튼을 클릭하면 다른 씬이 로드되는데 씬의 이름을 원하는 대로 변경할 수 있습니다 ) ) ) )
여기에서는 모든 것이 간단합니다. 두 개의 변수 중 하나는 ESC를 누르면 시간이 정지되고, 두 번째 변수는 시간이 정지되면 메뉴 버튼이 표시됩니다.
전체 스크립트는 기본적으로 하나의 함수를 기반으로 구축되었습니다.
Time.timeScale = 타이머
TimerScale은 값이 1이면 일반 모드에서 작동하고 시간은 평소와 같이 흐르고 값이 0.5이면 시간이 2배 느려지고 값이 0이면 시간이 걸리는 일종의 시계입니다. 아예 멈춥니다. 이를 사용하여 일시 중지를 만듭니다.
어느 날 당신은 메뉴를 만들고 싶은 충동을 느낍니다. 상황별 또는 일반 Unity 메뉴와 병합됩니다. 그리고 당신은 이것이 어떻게 이루어지는 지에 대해 아무것도 모른다는 것을 깨달았습니다. 아니면 모든 것을 알지 못합니다. 이 문서는 Unity에서 메뉴를 만드는 방법에 대한 개요입니다. 이러한 방법은 많이 있으며 각각은 구체적입니다.
기사의 주제는 무엇입니까?
갑자기 편집자와 전문적으로 작업해야 한다면, 내 하루는 어때?그렇다면이 지식은 단순히 필수입니다. 메뉴는 모든 곳에서 사용됩니다. 처음 이 내용을 배우기 시작했을 때 올바르게 수행하는 방법을 몰랐기 때문에 유니티 위키에서 자전거 콤보 상자를 잘라야 했습니다. 방법이 비뚤어져 있고 그런 일을 우연히 발견하라고 조언하지 않습니다. 즉시 올바르게 시작하는 것이 어떻습니까?
그래서, 방법
컨텍스트 메뉴
아마도 가장 먼저 접하게 될 방법은 ContextMenu입니다.
다음 예에서는 이 속성이 작동하는 방식을 보여줍니다.
UnityEngine 사용; 공개 클래스 MyClass: MonoBehaviour ( void SayMessage() ( Debug.Log ("사랑해요, DevTribe"); ) )
결과적으로 다음 위치에 메뉴 항목이 표시됩니다.
이 항목을 클릭하면 SayMessage() 메서드가 실행됩니다.
그러나 이 방법은 매우 좁은 곳에서 사용된다.
- Behavior 클래스에서 상속된 스크립트에서만(모든 스크립트 및 구성 요소)
사용방법: 컴포넌트에서 메소드를 빠르게 호출해야 할 때. 이러한 경우 두 개의 버튼을 추가하기 위해 개체 검사기를 다시 작성하는 것은 실용적이지 않습니다. 네, 거기에 몇 가지 포인트를 두는 것이 더 좋습니다.
이 방법은 게임 빌드에 사용됩니다(모든 구성 요소가 있으므로 논리적입니다).
컨텍스트메뉴항목
이 방법이전 항목과 유사합니다. 이것도 속성입니다. 그러나 그것은 잘못된 방식으로, 잘못된 방식으로 쓰여졌습니다.
작성 예:
UnityEngine 사용; 공개 클래스 MyClass: MonoBehaviour ( 공개 문자열 ff; void SayMessage() ( Debug.Log("사랑해요, DevTribe"); ) )
이 메소드는 필드(예: ff 필드)에 대한 컨텍스트 메뉴를 추가합니다. 클릭 시 마우스 오른쪽 버튼으로 클릭마우스를 사용하면 다음 항목이 포함된 메뉴가 표시됩니다.
첫 번째 매개변수는 필드 이름이고, 두 번째 매개변수는 호출할 메소드의 이름입니다.
그렇지 않은 경우 요구 사항은 동일합니다.
- Behavior 클래스에서 상속된 스크립트(모든 스크립트 및 구성 요소)에서만 사용됩니다.
- 인스턴스 메소드에만 해당("정적"은 아님!)
- 메소드에는 매개변수가 없어야 합니다.
적용 방법: 첫 번째 방법과 유사하지만 방법의 실행이 전체 구성 요소가 아닌 특정 필드와 관련된다는 사실을 고려합니다.
이 방법은 여전히 게임 어셈블리에 반영되어 있습니다.
이 방법에 대해서는 조금 더 아래쪽("메뉴 모음 옵션" 섹션)에서 좀 더 자세히 설명합니다.
주목
모든 후속 방법은 편집기의 확장이며 편집기 어셈블리에만 관련됩니다. 이는 이 코드를 실행하는 스크립트가 폴더에 있어야 함을 의미합니다. /자산/편집자/당신의 프로젝트.
메뉴 아이템
그러나 아직 속성이 완료되지 않았습니다. 재고가 하나 남아 있는데 나는 그것에 대해 침묵했습니다. 편집기의 기본 메뉴에 항목을 추가하는 MenuItem 속성입니다.
샘플 코드:
UnityEditor 사용; UnityEngine 사용; 공공의 정적 클래스 MyClass ( static void SayMessage() ( Debug.Log("사랑해요, DevTribe"); ) )
이 방법을 사용하면 다음과 같은 결과가 발생합니다.
당연히 이 방법에는 한계가 있지만 앞서 읽은 방법과는 다릅니다.
- 속성이 속한 함수는 정적이어야 합니다.
- 함수에는 매개변수가 없어야 합니다.
적용 방법: 모든 곳에서 사용됩니다. 창을 열고 일련의 작업을 수행합니다.
게다가 이 방법에는 약간의 "부정행위"가 있으며 유연한 설정, 아래의 "메뉴 표시줄 옵션" 섹션에 이에 대해 쓰겠습니다.
이 메서드는 항상 섹션을 가리켜야 합니다. 즉, 단순히 메뉴에 항목을 추가할 수 없으며 특정 위치에 있어야 합니다. 또한 이 방법을 사용하면 기존 위치에 메뉴를 삽입할 수 있습니다. 그러면 주 메뉴뿐만 아니라 항목을 정의한 경우 계층 구조나 프로젝트의 상황에 맞는 메뉴에도 유사한 항목이 생성됩니다.
또한 이 속성은 선택적으로 여러 매개변수를 구현할 수 있습니다.
isValidate함수- 함수를 유효성 검사기 함수로 표시합니다. 즉, 이 기능은 메뉴 항목을 표시하지 않지만 해당 항목의 가용성을 확인합니다. 이러한 함수는 버튼이 비활성화되었는지 또는 활성화되었는지를 나타내는 부울을 반환해야 합니다. 일반 메뉴 항목과 함께 사용됩니다(추가 매개변수를 포함하여 정확히 동일한 경로를 가진 유효성 검사기가 아님).
예:
Static bool CanBeShow() ( return "ILove".Length == 5; ) static void ShowMessage() ( Debug.Log("사랑해요, DevTribe"); )
다시 말하지만, 어떤 이유에서인지 문서에서는 이에 대해 구체적으로 논의하지 않았습니다.우선 사항- 메뉴 항목 순서. 일반적으로 표준 요소는 0부터 순서를 계산하므로 "-1"을 지정하여 항목을 목록의 맨 위에 설정합니다.
동일한 경로를 두 개 이상 지정하면 마지막으로 지정한 경로만 사용됩니다. 이렇게 하면 표준 Unity 메뉴 항목을 자신만의 메뉴 항목으로 바꿀 수 있습니다.
또한 이 메서드의 프레임워크 내에서 ContextMenu 메서드와 동일한 결과로 검사기의 상황에 맞는 메뉴를 변경할 수 있습니다. 그러나 여기에는 약간의 설탕이 있습니다. Transform, Rigidbody 등과 같이 이미 작성된 구성 요소의 포인트를 변경할 수 있습니다.
이 방법의 경우 CONTEXT 메뉴가 예약되어 있으며 그 후에 필요한 구성 요소의 이름을 입력합니다.
UnityEditor 사용; UnityEngine 사용; 공용 정적 클래스 MyClass ( static void ShowMessage(MenuCommand command) ( Debug.Log("사랑해요, DevTribe"); ) )
눈치채셨겠지만, 함수에 매개변수를 사용했습니다. 필수는 아니지만 이 상황에서는 가능합니다. 이 매개변수에는 구성요소에 대한 링크가 포함된 "컨텍스트" 필드가 포함되어 있습니다.
또한 이 방법에는 특정 유형의 형식에 대한 제한이 없습니다. 예를 들어 CONTEXT/MonoBehaviour/를 경로로 지정하고 항목을 이 클래스의 모든 하위 항목에 한 번에 연결할 수 있습니다. Component에서 상속되는 모든 유형(Component 유형 자체 포함)을 지정할 수 있습니다.
"CONTEXT/" 외에도 다음 "특수 경로"를 사용할 수도 있습니다.
- "Assets/" - 자산 창의 컨텍스트 메뉴에 항목을 추가합니다.
- "Assets/Create/" - 자산이 있는 창의 "Create" 버튼 메뉴에 항목을 추가합니다.
GUI 방법
팝업 호출을 위해 존재하는 GUI 메소드를 무시할 수는 없습니다. 그러나 표준 메소드 중에서 이는 값 검색인 경우가 많습니다.
따라서 팝업은 실제로 다음과 같습니다.
- EditorGUILayout.Popup - 문자열 팝업. 작동 방식: 배열에서 행의 인덱스 찾기
- EditorGUILayout.IntPopup - 숫자 팝업. 작동 방식: 배열에서 숫자의 인덱스를 알아내고 숫자를 "문자열 표시"(텍스트 표시, 숫자 암시)로 대체할 수 있습니다.
- EditorGUILayout.EnumPopup - 열거형 팝업입니다. 작동 방식: 열거자의 현재 값을 나타내고 새 값을 얻습니다.
- EditorGUILayout.MaskField - 여러 값을 선택하여 마스크로 구성할 수 있는 팝업입니다(일반적으로 레이어/태그가 선택되는 방식입니다).
"문자열"을 표시하는 경우에는 위에서 설명한 구분 기호, 슬래시 등의 문자열 형식 지정 규칙이 다시 적용됩니다.
이에 대해 특별히 언급할 내용은 없으며 모든 내용은 문서에서 찾을 수 있습니다.
드롭다운으로 표시
다음 방법은 별도의 창을 사용하는 것입니다. 그러나 그와 같은 방식이 아니라 ShowAsDropDown 메서드를 통해 "특별한 방법"으로 호출합니다. 이 창의 비결은 바깥쪽을 클릭하면 닫히는 것입니다.
성공적인 작업 시 결과가 "돌아가기" 위해 일반적으로 대리자가 생성되고 이는 상위에서 처리됩니다. 그러나 이것은 그렇지 않다 유일한 방법값을 반환합니다. 펑터를 사용할 수도 있고 특정 상황에 대한 코드를 어리석게 작성할 수도 있습니다. 그러나 다시 말하지만 보편성을 위해 다음을 보장하는 대리자를 사용하는 것이 좋습니다. 콜백.
예:
공용 클래스 AutocompleteMenu: EditorWindow( public int visibleCount = 6; public static void Open(Vector2 position, OnControlEventDelegate onControlEvent, params GUIContent 변형)( var window = CreateInstance
따라서 OnGUI 메소드가 그러한 창에 추가되어 우리의 필요에 맞게 완전히 사용자 정의된 팝업이 그려집니다.
"ShowAsDropDown" 메서드는 절대 좌표로 나타나는 위치를 표시하도록 요청합니다. 마우스 클릭 위치에 이러한 팝업을 표시해야 하는 경우가 종종 있습니다. 이러한 마우스 좌표는 다음 명령을 사용하여 얻을 수 있습니다.
Var screenMousePos = GUIUtility.GUIToScreenPoint(Event.current.mousePosition);
이 방법의 요점은 팝업이 어떤 유형이든 될 수 있다는 것입니다. 예를 들어 아이콘을 선택하거나 원하는 대로 창을 디자인할 수 있습니다.
팝업창
이 메서드는 본질적으로 이전 메서드를 자동화하여 OnOpen/OnClose 메서드와 준비된 Show 메서드를 제공합니다.
요점은 PopupWindow 클래스에서 클래스를 상속받는 것입니다. 그러나 기억하세요. 이 구현은 역값을 반환한다는 측면에서 제한됩니다. 특정 목적으로 팝업을 사용하는 경우 이 창이 적합하지만 범용 팝업의 경우 ShowAsDropDown을 사용하는 것이 좋습니다.
디스플레이팝업메뉴
다음 방법은 모든 표준 방법에서 사용되는 일반 팝업입니다. 사실, 이는 제가 조금 더 위에서 설명한 GUI 방법 작업의 "루트"에 있습니다.
이 메서드는 콜백에 대리자를 사용합니다.
메서드 호출 시 솔트(Salt), 호출할 때 메서드에 대한 참조를 지정합니다. 대리자 없이 절 호출을 메서드에 패키징하려면 ala 클래스를 만들어야 합니다.
공개 클래스 PopupCallback( 공개 정적 PopupCallback 인스턴스; 공개 int controlId; 공개 bool 변경; 공개 위임 void SetValueDelegate(객체 데이터); 공개 정적 void Init(int controlId)( 인스턴스 = 새 PopupCallback( controlId = controlId); ) 공개 정적 bool (int controlId) ( return instance.w(x => x.change) && instance.controlId == controlId; ) 공용 객체 obj; public static EditorUtility.SelectMenuItemFunction SetValueStandart(int controlId) ( Init(controlId); return instance._SetValue ; ) 공개 정적 SetValueDelegate SetValue(int controlId) ( Init(controlId); 반환 인스턴스._SetValue; ) 공개 void _SetValue(객체 userData, 문자열 옵션, int 선택됨) ( 변경 = true; obj = 선택됨; ) 공개 void _SetValue(객체 데이터) ( 변경 = true; obj = 데이터; ) 공개 정적 객체 GetValue() ( var 결과 = 인스턴스.obj; 인스턴스 = null; 반환 결과; ) 공개 정적 T GetValue
이 클래스에는 팝업 데이터를 조작하는 데 필요한 메소드가 포함되어 있습니다. 간단히 말해서, GUI 코드에서 컨트롤의 ID를 설정한 다음 다음을 호출해야 합니다. EditorUtility.DisplayPopupMenu. 이 방법에서는 대리자 대신 방법을 대체합니다. PopupCallback.SetValueStandart. 그런 다음 PopupCallback의 인스턴스 ID가 귀하의 ID와 동일한지 확인합니다(이것은 이미 콜백을 포착하는 코드입니다). 긍정적인 경우에는 인스턴스에서 데이터를 가져옵니다.
완전히 명확하지는 않지만 이것이 바로 Unity가 그러한 메소드를 형성하기 위해 수행하는 작업입니다.
그건 그렇고, 우리 웹 사이트에는 이 접근 방식을 사용하는 예가 있습니다. 그러니 원한다면 담배를 피울 수도 있어요
일반메뉴
이 목록은 GenericMenu 클래스로 완성됩니다. 구문은 매우 간단합니다. 이 클래스의 인스턴스를 만들고 메서드를 통해 새 항목을 추가합니다. 완료되면 ShowAsContext 를 호출합니다. 각 항목에는 고유한 콜백이 있으므로 명령이 포함된 메뉴를 더 쉽게 만들 수 있습니다.
포커스가 없는 맞춤 팝업
별도의 주제는 포커스 없이 팝업을 만드는 것입니다. 사실 현재로서는 이 작업을 직접 수행할 수 없습니다. 그럼에도 불구하고 이러한 팝업이 필요하며 중요한 점은 내장된 그림이 있는 사용자 정의 도구 설명이며 텍스트 입력을 방해하지 않고 마무리 및 기타 옵션을 제공하는 "스마트 라인"입니다. 새 창이 동작에 영향을 주어서는 안 되는 경우입니다.
그런 목적으로 나는 목발을 옮겼습니다. 이를 사용하려면 다음 코드 전체를 복사하십시오.
PopupWindowWithoutFocus.cs
시스템 사용; System.Collections.Generic을 사용합니다. System.Reflection 사용; UnityEditor 사용; UnityEngine 사용; 내부 클래스 PopupWindowWithoutFocus: EditorWindow ( // 필드 private Rect m_ActivatorRect; private const float m_BorderWidth = 1f; private Vector2 m_LastWantedSize = Vector2.zero; private PopupLocationHelper.PopupLocation m_LocationPriorityOrder; private PopupWindowContent m_WindowContent; private static Rect s_La stActivatorRect; private 정적 이중 s_LastClosedTime; 비공개 static PopupWindowWithoutFocus s_PopupWindowWithoutFocus; // 메소드 private PopupWindowWithoutFocus() ( hideFlags = HideFlags.DontSave; ) private void FitWindowToContent() ( Vector2 windowSize = m_WindowContent.GetWindowSize(); if (m_LastWantedSize != windowSize) ( m_La stWantedSize = 창 크기; Vector2 minSize = windowSize + new Vector2(2f * m_BorderWidth, 2f * m_BorderWidth); Rect ect = PopupLocationHelper.GetDropDownRect(m_ActivatorRect, minSize, minSize, null, m_LocationPriorityOrder); var baseType = GetType().BaseType; if (baseType != null) ( var fieldInfo = baseType.GetField("m_Pos", BindingFlags.Instance | BindingFlags.NonPublic); if (fieldInfo != null) fieldInfo.SetValue(this, ret); ) var 벡터3 = new Vector2(직사각형 너비, 사각형 높이); 최대 크기 = 벡터3; base.minSize = 벡터3; ) ) 공개 정적 무효 Hide() ( if (s_PopupWindowWithoutFocus != null) ( s_PopupWindowWithoutFocus.Close(); ) ) 비공개 무효 Init(Rect activatorRect, PopupWindowContent windowContent, PopupLocationHelper.PopupLocation locationPriorityOrder) ( m_WindowContent = windowContent; m_ WindowCon 텐트.GetType( ) .getProperty ( "editorWindow") .getSetMethod (true) .invoke (m_windowContent, new Object (this)); m_ActivatorRect = GuitoscreenRect (ActivatorRect); GetWindowSize( ) + new Vector2(m_BorderWidth * 2f, m_BorderWidth * 2f); position = PopupLocationHelper.GetDropDownRect(m_ActivatorRect, minSize, minSize, null, m_LocationPriorityOrder); ShowPopup(); Repaint(); ) 내부 정적 Rect GUIToScreenRect(Rect guiRect) ( Vector2 벡터 = GUIUtility.GUIToScreenPoint(new Vector2(guiRect.x, guiRect.y)); guiRect.x = vector.x; guiRect.y = vector.y; return guiRect; ) public static bool IsVisible() ( return (s_PopupWindowWithoutFocus != null); ) private void OnDisable() ( s_LastClosedTime = EditorApplication.timeSinceStartup; if (m_WindowContent ! = null) ( m_WindowContent.OnClose(); ) s_PopupWindowWithoutFocus = null; ) private void OnEnable() ( s_PopupWindowWithoutFocus = this; ) private static bool OnGlobalMouseOrKeyEvent(EventType type, KeyCode keyCode, Vector2 mousePosition) ( if (s_PopupWindowWithoutFocus != null) ( if ((type == EventType.KeyDown) && (keyCode == KeyCode.Escape)) ( s_PopupWindowWithoutFocus.Close(); return true; ) if ((type == EventType.MouseDown) && !s_PopupWindowWithoutFocus.position.Contains(mousePosition)) ( s_PopupWindowWithoutFocus.Close(); return true; ) ) return false; ) 내부 void OnGUI() ( FitWindowToContent(); var ect = new Rect(m_BorderWidth, m_BorderWidth, position.width - (2f * m_BorderWidth), position.height - (2f * m_BorderWidth)); m_WindowContent.OnGUI(ect) ; GUI.Label(new Rect(0f, 0f, position.width, position.height), GUIContent.none, "grey_border"); ) private static bool ShouldShowWindow(Rect activatorRect) ( if (((EditorApplication.timeSinceStartup - s_LastClosedTime)< 0.2) && !(activatorRect != s_LastActivatorRect))
{
return false;
}
s_LastActivatorRect = activatorRect;
return true;
}
public static void Show(Rect activatorRect, PopupWindowContent windowContent)
{
Show(activatorRect, windowContent, null);
}
internal static void Show(Rect activatorRect, PopupWindowContent windowContent, PopupLocationHelper.PopupLocation locationPriorityOrder)
{
if (ShouldShowWindow(activatorRect))
{
if (s_PopupWindowWithoutFocus == null)
{
s_PopupWindowWithoutFocus = CreateInstance
다음 코드를 예로 사용하세요.
UnityEditor 사용; UnityEngine 사용; 공개 클래스 예제UnfocusWindow: PopupWindowContent ( 공개 정적 void Open() ( Open(new Vector2()); ) 공개 정적 void Open(Vector2 위치) ( var locationPriorityOrder = new PopupLocationHelper.PopupLocation; locationPriorityOrder = PopupLocationHelper.PopupLocation.Left; locationPriorityOrder = PopupLocationHelper .PopupLocation.Right; PopupWindowWithoutFocus.Show(new Rect(position.x, position.y, 6, 6), new exampleUnfocusWindow(), locationPriorityOrder); ) 공개 재정의 Vector2 GetWindowSize() ( return new Vector2(200, 200); ) 공개 재정의 void OnOpen() ( base.OnOpen(); ) 공개 재정의 void OnClose() ( base.OnClose(); ) 공개 재정의 void OnGUI(Rect ect) ( GUI.Box(ect, "Hello world"); ) )
메뉴 표시줄 사용자 정의
위의 방법 중 일부는 문자열에 대한 고급 형식을 지원합니다.
빈 문자열을 항목으로 지정하면 대신 구분 기호(세로 막대)가 사용됩니다.
슬래시 / 로 문자열 부분을 구분하면 계층 구조가 있는 하위 항목이 생성됩니다.
메뉴 항목을 호출하는 키 조합을 설정할 수도 있습니다. 이렇게 하려면 경로 뒤에 공백으로 구분된 일련의 문자를 작성해야 합니다.
다음은 특수 문자로 예약되어 있습니다.
% - Ctrl 키
# - 옮기다
& - 대체
_ - 특수 문자 없음
따라서 메뉴 항목을 G 키에 할당하려면 다음과 같이 작성해야 합니다.
포인트를 결합하여 "ctrl+shift" 조합을 구현할 수도 있습니다.
당연히 모든 키가 문자로 표시될 수는 없으므로 일부 키의 경우 특수 키워드 LEFT, RIGHT, UP, DOWN, F1 .. F12, HOME, END, PGUP, PGDN이 사용됩니다.
키보드 단축키를 입력하기 전에 공백을 포함해야 한다는 점을 이해하는 것이 중요합니다.
이 기능에 대한 자세한 내용은 공식 문서에서 확인할 수 있습니다(비록 제가 모든 내용을 직접 나열한 것 같습니다).
UnityEditor를 사용한 준비; UnityEngine 사용; 공용 클래스 팝업: EditorWindow( public static void Open(Vector2 크기)( var window = CreateInstance
이 튜토리얼에서는 간단한 메뉴 생성 예제를 사용하여 Unity에서 GUI가 어떻게 작동하는지에 대한 기본적인 이해를 모든 사람에게 제공합니다. 이것은 Unity Java Script(또는 일반적으로 모든 스크립트)에 대한 기본 지식 외에 특별한 기술이 필요하지 않은 매우 간단한 수업입니다. 시작하자.
새로운 게임 장면을 만드는 것부터 시작해 보겠습니다. 이 장면을 "레벨_1"이라고 부르겠습니다. 메뉴 씬을 "Menu"라고 부르겠습니다. 앞으로는 명령을 사용하여 이러한 장면 사이를 이동할 수 있습니다.
Application.LoadLevel(장면 번호);
그러나 나중에 이 명령으로 돌아갈 것입니다. 이 시점에서 우리는 "Scene Number"에 더 관심을 가져야 합니다. 빌드 설정 창(파일)을 사용하여 장면 번호를 입력하고 볼 수 있습니다.
%D0%92%20%D1%8D%D1%82%D0%BE%D0%BC%20%D1%83%D1%80%D0%BE%D0%BA%D0%B5%20%D1%8F %20%D1%80%D0%B0%D1%81%D1%81%D0%BA%D0%B0%D0%B6%D1%83,%20%D0%BA%D0%B0%D0%BA% 20%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%B0%D0%B5%D1%82%20GUI%20%D0%B2%20Unity,%20%D0%B8 %20%D0%BF%D0%BE%20%D1%85%D0%BE%D0%B4%D1%83%20%D0%B4%D0%B5%D0%BB%D0%B0%20%D0 %B1%D1%83%D0%B4%D1%83%20%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D0%B2%D0%B0%D1%82%D1 %8C%20%D0%BF%D1%80%D0%BE%D1%81%D1%82%D0%BE%D0%B5%20%D0%BC%D0%B5%D0%BD%D1%8E .%20%D0%AD%D1%82%D0%BE%D1%82%20%D1%83%D1%80%D0%BE%D0%BA%20%D0%B4%D0%BB%D1% 8F%20%D0%BD%D0%BE%D0%B2%D0%B8%D1%87%D0%BA%D0%BE%D0%B2,%20%D0%BD%D0%BE%20%D0 %B6%D0%B5%D0%BB%D0%B0%D1%82%D0%B5%D0%BB%D1%8C%D0%BD%D0%BE%20%D1%81%20%D0%BD %D0%B0%D1%87%D0%B0%D0%BB%D1%8C%D0%BD%D1%8B%D0%BC%20%D0%B7%D0%BD%D0%B0%D0%BD %D0%B8%D0%B5%D0%BC%20Unity%20Java%20Script,%20%D0%B4%D0%B0%20%D0%B8%D0%BB%D0%B8%20%D0%B2% D0%BE%D0%BE%D0%B1%D1%89%D0%B5%20%D0%BA%D0%B0%D0%BA%D0%BE%D0%B3%D0%BE%20%D0% BB%D0%B8%D0%B1%D0%BE%20%D1%81%D0%BA%D1%80%D0%B8%D0%BF%D1%82%D0%B0.%20%D0%9D %D1%83%20%D1%87%D1%82%D0%BE,%20%D0%BD%D0%B0%D1%87%D0%BD%D1%91%D0%BC.
%D0%90%20%D0%BD%D0%B0%D1%87%D0%B0%D1%82%D1%8C%20%D1%8F%20%D0%B4%D1%83%D0%BC %D0%B0%D1%8E%20%D1%81%20%D1%82%D0%BE%D0%B3%D0%BE,%20%D1%87%D1%82%D0%BE%20% D0%BC%D1%8B%20%D1%81%D0%BE%D0%B7%D0%B4%D0%B0%D0%B4%D0%B8%D0%BC%20%D0%BD%D0% BE%D0%B2%D1%83%D1%8E%20%D1%81%D1%86%D0%B5%D0%BD%D1%83.%20%D0%9D%D0%B0%D0%B7 %D0%BE%D0%B2%D1%91%D0%BC%20%D1%81%D1%86%D0%B5%D0%BD%D1%83%20%D1%81%20%D0%B8 %D0%B3%D1%80%D0%BE%D0%B9%20" level_1="">
Application.LoadLevel(장면 번호);
조금 후에 팀으로 돌아오겠습니다. 이제 우리는 "Scene Number"에 더 관심이 있습니다. 그것을 설치하는 방법? 어디서 볼 수 있나요?
빌드 설정 창(파일/빌드 설정...)에서 숫자를 설정하고 볼 수 있습니다.
/img/origs/647.jpg" alt="사진" />!}
빨간색 원으로 표시된 숫자입니다.
장면을 추가하려면 현재 추가(녹색 원)를 클릭해야 합니다. 어떤 장면에 있든 그런 장면이 추가됩니다. 게임을 시작하면 장면 “0”, 즉 “메뉴”가 실행됩니다.
장면이 설정되었습니다. 이제 "menu.js"와 같은 스크립트를 만들어 카메라에 연결해 보겠습니다. 또한 우리는 이 스크립트를 거의 독점적으로 사용하여 작업할 것입니다. 준비가 완료되었습니다.
가장 간단한 GUI 객체는 Window입니다. 스크립트의 명령을 더 자세히 살펴보겠습니다.
GUI.Box(Rect(A, B, C, D), "텍스트");
A는 화면 왼쪽 가장자리에서 창 왼쪽 가장자리까지의 픽셀 수입니다.
B는 화면 상단 가장자리에서 창 상단 가장자리까지의 픽셀 수입니다.
C - 창 너비.
D - 창 높이.
그런 다음 창 이름을 따릅니다. 이 비문은 창 위에 표시됩니다.
첫 번째 창을 만들어 보겠습니다.
함수 OnGUI() ( GUI.Box(Rect(5,5,200,200), "텍스트"); )
빨간색 원으로 표시된 숫자입니다.
장면을 추가하려면 녹색 원으로 표시된 AddCurrent 버튼을 클릭해야 합니다. 당신이 현재 위치한 바로 그 장면이 추가됩니다. 게임 프로그램을 시작하면 "메뉴"를 의미하는 장면 "0"이 시작됩니다.
이제 장면이 생성되었습니다. 다음으로 스크립트를 생성해야 합니다. 이를 "menu.js"라고 부르고 카메라에 걸어두겠습니다. 추가 작업은 주로 이 스크립트를 사용하여 수행됩니다. 필요한 준비가 완료되었습니다.
가장 간단한 GUI 객체는 Window입니다. 스크립트의 명령은 다음과 같습니다.
GUI.Box(Rect(A, B, C, D), "텍스트");
여기서 A는 화면 왼쪽 가장자리에서 창 왼쪽 가장자리까지의 픽셀 수입니다.
B - 동일, 화면 오른쪽 가장자리부터 창 위쪽 가장자리까지,
C는 창의 너비,
D는 창의 높이,
다음은 창의 이름입니다. 비문은 창 상단에 표시됩니다.
이제 첫 번째 창을 만들어 보겠습니다. 장면에서 다음과 같이 보일 것입니다. 
화면의 다른 모서리에 부착하거나 중앙에 배치하려면 다음 명령이 있습니다.
화면.폭 화면.높이
첫 번째 명령은 화면 너비에 따른 픽셀 수를 반환하고, 두 번째 명령은 화면 높이에 따른 픽셀 수를 반환합니다. 이 두 명령을 사용하면 창을 화면의 다른 부분에 배치할 수 있으며 다른 화면 해상도로 그대로 유지됩니다.
함수 OnGUI () ( GUI.Box (Rect (5,5,50,50), "1"); //왼쪽 위 모서리 GUI.Box (Rect (Screen.width - 55,5,50,50), " 2"); // GUI.Box의 오른쪽 위 모서리 (Rect (5,Screen.height - 55,50,50), "3"); // GUI.Box의 왼쪽 아래 모서리 (Rect (Screen.width - 55, Screen.height - 55,50,50), "4"); // 오른쪽 하단 GUI.Box (Rect (Screen.width/2 - 25,Screen.height/2 - 25,50,50), "5"); // 중앙 )
이제 화면 해상도에 따라 창을 더 크게 또는 더 작게 만들 수 있습니다.
많은 Unity 사용자에 따르면 가장 많이 사용되는 GUI 개체는 버튼입니다. 버튼에 대한 스크립트를 작성하는 것은 매우 간단합니다.
만약 (여기) ( )
이제 게임 장면으로 보낼 수 있는 버튼이 생성됩니다.
함수 OnGUI () ( GUI.Box (Rect (Screen.width/2 - 100,Screen.height/2 - 100,200,180), "주 메뉴"); // 창 if (GUI.Button (Rect (Screen.width/2) - 90,Screen.height/2 - 80,180,30), "Play")) ( // 버튼 Application.LoadLevel (1); // 레벨 로드 Level_1 ) )
“재생” 버튼을 클릭하면 첫 번째 가격(레벨_1)이 로드됩니다.
또한 몇 가지 기능 버튼과 "종료" 버튼을 더 만드는 것도 가치가 있습니다.
함수 OnGUI () ( GUI.Box (Rect (Screen.width/2 - 100, Screen.height/2 - 100,200,180), "주 메뉴"); if (GUI.Button (Rect (Screen.width/2 - 90, Screen.height/2 - 80,180,30), "재생")) ( Application.LoadLevel (1); ) if (GUI.Button (Rect (Screen.width/2 - 90,Screen.height/2 - 40,180,30 ), "설정")) ( ) if (GUI.Button (Rect (Screen.width/2 - 90,Screen.height/2 - 0,180,30), "도움말")) ( ) if (GUI.Button (Rect (Screen.width/2 - 90,Screen.height/2 + 40,180,30), "종료")) ( Application.Quit(); // 종료 ) )
명령 "Application.Quit();" 편집기에서는 작동하지 않습니다.
설정 및 지원을 위해 추가 창을 설정하는 것도 좋습니다. 이를 생성하기 위해 "window"와 같은 변수를 사용합니다.
창을 몇 개 더 추가해 보겠습니다.
Var 창 = 0; function OnGUI () ( if (window == 0) ( // 이제 window = 0 일 때 메인 메뉴가 활성화됩니다. GUI.Box (Rect (Screen.width/2 - 100,Screen.height/2 - 100,200,180), "Main 메뉴" ); if (GUI.Button (Rect (Screen.width/2 - 90,Screen.height/2 - 80,180,30), "재생")) ( Application.LoadLevel (1); ) if (GUI.Button (Rect (Screen.width/2 - 90,Screen.height/2 - 40,180,30), "설정")) ( window = 1; // "설정" 창 활성화) if (GUI.Button (Rect (화면 .width/ 2 - 90,Screen.height/2 - 0,180,30), "도움말")) ( window = 2; //"도움말" 창 활성화) if (GUI.Button (Rect (Screen.width/2 - 90,Screen .height/2 + 40,180,30), "Exit")) ( Application.Quit(); ) ) if (window == 1) ( // GUI.Box 설정 (Rect (Screen.width/ 2 - 100, Screen.height/2 - 100,200,180), "설정"); if (GUI.Button (Rect (Screen.width/2 - 90,Screen.height/2 + 40,180,30), "뒤로")) ( window = 0 ; ) ) if (window == 2) ( // 도움말 GUI.Box (Rect (Screen.width/2 - 100,Screen.height/2 - 100,200,180), "Help"); if (GUI .Button (Rect (Screen.width/2 - 90,Screen.height/2 + 40,180,30), "뒤로")) ( window = 0; ) ) )
키보드 버튼을 컨트롤에 연결:
If (GUI.Button (Rect (Screen.width/2 - 90,Screen.height/2 + 40,180,30), "Back") || Input.GetKey ("escape")) ( window = 0; )
메뉴를 만들 때 텍스트는 매우 중요합니다. 텍스트 스크립트는 윈도우 스크립트와 전혀 다르지 않다고 말할 수 있습니다. "도움말" 섹션에는 다음 항목을 작성해야 합니다.
If (window == 2) ( GUI.Box (Rect (Screen.width/2 - 100, Screen.height/2 - 100,200,180), "도움말"); GUI.Label (Rect (Screen.width/2 - 100, Screen.height/2 - 80,200,140), "여기에 도움말이 있어야 합니다."); // text if (GUI.Button (Rect (Screen.width/2 - 90,Screen.height/2 + 40,180,30), "뒤로 " ) || Input.GetKey("escape")) ( window = 0; ) )
이제 도움말 섹션에 텍스트가 있습니다.
이 텍스트에 스타일을 적용할 수도 있습니다. 이렇게 하려면 생성해야 합니다.
변수 스타일: GUIStyle;
소위 카메라 검사기에는 다음이 나타납니다. 
자주 사용되는 옵션은 빨간색으로 강조 표시됩니다.
1 - 텍스트 색상.
2 - 글꼴.
3 - 앵커.
크기 4.
5 - 굵게, 기울임꼴, 굵은 기울임꼴.
필요한 옵션을 선택하면 스타일이 텍스트에 첨부됩니다.
토글 스위치는 버튼과 매우 유사하지만, 두 가지 위치(켜기 또는 끄기)에 있을 수 있습니다. 다음과 같이 작성되었습니다.
변수 토글: 부울 = false; 토글 = GUI.Toggle(Rect(20, 20, 100, 20), 토글, "토글");
토글 스위치는 true와 false라는 두 가지 값만 가질 수 있는 부울 유형의 변수에 사용됩니다.
"설정" 섹션에 추가 창을 추가합니다.
If (창 == 1) ( GUI.Box (Rect (Screen.width/2 - 100,Screen.height/2 - 100,200,180), "설정"); 토글 = GUI.Toggle (Rect (Screen.width/2 - 90,Screen.height/2 - 70, 80, 20), 전환, "Toggle"); // 토글 if (toggle == true) ( GUI.Box (Rect (Screen.width/2 - 130, Screen.height/2 - 100,20,20), ""); // 왼쪽 창 GUI.Box (Rect (Screen.width/2 + 130,Screen.height/2 - 100,20,20), "" ); // 오른쪽 창 ) if (GUI.Button (Rect (Screen.width/2 - 90,Screen.height/2 + 40,180,30), "Back") || Input.GetKey ("escape")) ( 창 = 0; ) )
토글 스위치를 켜면 메인 창 옆에 두 개의 추가 스위치가 나타납니다. 
슬라이더와 같은 유용한 기능에 대해 알아 보는 것도 가치가 있습니다. 슬라이더를 사용하여 볼륨 등을 변경할 수 있습니다. 쓰기 측면에서 슬라이더는 토글 스위치와 실질적으로 다르지 않으며 단지 다른 변수인 float, int를 사용합니다.
변수 사이더: int = 0; sider = GUI.HorizontalSlider(Rect(25, 25, 100, 30), sider, A, B);
여기서 A는 슬라이더가 왼쪽에 있을 때 변수의 값을 나타내는 숫자입니다.
B - 슬라이더가 오른쪽에 있을 때 변수 값을 나타내는 숫자입니다.
슬라이더를 사용하여 이전 스크립트를 현대화해 보겠습니다.
If (창 == 1) ( GUI.Box (Rect (Screen.width/2 - 100,Screen.height/2 - 100,200,180), "설정"); 토글 = GUI.Toggle (Rect (Screen.width/2 - 90,Screen.height/2 - 70, 180, 20), 전환, "토글"); if (toggle == true) ( sider = GUI.HorizontalSlider (Rect (Screen.width/2 - 90,Screen. height/ 2 - 40, 180, 20), sider, 0, 160); //GUI.Box 슬라이더(Rect (Screen.width/2 - 130,Screen.height/2 - 100,20,20 + sider), "" ); GUI.Box (Rect (Screen.width/2 + 110,Screen.height/2 - 100,20,20 + sider), ""); ) if (GUI.Button (Rect (Screen.width/ 2 - 90,Screen.height/2 + 40,180,30), "뒤로") || Input.GetKey ("escape")) ( window = 0; ) )
이제 슬라이더를 사용하여 창 크기를 쉽게 변경할 수 있습니다.
또한 수직 슬라이더를 추가하여 수평일 뿐만 아니라 수평일 수도 있음을 보여드리겠습니다.
If (창 == 1) ( GUI.Box (Rect (Screen.width/2 - 100,Screen.height/2 - 100,200,180), "설정"); 토글 = GUI.Toggle (Rect (Screen.width/2 - 90,Screen.height/2 - 70, 180, 20), 전환, "토글"); if (toggle == true) ( sider = GUI.HorizontalSlider (Rect (Screen.width/2 - 90,Screen. height/ 2 - 40, 180, 20), sider, 0, 160); //horizontal sider1 = GUI.VerticalSlider(Rect (Screen.width/2 - 90,Screen.height/2 - 20, 20, 50), sider1, 0, 160); //세로 GUI.Box (Rect (Screen.width/2 - 130 - sider,Screen.height/2 - 100,20 + sider,20 + sider1), ""); GUI.Box (Rect (Screen.width/2 + 110,Screen.height/2 - 100,20 + sider,20 + sider1), ""); ) if (GUI.Button (Rect (Screen.width/2 - 90,Screen .height /2 + 40,180,30), "뒤로") || Input.GetKey ("escape")) ( window = 0; ) )
필요한 모든 변수를 추가하는 것을 기억해야 합니까?
Var 토글 = false; //스위치 전환 var sider: int = 0; // 수평 슬라이더 var sider1: int = 0; // 수직 슬라이더
화면 해상도
화면 해상도는 다음 명령을 사용하여 변경됩니다.
Screen.SetResolution(A, B, C);
여기서 A는 너비입니다.
B - 키.
C - 전체 화면 또는 창 모드.
예:
Screen.SetResolution(1280, 1024, true);
사운드 볼륨
볼륨을 변경하려면 다음 명령을 사용하십시오.
Audio.volume = 변수(바람직하게는 부동);
변수 자체는 슬라이더를 사용하여 변경됩니다.
이제 초등학생도 Unity가 개발자와 게이머 모두의 변덕을 만족시킬 수 있는 놀라운 게임 엔진이라는 것을 알고 있습니다. Unity의 유일한 아킬레스건은 오래된 GUI(Graphical User Interface)였습니다.
기존 GUI 시스템은 특별한 OnGUI 기능을 사용하여 모든 GUI 코드를 작성해야 하는 매우 정교한 시스템이었습니다. 시각적 지향적인 성격과는 대조적으로 프로그래머 지향적인 접근 방식이었습니다. 단일성. 코드 자체가 느리고 비효율적이었고, 인터페이스를 구성하는 데 많은 시간과 노력이 필요했습니다. 물론 이 문제를 해결하기 위해 노력한 NGUI와 같은 타사 도구가 있었지만 이를 사용하려면 n번째 금액을 포기해야 했습니다.
다행스럽게도 Unity Technologies의 개발자들은 대중의 의견을 듣고 2년 간의 개발 끝에 Unity 4.6에서 완전히 새로운 GUI를 제공했습니다. 이 튜토리얼에서는 이에 대해 살펴보겠습니다. 세 가지 강의를 통해 Unity 2D에서 Jetpack Joyride 스타일로 게임을 조각하는 이전 강의 시리즈에서 만든 게임을 위한 새로운 그래픽 인터페이스를 만들 것입니다.
논평:우리가 예로 고려하고있는 게임에 대한 교훈도 보지 못했다면 아무런 문제가 없지만 공부하는 것이 좋습니다. 이 경우 간단한 메뉴가 있는 장면의 프로젝트뿐만 아니라 기능적인 게임을 손에 넣을 수 있습니다. 또한 이동하는 방법도 배우게 됩니다. 오래된 시스템 GUI를 새로운 것으로 바꾸는 것은 정말 귀중한 경험입니다.
이 가이드를 진행하면서 클래식 메인 메뉴 장면을 게임에 추가하겠습니다.
그러나 단순히 몇 개의 버튼을 추가하는 것만으로는 새로운 시스템을 마스터하는 데 충분하지 않습니다. 그래픽 인터페이스. 게임에 풍미를 더하고 사용자를 끌어들이려면
- 버튼에 애니메이션 적용
- 팝업 설정 창을 만듭니다.
- 텍스트, 슬라이더, 패널, 마스크 등과 같은 최신 GUI 컨트롤을 사용하세요.
메뉴가 있는 장면 만들기 단일성
위 링크에서 로켓마우스 프로젝트를 다운로드하고 압축을 푼다. 메뉴를 사용하여 Unity에서 프로젝트 열기 파일\프로젝트 열기…. 그리고 폴더를 열어보세요 자산\장면프로젝트 폴더에서 RocketMouse.unity 장면을 두 번 클릭하여 엽니다. 단일성.
프로젝트가 로드된 후에는 이 게임 제작에 대한 교훈을 공부했는지 여부에 따라 눈물에 익숙한 플롯을 볼 수 있으며 그 반대의 경우도 마찬가지입니다. 완전히 익숙하지 않습니다. 어쨌든 침착하게 계속 읽으십시오.)
새로운 빈 장면을 만들어 보겠습니다. 이렇게 하려면 메뉴에서 선택하세요. 파일\새 장면. 바로 장면을 저장하는 것이 좋으니 대화상자를 열어보세요 장면 저장(장면 저장) 메뉴에서 선택 파일\장면 저장. 그런 다음 입력 메뉴씬장면 이름으로 폴더에 저장 장면 RocketMouse 무대 옆에 있습니다.
동일한 폴더에 두 개의 장면이 있는지 확인하려면 프로젝트 브라우저를 살펴보세요.
메모:프로젝트 열기, 장면 생성, 저장 또는 자산 추가 시 질문이 있는 경우 Rocket Mouse 강의를 참조하세요. 여기에서 자세한 지침을 찾을 수 있으며, 대개 다음과 같은 형식으로 제공됩니다. 애니메이션 GIF본 글에 포함되지 않은 이미지입니다.
이미지 및 글꼴 가져오기
자산이 포함된 아카이브의 압축을 풉니다. 여기에는 메뉴와 글꼴이라는 두 개의 폴더가 있습니다. 두 폴더를 모두 선택한 다음 프로젝트 브라우저의 Assets 폴더로 드래그합니다. Unity가 파일을 처리하는 동안 기다리면 아래 이미지와 같이 프로젝트 브라우저에 폴더가 표시됩니다.
축하합니다. 이제 준비 작업을 완료했으며 이제 내부에서 첫 번째 UI 요소를 만들 수 있습니다. 새로운 시스템유니티 GUI.
첫 번째 UI 요소 추가
우리가 다룰 첫 번째 요소는 메뉴 장면의 배경 이미지입니다. 상단 메뉴에서 Unity를 선택하세요. 게임오브젝트/UI/이미지장면에 이름이 있는 객체를 추가하려면 영상. 탭에서 확인해야 합니다 계층(Hierarchy) 어린아이처럼 캔버스. 모든 요소는 캔버스에 배치되어야 합니다. 아직 가지고 있지 않다면 Unity가 이를 처리해 드립니다. 탭의 이미지를 확인하려면 장면(장면), 선택 영상계층 구조에서 설정하고 위치 X그리고 위치 Y 0과 같습니다.
메모:나는 이미 "Pos X가 무엇인가요?", "Rect Transform이 무엇이며 좋은 기존 Transform 컴포넌트는 어디에 있습니까?"와 같은 질문을 들을 수 있습니다. 이 매뉴얼에서는 귀하가 관심 있는 모든 정보를 찾을 수 있습니다. 모든 것을 더 쉽게 이해할 수 있도록 장면에 참여하는 다른 개체의 맥락에서 각 측면을 고려할 것입니다. 이렇게 하면 서로 다른 설정에서 어떻게 작동하는지 확인할 수 있습니다. 다음과 같은 속성 너비, 키또는 위치 X어떤 설명도 필요하지 않습니다.
배경의 올바른 위치와 크기를 설정했습니다. 이제 Hierarchy 탭을 자세히 살펴보면 장면에 세 개의 새로운 개체가 표시됩니다. 여기 있습니다:
- 영상
- 캔버스
- 이벤트 시스템
영상- 스프라이트의 텍스처를 표시하고 다양한 옵션을 구성할 수 있는 비대화형 컨트롤입니다. 예를 들어, 이미지 위에 페인트를 칠하거나 그 위에 재료를 배치할 수 있습니다. 표시되는 정도까지 제어할 수도 있습니다. 예를 들어 시계 방향 모양 애니메이션을 적용합니다. 캔버스- 사용자 인터페이스의 모든 요소에 대한 루트 개체입니다. 앞서 언급했듯이 첫 번째 UI 요소를 추가하면 자동으로 생성됩니다. 캔버스에는 인터페이스 표시 방법을 결정하는 많은 속성이 있으며, 이 자습서에서 그 중 일부를 살펴보겠습니다. 이벤트 시스템 Unity 장면의 입력, 레이캐스팅 및 이벤트 처리를 담당합니다. 이는 인터페이스가 작동하는 데 필요하므로 이 요소는 자동으로 추가됩니다.
배경 이미지 설정
이미지로 돌아가자. 가장 먼저 할 일은 이름을 바꾸는 것입니다. 영상 V img_배경. 이제 열어보자 메뉴프로젝트 검색창에서 이미지를 찾아보세요 메뉴_배경. 필드로 드래그해 봅시다 소스 이미지인스펙터의 이미지 구성요소 img_배경.
이제 기본 흰색 이미지 대신 배경 이미지가 생겼습니다. 그러나 좋게 말하면 이미지가 너무 작고 화면 비율이 잘못되어 보기에 좋지 않습니다. 문제를 해결하려면 Inspector에서 기본 크기 설정 버튼을 찾아 클릭하여 크기를 1024 x 577로 설정하세요.
그러나 여전히 몇 가지 문제가 있습니다.
- 실제 이미지 크기는 1136 x 640으로 4인치 iPhone의 전체 화면을 덮기에 충분하지만 그 이상은 아닙니다.
- 장면 모드에서 창을 축소하면 캔버스(흰색 직사각형)가 이미지의 일부만 덮고 있는 것을 볼 수 있습니다. 게임 모드로 전환하면 배경 이미지의 일부만 표시됩니다. 마치 카메라가 피사체에 너무 가까워서 모든 것을 표시할 수 없는 것처럼 보입니다.
메모: 오리지널 게임 3.5인치 및 4인치 디스플레이를 갖춘 iPhone용으로 개발되었습니다. 이것이 게임의 그래픽이 1136 x 640 및 960 x 640 해상도를 지원하는 이유입니다. 하지만 곧 UI가 어떻게 적응할 수 있는지 알게 될 것입니다. 다양한 해상도화면.
첫 번째 문제는 다음 섹션에서 편집할 기본 설정을 가져온 결과입니다. 두 번째 문제는 다음을 사용하여 해결하겠습니다. 캔버스 스케일러.
이미지 가져오기 설정
프로젝트에는 약간 더 큰 이미지가 필요하지만 Unity가 이미지를 축소하지 않도록 해야 합니다. 프로젝트 브라우저에서 메뉴 폴더를 열고 menu_Background 이미지를 선택하세요. Inspector에서 Default 탭을 선택하고 Max Size( 최대 크기) 2048과 동일하고 적용 버튼을 클릭합니다.
이제 선택하세요 img_배경계층 구조에서 기본 크기 설정 버튼을 다시 클릭합니다. 너비와 높이는 각각 1136과 640의 올바른 값으로 변경되어야 합니다.
당신이 보여요? 정말 고치기 쉬웠어요. 계속하세요!
캔버스 스케일러 사용
이제 표시 방법을 구성할 차례입니다. 우선 게임이 표시되는 방식을 말해야 합니다. 이 단계에서- 전혀 버그가 아닙니다. Unity 관점에서 게임 모드 보기는 550x310으로 설정되어 있으므로 게임 창에 맞는 이미지 부분만 볼 수 있습니다.
장치에서 게임을 실행하거나 게임 탭을 배경 이미지에 맞게 확장하면 게임 전체가 표시됩니다.
대부분의 경우 Unity 설정을 적용할 수 있지만 기본 동작을 변경해야 하는 경우도 있습니다. 예를 들어, 당신이 작은 모니터, 이는 대상 가젯의 해상도와 일치하지 않습니다. 또한 많은 게임은 하나의 해상도만 지원합니다.
디자이너는 이 해상도를 사용하여 개체의 크기, 배치 및 기타 세부 사항을 지정합니다. 따라서 게임을 개발할 때 추가적인 계산 없이 디자이너가 지정한 특성을 그대로 활용해야 버그 없이 게임이 구현될 수 있다.
다행히도 특별한 구성 요소가 구출됩니다. 이 구성 요소를 캔버스 스케일러라고 합니다. 안에 이전 버전 Unity는 참조 해상도라고 불리며 캔버스에 수동으로 추가해야 했습니다. 출현과 함께 유니티 4.6이 구성 요소는 이제 모든 캔버스에 연결됩니다. Hierarchy에서 Canvas를 선택한 다음 Inspector에 Canvas Scalar 구성 요소가 표시되어야 합니다.
Canvas Scalar에는 세 가지 작동 모드가 있습니다.
일정한 픽셀 크기: 모든 UI 요소는 화면 크기에 관계없이 픽셀 크기를 유지합니다. 이것이 기본 모드입니다.
화면 크기에 따른 확장: UI 요소의 크기와 위치는 지정된 해상도에 따라 결정됩니다. 현재 해상도가 더 높으면 캔버스는 설정된 해상도를 유지하여 새 설정과 일치하도록 요소를 확대합니다.
일정한 물리적 크기: 사용자 인터페이스 요소의 위치는 밀리미터, 포인트 등의 물리적 단위로 지정됩니다. 이렇게 하려면 화면의 인치당 도트 수를 정확히 알아야 합니다.
구성 요소를 추가한 후 해상도를 1136 x 640으로 설정합니다. 또한 모든 일치 너비 또는 일치 높이를 오른쪽으로 이동하거나 간단히 입력합니다. 1 입력 필드에서.
이러한 변경 사항이 적용되면 작은 게임 모드 창에서도 전체 배경 이미지를 볼 수 있습니다.
게임 탭의 해상도를 변경하여 예를 들어 3~5인치 iPhone에서 게임이 다른 해상도에서 어떻게 보이는지 확인하세요. 아주 멋진. 보시다시피 여전히 괜찮아 보입니다!
이제 장면 탭으로 전환하면 장면 탭의 크기를 조정할 때 캔버스 크기가 변경되지 않는 것을 볼 수 있습니다. 화면의 측면 가장자리가 깔끔하게 잘리고 중앙 부분이 완전히 보입니다. 이는 너비 및 높이 조정을 1(높이 조정)로 설정한 결과입니다. 이는 대상 가젯의 해상도와 완벽하게 일치합니다.
잠깐만요, 그런데 버튼은 어떻습니까? 화면의 왼쪽이나 오른쪽 가장자리에 매우 가까이 있으면 어떻게 되나요? 잘라내거나 숨겨서는 안 됩니다. 다행스럽게도, 단일성이 초보자 실수를 해결하는 데 도움이 되는 기능이 있습니다. 곧 당신은 그것에 대해 알게 될 것입니다.
제목이 있는 이미지 추가
버튼 및 기타 UI 컨트롤로 이동하기 전에 헤더 이미지라는 이미지를 하나 더 추가합니다. 이 연습에서는 전체 화면이 아닌 이미지를 사용하여 새로운 GUI 시스템의 다른 중요한 개념을 보여줍니다.
Scene 창을 열고 메뉴에서 GameObject\UI\Image를 선택하세요. 이렇게 하나가 더 추가됩니다 흰색 이미지무대로. 결과는 다음과 같습니다.
메모:이미지가 너무 멀리 떨어져 있으면 Pos X 및 Pos Y 속성을 0으로 설정하면 됩니다.
이제 다음 단계에 따라 이 흰색 직사각형을 실제 이미지로 바꿔보세요.
- 계층 구조에서 이미지를 선택하고 img_header로 변경합니다.
- 폴더 열기 메뉴프로젝트 브라우저에서 이미지를 찾으세요. 헤더_라벨.
- 이미지를 상자로 드래그하세요. 소스 이미지조사관.
- 누르다 기본 크기 설정인스펙터에서.
보시다시피 아주 간단했습니다. 이제 구성 요소를 사용하여 위치 지정 작업을 해야 합니다. 직사각형 변환.
직사각형 변환, 앵커, 피벗 및 사용자)
이전에 Unity를 사용해 본 적이 있다면 아마도 Transform 컴포넌트에 익숙할 것입니다. 그렇지 않다면 괜찮습니다. 이는 단순히 장면에서 개체를 배치하고, 회전하고, 크기를 조정할 수 있는 도구입니다. 다음과 같이 보입니다.
Hierarchy에서 GameObject 유형을 선택하면 Transform 구성 요소가 표시됩니다.
그러나 img_header와 같은 UI 요소를 선택하면 다음과 같은 다른 구성 요소가 표시됩니다. 직사각형 변환.
보시다시피 Transform과 Rect Transform은 약간 다르지만 Rect Transform은 앵커 설정에 따라 게임의 모양을 변경할 수 있습니다. 예를 들어 다음과 같을 수 있습니다.
메모: Pos X, Pos Y, Width 및 Height 대신 왼쪽, 위쪽, 오른쪽 및 아래쪽으로 작업합니다.
Rect Transform의 모양을 극적으로 바꾸는 앵커 설정에 대해 궁금하십니까? 다음 섹션에서 원하는 답변을 찾을 수 있습니다.
앵커
앵커 설정은 상위 요소를 기준으로 UI 요소의 위치와 크기를 제어하는 간단하고 우아하며 강력한 방법입니다. 이는 상위 요소의 크기를 조정할 때 특히 유용합니다.
앵커를 설정할 때 부모의 여러 위치(일반적으로 Rect라고 하는 UI 요소의 각 모서리에 하나씩)를 정의합니다. 상위 요소의 크기가 조정되면 요소는 기준점과 일정한 거리를 유지하려고 시도하여 상위 요소와 함께 이동하거나 크기가 조정됩니다.
다르게 살펴보려면 앵커 사전 설정, 그냥 선택하세요 img_header계층구조에서 필드 바로 위의 직사각형을 클릭합니다. 앵커 Rect Transform 구성 요소에서.
그 후에는 다양한 앵커 사전 설정(즉, 앵커에 대한 가장 일반적인 설정)을 볼 수 있지만 선택은 이에 국한되지 않으며 필요한 경우 어떤 방식으로든 변경할 수 있습니다. UI 요소에 대해 서로 다른 수평 및 수직 동작을 선택할 수도 있습니다.
배경이 비활성화된 다음 이미지를 보면 캔버스 크기가 조금 더 잘 조정되는 것을 볼 수 있습니다.
보시다시피 앵커 설정은 UI 요소가 다양한 화면 해상도에 적응하는 방식에 영향을 미칩니다.
다른 설정을 자세히 살펴보고 작동 방식을 확인하고 싶을 것입니다. 하지만 먼저 적어도 다음 장을 읽어보세요. 이는 앵커가 무엇인지 더 잘 이해하는 데 도움이 되며 결과적으로 실험이 더 성공적이 될 것입니다.
앵커 조작기
이 단계에서 앵커는 4개의 삼각형을 사용합니다. 구성했을 때의 모습입니다 상단 중앙:
맞춤형 앵커
앵커를 어떤 위치로든 수동으로 이동할 수 있습니다. 왜냐하면... 앵커 사전 설정은 편리한 방식으로 변경할 수 있습니다.
메모:다른 인터페이스 요소가 앵커 아이콘과 겹쳐서 선택할 수 없는 경우가 있습니다. 이 경우 앵커 사전 설정(예: 화면 왼쪽)을 클릭하여 앵커 아이콘을 불러오면 됩니다. 앵커 아이콘이 화면의 지정된 부분에 나타나면 원하는 대로 이동할 수 있습니다.
메모:보시다시피 캔버스 크기를 조정하면 이미지가 오른쪽으로 이동합니다. 그러나 이 움직임은 캔버스의 오른쪽 가장자리에 비해 미미합니다. 이는 앵커가 캔버스 너비의 25%로 설정되어 있기 때문입니다.
앵커 분리
UI 요소가 수평, 수직 또는 양방향으로 늘어나도록 앵커를 분할할 수 있습니다.
메모:캔버스 가장자리 중 하나를 잡고 화면을 가로질러 이동하면 당신은 달성하지 못할 것입니다크기를 변경합니다. 단어 찾기 시사커서 옆에 있는 커서를 사용하여 캔버스를 축소하거나 확대하고 인터페이스 요소가 다양한 화면 해상도에 어떻게 적응하는지 확인하세요.
Rect Transform은 현재 앵커 설정에 따라 달라집니다.
앵커 설정에 따라 Rect Transform은 인터페이스 요소의 크기와 위치를 다양한 방식으로 제어합니다.
스트레칭 없이 어떤 지점에 앵커를 놓으면 다음과 같은 속성이 표시됩니다. 위치 X, 위치 Y, 너비그리고 키.
그러나 Pos X 및 Width 대신 요소가 늘어나는 방식으로 앵커를 설정하면 속성이 나타납니다. 왼쪽그리고 오른쪽(수평 늘이기) Pos Y 및 Height 대신 - 맨 위그리고 맨 아래(수평 스트레칭 포함).
이 스크린샷에는 앵커가 있습니다. img_header위에 서다 중간 스트레치. 이는 이미지가 캔버스 중앙에 세로로 남아 있고 가로로 늘어남을 의미합니다.
X 위치와 너비는 부모의 크기에 따라 달라지므로 부모의 왼쪽 및 오른쪽 가장자리에서 패딩을 설정합니다.
지점
고려되지 않은 Rect Transform 컴포넌트의 마지막 속성은 Pivot입니다. 받침점은 모든 변환이 수행되는 지점입니다. 즉, 요소의 위치를 정의하여 해당 지점을 결정합니다. UI 요소를 회전하면 이 지점을 중심으로 회전합니다.
받침점은 정규화된 좌표로 표시됩니다. 즉, 너비와 높이 모두 값이 0에서 1로 변경됩니다. (0,0) - 왼쪽 하단 모서리 및 (1,1) - 오른쪽 상단 모서리.
메모: UI 요소 외부에 앵커 포인트를 설정할 수도 있습니다. 이 경우 (0,0) - (1,1) 값을 벗어나게 됩니다. 이것은 당신에게 유용할 수 있습니다. 예를 들어 장면의 특정 지점을 중심으로 객체를 회전시키려는 경우를 가정해 보겠습니다. 피벗점을 변경하려면 다음과 같이 피벗/중심 버튼이 피벗으로 설정되어 있는지 확인해야 합니다.
Inspector의 Rect Transform 구성 요소에서 Anchor Point를 변경하거나 다음을 사용할 수 있습니다. 사각형 도구.
Pos X 및 Pos Y 값이 동일하지만 장면에서 위치가 다른 UI 요소를 보여주는 다음 두 이미지를 살펴보세요.
첫 번째 이미지에서는 Pivot Point가 UI 요소의 중심인 기본값(0.5, 0.5)으로 설정되어 있습니다. 요소의 위치를 (0, 0)으로 설정하고 앵커를 top-left 로 설정합니다.
메모: UI 요소의 위치는 앵커를 기준으로 한다는 점을 이해하는 것이 중요합니다. 그렇기 때문에 위치 (0,0)은 캔버스의 왼쪽 상단에 설정된 앵커로부터의 거리를 의미합니다.
이제 두 번째 이미지를 살펴보겠습니다. 보시다시피 위치는 변하지 않고 (0,0)인데 Anchor Point가 왼쪽 하단(0,0)으로 설정되어 있어서 이미지의 중앙이 아닌 하단에 있는 것을 볼 수 있습니다. 는 이제 캔버스의 왼쪽 상단에 있습니다.
정적 이미지에서는 지지점이 회전과 크기에 어떻게 영향을 미치는지 설명하기 어렵습니다. 따라서 다음은 몇 가지 애니메이션입니다.
요소가 자유롭게 이동할 수 있음을 나타내는 파란색 원으로 피벗점을 중심으로 이미지가 어떻게 회전하는지 확인하세요.
메모:버튼을 누르세요 대체받침점 주위를 확장할 때.
보시다시피 Fulcrum은 UI 요소가 변경되는 방식에도 영향을 미칩니다.
메모:이해해야 할 또 다른 중요한 점은 UI 요소의 크기를 조정한다는 것입니다. 크기 조정에 영향을 미치지 않습니다.. 하지만 너비와 높이 또는 위쪽, 오른쪽, 왼쪽, 아래쪽 매개변수를 변경할 수 있습니다. 이러한 속성은 약간 다릅니다. 예를 들어, 크기는 음수일 수 없지만 크기는 음수일 수 있습니다. 음수 값을 사용하면 요소를 뒤집을 수 있습니다. 대부분의 경우 UI 요소의 크기를 조정하기만 하면 됩니다.
제목과 함께 이미지 게시
윽! 이제 Rect Transform, Anchors 및 Pivot에 대해 알아야 할 모든 것을 알았습니다. 저를 믿으십시오. 언젠가 여러분은 이 연습을 자세히 읽어 준 것에 대해 감사하게 될 것입니다. 왜냐하면 이러한 개념을 얼마나 잘 이해하느냐에 따라 게임의 인터페이스가 결정되기 때문입니다. 이제 메뉴 장면을 만드는 데 집중할 수 있습니다. 나머지 섹션은 눈 깜짝할 사이에 날아갈 것입니다. 이 모든 조작은 가난한 작은 사람들을 완전히 지쳤습니다. img_header. 이제 그것을 올바른 위치에 놓고 그대로 두어야 할 때입니다.
계속하기 전에 img_Background를 다시 활성화하여(비활성화된 경우) 캔버스 테두리를 확인하세요. 그런 다음 Hierarchy에서 img_header를 선택하고 Inspector에서 해당 속성을 다음과 같이 설정합니다.
- Fulcrum을 사용하는 동안 크기를 변경했을 수 있으므로 기본 크기 설정을 클릭하여 크기를 재설정하십시오.
- 앵커를 top-center 로 설정합니다.
- Pos X를 0으로 설정하고 Pos Y를 -100으로 설정합니다.
장면 탭에 다음과 같은 내용이 표시됩니다.
엄청난. 이제 제목은 그대로 두십시오.)
시작 버튼 추가
이제 앱에 제목과 함께 멋진 배경이 생겼으므로 몇 가지 버튼을 추가할 차례입니다. 메뉴에서 GameObject\UI\Button을 선택합니다. 그러면 장면에 Button 개체가 추가되고 계층 구조에 표시됩니다. 계층 구조에서 확장하면 버튼에 텍스트 레이블이 포함되어 있는 것을 볼 수 있습니다. 이에 대해서는 나중에 배우게 됩니다.
인스펙터의 버튼을 살펴보면 친숙한 이미지(스크립트) 구성 요소를 볼 수 있습니다. 배경과 머리글 표시를 추가하는 데 사용했던 때를 기억하시나요? 그 밖에도 버튼 컴포넌트(스크립트)가 있습니다. 즉, 버튼은 버튼의 텍스트가 포함된 스크립트가 첨부된 이미지일 뿐입니다.
메모:캡션 텍스트는 선택 사항이므로 텍스트가 직접 그려진 버튼 이미지가 있는 경우 텍스트 요소를 제거할 수 있습니다. 이 단원에서 이 작업을 여러 번 수행하게 됩니다.
버튼 위치
이제 버튼의 위치 지정 및 크기 조정을 살펴보겠습니다. 다음과 같이하세요:
- Hierarchy에서 Button을 선택하고 다음으로 변경합니다. btn_start.
- 화면 크기가 변경될 때 버튼이 수평으로 늘어나도록 하려면 앵커 앵커를 하단 스트레치로 설정합니다.
- 왼쪽과 오른쪽 값을 동일하게 설정 400 .
- 높이를 80으로 설정합니다.
- 위치 Y를 300으로 설정합니다.
이제 중첩된 텍스트 요소를 선택하고 텍스트를 입력하세요. 게임을 시작하다(게임을 시작하다). 버튼 텍스트를 더 크게 만들려면 글꼴 크기를 32로 변경하세요.
Scene 창에 표시되는 내용은 다음과 같습니다.
이제 버튼이 생겼고, 우리가 해야 할 일은 버튼에 약간의 마법을 가하는 것 뿐입니다. 모습. 이를 위해 배경 이미지를 설정하고 멋진 글꼴을 사용하겠습니다.
9슬라이스 크기 조정
Button의 이미지는 Image의 이미지와 동일한 방식으로 설정됩니다. 결국, 그들은 실질적으로 동일한 구성 요소입니다. 그러나 크기가 거의 조정되지 않는 이미지와 달리 버튼은 종종 가장 다른 크기. 물론 버튼 크기별로 배경 이미지를 생성할 수도 있지만 왜 귀중한 공간을 낭비할까요? 대신에 우리는 다음과 같은 기술을 사용할 것입니다. 9슬라이스 크기 조정, 필요한 크기에 따라 크기가 조정된 하나의 작은 이미지로 작업할 수 있습니다. 아니요, 마술이 아닙니다. 이미지를 사용하기 전에 마법의 분수에 던질 필요는 없습니다.] 이 방법을 사용하면 이미지의 크기가 균등하게 조정되지 않기 때문에 가능합니다. 9개의 영역이 있으며 각 영역은 서로 다르게 확장됩니다.
이렇게 하면 이미지가 어떤 규모에서도 잘 보일 것입니다.
버튼용 이미지 준비
자른 이미지를 사용하려면 먼저 9개 영역을 설정해야 합니다. 이렇게 하려면 프로젝트 브라우저에서 메뉴 폴더를 열고 btn_9slice_normal 이미지를 선택하세요. 가져오기 설정 검사기에서 형식을 트루컬러로 설정한 다음 스프라이트 편집기 버튼을 클릭하여 스프라이트 편집기 탭을 엽니다.
메모:형식을 트루컬러로 설정하는 것은 선택 사항이며 이미지 크기 조정에는 적용되지 않습니다. 하지만 실제로는 원치 않는 이미지 압축 사례가 있었기 때문에 이를 무시하지 않는 것이 낫다는 결론에 도달했습니다. 자신의 이미지를 사용하고 있고 압축된 형식에서 문제가 없어 보인다면 이 문제를 걱정할 필요가 없습니다.
안에 스프라이트 편집기테두리 값을 L:14, R:14, B:16, T:16으로 설정한 다음 적용을 클릭하세요!
다양한 버튼 상태에 사용할 btn_9slice_highlighted 및 btn_9slice_pressed 이미지에 대해 반복합니다.
버튼 이미지 사용자 정의
모든 이미지가 준비되면 Inspector의 해당 필드로 이미지를 드래그하기만 하면 됩니다. 선택하다 btn_start계층 구조에서 다음을 수행합니다.
- 바꾸다 이미지 유형~에 슬라이스이미지 구성 요소에서.
- 속성 바꾸기 이행 Button 구성 요소에서 스프라이트스왑.
- 견인 btn_9slice_normal V 소스 이미지이미지 구성 요소에서.
- 견인 btn_9slice_highlighted V 강조된 스프라이트버튼 구성 요소에서.
- 견인 btn_9slice_pressed V 프레스드 스프라이트버튼 구성 요소에서.
메모:오류가 발생하는 경우: 이미지 테두리 없음, 이는 위에서 설명한 대로 가져오기 설정의 스프라이트 편집기에서 테두리를 설정하는 것을 잊어버렸다는 의미입니다.
장면을 실행하고 버튼을 살펴보기 전에 내장된 텍스트 레이블의 글꼴을 변경하는 데 몇 초가 더 소요됩니다. 그러면 버튼이 정말 멋져 보일 것입니다.
버튼의 사용자 정의 글꼴 설정
사용 맞춤 글꼴용이하게. 폴더를 기억해두세요 글꼴, 프로젝트에 추가하셨나요? 이제 이를 활용하고 이러한 글꼴 중 하나를 사용할 차례입니다. 계층 구조에서 btn_start에 포함된 텍스트 레이블을 선택합니다. 다음으로, 프로젝트 브라우저에서 Fonts 폴더를 열고 TitanOne-Regular 글꼴을 글꼴 필드로 드래그하세요. 또한 색상을 흰색으로 설정합니다.
이제 장면을 실행하고 새로운 메가 버튼을 즐겨보세요.
버튼 투명도 제거
버튼을 통해 배경을 볼 수 있다는 것을 알고 계셨나요? 목표에 따라 이는 좋을 수도 있고 나쁠 수도 있습니다. 투명도를 없애면 이 게임의 메인 메뉴가 더 좋을 것 같습니다.
메모:기본적으로 투명도가 추가된 것 같은데, 게임 인터페이스가 화면 상단에 표시되어 플레이어의 시야를 가리는 경우가 많기 때문입니다.
투명도를 제거하는 데 몇 초 밖에 걸리지 않습니다. Hierarchy에서 btn_start를 선택하고 Image 구성 요소 내부의 Color 속성을 두 번 클릭합니다. 열리는 색상 선택기 대화 상자에서 A(알파)를 255로 설정하고 색상 선택기를 닫습니다.
이제 그는 훨씬 좋아 보입니다!
설정 버튼 추가
다음 부분으로 넘어가기 전에 해야 할 일이 몇 가지 남아 있으며 그 중 하나는 설정 버튼을 추가하는 것입니다. 버튼의 크기와 위치를 알고 있으면 이미 이 작업을 직접 수행할 수 있습니다.
메모:가장 쉬운 방법은 버튼을 복제한 다음 필요한 속성을 조정하는 것입니다. 하지만 여기서는 배우기 때문에 처음부터 버튼을 만들어 보십시오.
설정 버튼의 속성은 다음과 같습니다.
- 이름: btn_설정
- 직사각형 변환: 왼쪽과 오른쪽이 동일합니다. 450 , 키 - 70 및 위치 Y - 180
- 텍스트: 설정
전혀 성공하지 못하면 다음 단계를 따르십시오.
설정 버튼을 추가한 후 장면 탭에 표시되는 내용은 다음과 같습니다.
이제 우리가 해야 할 일은 Start Game 버튼을 클릭하고 두 번째 장면(게임 자체)을 시작하는 것뿐입니다.
빌드 모드에 장면 추가
장면을 시작하기 전에 최종 버전에 포함될 수 있도록 프로젝트 설정의 빌드 중인 장면 목록에 해당 장면을 추가해야 합니다. 이렇게 하려면 파일\빌드 설정...을 선택하여 빌드 설정 대화 상자를 엽니다. 그런 다음 프로젝트 브라우저에서 Scenes 폴더를 열고 먼저 MenuScene을 드래그한 다음 RocketMouse 장면을 Scenes in Build 목록으로 드래그합니다.
메모:순서가 중요합니다. 이것을 따라 가라!
그런 다음 빌드 설정 창을 닫습니다.
UIManager 생성
버튼에 대한 이벤트 핸들러를 추가할 때 버튼을 클릭할 때 호출될 메서드를 지정해야 합니다. 이는 개체를 사용할 수 없으므로 스크립트에 개체를 첨부해야 함을 의미합니다. 정적 메소드. 빈 것을 생성하세요 게임 개체그리고 스크립트를 첨부하세요. 이 스크립트에는 MenuScene의 UI 요소에 의해 호출되는 모든 메서드가 포함됩니다. 메뉴에서 GameObject\Create Blank를 선택합니다. 그런 다음 계층 구조에서 GameObject를 선택하고 이름을 UIManager로 바꿉니다. 그런 다음 Inspector에서 Add Component를 클릭하고 New Script를 선택합니다. UIManagerScript라고 부르세요. CSharp 언어가 설치되어 있는지 확인하고 만들기 및 추가를 클릭하세요. Hierarchy 및 Inspector에서 볼 수 있는 내용은 다음과 같습니다.
더블클릭하세요 UIManagerScript인스펙터에서 MonoDevelop의 스크립트를 엽니다. 스크립트가 로드되면 Start 및 Update 메서드를 제거하고 다음과 같이 StartGame 메서드를 추가합니다.
공개 무효 StartGame() ( Application.LoadLevel("RocketMouse"); )
파일을 저장하고 MonoDevelop에서 생성하여 오류가 없는지 확인하세요. 이렇게 하려면 MonoDevelop 메뉴에서 Build\Build All을 선택합니다.
플레이어가 버튼을 클릭할 때 StartGame 메서드 호출
Unity로 돌아가서 다음을 수행합니다.
- Hierarchy에서 btn_start를 선택하고 Inspector 탭을 통해 On Click (Button) 목록으로 스크롤합니다.
- 새로운 요소를 추가하려면 + 버튼을 클릭하세요.
- 그런 다음 Hierarchy의 UIManager를 목록에 추가된 항목으로 드래그합니다.
- 드롭다운 목록을 클릭하여 기능을 선택하세요. 현재는 No Function 으로 설정되어 있습니다.
- 열리는 메뉴에서 UIManagerScript\StartGame()을 선택합니다.
장면을 실행하고 버튼을 클릭하세요. 게임을 시작하다게임 장면을 시작합니다.
무엇 향후 계획?
그래서 사용자 인터페이스를 만들고, 버튼 이미지를 추가하고, 버튼을 누를 때 게임을 시작하는 코드도 작성했습니다! 이것이 많은 게임의 인터페이스가 작동하는 방식입니다. 너도 그게 뭔지 배웠지 많이 Rect Transform, Anchors, Pivot 및 기타 유용한 기능입니다. 이제 작동 방식을 알았으므로 이러한 요소를 사용하여 프로젝트 속도를 크게 높일 수 있습니다. 완성된 프로젝트를 다운로드할 수 있습니다. 튜토리얼의 다음 부분에서는 UI 요소에 애니메이션을 적용하고, 대화 상자를 만들고, 슬라이더 및 토글과 같은 컨트롤을 사용하는 방법을 배우며, 튜토리얼이 끝나면 작업 메뉴가 있는 장면을 보게 됩니다! 긴장을 풀고 바쁘게 지내세요
