Как бы вы справились с различными пропорциями в 2d платформер?

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

Я пишу 2D-платформер, и я не могу решить, как мне обращаться со всеми различными соотношениями.

Вот несколько идей:

1. 4: 3 получает больше контента, широкие экраны обрезаются сверху и снизу
2. 16: 9 получает больше контента, остальные обрезаются влево и вправо
3. Игра в 16: 9 с черными горизонтальными полосами для других AR
4. Игра в 4: 3 с черными вертикальными полосами для других AR

Если у вас нет веских причин сделать вашу игру «широкой» (в этом случае используйте подход 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, аватар игрока и все, с чем они взаимодействуют. Контент с низким приоритетом - это то, что, если оно на экране, то это хорошо, но если оно за кадром, это не проблема. Например: фоновая графика и вещи, которые достаточно далеко от аватара.

Предполагая, что у вас есть UI / HUD, который накладывается поверх некоторого «физического» 2D-мира, тогда это достаточно просто. Предметы с низким приоритетом - это просто, просто убедитесь, что область просмотра 4: 3 центрирована на интересных вещах, а затем нарисуйте столько объектов с низким приоритетом, сколько вы можете расположить слева или справа. Высокоприоритетные вещи в 2D-мире (например, ваш персонаж, враги, с которыми ваш персонаж непосредственно сражается) всегда должны храниться в окне просмотра 4: 3. Т.е. не нужно, чтобы ваш игровой код увеличивал камеру, чтобы воспользоваться преимуществами дополнительного экрана, потому что тогда у вас будет игровой код, действующий по-разному в широкоэкранном и нет. Пусть в игровом коде предполагается, что мир рендерится в 4: 3, и пусть ваш код рендеринга будет знать, что на самом деле есть нечто большее, чем видимое.

К разметке элементов UI / HUD можно подойти одним из двух способов:

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

Что наиболее подходит для вашей игры? Если вы создаете Canabalt (то есть игру, которая зависит от горизонтальной скорости), широкое соотношение сторон с черными полосами (# 3) на более узких сторонах будет идеальным для выделения бокового движения. С другой стороны, если у вас есть более воздушная игра, как Super Smash Brothers, лучшим будет более высокий экран (# 2 или # 4). Я бы основал свое решение на том, что лучше всего подходит для игры.

Я согласен с другими респондентами, что следует проявлять осторожность в отношении элементов, которые могут быть видны на одном дисплее, но не на другом.

Кажется, что в Castle Crashers используется немного # 2 и немного # 3 - вы получаете черные полосы на экране 4: 3, а также немного меньшую видимую область - но вы всегда должны иметь «безопасную область» по краям где вы ничего не кладете в любом случае (для экранов типа телевизоров с ЭЛТ, которые обрезают края)

Есть еще один вариант. Вы можете создать рамку для промежуточного соотношения и сделать обрезку и расширение (или границу) для обоих нормальных разрешений.

Я полагаю, что телевизионные съемки оформлены таким образом, что широкоэкранные изображения выглядят хорошо (все не находятся в центре сцены), в то время как кадрирование для 4: 3 не так радикально, и панорамирование минимально.

Вот статья в блоге о работе с экранами нескольких размеров на мобильных устройствах, а также вторая часть о том, как этот подход закодирован в Java с использованием libgdx . Это немного похоже на ответ Эндрю, но может помочь кому-то еще.

В блоге рассматриваются три основных подхода:

1. Жить с черными полосами сверху или по бокам.
2. Используйте виртуальный видовой экран.
3. Используйте плавающие элементы, так же, как вы найдете в макете flexbox веб-страницы.

№ 1 довольно понятен.

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

№ 3 предполагает размещение объектов на экране аналогично тому, как вы бы размещали элементы на веб-странице, используя flexbox или float. Например, вы бы поместили кнопку паузы на 5 пикселей сверху и на 5 пикселей справа. Независимо от соотношения сторон устройства, кнопка паузы всегда будет в верхнем правом углу.