2D Pixel Perfect: Как настроить проект Unity для ретро 8-битных игр

Поднимитесь на новый уровень в разработке 2D и изучите родной набор инструментов Unity для работы с 2D.

Ретро-игры с простой механикой и пиксельной графикой могут вызывать приятные воспоминания у геймеров-ветеранов и в то же время быть доступными для более молодой аудитории. Сегодня многие игры называют "ретро", но чтобы создать игру, которая действительно будет выглядеть и восприниматься как ностальгическая, требуются усилия и планирование. Поэтому мы пригласили ребят из Mega Cat Studios, чтобы они помогли нам обсудить эту тему. В этой статье мы расскажем обо всем, что нужно для создания аутентичного искусства для игр в стиле NES, включая важные настройки Unity, графические структуры и цветовые палитры. Получите наш примерный проект и следуйте ему!

Студия Mega Cat Studios из Питтсбурга, штат Пенсильвания, превратила создание высокоточных ретро-игр в целое искусство. Настолько, что некоторые из их игр можно приобрести в виде картриджа и играть на ретро-консолях вроде Sega Genesis.

Недавние дополнения к рабочим процессам Unity сделали его подходящей средой для создания ретро-игр. Система 2D-тайлмапов стала еще лучше и теперь поддерживает сетку, гекс и изометрические тайлмапы! Кроме того, вы можете использовать новый компонент Pixel Perfect Camera для достижения последовательного пиксельного движения и визуальных эффектов. Вы даже можете использовать стек Post Processing , чтобы добавить всевозможные крутые ретро-эффекты. Однако прежде чем приступить к этой работе, необходимо импортировать и правильно настроить ваши активы.

Для того чтобы наши активы были четкими и ясными, им прежде всего необходима правильная конфигурация. Для каждого используемого актива выберите его в представлении проекта, а затем измените следующие параметры в инспекторе:

• Режим фильтрации изменен на "Точка
• Сжатие изменено на "Нет

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

Еще один момент, на который следует обратить внимание, - это настройка максимального размера изображения в Инспекторе. Если размер изображения спрайта по любой оси больше, чем свойство 'Max Size' (по умолчанию 2048), он будет автоматически изменен до максимального размера. Обычно это приводит к некоторой потере качества и размытию изображения. Поскольку некоторые аппаратные средства не могут корректно поддерживать текстуры более 2048 по обеим осям, лучше стараться не превышать этот лимит.

Выше приведен спрайт из спрайт-листа, который имел размер 2208 по одной оси, а максимальный размер был установлен на 2048. Как вы видите, увеличение свойства Max Size до 4096 позволяет подогнать размер изображения под нужное значение и избежать потери качества.

Наконец, при подготовке спрайта или листа спрайтов убедитесь, что вы установили режим единиц поворота на "Пиксели", а не на "Нормализованные".

Это необходимо для того, чтобы точка поворота спрайта была основана на пикселях, а не на плавном диапазоне от 0 до 1 по каждой оси изображения. Если бы спрайт не поворачивался точно относительно пикселя, мы бы потеряли пиксельную идеальность. Повороты можно задать для спрайтов в редакторе спрайтов, который можно открыть из инспектора, когда выбран актив спрайта.

Подготовив активы, мы можем настроить камеру так, чтобы она была "идеальной с точки зрения пикселей". Пиксель-идеальный результат будет выглядеть чистым и четким. Признаками пиксельного искусства, которое не отображается как пиксельно идеальное, являются размытость (алиасинг) и некоторые пиксели, которые кажутся прямоугольными, когда они должны быть квадратными.

Пакет 2D Pixel Perfect можно импортировать через менеджер пакетов в Unity. Выберите меню "Окно" на панели инструментов, а затем "Менеджер пакетов". В новом окне нажмите "Дополнительно" и убедитесь, что включена опция "Показывать пакеты предварительного просмотра". Выберите 2D Pixel Perfect из списка слева и нажмите кнопку "Установить" в правом верхнем углу окна.

Вот и все. Теперь вы готовы приступить к использованию компонента камеры с пиксельным совершенством.

Компонент Pixel Perfect Camera является дополнением к компоненту камеры Unity. Чтобы добавить его, перейдите к основной камере и добавьте к ней компонент Pixel Perfect Camera. Если опция компонента Pixel Perfect Camera отсутствует, следуйте ранее описанным инструкциям, чтобы сначала импортировать его в проект.

Теперь давайте посмотрим на доступные нам настройки.

Во-первых, я рекомендую установить флажок "Run In Edit Mode" и установить соотношение сторон экрана в режиме просмотра игры на "Free Aspect", чтобы вы могли свободно изменять размеры игрового вида. Компонент будет отображать полезные сообщения в игровом окне, объясняющие, если дисплей не является пиксельно идеальным при заданном разрешении.

Теперь вы можете просмотреть все настройки, чтобы понять, что они делают и как влияют на внешний вид вашей игры!

• Assets Pixels Per Unit - это поле относится к настройкам, которые можно выбрать в инспекторе для каждого актива. По общему правилу, каждый актив, который будет использоваться в мировом пространстве игры, должен использовать одинаковое количество пикселей на единицу (PPU), и это значение вы также поместите сюда. Если ваш игровой мир существует в виде сетки тайлов и спрайтов, каждый из которых имеет размер 16 пикселей на 16 пикселей, то PPU, равный 16, будет иметь смысл - каждый тайл сетки будет равен 1 единице в координатах мирового пространства. Убедитесь, что вы указали здесь выбранный вами PPU.
• Эталонное разрешение - установите разрешение, с которым вы хотите, чтобы все ваши активы просматривались. Если вам нужен ретро-образ, это обычно означает очень маленькое разрешение. Например, собственное разрешение Sega Genesis составляет 320x224. При переносе игры с Sega Genesis мы используем эталонное разрешение 320x224. Для общего использования формата 16:9 хорошо подойдут 320x180, а также 398x224 (если вы хотите сохранить вертикальное разрешение).
• Upscale Render Texture (Текстура рендеринга с повышением разрешения) - сцена рендерится в разрешении, максимально приближенном к эталонному, а затем повышается, чтобы соответствовать реальному размеру дисплея. Поскольку эта настройка приводит к заполнению экрана, мы рекомендуем использовать ее, если вы хотите получить полноэкранное изображение с идеальным пиксельным разрешением и без полей. 'Upscale Render Texture' также существенно влияет на то, как спрайты выглядят при повороте.

• Pixel Snapping (доступно только при отключенной функции Upscale Render Texture) - если эта функция включена, спрайты будут автоматически привязываться к сетке мирового пространства, где размер сетки основан на выбранном вами PPU. Обратите внимание, что на самом деле это не влияет на позиции преобразования объектов. В результате вы сможете плавно интерполировать объекты между позициями, но визуальное перемещение останется пиксельно идеальным и быстрым.
• Пример:

• Crop Frame (X и Y) - обрезает просматриваемую область мирового пространства, чтобы она точно соответствовала эталонному разрешению, и добавляет черные поля, чтобы заполнить пробелы по краям экрана.
• Растянуть заливку - становится доступным, если вы включили оба параметра x и y для обрезной рамки. При этом камера масштабируется в соответствии с видом игры, чтобы вписаться в экран с сохранением соотношения сторон. Поскольку такое масштабирование происходит не только в целых числах, кратных опорному разрешению, оно приводит к попиксельной потере идеальности при любом разрешении, которое не является целым числом, кратным опорному разрешению. Преимущество в том, что, несмотря на потерю пиксельной идеальности для многих разрешений, у вас не будет черных полей, а вместо этого вы получите полностью заполненный экран. Обратите внимание, что хотя при заполнении растяжкой часто возникает размытие, обычное предупреждающее сообщение на экране не появляется.

Если вам нужен идеальный с точки зрения пикселей и быстрый дисплей, который подойдет для самых разных случаев использования, я рекомендую:

• Используйте опорное разрешение, которое никогда не будет больше разрешения окна игрока (например, 320x180).
• Включение или выключение текстуры рендеринга в увеличенном масштабе
• Включите его, если вы будете использовать повороты за пределами 90, 180 и 270, а также если вам нравится визуальный эффект, который он производит на повернутые спрайты.
• Увеличенная текстура рендера может привести к непиксельно идеальному изображению в некоторых разрешениях, в зависимости от вашего опорного разрешения. Поэкспериментируйте с этим и различными разрешениями экрана, используя "Запуск в режиме редактирования", включенный на Pixel. Компонент Perfect Camera, чтобы определить, является ли это проблемой для вашего разрешения. Если вам удастся получить пиксельно идеальное изображение во всех целевых разрешениях, это приведет к наилучшему полноэкранному пиксельно идеальному восприятию.
• Включайте или отключайте пиксельную привязку по своему усмотрению
• Это больше личное предпочтение, чем что-либо еще. Без привязки движение происходит гораздо плавнее, но пиксели могут быть не выровнены.
• Включите Crop Frame X и/или Y, если не используется Upscale Render Texture
• Если вам не удается добиться пиксельно идеального результата при повышении масштаба текстуры рендера, обрезка по X и/или Y обеспечит пиксельно идеальное изображение для любого разрешения, превышающего эталонное, но создаст большие поля по краям экрана для некоторых разрешений.
• Отключить растягивающуюся заливку

Мы рекомендуем настроить камеру для просмотра с соотношением сторон 16:9, включая, по возможности, эталонное разрешение. На момент написания статьи большинство геймеров играют на мониторах с соотношением сторон 16:9 и разрешением 1920x1080. Например, эталонное разрешение 320x180 равно 16:9, поэтому при воспроизведении в разрешении 1920x1080 или любом разрешении, кратном 320x180, например 1280x720, черная полоса не будет отступать от края.

На панели инструментов Unity вы можете перейти в меню Edit > Project Settings > Player и ограничить соотношения сторон, которые будет поддерживать игра. Если вы обнаружите, что определенная конфигурация работает в нужном соотношении, но плохо выглядит в некоторых конкретных соотношениях сторон, вы можете запретить окну работать в этих соотношениях здесь. Однако имейте в виду, что не все пользователи будут иметь настройки дисплея, которые будут хорошо работать с вашими ограничениями, так что это не рекомендуется. Вместо этого включите обрезку, чтобы у этих пользователей были поля, а не приходилось играть в разрешении, не соответствующем их экрану.

Теперь, когда мы рассказали о том, как настроить Unity для создания пиксельно идеального искусства, давайте рассмотрим основы создания иллюстраций для игр, которые соответствуют ограничениям классической Nintendo Entertainment System. Это поколение консолей накладывает большое количество ограничений на художников, пытающихся создать аутентичный образ. Эти ограничения включают в себя такие вещи, как используемые палитры, размер и количество объектов на экране. Кроме того, не стоит забывать об эталонном разрешении 256x240, когда вы нацеливаетесь на эту консоль.

При создании иллюстраций для NES существует множество ограничений, которые художник должен соблюдать. Некоторые из них будут одинаковыми независимо от того, какую ретро-консоль художник пытается эмулировать, в то время как многие другие характерны только для NES. Первое и, возможно, самое важное из этих ограничений связано с тем, как используется цветовая палитра в изображении. NES довольно уникальна в плане цветовой палитры, поскольку вся цветовая палитра консоли жестко закодирована в ней. NES выбирает, какие цвета использовать в изображении, посылая графическому процессору NES ряд значений, а затем графический процессор возвращает цвета, связанные с этими значениями. Ниже приведено изображение цветовой палитры NES:

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

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

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

Ограничения на использование палитр становятся еще жестче, когда художник переходит к тому, как палитры используются в игре. Чтобы объяснить это, необходимо подробнее рассказать о том, как в ретро-консолях хранится, используется и отображается искусство. Изображения на любой ретро-консоли хранятся в игре в виде плиток размером 8x8 px. Такой подход позволяет художникам экономить место, используя плитки для разных целей. (Например, куски тротуара можно использовать для изготовления карниза здания). Еще один важный момент, который следует отметить при хранении на основе плиток, - это то, что информация о цвете обычно не сохраняется вместе с графикой. Вся плитка выдержана в монохроматической палитре. Таким образом, каждый раз, когда плитка отображается в игре, ей может быть назначена субпалитра, что позволяет одной и той же плитке одновременно отображаться на экране с разными субпалитрами. Это важно при создании иллюстраций, соответствующих ретро-консоли на современной платформе, поскольку это влияет на то, как назначать палитры для иллюстраций.

В NES палитры для спрайтов и фонов назначаются по-разному. Он назначает субпалитры для спрайтов на основе плитки за плиткой. Это означает, что каждой плитке 8x8 в спрайте может быть назначена одна из четырех подпалитр спрайта.

Фоны, с другой стороны, гораздо более строгие. Фоны назначают свои палитры кусками 16x16. Подпалитры, назначающие фон для всего экрана, называются таблицами атрибутов. Именно благодаря этим таблицам атрибутов в большинстве ретро-работ активно используются повторяющиеся плиточные сегменты. Эти сегменты, как правило, состоят из тайлов 16x16, так что они аккуратно помещаются в таблицу атрибутов. Несмотря на ограничение аппаратного обеспечения, такой подход к созданию фонов на основе плиток 16x16 стал определяющей характеристикой ретро-искусства и абсолютно необходим при попытке воссоздать его.

Несмотря на то, что художники могут использовать различные субпалитры для каждой плитки спрайта размером 8x8, они могут оказаться в ситуации, когда им нужна большая глубина цвета в спрайте, чем та, которая уже имеется. Вот тут-то и пригодится наслоение спрайтов. Наложение спрайтов - это просто разделение спрайта на два отдельных спрайта, а затем размещение их друг на друге. Это позволяет художникам обойти ограничение на одну субпалитру на плитку 8x8. Это позволит художникам удвоить количество цветов, которые можно использовать в одной области 8x8. Единственный существенный недостаток такого подхода - ограничения на рендеринг спрайтов. NES способна одновременно отображать на экране только 64 спрайта 8x8, и только 8 спрайтов, расположенных на одной горизонтальной линии друг с другом. По достижении этого числа все последующие плитки спрайта не будут выводиться на экран. Именно поэтому во многих играх для NES спрайты мерцали, когда их было много на экране одновременно. Таким образом, на чередующихся кадрах будут отображаться только определенные спрайты. Об этих ограничениях художникам нужно помнить, когда они накладывают спрайты друг на друга, потому что, хотя это удваивает количество цветов, это также удваивает количество спрайтовых плиток на одной горизонтальной линии.

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

Чтобы объяснить следующее серьезное ограничение NES, сначала вернемся к тому, что графика хранится в виде плиток. Графические плитки хранятся в 256 плиточных страницах, и плитки из этих страниц не могут быть загружены в VRAM в разных местах, поэтому становится трудно смешивать и сочетать плитки из разных страниц на лету. VRAM NES способна отображать только 512 таких плиток одновременно. Помимо этого ограничения, он делит плитки пополам для спрайтов и фона. Это означает, что в любой момент времени он способен отобразить только 256 плиток спрайта и 256 плиток фона. Это может стать очень ограничивающим фактором, если художник хочет отобразить большое количество спрайтов и фоновых элементов.

Для борьбы с этим ограничением в NES предусмотрена функция, позволяющая художнику разбивать каждую страницу на части, называемые банками. Поэтому, хотя NES и не умеет загружать отдельные плитки из разных точек графических данных, она способна загружать разные участки страницы в разное время. В большинстве игр эти банки будут иметь размер 1K или 2K. Банк 1К равен четвертой части страницы или 64 тайлам, а банк 2К - половине страницы или 128 тайлам. Художник должен решить, будет ли он резервировать использование каждого типа банка для спрайтов или элементов фона, потому что оба типа банков должны быть задействованы. Это означает, что вы не можете иметь банки по 1К для спрайтов и фонов. Одна страница должна использовать банки 1K, а другая - 2K. Вообще говоря, в большинстве игр для спрайтов используются банки по 1K, а для фонов - по 2K, поскольку фоновые тайлы, как правило, более статичны и требуют меньшего разнообразия на лету.

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

Один из главных недостатков использования 1-килобайтных банков для спрайтов и 2-килобайтных для фонов - это то, как NES обрабатывает фоновую анимацию. Чтобы анимировать элемент фона в игре для NES, художник должен создать дубликаты анимированных элементов фона. Каждый новый дублированный банк будет содержать следующий кадр анимации для каждого из анимированных элементов. Затем эти банки меняются местами, как в перекидной книге, чтобы создать анимацию. Если художник использует для фонов банки на полстраницы, то хранение всех этих дубликатов может занять много места. Один из способов обойти эту проблему - поместить все анимированные фоновые элементы для всей игры в один банк. Но при этом у художника остается всего 128 плиток для статических элементов на каждом фоне. Художник сам решает, как лучше поступить, когда решает, какие банки использовать для искусства.

Во многих играх той эпохи используются трюки для создания эффектов вроде параллакс-скроллинга на заднем плане, но и они ставят перед художниками и дизайнерами непростую задачу. Если на более поздних 16-битных консолях можно было создавать несколько фоновых слоев, то на NES такой возможности нет. Все фоны представляют собой одно сплющенное изображение. Чтобы создать ощущение глубины и многослойности, были использованы различные программные приемы. Например, для создания параллакс-фона разработчик может установить регистр, который определяет, когда на экране отображается определенная горизонтальная линия (так называемая растровая линия). С помощью этого регистра можно управлять скоростью и направлением прокрутки экрана. С его помощью можно создать горизонтальный ряд фона, который прокручивается с другой скоростью, чем остальной фон. На этом этапе художники и дизайнеры должны помнить, что фон - это все еще одно плоское изображение. Если в эту область поместить платформу или любой другой элемент, который должен находиться "перед" медленно движущимся фоном, то он тоже будет прокручиваться медленнее, чем остальное изображение. Это значит, что дизайнерам нужно внимательно следить за тем, где они размещают элементы фона в сцене, а художникам - создавать фон таким образом, чтобы эффект был бесшовным.

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

Когда кто-то пытается создать проект, аутентичный ретро-консоли, необходимо учитывать множество технических моментов, о которых современные разработчики могут не беспокоиться. Из-за того, что старые машины рендерили изображения и имели небольшое пространство для маневров с CPU и GPU, дизайнерам приходилось творчески подходить к работе, чтобы обойти ограничения аппаратного обеспечения. В современную эпоху становится важно узнать о тех ограничениях и приемах, чтобы действительно воссоздать внешний вид и дизайн игр той эпохи. В следующем посте мы рассмотрим ограничения, наложенные 16-битной эпохой на дизайн, а также работу над Unity, необходимую для создания ощущения "старого телевизора". Руководство 2D Pixel Perfect по 16-битному ретро-изображению теперь доступно здесь.

---

Впервые создаете уровни с помощью Tilemap? Изучите построение мира в 2D в этом учебном пособии для начинающих на Unity Learn.