Unity 6.3
0 онлайн 101 гостей 3 в системе
Вход
UI системы Шаг 309 из 317

IMGUI Режимы макета

Фиксированный макет против автоматического макета

Существует два различных режима, которые вы можете использовать, чтобы расположить и организовать ваши UI при использовании системы IMGUI: Фиксированный и Автоматический. До сих пор каждый пример IMGUI, приведенный в этом руководстве, использовал Фиксированную Расстановку. Чтобы использовать Автоматическую Расстановку, напишите GUILayout вместо GUI при вызове функций управления. Вы не должны использовать один режим Расстановки над другим, и вы можете использовать оба режима одновременно в одной и той же функции OnGUI().

Фиксированная компоновка удобна, когда у вас есть заранее спроектированный интерфейс. Автоматическая компоновка удобна, когда вы заранее не знаете, сколько элементов понадобится, или не хотите вручную позиционировать каждый элемент управления. Например, если вы создаёте набор разных кнопок по файлам сохранений, вы не знаете точно, сколько кнопок будет отрисовано, — здесь автоматическая компоновка уместнее. Всё зависит от устройства вашей игры и от того, как вы хотите подать интерфейс.

Существует два ключевых различия при использовании автоматического макета:

  • GUILayout используется вместо GUI
  • Для автоматического управления макетом не требуется функция Rect()
/* Two key differences when using Automatic Layout */

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 */

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 */

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. */

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 */

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 */

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 Справочная страница по сценариям.