Як би ви попрацювали з різними співвідношеннями сторін у 2d-платформі?

Давним-давно 4: 3 було майже єдиним відношенням, яке ви знайдете на ПК. Сьогодні найпоширеніший з них - 16:10, але більшість нових моніторів (особливо ноутбуків) - це 16: 9

Я пишу 2D-платформу, і я не можу вирішити, як мені впоратися з усіма різними співвідношеннями.

Ось кілька ідей:

1. 4: 3 отримує більше вмісту, широкі екрани вирізаються зверху та знизу
2. 16: 9 отримує більше вмісту, інші зрізаються ліворуч та праворуч
3. Гра в 16: 9 з чорними горизонтальними смугами для інших АР
4. Гра в 4: 3 з чорними вертикальними смугами для інших АР

Якщо у вас немає вагомих причин зробити гру «широкою» (у такому випадку використовуйте підхід 3) або вузькою (у такому випадку використовуйте підхід 4), перейдіть із комбінацією 1 і 2 (або, можливо, 3 і 4, якщо ви хочете приховати речі поза екраном).

Виберіть компромісне співвідношення сторін (16:10 - це добре, або навіть 16:11). Якщо користувач у 16: 9, надайте їм більше вмісту збоку, а якщо вони перебувають у форматі 4: 3, надайте їм більше вмісту вгорі та внизу.

У будь-якому випадку - мені найкраще реалізувати це з подібним чином у вашому класі камер:

float scaleToFitWidth = viewport.Width / nominalWorldSize.Width;
float scaleToFitHeight = viewport.Height / nominalWorldSize.Height;
float scale = Math.Min(scaleToFitWidth, scaleToFitHeight); // world to client

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

Ну, як основна порада, на ПК я б сказав "не припускайте, що ваш користувач хоче працювати на весь екран". А у вікні виберіть ідеальне співвідношення та просто використовуйте це безпосередньо.

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

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

Якщо припустити, що у вас є UI / HUD, який накладається на вершину якогось "фізичного" 2D світу, то це досить просто. Елементи з низьким пріоритетом прості, ви просто переконайтеся, що вікно перегляду 4: 3 зосереджено на цікавих речах, а потім намалюйте стільки предметів із низьким пріоритетом, скільки можна ліворуч або праворуч. Речі з високим пріоритетом у двомірному світі (наприклад, ваш персонаж, вороги, з якими ваш герой безпосередньо бореться) завжди повинні зберігатися у вікні перегляду 4: 3. Тобто ваш ігровий код не збільшує камеру, щоб скористатися додатковою нерухомістю екрану, тому що тоді у вас буде ігровий код, який діє по-різному в широкоекранному проти. Запропонуйте ігровому коду припустити, що світ відображається у форматі 4: 3, і лише нехай ваш код візуалізації буде відомий, що насправді видно більше, ніж те, що видно.

До розміщення елементів UI / HUD можна підходити одним із двох способів:

1. Динамічне позиціонування: Вкажіть усі ваші елементи відносно країв екрана (тобто не всі відносно 0,0). Залежно від співвідношення сторін, елементи будуть ближче чи далі від центру екрана. Плюси: Дозволяє підключити речі до куточків і дати їм "просто працювати". Мінуси: Складно зробити макет, що працює добре в центрі, і ризик перекриття елементів
2. Консервативне статичне позиціонування: викладіть всі елементи в 4: 3 та просто їх компенсуйте під час роботи в широкоекранному режимі. Плюси: проста, однозначна логіка / координати компонування. Мінуси: залишає візуальний мертвий простір ліворуч та праворуч від ваших елементів управління інтерфейсом, де ви бачите 2D світ у фоновому режимі, але не користувальницький інтерфейс.

Що найбільш підходить для вашої гри? Якщо ви робите Канабальт (тобто гру, яка залежить від горизонтальної швидкості), широке співвідношення сторін із чорними смугами (№3) щодо більш вузьких аспектів було б ідеально підкреслити бічний рух. З іншого боку, якщо у вас є така повітряна гра, як Super Smash Brothers, найкращий екран (№2 або №4) буде найкращим. Я б базував своє рішення на тому, що найкраще підходить для гри.

Я погоджуюся з іншими респондентами, що слід бути обережними щодо елементів, які можуть бути помітні на одному дисплеї, а не на іншому.

Замок Crashers, здається, використовує трохи №2 та трохи №3 - ви отримуєте чорні смуги на екрані 4: 3, а також дуже незначну видиму область - але у вас завжди має бути "безпечна зона" по краях де ви все одно не ставите нічого життєво важливого (для екранів, як CRT-телевізори, які обрізають краї)

Є ще один варіант. Ви можете встановити проміжне співвідношення і зробити як обрізання, так і розширення (або межування) на обох звичайних дозволах.

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

Ось допис у блозі про обробку декількох розмірів екрана на мобільних пристроях, і ось друга його частина, як цей підхід кодується в Java за допомогою libgdx . Це трохи нагадує відповідь Ендрю, але може допомогти комусь іншому.

Повідомлення в блозі охоплює три основні підходи:

1. Живіть з чорними смугами зверху або з боків.
2. Використовуйте віртуальний вікно перегляду.
3. Використовуйте плаваючі елементи, як ви знайдете в макеті webbox flexbox.

№1 досить пояснює себе.

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

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