Макети

Defold підтримує графічні інтерфейси, які автоматично пристосовуються до змін орієнтації екрана на мобільних пристроях. За допомогою цієї можливості можна розробляти графічні інтерфейси, що пристосовуються до орієнтації та співвідношення сторін екранів різних розмірів. Також можна створювати макети (layouts) для конкретних моделей пристроїв.

Створення профілів дисплея

За замовчуванням у налаштуваннях game.project вказано використання вбудованого файлу налаштувань профілів дисплея («builtins/render/default.display_profiles»). Стандартні профілі — «Landscape» (1280 пікселів завширшки й 720 пікселів заввишки) і «Portrait» (720 пікселів завширшки й 1280 пікселів заввишки). У профілях не задано моделей пристроїв, тому вони відповідають будь-якому пристрою.

Щоб створити новий файл налаштувань профілів, скопіюйте наявний із папки «builtins» або клацніть правою кнопкою миші у відповідному місці на панелі Assets і виберіть New... ▸ Display Profiles. Надайте новому файлу відповідну назву й натисніть Ok.

Редактор відкриє новий файл для редагування. Додайте нові профілі, натискаючи + у списку Profiles. Для кожного профілю додайте набір кваліфікаторів (qualifiers):

Width

Ширина кваліфікатора в пікселях.

Height

Висота кваліфікатора в пікселях.

Device Models

Список моделей пристроїв, розділених комами. Модель пристрою зіставляється з початком назви моделі пристрою: наприклад, iPhone10 відповідає моделям «iPhone10,*». Назви моделей із комами слід брати в лапки: наприклад, "iPhone10,3", "iPhone10,6" відповідає моделям iPhone X (див. вікі iPhone). Зауважте, що лише платформи Android та iOS повідомляють модель пристрою під час виклику sys.get_sys_info(). Інші платформи повертають порожній рядок, тому для них ніколи не буде вибрано профіль дисплея з кваліфікатором моделі пристрою.

Також потрібно вказати, що рушій має використовувати ваші нові профілі. Відкрийте game.project і виберіть файл профілів дисплея в налаштуванні Display Profiles у розділі display:

Якщо ви хочете, щоб рушій автоматично перемикався між портретним і альбомним макетами під час повороту пристрою, установіть прапорець Dynamic Orientation. Рушій динамічно вибиратиме відповідний макет, а також змінюватиме вибір, якщо орієнтація пристрою зміниться.

Автоматичний вибір макета (Display Profiles)

Ресурс Display Profiles має параметр «Auto Layout Selection» (увімкнений за замовчуванням). Коли його ввімкнено, рушій автоматично вибирає найвідповідніший макет GUI як під час створення сцени, так і в разі зміни розміру вікна або дисплея. Коли його вимкнено, рушій не змінює макети автоматично — використовуйте gui.set_layout() зі скрипту GUI, щоб перемикати макети вручну. Це налаштування зберігається у файлі Display Profiles і впливає на всі сцени GUI.

Макети GUI

Поточний набір профілів дисплея можна використовувати для створення варіантів макета вузлів GUI. Щоб додати новий макет до сцени GUI, клацніть правою кнопкою миші піктограму Layouts на панелі Outline і виберіть Add ▸ Layout ▸ ...:

Під час редагування сцени GUI всі вузли редагуються в межах певного макета. Поточний вибраний макет указано в розкривному списку макетів сцени GUI на панелі інструментів. Якщо макет не вибрано, вузли редагуються в макеті Default.

Кожна зміна властивості вузла, яку ви робите з вибраним макетом, перевизначає цю властивість щодо макета Default. Перевизначені властивості позначаються синім кольором. Вузли з перевизначеними властивостями також позначаються синім. Ви можете натиснути кнопку скидання біля будь-якої перевизначеної властивості, щоб повернути її початкове значення.

Макет не може видаляти чи створювати вузли, а лише перевизначати властивості. Якщо потрібно прибрати вузол із макета, ви можете перемістити його за межі екрана або видалити за допомогою логіки скрипту. Також слід звертати увагу на поточний вибраний макет. Якщо ви додаєте макет до проєкту, новий макет буде налаштовано відповідно до поточного вибраного макета. Крім того, під час копіювання та вставлення вузлів враховується поточний вибраний макет — як під час копіювання, так і під час вставлення.

Динамічний вибір профілю

Коли Auto Layout Selection увімкнено, рушій автоматично вибирає найвідповідніший макет. Під час динамічного добору макета кожен кваліфікатор профілю дисплея оцінюється за такими правилами:

1. Якщо модель пристрою не задано або вона збігається, для кваліфікатора обчислюється оцінка (S).

2. Оцінка (S) обчислюється на основі площі дисплея (A), площі з кваліфікатора (A_Q), співвідношення сторін дисплея (R) і співвідношення сторін кваліфікатора (R_Q):

1. Вибирається профіль із кваліфікатором, що має найменшу оцінку, якщо орієнтація кваліфікатора (альбомна чи портретна) відповідає орієнтації дисплея.

2. Якщо профіль із кваліфікатором такої самої орієнтації не знайдено, вибирається профіль із найкращою оцінкою кваліфікатора іншої орієнтації.

3. Якщо жоден профіль вибрати неможливо, використовується резервний профіль Default.

Оскільки макет Default використовується під час виконання як резервний, коли немає відповіднішого макета, доданий макет «Landscape» буде найвідповіднішим для всіх орієнтацій, доки ви також не додасте макет «Portrait».

Повідомлення про зміну макета

Коли макет змінюється, скрипту компонента GUI надсилається повідомлення layout_changed. Це відбувається, коли рушій автоматично змінює макет (Auto Layout Selection увімкнено) або коли ваш скрипт викликає gui.set_layout() і макет справді змінюється. Повідомлення містить хешований ідентифікатор макета, тож скрипт може виконувати логіку залежно від того, який макет вибрано:

function on_message(self, message_id, message, sender)
  if message_id == hash("layout_changed") and message.id == hash("My Landscape") then
    -- switching layout to landscape
  elseif message_id == hash("layout_changed") and message.id == hash("My Portrait") then
    -- switching layout to portrait
  end
end

Крім того, поточний скрипт рендерингу отримує повідомлення щоразу, коли змінюється вікно (область відображення гри), зокрема й у разі зміни орієнтації.

function on_message(self, message_id, message)
  if message_id == hash("window_resized") then
    -- The window was resized. message.width and message.height contain the
    -- new dimensions of the window.
  end
end

Коли орієнтація змінюється, менеджер макетів GUI автоматично масштабує вузли GUI та змінює їхню позицію відповідно до вашого макета й властивостей вузлів. Однак вміст гри за замовчуванням рендериться в окремому проході з проєкцією, що розтягує його до розмірів поточного вікна. Щоб змінити цю поведінку, надайте власний змінений скрипт рендерингу або скористайтеся бібліотекою для роботи з камерою.

Вибір макета вручну (Lua)

Коли Auto Layout Selection вимкнено в поточному ресурсі Display Profiles, рушій не перемикатиме макети автоматично. Використовуйте ці функції зі скрипту GUI, щоб керувати макетами вручну:

gui.set_layout(layout)

• Приймає рядок або хеш (ідентифікатор макета).
• Повертає булеве значення: true, якщо макет існує в сцені й був застосований; false в іншому разі.
• Якщо макет існує в Display Profiles, оновлює роздільну здатність сцени відповідно до ширини й висоти профілю.
• Надсилає layout_changed, коли макет справді змінюється.

Приклад:

function init(self)
    -- Manually apply the "Portrait" layout
    local ok = gui.set_layout("Portrait")
    if not ok then
        print("Portrait layout not found in this scene")
    end
end

gui.get_layouts()

• Повертає таблицю, яка зіставляє хеш ідентифікатора кожного макета зі значенням vmath.vector3(width, height, 0).
• Для стандартного макета повертає поточну роздільну здатність сцени.

Приклад:

local layouts = gui.get_layouts()
for id, size in pairs(layouts) do
    print(id, size.x, size.y)
end

Примітка: якщо макет GUI існує в сцені, але відсутній у Display Profiles, gui.set_layout() усе одно застосовує перевизначення властивостей вузлів для цього макета, але не змінює роздільну здатність сцени.