레이아웃 모드¶

고정 레이아웃 vs 자동 레이아웃¶

GUI를 정렬하고 조직화 하는데 사용하는 두 가지 다른 모드가 있는데, 바로 고정모드와 자동모드입니다.

지금까지, 가이드라인에서 제공 된 모든 유니티의 GUI 예제들은 고정 레이아웃을 사용했습니다.

자동 레이아웃을 사용하기 위해, 컨트롤 함수들을 호출할 때 GUI 대신 GUILayout 를 작성하십시오.

꼭 한가지 레이아웃 모드를 사용할 필요가 없고, OnGUI() 함수에서 이 두 가지 모드를 동시에 사용할 수 있습니다.

 
미리 디자인 된 인터페이스가 있을 때, 이를 작동하기 위해 고정 레이아웃을 사용하면 됩니다.

자동 레이아웃은 앞으로 얼마나 많은 요소가 필요하게 될지 모를 때나 각 컨트롤들을 직접 하나하나 배치할 위치를 설정하기를 원하지 않을 때 사용하면 됩니다.

예를 들어, 게임 파일들을 저장하기 위해 여러 버튼을 만들 때, 정확히 얼마나 많은 버튼들이 그려질 지 모를 것입니다.

이럴 경우에 자동 레이아웃은 좀 더 편하게 사용할 수 있습니다.

이는 게임이나 어떻게 인터페이스를 제공할 지에 달려있습니다.

자동레이아웃을 사용하는데 두 가지 핵심이 있습니다.

• GUI 대신 GUILayout 을 사용하십시오.
• 자동 레이아웃 컨트롤들은 Rect 함수를 요구하지 않습니다.

/* 자동 레이아웃을 사용할 때의 두 가지 차이점 */

function OnGUI()
{
    // 고정 레이아웃
    GUI.Button( Rect( 25, 25, 100, 30 ), "I am a Fixed Layout Button" );

    // 자동 레이아웃
    GUILayout.Button( "I am an Automatic Layout Button" );
}

 

컨트롤 정렬¶

어느 레이아웃 모드를 사용하는가에 따라, 어디에 컨트롤들을 배치할 지와 어떻게 함께 그룹화될지를 다르게 컨트롤 하게 됩니다.

고정 레이아웃의 경우, Groups 으로 다른 컨트롤들을 넣을 수 있습니다.

자동 레이아웃을 경우 Area, Horizontal Groups, Vertical Groups 으로 다른 컨트롤들을 넣을 수 있습니다.

고정 레이아웃 - 그룹¶

그룹은 고정레이아웃 모드에서 사용가능합니다.

그룹은 스크린 상에 여러 컨트롤들을 포함하고 있는 영역을 정의할 수 있게 해 줍니다.

GUI.BeginGroup() 과 GUI.EndGroup() 함수를 사용하여 어떤 컨트롤들이 그룹안에 있을 수 있는지 정의할 수 있습니다.

그룹 안의 모든 컨트롤들은 스크린틔 좌상단 코너 대신 그룹의 좌상단 코너를 기반으로 위치하게 됩니다.

이 방법은, 실시간으로 그룹을 재배치하면, 모든 컨트롤들과 관련된 위치들은 변화없이 그룹에 의존해 유지가 됩니다.

예를 들어, 여러 컨트롤들을 스크린의 중앙에 배치하는 방법은 매우 쉽습니다.

/* 스크린 상에서 그룹을 사용하여 여러 컨트롤들을 가운데에 배치하기 */

function OnGUI()
{
    // 스크린 가운데에 그룹을 생성합니다.
    GUI.BeginGroup( Rect( Screen.width / 2 - 50, Screen.height / 2 - 50, 100, 100 ) );
    // 모든 렉트들은 이제 그룹에 의해 조정됩니다. (0, 0) 은 그룹의 좌상단 코너입니다.

    // 박스를 만들면 스크린에 그룹화된 컨트롤들을 볼 수 있습니다.
    GUI.Box( Rect( 0, 0, 100, 100 ), "Group is here" );
    GUI.Button( Rect( 10, 40, 80, 30 ), "Click me" );

    // 위에서 시작한 그룹을 종료합니다. 이는 매우 중요하기 때문에 꼭 기억해야합니다.
    GUI.EndGroup();
}

위의 예제는 스크린 해상도에 상관없이 컨트롤들을 가운데에 위치합니다.

또한 여러 그룹들을 각각 내부에서 정렬 및 제어가 가능합니다.

이를 할 때, 각각의 그룹들은 부모의 공간에 클립된 컨텐츠들을 갖게 됩니다.

/* 멀티 그룹을 사용하여 출력되는 컨트롤들을 클립하기 */

var bgImage : Texture2D;    // 256 x 32 사이즈의 배경 이미지
var fgImage : Texture2D;    // 256 x 32 사이즈의 전경 이미지
var playerEnergy = 1.0;     // 0.0과 1.0 사이의 소수 점 수치

function OnGUI()
{
    // 두 이미지를 모두 가진 그룹을 하나 생성합니다.
    // 처음 두 개의 좌표를 수정하여 스크린 상의 아무곳에 배치합니다.
    Gui.BeginGroup( Rect( 0, 0, 256, 32 ) );

    // 배경 이미지를 그립니다.
    GUI.Box( Rect( 0, 0, 256, 32 ), bgImage );

    // 클립 될 두 번째 그룹을 생성합니다.
    // 스케일이 적용되지 않은 이미지가 클립되어야 하는 두 번째 그룹이 필요합니다.
    GUI.BeginGroup( Rect( 0, 0, playerEnergy * 256, 32 ) );

    // 전경 이미지를 그립니다.
    GUI.Box( Rect( 0, 0, 256, 32 ), fgImage );

    // 두 그룹 모두 종료합니다.
    GUI.EndGroup();
    GUI.EndGroup();
}

클립핑 동작을 생성해 그룹화할 수 있습니다.

자동 레이아웃 - 영역¶

영역은 자동 레이아웃 모드에서만 사용됩니다.

영역은 고정 레이아웃의 그룹과 기능적으로 비슷하지만, 스크린상에 GUILayout 컨트롤들을 포함한 한정된 위치를 정의합니다.

왜냐하면 자동 레이아웃의 속성상, 언제나 거의 영역을 사용할 것이기 때문입니다.

 
자동 레이아웃 모드에서는, 스크린상에 그려질 컨트롤들의 영역을 정의하지 않습니다.

컨트롤은 컨트롤들을 포함한 영역의 맨 왼쪽 상단에 자동으로 배치되기 때문입니다.

또한 수동으로 위치한 영역을 생성할 수도 있습니다.

영역안의 GUILayout 컨트롤들은 영역의 좌측 상단에 배치하게 됩니다.

/* 영역 설정이 없는 버튼 배치와 스크린 중앙에 배치되는 버튼 */

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();
}

영역 안에 보이는 버튼과 박스 요소 컨트롤들은 영역의 최대 길이로 늘어나게 된다는 것을 주의하십시오.

 

자동 레이아웃 - 수평 & 수직 그룹¶

자동 레이아웃을 사용할 때, 컨트롤들은 기본적으로 탑 다운 방식으로 연이어 나타나게 됩니다.

컨트롤이 어디에 위치할 지, 얼마나 많은 컨트롤들이 어떻게 정렬될지에 대한 미세한 제어에 대한 기회가 제공될 것입니다.

자동 레이아웃 모드를 사용하면, 수평 & 수직 그룹에 대한 옵션에서 세부 조정을 할 수 있습니다.

 
다른 레이아웃 컨트롤들 처럼, 별도의 함수를 호출하여 이런 그룹들을 시작하고 종료할 수 있습니다.

별도의 함수들은 GUILayout.BeginHorizontal(), GUILayout.EndHorizontal(), GUILayout.BeginVertical(), GUILayout.EndVertical() 이 있습니다.

 
수평 그룹 안에 있는 모든 컨트롤들은 언제나 수평으로 뻗어있게 됩니다.

수직 그룹 안에 있는 모든 컨트롤들은 언제나 수직으로 뻗어있게 됩니다.

이는 각각을 그룹화할 때 당연한 말입니다.

이는 무한한 상상가능한 구성을 정렬할 수 있게 합니다.

/* 수평과 수직 그룹 사용하기 */

var sliderValue    = 1.0;
var maxSliderValue = 10.0;

function OnGUI()
{
    // 원하는 모든 것을 GUI 영역안에 랩핑합니다.
    GUILayout.BeginArea( Rect( 0, 0, 200, 60 ) );

    // 하나의 수평 그룹을 시작합니다.
    GUILayout.BeginHorizontal();

    // 일반적인 방법으로 버튼을 배치합니다.
    if( GUILayout.RepeatButton( "Increase max/nSlider Values" ) )
    {
        maxSliderValue += 3.0 * Time.deltaTime;
    }

    // 버튼 옆에 두 개 이상의 컨트롤들을 수직으로 정렬합니다.
    GUILayout.BeginVertical();
    GUILayout.Box( "Slider Value: " + Mathf.Round( sliderValue ) );
    sliderValue = GUILayout.HorizontalSlider( sliderValue, 0.0, maxSliderValue );

    // 그룹과 영역을 종료합니다.
    GUILayout.EndVertical();
    GUILayout.EndHorizontal();
    GUILayout.EndArea();
}

세 개의 컨트롤들이 수평 & 수직 그룹으로 정렬되었습니다.

 

GUILayoutOptions 를 사용해 일부 컨트롤 정의하기¶

GUILayoutOptions 를 사용하여 일부 자동 레이아웃 파라메터들을 재정의 할 수 있습니다.

GUILayout 컨트롤의 마지막 파라메터로 옵션을 제공하여 이를 진행할 수 있습니다.

 
위의 영역 예제에서 버튼이 영역의 가로 수치로 100% 늘어나게 된다는 것이 기억나나요? 이를 재정의 해 봅시다.

/* GUILayoutOptions 를 사용하여 자동 레이아웃 컨트롤 속성들을 재정의 하기 */

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();
}

GUILayoutOptions 로 사용가능한 풀 리스트는 GUILayoutOption Scripting Reference page 를 참조하십시오.