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

EDUARDO ORIZ / UNITY TECHNOLOGIESSenior Content Marketing Manager
Aug 2, 2019|15 Мин
2D Pixel Perfect: Как настроить проект Unity для ретро 16-битных игр
Эта веб-страница была переведена с помощью машинного перевода для вашего удобства. Мы не можем гарантировать точность или надежность переведенного контента. Если у вас есть вопросы о точности переведенного контента, обращайтесь к официальной английской версии веб-страницы.

В нашем первом руководстве по 2D Pixel Perfect для ретро-игр мы показали, как настроить инструмент 2D Pixel Perfect и как создавалась 8-битная графика в те времена. В этой заметке мы перемотаем вперед, в 16-битную эру. С помощью Mega Cat Studios вы узнаете, как создать аутентичный арт для игр в стиле Sega Genesis (или Mega Drive) и Super NES, используя настройки Unity, графические структуры и цветовую палитру.

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

Ретро игры


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

Использование 2D Pixel Perfect для ретро-игр

Прежде чем погрузиться в эту статью, мы рекомендуем вам ознакомиться с нашим предыдущим руководством по ретро, в котором мы рассказывали о настройках 2D Pixel Perfect и о том, как воссоздать графику в 8-битном стиле. В Unity 2019.2 2D Pixel Perfect теперь является частью 2D Renderer, который входит в пакет Lightweight Render Pipeline (LWRP). 2D Pixel Perfect также существует как отдельный пакет (с той же функциональностью) для создателей, которые не используют LWRP. В этом руководстве мы покажем вам, как настроить проект в LWRP.

Создание нового проекта в Unity 2019.2 и LWRP

В Unity Hub нажмите New, выберите 2D и назовите свой проект.

Новый проект

2. Чтобы импортировать пакет 2D Pixel Perfect, щелкните меню Window на панели инструментов и выберите Package Manager. Во всплывающем окне выберите пакет Lightweight RP, убедившись, что вы получили версию 6.9.0 или выше.

LWRP

3. Далее вы настроите 2D-рендерер в редакторе и создадите новый ассет Pipeline Asset. В окне проекта щелкните правой кнопкой мыши на представлении Assets и выберите Create > Rendering > Lightweight Render Pipeline > Pipeline Asset.

4. В окне проекта в представлении Assets создайте новый 2D-рендерер, щелкнув правой кнопкой мыши и выбрав Create > Rendering > Lightweight Render Pipeline > 2D Renderer.

Актив рендерера

5. Выберите созданный вами ассет трубопровода. Выберите General (Общие), затем измените Renderer Type (Тип рендеринга) с Forward Renderer на Custom (Пользовательский).

6. Назначьте созданный вами 2D-рендерер полю данных.

Трубопроводный актив

7. В настройках графики установите параметры Scriptable Render Pipeline Settings для использования нового созданного ассета Pipeline Asset.

Теперь 2D-рендерер должен быть настроен, включая 2D Pixel Perfect Camera.

В Unity 2019.2 2D Sprite могут иметь материал "Sprite-Lit", который позволяет им реагировать на 2D-освещение. Если вы не используете 2D-свет в своем проекте, убедитесь, что у вас есть материал, который не требует 2D-света, чтобы сделать спрайты видимыми, в этом случае вы можете изменить материал на "Sprites-Default".

Изменение настроек текстур по умолчанию
Настройка Pixel Perfect для 16-битных графических стилей

Вам нужно добавить компонент Pixel Perfect Camera к основной камере. Мы рекомендуем установить флажок Run In Edit Mode.

Разрешение консоли Sega Genesis составляет 320x224 px (или сетка из 40x28 плиток по 8x8 пикселей). Это версия NTSC. Разрешение Super NES составляет 256×224 (30x28 плиток по 8x8 пикселей) и в версии NTSC.

Для обоих графических стилей рекомендуется использовать разрешение по высоте 224 px и разрабатывать активы с 8 PPU.

Используя эталонный спрайт (показано полноэкранное изображение 320x224 из игры Sonic the Hedgehog для Sega Genesis), вы можете наблюдать, как спрайт с разрешением 8 пикселей на единицу (PPU) вписывается в сцену с тем же разрешением и PPU.
Используя эталонный спрайт (показано полноэкранное изображение 320x224 из игры Sonic the Hedgehog для Sega Genesis), вы можете наблюдать, как спрайт с разрешением 8 пикселей на единицу (PPU) вписывается в сцену с тем же разрешением и PPU.

Если вам нужно узнать, что делает каждая опция в компоненте 2D Pixel Perfect Camera, посмотрите нашу предыдущую статью в блоге о ретро-играх.

Создание подлинных произведений искусства в стиле Genesis

В этом разделе мы рассмотрим процесс создания иллюстраций, имитирующих внешний вид различных консолей, как это было сделано в нашем блоге о NES. Здесь меньше ограничений, чем в 8-битных проектах, и больше свободы в работе с цветом, но у Genesis есть свои ограничения. Мы также считаем важным объяснить, как работает оригинальное оборудование, чтобы вы могли применить эти ограничения в своем собственном ретро-проекте.

Палитры и субпалитры

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

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

Палитры
Выше представлена сцена Genesis, а ниже - используемые субпалитры.
Выше представлена сцена Genesis, а ниже - используемые субпалитры.

Чтобы создавать для любой 16-битной платформы, нужно работать с индексированной палитрой. Для этого можно использовать Gimp - альтернативу Photoshop с открытым исходным кодом, позволяющую манипулировать палитрами с индексами.

Чтобы создать индексированную палитру в Gimp, перейдите в меню Изображение > Режим > Индексированный...

Индексированный цвет

Появится окно Индексированное преобразование цвета.

Индексированный цвет

Установите Максимальное количество цветов на 15. Вы можете использовать автоматические шаблоны дизеринга, но они выглядят лучше, когда создаются вручную.

Dithering

Цвета изображения теперь индексируются. Эта информация автоматически сохраняется вместе с изображением, чтобы можно было использовать индекс цвета. Если вам нужно изменить порядок цветов в индексе, вы можете просто щелкнуть правой кнопкой мыши на карте цветов и выбрать Rearrange Colormap...

Цветная карта

Появится всплывающее меню, позволяющее перетаскивать цвета в новом порядке.

Цветная карта

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

Хранение и загрузка на основе плиток на оригинальном оборудовании

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

Еще один аспект, уникальный для Genesis/Mega Drive, заключается в том, что данные графических плиток и палитр - это не единственное, что загружается в VRAM консоли во время игры. Это может сделать разработку искусства для консоли сложной задачей, поскольку количество графических плиток, которые могут быть загружены в память в определенный момент времени, меняется в зависимости от того, что еще происходит в игре. Вообще говоря, в большинстве игр достаточно места для загрузки ~1000 тайлов, а если в игре есть динамический элемент, то тайлы всегда можно свободно менять местами.

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

Хотя в VRAM можно одновременно загрузить большее количество доступных тайлов, в большинстве случаев эта дополнительная свобода резервируется для спрайтов, чтобы обеспечить более разнообразные анимации и больше типов спрайтов на экране одновременно. Это означает, что основная философия дизайна - использование повторяющихся сегментов плиток - по-прежнему часто используется в 16-битном искусстве, чтобы фон не занимал слишком много свободного пространства. Разрешения NES, Genesis и SNES довольно близки, поэтому сегменты 16x16 обычно являются отправной точкой для такого рода дизайнов.

Здесь художник использовал шаблон из чистых блоков 32x32, чтобы создать большую часть прогулочного пространства на заднем плане.
Здесь художник использовал шаблон из чистых блоков 32x32, чтобы создать большую часть прогулочного пространства на заднем плане.
Работа с фоновыми слоями

Genesis/Mega Drive позволяет одновременно использовать два фоновых слоя на экране. Это означает, что слоистые элементы более доступны для создания фонов. Тем не менее, это всего лишь два слоя, поэтому художнику и разработчику, возможно, придется прибегнуть к некоторым трюкам с растровыми линиями, чтобы создать большую глубину сцены. К счастью, поскольку все эти элементы могут быть перенесены на второй слой, дизайнеры могут свободно размещать объекты переднего плана перед фоном, не нарушая иллюзию.

Наличие второго слоя также делает ненужным использование трюков с приоритетом спрайта для создания объектов переднего плана. Вместо того чтобы постоянно менять приоритеты спрайтов на лету, теперь вы можете просто установить второй фоновый слой для отображения перед игроком, хотя более сложные слои все равно могут потребовать быстрой манипуляции приоритетами спрайтов. Вторая фоновая панель также имеет вложенную панель, которая может использоваться для отображения головных экранов (HUD). Вложенная панель будет зафиксирована на месте и не будет прокручиваться.

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

При работе со спрайтами появляется больше свободы при переходе на 16-битный формат. На Genesis/Mega Drive можно одновременно выводить на экран 80 спрайтов и около 20 на одной горизонтальной линии, после чего отображение новых спрайтов прекращается. Кроме того, спрайты больше не считаются отдельными тайлами 8x8. Genesis способен генерировать одиночные спрайты, состоящие из нескольких тайлов. Они могут быть как маленькими, в одну плитку, так и большими, размером 4x4 плитки. Все, что больше этого, все равно потребует создания из нескольких спрайтов.

Финальный босс использует большое количество анимированных фоновых элементов, слоев и множество спрайтов. Все это было бы невозможно на 8-битной платформе.
Финальный босс использует большое количество анимированных фоновых элементов, слоев и множество спрайтов. Все это было бы невозможно на 8-битной платформе.
Узоры дизеринга и контрастность

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

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

Из двух основных 16-битных консолей Genesis/Mega Drive отображает цвета с гораздо большей контрастностью. Это также необходимо учитывать при выборе субпалет. Если сделать что-то в более приглушенных и тусклых тонах, то это будет выглядеть не совсем так, как ожидается, когда дело дойдет до реального рендеринга изображения на аппаратном обеспечении. Как правило, при создании картин следует использовать высококонтрастную цветовую палитру, чтобы конечный результат соответствовал первоначальному замыслу художника.

Создание подлинных произведений искусства в стиле SNES

Для проектов Super NES мы все еще работаем с плитками/сеткой размером 8x8 пикселей, поэтому работа с повторяющимися плитками очень полезна. Как правило, они будут кратны восьми.

Цветовая палитра

Первое фундаментальное различие между Genesis/Mega Drive и SNES касается цветовой палитры. Как и в Mega Drive, в SNES нет жестко заданной цветовой палитры, поэтому вы можете выбирать цвета.

Сложность SNES в том, что в ней используются цвета 5 бит на пиксель (BPP), которые сегодня не очень распространены. Вы можете решить эту проблему, используя Gimp для создания иллюстраций, тогда вы можете просто постеризовать изображение до 32 оттенков RGB, что даст 5 цветов BPP, даже если вы не сохранили изображение в таком виде. Благодаря этому цвета изображения будут точно отображаться на консоли.

Цветовая палитра

Эту опцию можно найти в Gimp в разделе Colors > Posterize... Появится всплывающее окно, в котором вы можете установить уровень Posterize на 32, чтобы создать 5 цветов, совместимых с BPP.

Posterize
Соображения, связанные с разрешением экрана

Следующее существенное различие между двумя системами касается разрешения экрана. Поскольку SNES является преемником NES, обе системы имеют схожее разрешение экрана. Внутреннее разрешение SNES составляет 256x224. Это позволяет отображать любые изображения в безопасных зонах большинства ЭЛТ-телевизоров, так что ни одно из них не будет обрезано. Это разрешение никогда не меняется, поэтому именно этот размер изображения художник должен использовать в качестве эталона.

Разрешение экрана
Экранные режимы оригинального оборудования

В этом разделе вы найдете краткое описание различных режимов экрана.

Режимы экрана

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

  • Режим 1: Это один из самых распространенных режимов экрана для SNES. Она демонстрирует лучшие средние показатели возможностей консоли. Режим 1 позволяет иметь три фоновых слоя, два из которых имеют собственную 16-цветную субпалитру, а последний слой - 4-цветную субпалитру.
  • Режим 3: Этот режим обычно используется для больших статичных изображений, таких как титульные и сюжетные экраны. Он может похвастаться двумя фоновыми плоскостями. Первый использует полную 256-цветную субпалитру, а второй позволяет использовать 16-цветную субпалитру.
  • Режим 7: Это была одна из главных особенностей SNES. Mode 7 был показан в большинстве рекламных материалов консоли. Впервые домашняя консоль могла применять трансформации к изображению в реальном времени, позволяя масштабировать, вращать, растягивать и перекашивать фоновую плоскость. Это использовалось для создания псевдо 3D эффектов, которые можно увидеть во многих гоночных и летных играх для SNES.

Работа с единственной фоновой плоскостью в режиме 7 значительно отличается от всех остальных режимов экрана, чтобы обеспечить работу этих функций. Во-первых, есть только одна 256-цветная фоновая плоскость, с которой можно работать, а это значит, что все спрайты должны делиться своими цветами с субпалитрой фоновой плоскости. Далее, вместо того чтобы работать с обычным размером экрана SNES, плоскость фона Mode 7 имеет размер 1024x1024 пикселей. Затем он изменяет размер и подгоняется под экран по желанию дизайнера.

В офисе используется Mode 1 с одной субпалитрой (две другие предназначены для пользовательского интерфейса). Экран Thanks for Playing использует режим 3, который позволил художнику использовать 256-цветную палитру.
В офисе используется Mode 1 с одной субпалитрой (две другие предназначены для пользовательского интерфейса). Экран Thanks for Playing использует режим 3, который позволил художнику использовать 256-цветную палитру.
Размеры спрайта

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

Спрайты могут быть размером 8x8, 16x16, 32x32 или 64x64. Мало того, дизайнеры должны выбирать из заранее определенного списка комбинаций размеров Sprite. Игры на SNES могут включать следующие комбинации:

  • 8x8, 16x16
  • 8x8, 32x32
  • 8x8, 64x64
  • 16x16, 32x32
  • 16x16, 64x64
  • 32x32, 64x64

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

В игре Crunch-Out от Форка Паркера для всех спрайтов использовалась комбинация 32x32 и 16x16.

Спрайты имеют восемь 16-цветных субпалитр для работы. Как и во всех ретро-консолях, первый цвет любой подпалитры - это общий цвет, который используется для прозрачности. Большое количество субпалитр по сравнению с другими консолями дает вам большую свободу при выборе цветов для спрайтов. Только не забывайте, что существует жесткое ограничение в 256 цветов.

Следующие шаги

Надеемся, вам понравился этот пост о том, как создавать 8- и 16-битные ретро-игры с помощью 2D Pixel Perfect в последней версии Unity.

Мы еще не закончили работу над 2D Pixel Perfect, поскольку эта функция будет проверена для производства в Unity 2019.3, а также будет более совместима с Cinemachine 2D.

Сообщите нам, как продвигается ваш собственный проект 2D Pixel Perfect, и не забудьте посетить 2D-форум, чтобы пообщаться с сообществом Unity и командой разработчиков 2D.