Давным-давно 4: 3 было практически единственным соотношением сторон, которое вы могли бы найти на ПК. Сегодня самый распространенный - 16:10, но большинство новых мониторов (особенно ноутбуков) - 16: 9.
Я пишу 2D-платформер, и я не могу решить, как мне обращаться со всеми различными соотношениями.
Вот несколько идей:
- 4: 3 получает больше контента, широкие экраны обрезаются сверху и снизу
- 16: 9 получает больше контента, остальные обрезаются влево и вправо
- Игра в 16: 9 с черными горизонтальными полосами для других AR
- Игра в 4: 3 с черными вертикальными полосами для других AR
2d
aspect-ratio
Лорис
источник
источник
Ответы:
Если у вас нет веских причин сделать вашу игру «широкой» (в этом случае используйте подход 3) или узкой (в этом случае используйте подход 4), используйте комбинацию 1 и 2 (или, возможно, 3 и 4, если вы хотите скрыть вещи за кадром).
Выберите компромиссное соотношение сторон (16:10 - хорошее, или даже 16:11). Если пользователь использует 16: 9, предоставьте ему больше контента на стороне, а если он на 4: 3, предоставьте ему больше контента сверху и снизу.
В любом случае - я считаю, что лучше всего реализовать это в своем классе камеры:
В этот момент вы можете просто поэкспериментировать с различными номинальными размерами мира (т.е. размером камеры в мировых единицах) и просто выбрать лучший.
источник
Ну, как основной совет, на ПК я бы сказал: «Не думайте, что ваш пользователь хочет работать в полноэкранном режиме». А в оконном режиме выберите идеальное соотношение и просто используйте его напрямую.
Я думаю, что пользователи обычно принимают черные полосы, когда представлены с полноэкранным контентом. Таким образом, стратегии 3 и 4 являются приемлемыми, если не идеальными. У них есть преимущество в том, что вы всегда знаете, сколько контента вы визуализируете: т.е. никаких хитрых ошибок, которые возникают только при работе в широкоэкранном режиме.
Если вы пытаетесь быть адаптивным, определяя соотношение пользователей с помощью разрешения экрана и показывая как можно больше контента, вам придется по-разному учитывать контент с высоким и низким приоритетом. Высокоприоритетный контент - это то, что пользователь обязательно должен видеть на экране, если он находится за кадром, игра терпит неудачу. Так что это такие вещи, как элементы HUD и UI, аватар игрока и все, с чем они взаимодействуют. Контент с низким приоритетом - это то, что, если оно на экране, то это хорошо, но если оно за кадром, это не проблема. Например: фоновая графика и вещи, которые достаточно далеко от аватара.
Предполагая, что у вас есть UI / HUD, который накладывается поверх некоторого «физического» 2D-мира, тогда это достаточно просто. Предметы с низким приоритетом - это просто, просто убедитесь, что область просмотра 4: 3 центрирована на интересных вещах, а затем нарисуйте столько объектов с низким приоритетом, сколько вы можете расположить слева или справа. Высокоприоритетные вещи в 2D-мире (например, ваш персонаж, враги, с которыми ваш персонаж непосредственно сражается) всегда должны храниться в окне просмотра 4: 3. Т.е. не нужно, чтобы ваш игровой код увеличивал камеру, чтобы воспользоваться преимуществами дополнительного экрана, потому что тогда у вас будет игровой код, действующий по-разному в широкоэкранном и нет. Пусть в игровом коде предполагается, что мир рендерится в 4: 3, и пусть ваш код рендеринга будет знать, что на самом деле есть нечто большее, чем видимое.
К разметке элементов UI / HUD можно подойти одним из двух способов:
источник
Что наиболее подходит для вашей игры? Если вы создаете Canabalt (то есть игру, которая зависит от горизонтальной скорости), широкое соотношение сторон с черными полосами (# 3) на более узких сторонах будет идеальным для выделения бокового движения. С другой стороны, если у вас есть более воздушная игра, как Super Smash Brothers, лучшим будет более высокий экран (# 2 или # 4). Я бы основал свое решение на том, что лучше всего подходит для игры.
Я согласен с другими респондентами, что следует проявлять осторожность в отношении элементов, которые могут быть видны на одном дисплее, но не на другом.
источник
Кажется, что в Castle Crashers используется немного # 2 и немного # 3 - вы получаете черные полосы на экране 4: 3, а также немного меньшую видимую область - но вы всегда должны иметь «безопасную область» по краям где вы ничего не кладете в любом случае (для экранов типа телевизоров с ЭЛТ, которые обрезают края)
источник
Есть еще один вариант. Вы можете создать рамку для промежуточного соотношения и сделать обрезку и расширение (или границу) для обоих нормальных разрешений.
Я полагаю, что телевизионные съемки оформлены таким образом, что широкоэкранные изображения выглядят хорошо (все не находятся в центре сцены), в то время как кадрирование для 4: 3 не так радикально, и панорамирование минимально.
источник
Вот статья в блоге о работе с экранами нескольких размеров на мобильных устройствах, а также вторая часть о том, как этот подход закодирован в Java с использованием libgdx . Это немного похоже на ответ Эндрю, но может помочь кому-то еще.
В блоге рассматриваются три основных подхода:
№ 1 довольно понятен.
Для иллюстрации нет. 2, предположим, что вы хотите поддерживать три разных устройства с тремя разными соотношениями сторон. Откройте изображение в графическом редакторе. Для первого устройства нарисуйте самый большой прямоугольник с соотношением сторон этого устройства, который поместится внутри вашего изображения. Сделайте то же самое для второго устройства и третьего устройства. Ваша полезная область, или виртуальный видовой экран, является пересечением всех трех из этих прямоугольников. Ничто за пределами этого окна просмотра не может быть гарантированно видимым.
№ 3 предполагает размещение объектов на экране аналогично тому, как вы бы размещали элементы на веб-странице, используя flexbox или float. Например, вы бы поместили кнопку паузы на 5 пикселей сверху и на 5 пикселей справа. Независимо от соотношения сторон устройства, кнопка паузы всегда будет в верхнем правом углу.
источник