В каком разрешении рисовать пиксель спрайты
> GameDev > В каком разрешении рисовать спрайты для мобильной 2D игры?
Как известно, существует огромный парк мобильных устройств с различными разрешениями экранов и соотношениями сторон. И если вы читаете эту статью, то вам, как и мне, хочется определиться под какое же разрешение просить художника рисовать спрайты, да так, что бы на большинстве устройств игра выглядела хорошо.
Мы сразу отметём метод, согласно которому, игра рисуется под какой-то один формат, а для всех прочих масштабируется. Этот способ искажает картинку на экране и всё выглядит не так как задумывал художник.
Наш метод будет заключаться в том, что бы при разных соотношениях сторон отрезалась та часть изображения, которая не скажется ни на геймплее, ни на художественной композиции. Но какого размера должно быть исходное изображение фона?
Для этого определимся какие же разрешения экранов и соотношения сторон наиболее популярны на текущий момент. Я для этого воспользовался открытой статистикой от команды Unity, посмотреть её можно здесь. Вот данные актуальные на момент написания статьи:
Разрешения экранов
Соотношения сторон
А вот как выглядит список наиболее популярных разрешений по отношению друг к другу:
Мы будем отрезать лишнее по бокам, оставляя изображение по высоте нетронутым. Поэтому следует определиться с максимальным размером изображения по высоте.
Если нарисовать что-то в размере 2048 x 2048 px, а затем программно уменьшить до размера 512 x 512 px, то изображение останется чётким, в обратную сторону с растровой графикой такое не проделаешь — картинка выйдет смазанной.
Как видно выше, из списка самых популярных разрешений, максимальная высота составляет 1536 px.
Для самых популярных форматов соотношения сторон (98,5%) можно подобрать ширину изображения такой, что бы по высоте оставались всё те же 1536px. Вот что из этого получилось:
С учётом того, что боковые грани будут отрезаться на экранах с соотношением сторон отличным от 16:9, можно разместить важные для геймплея объекты так, что бы они остались видны, т.е. разместив их внутри зоны размером 2048 X 1536 px. Исходя из этого шаблона можно рисовать фон и прочие элементы игрового мира.
Можно пойти ещё дальше и оставить только 3 наиболее популярных соотношения сторон (87,7%), тогда получится следующий шаблон:
В таком варианте, места под размещение важных для игры объектов будет гораздо больше.
Аналогичным образом можно создать шаблон под игру с вертикальным расположением экрана:
Шаблоны в виде .psd файлов можно загрузить здесь.
Share the post "В каком разрешении рисовать спрайты для мобильной 2D игры?"
Размеры спрайтов
По сравнению со сложностью режимов экрана фонов правила работы со спрайтами относительно просты. У SNES есть несколько разных режимов спрайтов, почти как и у Mega Drive, но с жёстким ограничением: консоль может использовать в игре всего два разных режима спрайтов
Спрайты могут иметь размеры 8×8, 16×16, 32×32 или 64×64. Но и это ещё не всё — дизайнерам приходилось выбирать сочетания из готового списка размеров спрайтов. В играх для SNES могли использоваться следующие сочетания:
- 8×8, 16×16
- 8×8, 32×32
- 8×8, 64×64
- 16×16, 32×32
- 16×16, 64×64
- 32×32, 64×64
В Fork Parker’s Crunch-Out для всех спрайтов в игре используется сочетание 32×32 и 16×16.
Спрайты могут работать с восемью 16-цветными субпалитрами. Как и во всех ретро-консолях, первый цвет любой субпалитры — это общий цвет, используемый для прозрачности. Большое количество субпалитр по сравнению с другими консолями даёт нам бОльшую свободу в выборе цветов для спрайтов. Нужно только помнить что существует жёсткое ограничение в 256 цветов.
Хранение в тайлах и загрузка в настоящей консоли
Ещё один уникальный аспект Genesis/Mega Drive заключается в том, что данные тайлов графики и палитры — это не единственные данные, загружавшиеся во VRAM консоли во время игры. Это усложняло создание дизайна графики для консоли, потому что количество тайлов графики, которые можно загрузить в память в конкретный момент времени, зависело от того, что ещё происходило в игре. В общем случае большинству игр было достаточно места для загрузки примерно 1000 тайлов, и при наличии динамических элементов тайлы всегда можно было свободно выгружать и загружать в память.
Тайлы, загруженные в память в показанной выше сцене. Большое пустое пространство посередине и артефакты внизу — это пространство, выделенное в памяти для врагов и других элементов игры.
Несмотря на то, что во VRAM одновременно могло загружаться большее разнообразие тайлов, чаще всего это дополнительное пространство резервировалось под спрайты. Это обеспечивало более сложную анимацию и позволяло отображать на экране одновременно большее количество спрайтов. То есть фундаментальная философия дизайна с повторяющимися сегментами тайлов по-прежнему активно использовалась в 16-битной графике, благодаря чему фон занимал не так много доступного пространства. Разрешения NES, Genesis и SNES почти одинаковы, поэтому отправной точкой подобных типов дизайна обычно служили сегменты размером 16×16.
Здесь художник использовал паттерн из блоков 32×32 для создания основной части пола, который является фоном.
Работа со слоями фона
Genesis/Mega Drive позволяла одновременно отображать на экране два слоя фона. Это означает, что накладываемые элементы более удобны для создания дизайна фонов. Тем не менее, слоёв всего два, поэтому для придания сцене большей глубины художник с разработчиком могли использовать трюки со строками развёртки. К счастью, поскольку все это можно было перенести на второй слой, дизайнеры могли свободно располагать объекты переднего плана перед фоном, не разрушая при этом иллюзии.
Кроме того, благодаря наличию второго слоя разработчикам больше не приходилось применять трюки с приоритетами спрайтов. Вместо постоянной смены приоритетов спрайтов на лету теперь можно было задать второй слой фона, отображаемый перед игроком. Однако для более сложного наложения всё равно могли потребоваться быстрые манипуляции с приоритетами спрайтов. Второй слой фона также имеет область, которую можно использовать для интерфейса. Эта область зафиксирована на месте и никогда не скроллится.
Из-за вида сверху вниз для дерева нужно было создать специальные тайлы, чтобы манипулировать порядком слоёв спрайтов.
Использование 2D Pixel Perfect для создания ретро-игр
Начиная с Unity 2019.2, пакет 2D Pixel Perfect является частью 2D Renderer, который, в свою очередь, находится в пакете Lightweight Render Pipeline (LWRP). Если вы не пользуетесь LWRP, то 2D Pixel Perfect можно так же использовать как отдельный пакет. В этом туториале мы покажем, как настраивать проект в LWRP.
Цветовая палитра
Первое фундаментальное различие Genesis/Mega Drive и SNES относится к цветовой палитре. Как и Mega Drive, консоль SNES не имеет прошитой в «железе» цветовой палитры, поэтому вы можете выбирать свои цвета.
Сложность SNES заключается в том, что в ней использовались цвета глубиной 5 бит на пиксель (bits per pixel, BPP), которые редко встретишь сегодня. Вы можете реализовать их при помощи Gimp, а затем просто постеризировать изображение в 32 оттенков RGB, что будет соответствовать цветам с 5 BPP. Это позволит точно отображать цвета изображения на консоли.
Эта опция в Gimp находится в пункте меню Colors > Posterize… Появится всплывающее окно, в котором можно выставить уровни Posterize равными 32 для создания цветов, совместимых с 5 BPP.
Создание аутентичной графики в стиле SNES
Игры для Super NES по-прежнему работали с сетками/тайлами размером 8×8 пикселей, поэтому чрезвычайно полезно использовать повторяющиеся тайлы. В общем случае их размеры должны быть кратными восьми.
Ограничения спрайтов
При переходе к 16 битам намного увеличивается свобода работы со спрайтами. Genesis/Mega Drive позволяет одновременно отображать на экране до 80 спрайтов и до 20 спрайтов на одной горизонтальной линии; все последующие спрайты не рендерятся. Кроме того, спрайты больше не считаются отдельными тайлами 8×8. Genesis способна генерировать одиночные спрайты, составленные из нескольких тайлов. Они могут быть размером от одного тайла до 4×4 тайлов. Более крупные изображения придётся составлять из нескольких спрайтов.
Паттерны дизеринга и контрастность
Одна из характерных особенностей графики 16-битной эпохи — это использование дизеринга. В те времена в игры играли на ЭЛТ-телевизорах, где экранные пиксели обычно сливались друг с другом. Художники воспользовались этой особенностью, применяя в своей графике паттерны дизеринга: когда один пиксель сливался с другим в повторяющемся паттерне, это создавало иллюзию большего количества цветов, чем допускала консоль. Для передачи эстетики оригинала дизеринг и по сей день активно используется в пиксель-арте, несмотря на более качественные дисплеи.
Дизеринг часто применялся на 16-битных консолях. На ЭЛТ-экране паттерн пикселей смешивался, создавая новые цвета или эффекты прозрачности там, где это было невозможно.
Если сравнивать со SNES, то Genesis/Mega Drive отображает цвета с большей контрастностью. Это тоже нужно учитывать при выборе субпалитр. Если создать игру с приглушёнными и тусклыми цветами, то во время рендеринга на оригинальном «железе» палитры могут отличаться. В общем случае графику следует создавать в высококонтрастной цветовой палитре, чтобы готовый результат соответствовал изначальному видению художника.
Палитры и субпалитры
Сверху показана сцена из игры для Genesis, снизу — использованные субпалитры.
Создавая графику для любой 16-битной платформы, необходимо работать с индексированной палитрой. Для этого можно использовать редактор Gimp — свободную альтернативу Photoshop, позволяющую манипулировать индексированными палитрами.
Для создания индексированной палитры в Gimp нужно перейти в Image > Mode > Indexed…
Откроется окно Indexed Color Conversion.
Для Maximum number of colors зададим значение 15. Можно использовать автоматические паттерны дизеринга, но обычно они выглядят лучше, если создавать их вручную.
Теперь цвета изображения индексированы. Эта информация автоматически сохраняется вместе с изображением, чтобы индекс цветов можно было использовать. Если вам необходимо изменить порядок цветов в индексе, то достаточно просто нажать правой клавишей мыши на цветовую карту и выбрать Rearrange Colormap…
Откроется окно, позволяющее перетаскивать цвета, меняя их порядок.
Популярный трюк для увеличения глубины цвета заключается в управлении палитрой в определённой строке развёртки, аналогично тому, как реализуется параллаксный скроллинг на NES. Консоль Genesis способна менять выбор субпалитры графики в указанной строке развёртки. Этот трюк часто используется для создания иллюзии того, что часть уровня находится под водой. «Подводные» цвета добавлятся к отдельной субпалитре, и эта субпалитра загружается, когда на экране рендерится указанная строка развёртки.
Режимы экрана консоли
В этом разделе мы вкратце расскажем о различных режимах экрана.
Самое значительное различие между консолями заключается в том, что SNES может рендерить графику фона в семи разных режимах экрана. В некоторых режимах экрана SNES способна одновременно рендерить на экране 256 цветов из одной субпалитры. Вот самые популярные режимы экрана:
- Mode 1: один из самых распространённых режимов экрана для SNES. Это наиболее усреднённый режим, демонстрирующий возможности консоли. Mode 1 позволяет работать с тремя слоями фона, два из которых имеют собственные 16-цветные субпалитры, а последний слой имеет 4-цветную субпалитру.
- Mode 3: этот режим обычно используется для крупных статических изображений, например, экранов заставки или сюжета. Он имеет два слоя фона. Первый использует полную 256-цветную субпалитру, второй — 16-цветную.
- Mode 7: это одна из главных особенностей SNES. Этот режим демонстрировался в большинстве рекламных материалов консоли. Благодаря Mode 7 домашние консоли впервые оказались способны выполнять преобразования изображения в реальном времени: масштабирование, поворот, растяжение и наклон в плоскости фона. Он использовался для создания эффектов псевдо-3D, которые можно увидеть во многих гоночных играх и симуляторах полётов для SNES.
В этом офисе используется Mode 1 с одной субпалитрой (две другие используются для UI). На экране Thanks for Playing используется Mode 3, который позволяет художнику применить 256-цветную палитру.
Разрешение экрана
Ещё одно серьёзное различие между двумя системами относится к разрешению экрана. Поскольку SNES стала потомком NES, обе консоли имели схожие разрешения экрана. Внутренее разрешение SNES равно 256×224. Оно позволяет рендерить изображения в безопасных областях большинства ЭЛТ-телевизоров без усечения части картинки. Это разрешение никогда не меняется, поэтому оно будет размером изображения, и художнику следует использовать его.
Это изображение занимает полноэкранное разрешение SNES, используемое в большинстве режимов экрана.
Создание аутентичной графики в стиле Genesis
Подготовка нового проекта в Unity 2019.2 и LWRP
-
Запустите Unity Hub, нажмите New, выберите 2D и укажите название своего проекта.
В этом динамичном туториале я покажу вам основные приёмы создания пиксельарта. Спрайты - это картинки в 2D играх, которые представляют собой различные объекты: игрового персонажа, монстров, предметы и т.д.
Пиксельарт, также известный как дот-арт в Японии, это вид цифрового искусства, где рисование происходит на пиксельном уровне. В основном он ассоциируется с графикой игр 80-90 годов, в которых художники преодолевали технические ограничения (небольшое количество памяти и маленькое разрешение), создавая все более захватывающие картины.
В наши дни пиксель арт все еще актуален и используется в играх, несмотря на возможность создания реалистичной 3D графики. Почему? - cпросите вы. Если не брать во внимание ностальгию, то создавать хорошие рисунки с такими жесткими ограничениями все также интересно и достаточно сложно. Также, как мы восхищаемся тем, что художник, сделав пару мазков, может показать объем и вызвать у нас какие-то эмоции, мы любуемся несколькими соединёнными пикселями, выполняющими ту же работу.
Порог вхождения в пиксельарт довольно низкий, по сравнению с традиционным рисунком и 3D графикой, позволяя инди разработчикам воплощать свои идеи в жизнь. Но это никоим образом не означает, что закончить игру с ним будет легко. Я видел много пиксельарт проектов на кикстартере, которые думали, что управятся с игрой за год, когда в реальности нужно было около шести лет. Пиксельарт на том уровне, который хотят видеть люди требует достаточно много времени и усилий, есть лишь пару путей, позволяющих ускорить этот процесс.
Работая с 3D моделью ты, по крайней мере, можешь крутить ее, деформировать, перемещать её конечности, копировать анимацию с одной модели на другую и т.д, чего не скажешь о пиксельарте. Профессиональный пиксельарт почти всегда подразумевает под собой большое количество кропотливого размещения пикселей на каждом кадре анимации.
Как говорится “Кто предупрежден, тот вооружен!”, а теперь о моем стиле: по большей мере я использую пиксельарт для своих игр, они же и воодушевляют меня продолжать заниматься этим. Если быть точным, то я фанат Famicon(NES), 16 битных консолей и аркадных автоматов 90ых годов.
Мои любимые игры этой эры имели пиксельарт, который нельзя описать иначе как насыщенный, дерзкий и чёткий. но не настолько, чтобы быть чопорным или минималистичным. Это стиль, который я взял за основу своего, но вы можете легко использовать техники, применяемые в этом туториале для чего-то совсем другого. Смотрите на художников, которые вам нравятся и делайте пиксельарт, какой вашей душе угодно!
Самыми базовыми инструментами для занятия пиксельартом являются лупа и карандаш. Также будут полезными линия, фигуры, выделение и заливка цветом. Есть большое количество как платных, так и бесплатных программ, в которых имеются данные инструменты. Я расскажу о самых популярных из них (включая те, которые использую сам).
Если у вас Windows, вы можете использовать Paint, несмотря на скудность программы, в ней имеются все нужные инструменты, чтобы заниматься пиксельартом.
На удивление неплохой редактор, которым вы можете пользоваться прямо через ваш браузер. Может производить экспорт как в png и gif, так и сохранять спрайты в браузере. Неплохой способ начать заниматься пиксельартом.
GraphicsGale - это первый редактор, о котором я узнал, разработанный и предназначенный именно для пиксельарта и его анимации. Созданный компанией HUMANBALANCE, он стал бесплатным в 2017 году и до сих пор широко используется несмотря на рост популярности Aseprite. К сожалению, доступен только обладателям Windows.
Самый популярный редактор на данный момент. Содержит большое количество полезных функций и инструментов, постоянно обновляется, доступен как на Windows и Mac, так и на Linux. К тому же вы можете пользоваться программой бесплатно, скомпилировав её исходный код. Если вы серьёзно хотите заниматься пиксельартом и ещё не выбрали себе редактор, то Aseprite будет неплохим вариантом.
GameMaker Studio 2 - это отличный движок для создания 2D игр, который также содержит достойный редактор спрайтов. Если вы собираетесь делать игры с пиксельартом, то это лучший выбор для обоих. В данный момент (2019 год) я использую его для создания UFO 50, коллекции из 50 ретро игр. В основном я использую местный редактор для создания спрайтов, а тайлсеты делаю в Photoshop.
Так как Photoshop требует ежемесячную плату и не приспособлен для пиксельарта, я не рекомендую его, если только вы уже не используете его. Несмотря на выше сказанное, его вполне можно использовать для статических спрайтов, но он достаточно громоздкий по сравнению с GraphicsGale или Aseprite.
Я настоятельно рекомендую пользоваться графическим планшетом для любого вида иллюстраций, чтобы предотвратить заболевания повторяющейся длительной нагрузки на запястье (туннельный синдром). Такие заболевания намного легче предотвратить, чем вылечить. Когда появляется боль, вы уже обречены ( мои дни рисования мышкой, сделали невозможным играть в игры с быстрым нажатием кнопок). Так, что позаботьтесь о себе пока не поздно – это того стоит! В данный момент я использую маленький Wacom Intuous Pro.
Если у вас нет возможности купить планшет, по крайней мере, возьмите лучезапястный бандаж. Я использую от компании Mueller Green Fitted Wrist Brace. У других брендов бандажи были либо слишком неудобными, либо недостаточно эффективными.
Давайте приступим к делу! Мы начнем со спрайта персонажа размером 96x96 пикселей. Я решил нарисовать орка, но вы вправе выбрать что-то другое. Конечный вариант орка находится на скриншоте Final Fight, который вы можете увидеть выше, для того, чтобы вы понимали масштаб спрайта– он большой для большинства ретро игр (оригинальный скриншот имеет размер 384x224 пикселя).
Причина по которой мы начинаем с такого большого спрайта заключается в том, что мне будет легче показать техники пиксельарта именно на нем. К тому же, создание больших спрайтов очень похоже на обычное рисование, которое может быть вам знакомо. После того, как мы изучим базовые техники можно будет уменьшить размер спрайта.
Пиксельарт характеризуется своими ограничениями. Каждый пиксель имеет большое значение, по сравнению с другими видами иллюстраций, также как и цвета, количество которых должно быть ограничено.
Так, что да, выбор палитры цветов очень важен и помогает обозначить ваш стиль. Но для начинающих пиксельарт художников лучшим вариантом будет отложить теорию насчёт цветов в сторону и просто выбрать одну из существующих палитр ( или несколько рандомных цветов), чтобы начать рисовать. Одно из преимуществ пиксельарта заключается в том, что вы в любой момент можете поменять палитру цветов.
Именно для этого туториала я буду использовать палитру из 32 цветов, созданную специально для UFO 50. Палитры из 32 и 16 цветов используются достаточно часто. Данная палитра была создана для выдуманной консоли, которая бы находилась где-то между Famicon и PC Engine. Можете спокойно взять эту палитру и двигаться дальше (или нет! Это не столь важно).
Мы начнем рисовать наш спрайт с наброска карандашом, также как если бы мы рисовали на бумаге. Опираясь на свой опыт, могу сказать, что неплохие пиксельарт художники достаточно хороши в обычном рисовании и наоборот. Так что никогда не помешает улучшить свои навыки рисования.
Дальше мы должны убрать лишние пиксели и сделать все линии толщиной в один пиксель. Но какие пиксели являются лишними? – для того, чтобы ответить на данный вопрос, нам нужно познакомиться с таким понятием как зазубрины.
Нам нужно научиться делать два вида линий: прямые и закруглённые. На бумаге все будет зависеть от контроля мышц, но мы работаем с маленькими цветными блоками, что создает свои трудности.
Для того, чтобы делать хорошие линии, нужно свести к минимуму количество зазубрин: маленьких пикселей или группы пикселей, которые нарушают последовательность линии. Так как в пиксельарте каждый пиксель имеет большое значение, пару зазубрин могут испортить весь спрайт. Представьте, что вы рисуете линию на кусочке бумаги и кто-то внезапно стукает по столу, получившаяся у вас загогулина является тем же, что и зазубрины в пиксельарте.
Выбор стилистики и нюансы создания анимации: опыт инди-студии Gunpowder Team.
Над пиксельным экшеном Gunpowder on The Teeth: Arcade работают всего два человека, а если точнее, то один — Руслан Елисеев. Второй участник студии занимается организаторской работой: помогает с шоукейсами, арендой офиса, разработкой сайта и так далее. Разработка в сумме заняла около трёх лет, и вот теперь игра на финишной прямой.
Её легко принять за что-то вроде Broforce, однако это будет не совсем верно: локации здесь не разрушаются, зато помимо стрельбы и взрывов есть элементы хардкорного платформера в стиле Super Meat Boy.
Первое, что бросается в глаза, когда запускаешь Gunpowder on The Teeth — великолепный пиксель-арт и необычная монохромная ретростилистика.
Руслан Елисеев написал для DTF колонку, в которой рассказал, как родился визуальный стиль игры, и поделился опытом создания пиксельной графики и анимации.
Я обожаю военный сеттинг в Battlefield 3, но совершенно не умею играть в шутеры. Зато умею в Super Meat Boy — так идея и родилась. Совместив геймплей платформера и сеттинг военного шутера, я сделал игру, которую можно охарактеризовать как «Super Meat Boy на войне», но большинство людей прозвало её «Broforce, только чёрно-белый».
Gunpowder on The Teeth — игра о противостоянии двух фракций, в которой более 100 уровней за каждую из сторон, различные механики вроде управления техникой, сюжет и многое другое. И изначально она была цветной.
Основное меню в этой игре стилизовано под военный планшет с мнонохромным двухцветным экраном.
Также в игре есть секретные уровни: они выглядят более просто по стилистике, механике и геймплею. По замыслу, бонусные уровни запускаются на «менюшном» планшете, следовательно они должны выглядеть как изображение на нём. Поэтому для них я выбрал отдельную монохромную палитру.
Спустя более чем два года разработки я столкнулся с распространённой проблемой инди-геймдева: проект разросся из простенькой аркадки в грандиозную игру мечты, с перспективой затянуться на несколько лет и, возможно, не выпуститься вообще. Так что я решил на основе уже имеющихся наработок склепать более быструю игру, которая послужит тренировкой по выпуску готового проекта, рекламой для большой игры и, при удачном стечении обстоятельств, профинансирует её.
За основу я взял как раз-таки бонусные уровни, собрал основные механики, добавил слово Arcade к названию. И примерно за полтора года получилась полноценная игра, которая сейчас находится на стадии завершения и должна выйти в конце года.
Одна из ключевых особенностей игры — настоящий пиксель-арт. Под «настоящим» я имею в виду соответствие картинки всем параметрам пиксель-арта: привязка объектов и их анимаций к пиксельной сетке, неизменность разрешения (в игре фиксированное разрешение 320х180), отсутствие прозрачностей и полупрозрачностей, соответствие конечных цветов в различных спецэффектах изначально выбранной палитре. Хотя без нарушений этих правил не обошлось: все уровни начинаются и заканчиваются наложением фона с изменяемой прозрачностью.
Пиксель-арт я выбрал, потому что он очень прост в освоении. Конечно, настоящие пиксельные шедевры создаются по несколько десятков часов и требуют очень кропотливой работы, с учетом множества мелких деталей. Но порог вхождения очень низок, и эти мелкие детали создаются буквально из пары прямоугольников. Рисуем розовый квадрат 6х6 пикселей, добавляем на него две черные точки — получается лицо. А если потом размножить его на несколько кадров и в одном из них убрать глазки, то вот герой уже моргает или подмигивает. И далее всё зависит только от вашей фантазии.
Вообще, всякого рода упрощения играют на руку, если мы говорим об инди-студии из пары человек. Пиксель-арт проще освоить, проще передать форму и движение объектов.
Первые экземпляры техники в игре были точными копиями аналогов из реальной жизни. Они выглядели очень здорово, но количество времени, затраченное на производство анимации одного объекта измерялось неделями. Это если речь об относительно несложном по строению внедорожнике. А если танк?
Так что стилистика несколько раз менялась ради упрощения. Количество колёс в гусеницах танков сокращалось, сам танк укорачивался, а некоторые детали убирались, за неимением под них места. Остальная техника перерисовывалась под стилистику мультяшного танка, и далее по цепочке переделывалась вся остальная графика игры.
Залог красивого пиксель-арта — это правильно подобранная палитра. Можно нарисовать великолепных героев и окружение, в плане формы, снабдить их отличной анимацией, но это не будет работать из-за плохой палитры. Правильная палитра поможет получить нужную атмосферу. В игре про ядерный постапокалипсис гармоничней будут смотреться серо-грязные цвета. А киберпанк подчеркнут яркие неоновые вывески с кислотными цветами. Хотя везде могут быть исключения.
В Gunpowder on The Teeth палитра переделывалась два раза: в первый раз цвета оказались слишком яркие, так что я сделал их более «пыльными», а во второй раз — не хватило оттенков и нужно было сократить между ними шаг.
Во втором случае перемены оказались очень болезненными: у меня была готова почти вся анимация, для всех двадцати бойцов. У каждого бойца около 50 анимаций, у каждой анимации от 3 до 15 кадров. На протяжении пары недель, по несколько часов в день я правил палитру: жёлтый. жёлтый. зелёный. зелёный. коричневый. сохранить. следующий. В такие моменты особенно сильно начинаешь любить горячие клавиши в графическом редакторе и сериалы на втором мониторе.
В «большой» игре основными цветами являются зелёный (лесной камуфляж одной из кофликтующих сторон) и песочно-коричневый (пустынный камуфляж другой фракции). Путем смешивания этих двух цветов в соотношении 50 на 50 я получил базовый цвет, из которого взял 12 оттенков в диапазоне от белого до чёрного, с равным шагом между значениями этих оттенков.
Полученные 12 оттенков и служат палитрой для моей монохромной игры.
Но просто подобрать палитру — мало, её нужно правильно использовать. Все объекты игры можно поделить на четыре категории.
- Фон — небо и четыре слоя задников. Для их отрисовки используются первые 4-5 цветов (начиная с почти белого): чем ближе к нам слой, тем темнее цвет.
- Объекты заднего плана — трава, деревья и объекты, которые находятся за главным героем. Используются последние 4-5 цветов (от почти чёрного).
- Объекты переднего плана — те, что перед главным героев. Тут используются цвета из середины палитры.
- Основные объекты — герой враги, техника, ловушки и так далее. Тут используются все цвета, но подгоняются под конкретные случаи, на фоне остальных слоёв.
Без трудностей в случае с монохромной палитрой, конечно, не обошлось. Основная проблема — это плохая видимость ключевых объектов (колючей проволоки и мин, например), особенно при высокой динамике геймплея. Игроки списывают это на плохой дизайн, но на самом деле таким образом я пытался привнести в игру некую правдоподобность. В реальности заградительные сооружения маскируют, а враги не подсвечиваются — они стараются действовать скрытно. Боец в реальных условиях должен видеть невидимое: блеск проволоки от растяжки, движение в кустах.
Впрочем, в игре нет таких крайностей, когда объектов не видно совсем. Они или частично скрыты (в траве или кустах), или близки по цвету, что почти сливаются.
Некоторые тесты показали, что 10-15 минут игры достаточно, что бы научиться различать объекты и ловушки среди окружения.
Художник Матеуш Retro Ян, рисующий в стиле пиксель-арт, написал для издания Retronator Magazine статью, в которой попытался ответить на вопрос, в чём разница между пикселями и вокселями, но при этом рассказал намного больше.
Ян объяснил, чем игры девяностых отличаются от современных 2D и 3D-игр в пиксельной стилистике, а также изучил разные варианты такого подхода к созданию графики.
Редакция DTF публикует перевод материала.
Предупреждение: в тексте много картинок и GIF-анимаций, поэтому он может долго прогружаться. Особенно с мобильных устройств.
Ранее в этом году мне задали такой вопрос: в чём разница между пикселями и вокселями?
Иногда бывает сложно удержаться, поэтому вместо прямого ответа я написал по этому поводу целую статью.
Вопрос вполне логичен. Общество вываливает на вас что-то вроде постера к фильму «Пиксели», и вы не понимаете, что происходит. Это вот пиксели? Или это воксели? Это птица? Самолёт? Никто вам ничего не объясняет.
Я до сих пор не могу решить, должен ли я из своей любви к старым играм посмотреть этот фильм, или наоборот НЕ смотреть его.
Но не бойтесь, пока я с вами, всё будет хорошо. К моменту, как вы прочитаете этот материал, вы будете знать всё про пиксели, воксели и всё, что находится между ними. Расслабьтесь, заварите чаю.
Начнём с основ, иначе вы не сможете понять общей картины. Есть два основных способа представления компьютерной графики: векторный и растровый.
Векторная графика описывает изображение с помощью математических формул, обычно с помощью таких вещей как прямые, кривые и различные геометрические формы.
Растровая графика представляет изображение как массив цветных точек, расположенных друг за другом по сетке.
Второе различие — способ представления компьютерной графики в двумерном и трёхмерном пространстве. Если разделить их, а заодно векторную и растровую графику, то мы получим такую таблицу:
В двумерной векторной графике каждая точка на линии или фигуре описывается вектором с двумя составляющими (x и y). В общем, именно поэтому двумерная графика так и называется.
А вот пример низкополигонального двухмерного векторного изображения.
Оно построено исключительно из двумерных полигонов (в данном случае — треугольников). Изображение называется низкополигональным из-за сравнительно небольшого числа составных элементов. Именно поэтому треугольники легко заметны.
Добавим ещё одно измерение. В трёхмерной векторной графике всё работает так же, но добавляется ещё одна компонента — z. Три компоненты — три измерения.
Разница между двумерным изображением Улуру и трёхмерной моделью гоночного трека в том, что на трек мы можем посмотреть под любым углом.
Чтобы отобразить трек на вашем экране (то есть на двумерной поверхности), мы выбрали несколько углов и отобразили трёхмерную геометрию на плоском изображении.
Так и получается двумерное изображение.
Но есть одна хитрость, позволяющая показать трёхмерную геометрию в 2D. Просто измените угол угол обзора или повращайте объект.
Да, действительно, перед нами трёхмерный объект. И даже очки не нужны!
Так, немного разогрелись. Теперь разберёмся с тем, как растровая графика работает в 3D и 2D.
Растровое двумерное изображение представляется массивом с определённым количеством столбцов и строк.
Каждая клетка в таком массиве называется пикселем (от слов picture element — pixel). Помимо его координат в массиве пиксель определяется цветом.
Мы уже узнали, что низкополигональное векторное изображение состоит из заметных полигонов. Если мы сделаем то же самое с растровой графикой и заметными пикселями, то получим пиксель-арт.
На двумерной пиксельной сетке можно изобразить трёхмерные объекты вроде автомобиля Lotus Esprit или X-Wing из «Звездных войн», но для изображения они не трёхмерны. Их нельзя покрутить и рассмотреть с разных сторон, как гоночный трек или машинку. Точно так же мы не можем вертеть рисунок Улуру — изображение состоит из полигонов, но они располагаются не в трёхмерном пространстве, а в двумерном.
Итак, мы поговорили о двумерной и трехмерной векторной графике и 2D-растровой графике. Не хватает только 3D-растровой графики.
В трёхмерной растровой графике всё пространство разделено на колонки и строчки по всем трём направлениям (высота, ширина и глубина). В результате трёхмерное пространство становится набором разноцветных кубов-вокселей (volume element — voxel, элемент объёма). Каждый воксель определяется цветом и расположением.
Мы уже знаем, как выглядит пиксель-арт. Воксель-арт выглядит похожим образом.
Похоже на LEGO, не правда ли?
Так как теперь мы смотрим на трёхмерное изображение, сцену можно рассмотреть с разных сторон. Вот так выглядит воксельный Татуин под другим углом:
Можно даже делать анимации. Вот это, например, анимированный воксельный персонаж от Sir Carma:
Сравните его с двумерным пиксельным персонажем:
То есть в воксельном изображении анимация изменяет цвет (или расположение) определённых маленьких кубов, а в пиксельном — меняется цвет квадратов-пикселей.
Теперь вам известна разница между пикселями и вокселями (и много чего ещё… прошу прощения).
Но давайте пойдём ещё дальше. Не время останавливаться. Я рассказал это всё потому, что на современных мониторах любая графика в конечном итоге отображается на двумерной растровой сетке.
Для нас это интересно потому, что люди, увлекающиеся пиксель-артом, создают его с помощью всех возможных видов графики.
«Я что, могу превращать воксели и трёхмерные модели в пиксель-арт?» — спросите вы. Именно так. С помощью особых техник рендеринга и шейдинга можно создавать совершенно уникальный пиксель-арт.
Схема наверху отображает не совсем полную картину. Двумерное векторное изображение можно отображать и сразу, без преобразований. Но всё не так просто.
Двумерное векторное изображение может отображаться напрямую только на векторном мониторе. Они, например, использовались на некоторых аркадных автоматах Atari.
Вот как оно бы выглядело на осциллографе.
Похожим образом иногда отображается трёхмерное векторное изображение.
Как я уже говорил, сначала трёхмерное изображение нужно отобразить на плоскости. Так получается двумерное векторное изображение, которое можно вывести на векторный монитор.
Настоятельно рекомендую глянуть трейлер аркадной игры VEC9:
В наши дни вы вряд ли найдёте векторный монитор где-нибудь за пределами музея. Люди используют мониторы, на которых отрисовываются… пиксели!
Современные ЖК-дисплеи окрашивают каждый отдельный пиксель в определённый цвет, включая или выключая маленькие красные, зелёные и синие жидкие кристаллы на каждую клетку. Если что, в старых ЭЛТ-мониторах работал похожий механизм: на каждый пиксель три разноцветных трубки зажигались под воздействием луча электронов.
Итак, что же мы делаем, если нам надо отобразить векторное изображение на растровом мониторе? Для этого используется техника растрирования. Каждый полигон (чаще всего треугольник) отображается на массив пикселей.
Трёхмерная графика прорисовывается на плоском мониторе так: сначала трёхмерные треугольники отображаются на плоскость и становятся двумерными полигонами, а затем полигоны растрируются и становятся набором пикселей.
Но что насчёт вокселей? Сегодня они чаще всего представляются как трёхмерные векторные кубы. Мы создаём трёхмерную модель с треугольниками по каждой стороне воксельного куба.
Так же, как и в прошлый раз, трёхмерные треугольники затем отображаются на плоское пространство, после чего растрируются в двумерное изображение.
Сегодня практически весь воксельный арт создаётся таким образом, чаще всего с помощью бесплатной программы MagicaVoxel.
Есть ещё один подход. Каждый воксель можно представить как точку в трёхмерном пространстве, то есть как кусочек объёма. Можно отрисовать воксель на плоском пространстве, если расположить пиксель в том же месте. Или наоборот: взять пиксель с экрана и отыскать в пространстве воксель, находящийся на том же месте.
Обратный подход называется ray casting («бросание лучей»). Луч направляется прямо в трёхмерное пространство, и летит, пока не наткнётся на воксель. На практике в пространство «бросается» столько лучей, сколько надо, чтобы покрыть все необходимые точки.
Впервые эта техника была использована в игре Wolfenstein 3D. В ней комнаты целиком состояли из вокселей. Рендеринг работал довольно быстро, потому что один луч отображал целую колонку пикселей на экране. Результат, по сути, получался двумерным, поэтому такую 3D-графику иногда называют 2.5D (потому что третье измерение вроде как не настоящее).
Сейчас Wolfenstein обычно не называют воксельной игрой, но именно она дала толчок к развитию воксельных движков девяностых.
Поначалу воксели использовались только для создания локаций. Из-за нехватки ресурсов разработчики не могли хранить информацию о каждой клетке пространства, но могли записывать высоту расположения вокселей на плоской карте (также известной как карта высот).
Карта высот (слева) показывает насколько высоко поднимаются колонки вокселей (чёрный – низкие колонки, белый - высокие).
Так как вся информация о вокселях могла содержаться только в картах высот, то игры не могли создавать нависающие над игроком скалы. Но, господи, насколько же детализированными получались локации!
Ray casting был не единственной технологией воксельного рендеринга в девяностых. Существовали и другие. Каждая с собственными сильными сторонами: разрушаемое окружение, поддержка обработки моделей машин и персонажей и так далее. Это было что-то невероятное! Но, что иронично, именно такое разнообразие в итоге и привело к закату технологии.
В 2000 году началась эпоха графических карт или графических процессоров. Специальные встроенные в компьютер устройства, которые сейчас называются GPU, отлично справлялись с обработкой 3D-полигонов. Они делали это очень быстро, но больше ничего не умели. К несчастью, различные алгоритмы рендеринга вокселей (включая ray casting) остались за бортом.
Воксельные движки переехали на центральный процессор, но и у него хватало собственных проблем. Процессор думал о таких важных вещах, как физика, геймплей и игровой ИИ. Графические карты создавались для того, чтобы «переселить» рендеринг на отдельную микросхему. В результате рендеринг значительно ускорился, а у процессора освободились ресурсы на выполнение других задач. Воксельные движки не смогли угнаться за полигональной графикой. Так они и умерли.
С тех пор прошло 10 лет, и вдруг воксели вернулись. Помощь пришла с неожиданной стороны. Появилась игра, которая нашла к вокселям совершенно новый подход. Воксель – это куб, верно? И теперь эти кубы уже могли спокойно обрабатываться видеокартой. А дальше вы и сами всё знаете.
Давайте вспомним всё, о чём я рассказал, и попытаемся ответить на вопрос, с которого всё началось. Что же такое пиксели и что такое воксели?
Пиксель — мельчайший элемент двумерного пространства, разделённого дискретно на множество равных частей.
Каждый пиксель определяется вектором с двумя целыми числами X и Y. Именно поэтому пиксельное пространство дискретно, в то время как в векторной графике координаты определяются вещественными числами.
Соответственно, воксель — мельчайший элемент трёхмерного дискретного пространства, где все элементы имеют одинаковый размер.
Ну что, на этом всё? А вот и нет!
Как видите, определение довольно общее, а потому пиксели и воксели могут быть очень разными. Давайте попробуем соединить все четыре элемента таблицы вместе: растровое/векторное, а также 2D/3D.
В прежние времена для отображения 2D-спрайта на экране приходилось напрямую копировать биты из памяти, в которой хранились цвета спрайта, в память, хранящую данные об отображенных на экране цветах. Эта технология называется bit blit или bit BLT - bit block transfer (перенос блоков битов). Сейчас почти никто не рендерит двухмерную графику именно так.
Виртуальная консоль PICO-8 — один из немногих современных движков, работающих на блиттинге, но в прошлом двумерная графика не могла отображаться иначе.
Сейчас большинство графических движков работает с векторами, потому что видеокарты заточены именно под них. В таких условиях, чтобы отобразить изображение на плоском экране, его нужно нанести на полигон с помощью карты текстур.
Текстуры — двумерные растровые изображения, размещённые на трёхмерном полигоне.
Если не вдаваться в подробности, то именно так и работает трёхмерная графика.
Вот, например, как выглядит высокополигональная 3D-модель без текстуры и с текстурой высокого разрешения:
Благодаря шейдингу и картам текстур нам даже не нужно слишком много полигонов, чтобы получить приятно выглядящего персонажа.
Вот низкополигональная трёхмерная модель с качественной текстурой:
А если взять текстуру с низким разрешением, то получится приятная на вид низкополигональная модель с текстурами в стиле пиксель-арт:
Снова можно вспомнить Minecraft. Её блоки — воксели по определению (мельчайшие дискретные элементы игры), и по сторонам они покрыты пиксельными текстурами. Однако, обратите внимание, что не все блоки в игре — простые кубы.
А теперь разберёмся с 2D. Если натянуть текстуру на плоский прямоугольник, мы получим современную 2D-графику. На современном железе каждое 2D-изображение (чаще всего в данном контексте мы называем его спрайтом) отображается на прямоугольнике, состоящем из двух треугольников. Два треугольника (их пара называется квадом) рендерятся с натянутым на них спрайтом. И так изображение оказывается на своём месте.
С изображениями высокого разрешения всё понятно.
Но вот с текстурами в стиле пиксель-арта всё становится немного сложнее. Всё зависит от разрешения экрана, на котором отображаются спрайты.
Мы уже знаем, что пиксельные текстуры без проблем наносятся на трёхмерные низкополигональные модели даже на экранах с большим разрешением. Снова подумайте о Minecraft. Ведь низкополигональные кубы всё равно рендерятся на дисплеях с разрешением 1920×1080.
То же самое можно сделать и с полигонами на плоскости. Возможно взять пиксель-арт, нацепить его на 2D-квад и отреднерить результат на мониторе с высоким разрешением. Тогда каждый пиксель на исходном изображении окрасит несколько пикселей на дисплее в определённый цвет.
Это называется пиксель-артом с большими пикселями. Каждый пиксель на спрайте увеличивается в размерах и становится большим квадратом на изображении.
Если спрайт вдруг наклоняется или поворачивается, то сразу становится заметно, что квадраты на экране состоят из нескольких пикселей:
Посмотрите на листву на этом изображении и сравните с вращающимся спрайтом при низком разрешении:
Обратите внимание, что пиксели на колесе остаются на одной линии и горизонтально, и вертикально, а на гифке из Path to the Sky большие пиксели на листве, птице и мосту заметно искажаются при движении.
Чтобы достичь этого, Kingdom полностью рендерится при низком разрешении и растягивает пиксели только на итоговом изображении. В то же время Path to the Sky, Hotline Miami и Moonman рендерят спрайты на монитор напрямую.
Kingdom — двумерная игра, но такой же подход можно применить и в трёх измерениях.
Если нацепить пиксель-арт текстуры на трёхмерные модели и отрендерить их при низком разрешении, получится что-то такое:
С тенями всё нормально. Хотя на первый взгляд кажется, что перед вами пиксель-арт, на самом деле это полноценная 3D-сцена в низком разрешении с пиксельными текстурами.
Анимации, основанные на векторах (со скелетным ригом), могут использовать пиксельный стиль себе на пользу:
И если запустить рендер на низком разрешении, то анимация ещё сильнее начнёт напоминать пиксель-арт, почти как в случае с Kingdom.
Может быть, эта анимация и не кажется слишком качественной, но у неё есть свой стиль. Почти как в старых добрых играх девяностых.
А теперь снова поговорим о высоком разрешении. Существует игра, которая по полной использует свою трёхмерную природу, сохраняя двухмерный стиль. Это The Last Night от студии Odd Tales.
Их модели нарисованы в 2D, но наложены на трёхмерный мир со всеми современными графическими эффектами: динамическим освещением, bloom, depth of field, кинематографичными ракурсами камеры, отражениями и так далее.
Таким образом, разработчики создали трёхмерный мир, на который можно посмотреть с разных углов.
А вот ещё один пример качественного динамического 3D-освещения. Невероятно атмосферная игра с печальной судьбой — Confederate Express:
Все модели отрисованы в 2D, но каждый объект хранит данные по шейдингу для света, идущего с любого угла. Свет обрабатывается модулем Sprite Lamp, и благодаря ему кажется, что лучи попадают на трёхмерные объекты.
Проблема в том, что с таким подходом мы получаем только шейдинг для спрайтов, но тени всё равно не отобразятся корректно без трёхмерной геометрии объекта. А что может дать нам трёхмерную геометрию? Правильно. Воксели!
Отличным примером такого подхода является недавно анонсированная игра Pathway:
Кажется, словно графика состоит исключительно из плоских спрайтов, но на самом деле модельки в игре полностью объёмные. Разработчики девяностых пытались сделать свою графику максимально реалистичной и современной. Но разработчики из студии Robotality не собираются заходить так далеко, им достаточно, чтобы воксель на экране соответствовал размеру пикселя на мониторе. В результате графика выглядит как очень приятный для глаза пиксель-арт, но у движка есть вся необходимая ему 3D-информация.
В подходе к отображению вокселей в стиле пиксель-арта нет ничего инновационного. Впервые такая технология была использована в игре FEZ. Авторы называли кубики, из которых состояла игра, трикселями (3D-пикселями). Триксель — это куб со сторонами в 16 вокселей.
В каждый отдельный момент времени игрок видит FEZ только с одного угла, и поэтому ему кажется, что он видит мир в 2D. Именно поэтому FEZ выглядит как пиксель-арт, но мир всё равно может вращаться.
Читайте также: