ТЕМА: "Хороший" пиксель-арт и выбор стиля ("Ikenfell")

Мой скромный перевод статьи @ChevyRay - автора игры "Ikenfell".
"О моем подходе к пиксель-арту, кем я вдохновляюсь, и о том, какие правила и палитры я использую для игры".
Устал, спрятать под спойлеры нету сил, потом. Хотя картинки весят немного,грузятся быстро




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

ПЛАН

1. Заметка
2. Перспективы
3. Вдохновение
4. Цвета и палитра
5. Разработка
6. Персонажи
7. Портреты (фейсы) и диалоги
8. Битвы (боёвка)

1. "Хороший" пиксель-арт и выбор стиля

Как и в большинстве стилей искусства, есть много споров о том, ЧТО такое "хороший" пиксель-арт и как его достичь. Я следую некоторым общим рекомендациям, но большинство из того, что я делаю, просто многократные попытки и перерисовки до тех пор, пока я не получу желаемых результатов.
Многие сильные пиксель-арт-художники творят шедевры, намного превосходящие мой уровень. Я же просто делаю, что умею, на пределе своих возможностей, но не выше своей головы. Поэтому кое-где мои дизайнерские решения могут заметно отличаться от взглядов более талантливых художников.
Теперь давайте начнем!

2. Перспектива

Камера в "Ikenfell", как и многие 2D-игр (особенно RPG), имеет взгляд на игровой мир с высоты птичьего полета.



Камера смотрит вниз примерно на 60 градусов (это приблизительная цифра, на этом снимке экрана вы можете видеть, что я очень либерален с углами объектов). Проецирование является ортографическим: по мере того, как объекты уходят дальше от камеры, они не выглядят меньше (как в реальной жизни), не «сплющиваясь» на экране.



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

3. Вдохновение

Визуальная составляющая "Ikenfell" вдохновлена несколькими играми. Я нашел скриншот каждой игры, который был относительно похож на скриншот "Ikenfell", опубликованный выше, так что вы можете легко увидеть, откуда я черпал идеи для каждого из них!

Link’s Awakening



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



Всё просто, и при этом запоминающе. Фиолетовые цвета и призрачные деревья создают ощущение беспокойства (призраки выскочат из могил и нападут на вас, но внешний вид локации заставляют вас быть готовыми к этому). Маленькие тайлы щебня и сорные кустарники говорят о том, что это старое заброшенное кладбище, давно никем не ухоженное.
Скала на нижних экранах дает понять местоположение местности (кладбище находится на поднятом плато, что дает ощущение погребальных обрядов того, кто владел этими могилами). Выходы слева и сверху имеют разные типы ландшафта, что указывает на то, что это кладбище является своеобразным мостом из одной области в другую. Поэтому мы знаем, что попадаем из одной локации совсем в другую.
И, наконец, несмотря на то, что четыре карты содержащат одни и те же элементы, они отличаются друг от друга. У вас есть несколько путей, чтобы пройтись по каждой комнате, избегая призраков.
Я мог бы рассказать про каждый отдельный экран «Link’s Awakening», поэтому лучше я остановлюсь прямо сейчас. Подобный разбор каждой карты - отличная пища для вдохновения. Какая великолепная игра.

Pokemon Ruby/Sapphire



Хотя я не особенно люблю дизайн персонажей (да и стиль пиксель-арта в целом) в "Pokemon Ruby/Sapphire", мне очень нравятся их здания и интерьеры, поэтому это еще один источником вдохновения для многих архитектур "Ikenfell".
Мне нравится отсутствие деталей, мешающих просмотру, для чего часто просто убираю боковые и нижние стены интерьеров. На этом скриншоте есть одна верхняя стена с черной полосой вверху, чтобы дать ощущение высоты потолка. Минимальное количество мебели и отсутствие мелких деталей дает ощущение стиля этого персонажа:



Много зданий в этой игре имеют уникальную вдохновляющую архитектуру. Когда здание или дом выглядели совершенно иначе, чем другие, особенно интересно исследовать его интерьер с замечательными новыми деталями. Этот магазин велосипедов с плиточным полом, желтые/оранжевые блики, тонкие внутренние стены и мелкие детали, разбросанные вокруг, были такими запоминающими маленькими областями:



Эта игра вдохновила меня на изучение десятков и десятков строительных стилей и дизайнов, и всегда стараться делать новые дома, здания и интерьеры с уникальной архитектурой.

Mother 3



Простые линии, смелые плоские цвета и почти детский плоский вид "Mother 3" чудесно маскируют чувство композиции и прекрасное использование пространства. Я думал, что эта игра визуально была огромным шагом для "Earthbound", и если после прохождения игры вы вернетесь и просто посмотрите на несколько комнат, вы начнете видеть, насколько красиво и "по-настоящему" устроены многие из них
Как и в приведенном выше скриншоте, ниже показана другая ночная сцена. Вместо использования динамической системы освещения (слишком сложной на маленькой приставке, такой как GBA), в игре используются красивые синие/фиолетовые палитры для темных областей.



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



Темные контуры персонажей и объектов,а также смелые цвета и внутренние бликовые контуры в "Ikenfell" очень вдохновлены "Mother 3". Если вы посмотрите на это сравнение бок о бок ("Mother 3" слева, "Ikenfell" справа), вы можете видеть, как объекты имеют темные контуры по краям. Но края ВНУТРИ спрайта вместо этого используют светлый бликовый цвет, а не другую темную линию, пересекающую их.



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

Minish Cap



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



При раскраске мне нравится смотреть на "Minish Cap", потому что она отлично справляется с плоскостью. То, как эти деревья темнеют ближе к их основанию, по-настоящему красиво, и маленький узкий путь в правую часть экрана так подробно намекающий нам о возможности в дальнейшем по нему пройти, мастерски сделан. Обратите внимание, как трава в основном показана одним цветом, но несколько пучков заставляют нас видеть ее объемной.



"Minish Cap", как и "Mother 3", также отлично использует огромные тела плоского цвета. Деталь часто предлагается с небольшими контурами, например облаками на скриншоте выше. Он также служит полезной цели геймплея: очень часто плоские цветные области - это места, где вы можете ходить, а высокоструктурированные объекты и тайлы - непроходимы.



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


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

4. Цвета и палитра

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



5. Разработка

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



Вот анимированная версия этого же изображения, поэтому вы можете видеть, как каждый шаг улучшает внешний вид:



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

6. Персонажи

Поскольку вся игра происходит в одном месте, а школа магии сама по себе довольно яркое запминающее место, каждый персонаж выходит действительно забавным, потому что у меня нет разбросанных городов или огромных городов, о жителях которых можно волноваться. В "Ikenfell", вероятно, всего около 30-40 персонажей, каждый из которых имеет уникальный дизайн. Нет персонажа-«шаблона», который я использую - каждый персонаж с нуля.
Но, как правило, есть пара других рядом с ним для ориентира, дабы я мог убедиться, что он подходит для игры.



Здесь вы можете увидеть двенадцать персонажей игры и их соответствующие силуэты. Ноги - единственное, что у них на самом деле одинаковое, и выглядит как шаблон. Если бы я снова смог начать игру с нуля, я бы хотел поиграть с размером больше. Когда персонажи маленькие, они практически одинаковой высоты толщины, но у более высоких персонажей будет разный рост, "мускулистость" и т. д.).
Несмотря на небольшой размер, однако, все они очень узнаваемы, поэтому я ими очень доволен.
Больше сказать о них особо и нечего. Вы также можете заметить, что большинство персонажей также следуют схеме с двумя-тремя цветами.
Выбор убрать глаза был потому, что спрайты слишком малы: глаза оказались бы или просто одинаковыми для всех персонажей (что мне не понравилось), или комично большими. Поскольку в играх есть "фейсы (портреты) во время разговоров, я решил, что более важно подчеркнуть их лица и выражения именно в них.
Говоря о которых…

7. Портреты и диалог

В течение нескольких месяцев развития у "Ikenfell" фактически не было портретов для диалога. Спрайты просто двигались и разговаривали. И все. У меня не было уверенности привлекать большие портреты персонажа (я ужасен в рисовании людей и анатомии)
А еще я чувствовал, что игра становится слишком большой для меня...



Но однажды, по прихоти, я нарисовал маленькие портреты для каждого из главных персонажей в моем блокноте с карандашом. Мне нравилось, как выглядели эти маленькие рисунки, поэтому я снова нарисовал их с несколькими выражениями, но не смог их «разглядеть». Я решил, что было бы намного проще создать фейсы, если бы я сначала нарисовал их карандашом, а затем перевел это в пиксель-арт
Так я уже сделал большинство портретов персонажей.
Вот несколько из них и их соответствующие силуэты. Обратите внимание, что каждый символ асимметричен. Я сразу заметил, что если левая/правая сторона персонажа - зеркальное изображение, они выглядят действительно жутко и странно. Это, вероятно, обычное правило из художественной школы, но я усвоил его.



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



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

8. Битвы

На самом деле, когда я изначально работал над игрой, это была action-RPG, более похожая на игру "Link's Awakening". Прошло несколько месяцев разработки, прежде чем у меня возникли некоторые проблемы, и вместо "экшена" игра стала пошаговой тактической RPG.
Поскольку игровой процесс проходил в самой школе, все комнаты должны были быть предназначены для битв и максимального движения по локациям. Интересные формы комнат и тесные пространства внезапно оказались неудобными и скучными для боёвки в реальном времени.



Поэтому я переместил битвы на совершенно отдельный экран, что позволяет мне проектировать и комнаты, и места битв такими, какими хочу. Графика боёв визуально намного отличаются от графики локаций: поле боя огромно и детализировано, а персонажи крупнее и подвижнее.
Место сражения размером 12x3 тайлов. Поэтому они намного горизонтальнее, чем вертикальные. А потому и персонажи могут смотреть только влево и вправо. Я могу просто переворачивать анимацию, что значительно снижает время и трудозатраты. Вы также заметите, что поле битвы тоже перекошено, но почему?
Если мы удалим перекос, ответ станет очевидным:



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



...у нас больше нет этой проблемы, так как на плоской карте враги могут быть выровнены только вертикально, а на "перекошенной" враги также могут стоят в середине нижнего тайла, и большинство спрайтов недостаточно высоки, чтобы перекрыть вышестоящих. Да и в любом случае, я считаю, что это просто делает битвы более динамичными и захватывающими.
Благодарю!
Надеюсь, вам понравилось это читать! Я мог бы говорить обо всём намного больше, но это простой обзор, чтобы объяснить многие мои графические решения при разработке игры. Возможно, в будущем я сделаю несколько более мелких постов, рассказывающих немного больше о технических деталях того, как я приближаюсь к пиксельному искусству, но это было хорошее введение.
Я не могу дождаться, пока вы все не сможете сыграть в эту игру! Мне очень нравится работать над этим.
Надеюсь, вам понравится, когда он будет выпущен.
Ура!
@ChevyRay

Юрий вот чесно сказать что весь пиксель арт с смахивает на графон с покемонов как будто ты срисовал

Jagger пишет:
Это перевод статьи, графика автора этой статьи, а не моя. Моя здесь:
тык

кратинки померли. если вдруг кому-то сильно надо, можно посмотреть их здесь:

https://yadi.sk/d/z7dVpAXEheqC8A

пока времени нет вставить их в статью

Если возможно, дайте пожалуйста ссылку на оригинал статьи.

И напоминаю, что тут картинок нет.

Ruido пишет:
хм,и вправду - ссылок на автора и игру накидал, а на саму статью забыл. Исправляюсь:
- ссылка на оригинал
-ссылка на сайт

а времени вставить картинки по-прежнему нет