Вступ

Адаптуючи гру та графіку до різних розмірів екрана, слід врахувати кілька питань:

• Це ретрогра з низькою роздільною здатністю та піксельно точною графікою чи сучасна гра з графікою HD-якості?
• Як має поводитися гра в повноекранному режимі на екранах різних розмірів?
  • Чи має гравець бачити більше ігрового вмісту на екрані з високою роздільною здатністю, чи графіка має адаптивно масштабуватися, щоб завжди показувати той самий вміст?
• Як гра має працювати зі співвідношеннями сторін, відмінними від заданого у game.project?
  • Чи має гравець бачити більше ігрового вмісту? А може, мають з’являтися чорні смуги? Або змінюватися розміри елементів GUI?
• Які меню й екранні компоненти GUI вам потрібні та як вони мають адаптуватися до різних розмірів і орієнтацій екрана?
  • Чи мають меню й інші компоненти GUI змінювати компонування зі зміною орієнтації, чи зберігати те саме компонування незалежно від орієнтації?

У цьому посібнику розглянуто деякі з цих питань і запропоновано рекомендовані підходи.

Як змінити спосіб рендерингу вмісту

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

Ретро- та 8-бітна графіка

Ретро- або 8-бітною графікою часто називають графіку ігор, які наслідують візуальний стиль старих ігрових консолей чи комп’ютерів з їхньою низькою роздільною здатністю та обмеженою палітрою кольорів. Наприклад, Nintendo Entertainment System (NES) мала роздільну здатність екрана 256x240, Commodore 64 — 320x200, а Gameboy — 160x144. Усі ці розміри становлять лише невелику частку від розмірів сучасних екранів. Щоб в ігри, які наслідують цей візуальний стиль і роздільну здатність, можна було грати на сучасному екрані з високою роздільною здатністю, графіку потрібно збільшити в кілька разів. Простий спосіб зробити це — намалювати всю графіку в низькій роздільній здатності та стилі, які ви хочете наслідувати, і збільшувати її під час рендерингу. У Defold це легко зробити за допомогою скрипту рендерингу та фіксованої проєкції з відповідним значенням масштабу.

Візьмімо цей набір плиток і персонажа гравця (джерело) та використаймо їх для 8-бітної ретрогри з роздільною здатністю 320x200:

Якщо задати 320x200 у файлі game.project і запустити гру, вона матиме такий вигляд:

На сучасному екрані з високою роздільною здатністю вікно зовсім крихітне! Збільшення розміру вікна в чотири рази до 1280x800 робить його придатнішим для сучасного екрана:

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

msg.post("@render:", "use_fixed_projection", { zoom = 4 })

Це дасть такий результат:

Так краще. І вікно, і графіка мають належний розмір, але якщо придивитися, можна помітити очевидну проблему:

Графіка виглядає розмитою! Причина в тому, як GPU вибирає значення з текстури під час рендерингу збільшеної графіки. У файлі game.project у розділі Graphics за замовчуванням установлено значення linear:

Якщо змінити його на nearest, отримаємо бажаний результат:

Тепер у нашій ретрогрі чітка піксельно точна графіка. Варто врахувати й інші налаштування, наприклад вимкнути субпікселі для спрайтів у game.project:

Коли параметр Subpixels вимкнено, спрайти ніколи не відображаються на половинах пікселів, а завжди прив’язуються до найближчого цілого пікселя.

Графіка з високою роздільною здатністю

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

Як і для ретро- чи 8-бітної графіки, потрібно змінити скрипт рендерингу. У цьому випадку графіка має масштабуватися відповідно до розміру екрана, зберігаючи початкове співвідношення сторін:

msg.post("@render:", "use_fixed_fit_projection")

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

Задайте ширину й висоту у файлі game.project так, щоб ігровий вміст можна було показувати без масштабування.

Налаштування High DPI та екрани Retina

Якщо ви також хочете підтримувати екрани Retina з високою роздільною здатністю, увімкніть цю можливість у файлі game.project у розділі Display:

Це створить задній буфер (back buffer) із високим DPI на дисплеях, які його підтримують. Гра відображатиметься з удвічі вищою роздільною здатністю, ніж задано в налаштуваннях Width і Height, які й далі визначатимуть логічну роздільну здатність у скриптах і властивостях. Це означає, що всі розміри залишаться тими самими, а вміст, який відображається в масштабі 1x, виглядатиме так само. Але якщо імпортувати зображення з високою роздільною здатністю та зменшити їх до масштабу 0.5x, вони відображатимуться на екрані з високим DPI.

Створення адаптивного GUI

Система створення компонентів GUI побудована на низці базових будівельних блоків — вузлів. Хоча вона може здаватися надто простою, з її допомогою можна створювати будь-що: від кнопок до складних меню та спливних вікон. Створені вами GUI можна налаштувати так, щоб вони автоматично адаптувалися до змін розміру й орієнтації екрана. Наприклад, можна закріпити вузли біля верхнього, нижнього чи бічних країв екрана; водночас вузли можуть зберігати свій розмір або розтягуватися. Взаємозв’язки між вузлами, а також їхні розміри й вигляд теж можна налаштувати так, щоб вони змінювалися зі зміною розміру чи орієнтації екрана.

Властивості вузла

Кожен вузол у GUI має опорну точку, горизонтальну й вертикальну прив’язки, а також режим адаптації.

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

Докладніше про ці властивості читайте в посібнику з GUI.

Компонування

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

Тестування різних розмірів екрана

Меню Debug містить можливість імітувати роздільну здатність певної моделі пристрою або власну роздільну здатність. Під час роботи застосунку виберіть Debug->Simulate Resolution і одну з моделей пристроїв зі списку. Вікно запущеного застосунку змінить розмір, і ви зможете побачити, як гра виглядає з іншою роздільною здатністю чи іншим співвідношенням сторін.