IMGUI 레이아웃 모드

고정 레이아웃 대 자동 레이아웃

IMGUI 시스템을 사용할 때 UI를 정렬하고 구성하는 데 사용할 수 있는 두 가지 모드인 고정 레이아웃과 자동 레이아웃이 있습니다. 지금까지 이 가이드에 제공된 모든 IMGUI 예시는 고정 레이아웃을 사용했습니다. 자동 레이아웃을 사용하려면 제어 함수를 호출할 때 GUI 대신 GUILayout 을 작성합니다. 꼭 하나의 레이아웃 모드만 사용할 필요가 없으며 동일한 OnGUI() 함수에서 두 모드를 동시에 사용할 수 있습니다.

고정 레이아웃은 사전 설계된 작업 인터페이스가 있는 경우 사용하는 것이 좋습니다. 자동 레이아웃은 전면에 필요한 요소의 수를 모르거나 각 컨트롤의 위치를 직접 지정하고 싶지 않은 경우에 사용하는 것이 좋습니다. 예를 들어 게임 저장 파일을 기반으로 여러 개의 버튼을 생성하는 경우 그려질 버튼의 수를 정확히 알 수 없습니다. 이 경우 자동 레이아웃이 더 적절할 수 있습니다. 이는 게임의 디자인과 인터페이스 표현 방식에 따라 달라집니다.

자동 레이아웃을 사용하는 경우 다음과 같이 두 가지 중요한 차이점이 있습니다.

• GUI 대신 GUILayout 이 사용됩니다.
• 자동 레이아웃 컨트롤에는 Rect() 함수가 필요하지 않습니다.

/* Two key differences when using Automatic Layout */


// JavaScript
function OnGUI () {
    // Fixed Layout
    GUI.Button (Rect (25,25,100,30), "I am a Fixed Layout Button");

    // Automatic Layout
    GUILayout.Button ("I am an Automatic Layout Button");
}


// C#
using UnityEngine;
using System.Collections;

public class GUITest : MonoBehaviour {
    
    void OnGUI () {
        // Fixed Layout
        GUI.Button (new Rect (25,25,100,30), "I am a Fixed Layout Button");
    
        // Automatic Layout
        GUILayout.Button ("I am an Automatic Layout Button");
    }

}

컨트롤 정렬

사용하는 레이아웃 모드에 따라 컨트롤의 위치와 그룹화 방법을 제어하기 위한 다양한 후크가 있습니다. 고정 레이아웃에서는 서로 다른 컨트롤을 그룹 에 넣을 수 있습니다. 자동 레이아웃에서는 서로 다른 컨트롤을 영역, 가로 그룹, 세로 그룹 에 넣을 수 있습니다.

고정 레이아웃 - 그룹

그룹은 고정 레이아웃 모드에서 사용할 수 있는 규칙입니다. 이를 통해 여러 컨트롤이 포함된 화면 영역을 정의할 수 있습니다. GUI.BeginGroup() 및 GUI.EndGroup() 함수를 사용하여 그룹 내에 있는 컨트롤을 정의할 수 있습니다. 그룹 내 모든 컨트롤은 화면의 왼쪽 상단 모서리 대신 그룹의 왼쪽 상단 모서리에 위치합니다. 이렇게 하면 런타임 시 그룹의 위치를 변경하는 경우 그룹 내 모든 컨트롤의 상대적인 위치가 유지됩니다.

예를 들어 여러 컨트롤을 스크린 중앙에 쉽게 배치할 수 있습니다.

/* Center multiple Controls on the screen using Groups */


// JavaScript
function OnGUI () {
    // Make a group on the center of the screen
    GUI.BeginGroup (Rect (Screen.width / 2 - 50, Screen.height / 2 - 50, 100, 100));
    // All rectangles are now adjusted to the group. (0,0) is the topleft corner of the group.
    
    // We'll make a box so you can see where the group is on-screen.
    GUI.Box (Rect (0,0,100,100), "Group is here");
    GUI.Button (Rect (10,40,80,30), "Click me");
    
    // End the group we started above. This is very important to remember!
    GUI.EndGroup ();
}


// C#
using UnityEngine;
using System.Collections;

public class GUITest : MonoBehaviour {
    
    void OnGUI () {
        // Make a group on the center of the screen
        GUI.BeginGroup (new Rect (Screen.width / 2 - 50, Screen.height / 2 - 50, 100, 100));
        // All rectangles are now adjusted to the group. (0,0) is the topleft corner of the group.
    
        // We'll make a box so you can see where the group is on-screen.
        GUI.Box (new Rect (0,0,100,100), "Group is here");
        GUI.Button (new Rect (10,40,80,30), "Click me");
    
        // End the group we started above. This is very important to remember!
        GUI.EndGroup ();
    }

}

서로 내부에 여러 그룹을 중첩할 수도 있습니다. 이렇게 하면 각 그룹의 콘텐츠가 부모 공간에 클리핑됩니다.

/* Using multiple Groups to clip the displayed Contents */


// JavaScript
var bgImage : Texture2D; // background image that is 256 x 32
var fgImage : Texture2D; // foreground image that is 256 x 32
var playerEnergy = 1.0; // a float between 0.0 and 1.0

function OnGUI () {
    // Create one Group to contain both images
    // Adjust the first 2 coordinates to place it somewhere else on-screen
    GUI.BeginGroup (Rect (0,0,256,32));

    // Draw the background image
    GUI.Box (Rect (0,0,256,32), bgImage);
    
    // Create a second Group which will be clipped
    // We want to clip the image and not scale it, which is why we need the second Group
    GUI.BeginGroup (Rect (0,0,playerEnergy * 256, 32));

    // Draw the foreground image
    GUI.Box (Rect (0,0,256,32), fgImage);

    // End both Groups
    GUI.EndGroup ();
    GUI.EndGroup ();
}


// C#
using UnityEngine;
using System.Collections;

public class GUITest : MonoBehaviour {
    
    // background image that is 256 x 32
    public Texture2D bgImage; 
    
    // foreground image that is 256 x 32
    public Texture2D fgImage; 
    
    // a float between 0.0 and 1.0
    public float playerEnergy = 1.0f; 
    
    void OnGUI () {
        // Create one Group to contain both images
        // Adjust the first 2 coordinates to place it somewhere else on-screen
        GUI.BeginGroup (new Rect (0,0,256,32));
    
        // Draw the background image
        GUI.Box (new Rect (0,0,256,32), bgImage);
    
            // Create a second Group which will be clipped
            // We want to clip the image and not scale it, which is why we need the second Group
            GUI.BeginGroup (new Rect (0,0,playerEnergy * 256, 32));
        
            // Draw the foreground image
            GUI.Box (new Rect (0,0,256,32), fgImage);
        
            // End both Groups
            GUI.EndGroup ();
        
        GUI.EndGroup ();
    }

}

자동 레이아웃 - 영역

영역은 자동 레이아웃 모드에서만 사용됩니다. GUILayout 컨트롤을 포함하기 위해 화면의 한정된 부분을 정의하므로 고정 레이아웃 그룹과 기능적으로 유사합니다. 자동 레이아웃의 특성 때문에 거의 항상 영역을 사용할 것입니다.

자동 레이아웃 모드에서는 컨트롤 수준에서 컨트롤이 그려질 화면 영역을 정의하지 않습니다. 컨트롤은 컨트롤을 포함하는 영역의 왼쪽 상단에 자동으로 배치됩니다. 이는 화면일 수 있습니다 수동으로 배치된 영역도 생성할 수 있습니다. 영역 내 GUILayout 컨트롤은 해당 영역의 왼쪽 상단에 위치합니다.

/* A button placed in no area, and a button placed in an area halfway across the screen. */


// JavaScript
function OnGUI () {
    GUILayout.Button ("I am not inside an Area");
    GUILayout.BeginArea (Rect (Screen.width/2, Screen.height/2, 300, 300));
    GUILayout.Button ("I am completely inside an Area");
    GUILayout.EndArea ();
}


// C#
using UnityEngine;
using System.Collections;

public class GUITest : MonoBehaviour {
    
    void OnGUI () {
        GUILayout.Button ("I am not inside an Area");
        GUILayout.BeginArea (new Rect (Screen.width/2, Screen.height/2, 300, 300));
        GUILayout.Button ("I am completely inside an Area");
        GUILayout.EndArea ();
    }

}

영역 내부에서 버튼과 박스 등의 시각적 요소가 있는 컨트롤은 영역의 전체 길이까지 늘어납니다.

자동 레이아웃 - 가로 및 세로 그룹

자동 레이아웃을 사용하면 컨트롤이 기본적으로 위에서 아래로 하나씩 표시됩니다. 컨트롤의 위치와 배열 방식을 세밀하게 제어해야 하는 경우가 많습니다. 자동 레이아웃 모드를 사용하는 경우 가로 및 세로 그룹을 선택할 수 있습니다.

다른 레이아웃 컨트롤과 마찬가지로 별도의 함수를 호출하여 해당 그룹을 시작하거나 종료합니다. 특정 함수는 GUILayout.BeginHorizontal(), GUILayout.EndHorizontal(), GUILayout.BeginVertical(), GUILayout.EndVertical() 입니다.

가로 그룹 내의 모든 컨트롤은 항상 가로로 배치됩니다. 세로 그룹 내의 모든 컨트롤은 항상 세로로 배치됩니다. 서로 안에 그룹을 중첩하기 전까지는 간단해 보입니다. 이를 통해 상상 가능한 모든 구성으로 원하는 수의 컨트롤을 배열할 수 있습니다.

/* Using nested Horizontal and Vertical Groups */


// JavaScript
var sliderValue = 1.0;
var maxSliderValue = 10.0;

function OnGUI()
{
    // Wrap everything in the designated GUI Area
    GUILayout.BeginArea (Rect (0,0,200,60));

    // Begin the singular Horizontal Group
    GUILayout.BeginHorizontal();

    // Place a Button normally
    if (GUILayout.RepeatButton ("Increase max\nSlider Value"))
    {
        maxSliderValue += 3.0 * Time.deltaTime;
    }

    // Arrange two more Controls vertically beside the Button
    GUILayout.BeginVertical();
    GUILayout.Box("Slider Value: " + Mathf.Round(sliderValue));
    sliderValue = GUILayout.HorizontalSlider (sliderValue, 0.0, maxSliderValue);

    // End the Groups and Area
    GUILayout.EndVertical();
    GUILayout.EndHorizontal();
    GUILayout.EndArea();
}


// C#
using UnityEngine;
using System.Collections;

public class GUITest : MonoBehaviour {
    
    private float sliderValue = 1.0f;
    private float maxSliderValue = 10.0f;
    
    void OnGUI()
    {
        // Wrap everything in the designated GUI Area
        GUILayout.BeginArea (new Rect (0,0,200,60));
    
        // Begin the singular Horizontal Group
        GUILayout.BeginHorizontal();
    
        // Place a Button normally
        if (GUILayout.RepeatButton ("Increase max\nSlider Value"))
        {
            maxSliderValue += 3.0f * Time.deltaTime;
        }
    
        // Arrange two more Controls vertically beside the Button
        GUILayout.BeginVertical();
        GUILayout.Box("Slider Value: " + Mathf.Round(sliderValue));
        sliderValue = GUILayout.HorizontalSlider (sliderValue, 0.0f, maxSliderValue);
    
        // End the Groups and Area
        GUILayout.EndVertical();
        GUILayout.EndHorizontal();
        GUILayout.EndArea();
    }

}

GUILayoutOptions를 사용하여 일부 컨트롤 정의

GUILayoutOptions를 사용하여 자동 레이아웃 파라미터 일부를 오버라이드할 수 있습니다. GUILayout 컨트롤의 최종 파라미터로 옵션을 제공하여 이를 수행할 수 있습니다.

위의 영역 예시에서 버튼은 영역 너비의 100%까지 늘어납니다. 원한다면 오버라이드할 수 있습니다.

/* Using GUILayoutOptions to override Automatic Layout Control properties */


//JavaScript
function OnGUI () {
    GUILayout.BeginArea (Rect (100, 50, Screen.width-200, Screen.height-100));
    GUILayout.Button ("I am a regular Automatic Layout Button");
    GUILayout.Button ("My width has been overridden", GUILayout.Width (95));
    GUILayout.EndArea ();
}


// C#
using UnityEngine;
using System.Collections;

public class GUITest : MonoBehaviour {
        
    void OnGUI () {
        GUILayout.BeginArea (new Rect (100, 50, Screen.width-200, Screen.height-100));
        GUILayout.Button ("I am a regular Automatic Layout Button");
        GUILayout.Button ("My width has been overridden", GUILayout.Width (95));
        GUILayout.EndArea ();
    }

}

사용할 수 있는 GUILayoutOptions 전체 목록은 GUILayoutOption 스크립팅 레퍼런스 페이지를 참조하십시오.