Дослідження UI в Unity 4.6 beta

Днями почав вивчати новий UI в Unity 4.6 beta. Все, що на офіційному сайті відео туториалах, природно було переглянуто, але там немає нічого про те, як працює новий UI. Доків я теж не побачив і, природно, захотілося разобратьс, я як це все працює. Отже, коротко про те, що я зрозумів:

Виходячи з досліджень методом тику основним об'єктом, без якого побудова UI неможливо, є Canvas. Він відповідає за малювання елементів інтерфейсу і перенесення подій до них. Так само у Canvasесть 3 варіанти відтворення UI: ScreenSpace — Overlay, ScreenSpace — Camera і WorldSpace.

ScreenSpace — Overlay і ScreenSpace — Camera

Як видно з назви режимів, вони працюють з екранними координатами. Це дозволяє збирати PixelPerfect інтерфейс, але якщо вам потрібно, щоб інтерфейс виглядав однаково на всіх дозволах, або ви хочете створити 3D UI — ці варіанти вам не підходять.

WordlSpace

Цей режим малює елементи у світовому просторі, так що якщо у вас немає камери, в яку вони будуть потрапляти, ви можете не побачити. Цей режим мене зацікавило, так як дозволяє створювати UI, який буде виглядати однаково — незалежно від дозволу екрану. Єдина невелика проблема — це те, що Canvas, на відміну від попередніх режимів, не реагує на зміну аспекти екрану. Але ця проблема вирішується простим скриптом, керуючим завширшки/заввишки кинувся при старті.

using UnityEngine;
using System.Collections;

public class CanvasHelper : MonoBehaviour
{
private const float ETHALON_2x3_LANDSCAPE = 1.3333333333333f;
private const float ETHALON_2x3_PORTRAIT = 0.666666666666f;

public Canvas canvas;

// Use this for initialization
void Start ()
{
var ethalon = Screen.orientation == ScreenOrientation.Landscape ? ETHALON_2x3_LANDSCAPE : ETHALON_2x3_PORTRAIT;
var cam = canvas.worldCamera;
var rectTransform = canvas.transform as RectTransform;
var delta = rectTransform.sizeDelta;
if (Screen.orientation == ScreenOrientation.Landscape)
delta.x *= cam.aspect / ethalon;
else
delta.y *= cam.aspect / ethalon;
rectTransform.sizeDelta = delta;
}
}


Окремі елементи я описувати не буду, все одно з ними можна ознайомитися методом математичного тику. А ось на систему повідомлень варто поглянути детальніше.

Щоб ваш UI працював, необхідно мати на сцені EventSystem. EventSystem — це компонент, який займається обробкою подій користувача і передачею їх у UI. Обробка подій відбувається в InputModule компонентах. Я зустрів 2 (StandaloneInputModule для ПК, консолей і веба і TouchInputModule для мобільників і планшетів). Причому, судячи з їх налаштуваннях, вони можуть хоча б частково бути взаємозамінними.

InputModule відловлює події користувача і передає їх в EventSystem, яка вже направляє все це справа в UI. Але як же визначається, був натиснутий активний елемент? За це відповідає GraphicRaycaster.

GraphicRaycaster

Цей компонент знаходиться на Canvas-е і у відповідь на натискання миші/тач визначає, якого об'єкту треба послати подія. Всього в новому UI є 3 типи рэйкастеров: рэйкастер для 2D фізики, рейкастер для 3D фізики і рэйкастер для графічних елементів. За замовчуванням на гейм об'єкт додається останній.

У цього рейкастера є один величезний недолік: щоб об'єкт отримав подія, він повинен мати графічну складову. Іншими словами, якщо ви хочете створити прозору область екрану, яка буде запускати те чи інше діяння по натисненню, вам доведеться створювати компонент з графікою і робити його повністю прозорим. По-моєму, це дуже незручно, добре, що є можливість розширити цю систему введенням нових рейкастеров.

Трохи про коді

Систему UI можна розділити на 3 частини: система генерації подій (UnityEngine.Events) — нововведення в Unity 4.6, зачіпає не тільки UI, але і системи фізики і рендера, система вилову подій (UnityEngine.EventSystems) і безпосередньо логіку UI (UnityEngine.UI). Причому перша система є частиною основної билиотеки движка, а решта — 2 частиною бібліотеки UI.

Events

У цьому просторі імен зібрані класи, що описують базову струкру евентов. Існує 2 типи класів: UnityAction (джерело події) і UnityEvent (слухач події, при цьому є можливість слухати декілька подій). Вони можуть приймати до 4-х параметрів наступних типів: EventDefined, Void, Object, Int, Float, String, Bool (виходячи з опису в Enum PresustentListenerMode).

EventSystems

Це простір імен містить класи та інтерфейси, що забезпечують обробку подій для елементів UI, при цьому на кожну подію існує свій інтерфейс. Також в цьому просторі імен знаходяться рейкастеры для фізики і базовий клас для опису поведінки UI елементів — UIBehaviour і налаштування режимів введення.

UI

Тут знаходяться класи, безпосередньо пов'язані з елементами UI. В тому числі й опис GraphicRaycaster, а також купа інтерфейсів, пов'язаних з подіями. Це простір імен я ще тільки почав досліджувати, саме там криється ключ до написання власних елементів UI.

Наступну частину я напишу, коли розберуся, як все-таки створити власні елементи управління. На цьому дякую всім, якщо у вас є аналогічний досвід, буду радий прочитати про нього в коментарях.

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.