Масштабирование ассетов в 2D-игре

Как заставить изображение выглядеть хорошо на всех экранах.

Основатель студии 6x13 Games Кенан Болукбаси (Kenan Bolukbasi) в блоге на сайте Gamasutra рассказал о масштабировании двухмерных ассетов под разные размеры экранов и разрешения.

Масштабирование двухмерных ассетов может быть, по меньшей мере, проблематичным. Есть много способов сделать это, и выбор зависит лишь от того результата, который вы хотите достичь. Проблема в том, что вы обычно не знаете, как поведёт себя интерфейс.

Учитывайте, что большинство методов масштабирования плохо реагируют на изменение соотношений сторон экрана. Они могут хорошо работать на вашем тестовом мониторе, но потом всё развалится. Я расскажу об одном методе масштабирования ассетов, который хорошо подошёл для всех четырёх игр, которые мы выпустили.

Есть три вещи, которые вы ожидаете от своего движка:

Предположим, мы используем движок Cocos2d-x и будем использовать терминологию, принятую среди разработчиков на нём. Cocos предоставляет базовый набор инструментов, поэтому методы, описанные ниже, подойдут и для других 2D-движков.

На самом деле к разрешению она не имеет никакого отношения. Здесь дело в кадрировании.

Cocos2d-x автоматически масштабирует всю сцену под размер кадра. Именно политика разрешения (Resolution policy) позволяет вам определять, как именно сцена занимает кадр.

Вам нужна безопасная зона. Она не только показывает, какую часть экрана увидит игрок, но и занимает как можно больше пространства. Всё, что за пределами жёлтой области — всего лишь декорации, которые заменяют собой чёрные границы. За пределы этой области не стоит помещать ничего, что может быть важным для игрока.

Безопасная зона в нашем примере занимает 480х320 единиц (units), на экране в 570х360 единиц. Не пикселей, единиц. Соотношение сторон тут — 1,5f. Но как мы можем быть в этом уверены?

Мы вычисляем опорную ось (reference axis), исходя из соотношения сторон дисплея. Затем мы выбираем фиксированную высоту или фиксированную ширину, исходя из опорной ости. Если опорная Y, то фиксированной становится высота, в противном случае — ширина.

Для того, чтобы Cocos смог «подогнать» сцену под размер кадра, движок должен «понимать», что именно мы считаем «сценой». Это и есть размер композиции (Design Size). В нашем случае размер композиции — это величина безопасной зоны.

Как только мы зададим размер композиции и политику разрешения, движок начнёт вести себя «как взрослый». Вот так он реагирует на изменения соотношения сторон и физического размера экрана.

Итак:

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

Наиболее подходящий размер мы выбираем в зависимости от размера экрана, заданного опорной осью. В пикселях. После этого достаточно добавить нужную директорию в «Resource Search Path» в движке, опуская остальные, чтобы они даже не были видны.

Мы также добавляем фактор масштабирования к каждой директории для того, чтобы движок знал, как ассеты соотносятся с размером композиции. Это просто. Например, если «средний» ассет в два раза больше значения размера композиции, то значение масштаба — 2.

На этом этапе мы можем забыть о выборе ассетов, разрешении, вариантах PPI, retina-дисплеях, необычных соотношениях сторон и прочем. Мы просто «представляем», что размер экрана — 480х320, когда пишем код. За исключением тех случаев, когда вы хотите добавить декоративные элементы за пределами безопасной зоны.

#арт