Иногда текстура спрайта содержит только один графический элемент, но часто бывает удобнее объединить несколько связанных графических элементов в одно изображение. Например, изображение может содержать составные части одного персонажа, как в случае с автомобилем, колеса которого движутся независимо от кузова. Unity упрощает извлечение элементов из составного изображения, предоставляя для этой цели редактор спрайтов.
Примечание. Убедитесь, что для изображения, которое вы хотите отредактировать, для параметра Тип текстурыустановлено значение Спрайт (2D и пользовательский интерфейс). Информацию об импорте и настройке спрайтов см. в разделе Спрайты Двумерные графические объекты. Если вы привыкли работать в 3D, спрайты — это, по сути, просто стандартные текстуры, но есть специальные приемы комбинирования текстур спрайтов и управления ими для повышения эффективности и удобства во время разработки. Подробнее
См. в Словарь .
Спрайт-текстуры с несколькими элементами требуют, чтобы Режим спрайтабыл установлен на Нескольков ИнспектореОкно Unity, в котором отображается информация о текущем выбранном игровом объекте, активе или настройках проекта, что позволяет просматривать и редактировать значения. Дополнительная информация
Как сделать спрайт лист в aseprite | pixel art | aseprite
См. в Словарь . (Изображение Инспектора импорта текстур ниже.)
Открытие редактора спрайтов
Чтобы открыть Редактор спрайтов:
- Выберите 2D-изображение, которое вы хотите отредактировать, в Просмотре проекта(Рис. 1: Представление проекта). Обратите внимание, что вы не можете редактировать спрайт, выбрав его в сценовом представленииинтерактивном представлении мира, в котором вы находитесь. создание. Вы используете Scene View для выбора и размещения пейзажей, персонажей, камер, источников света и всех других типов игровых объектов. Дополнительная информация
См. в Словарь . - Нажмите кнопку Редактор спрайтовв Инспекторе импорта текстурИнспекторе, который позволяет вам определить, как ваши изображения импортируются из папки Assets вашего проекта в редактор Unity. Подробнее
См. в Словарь(Рис. 2. Инспектор импорта текстур)и Редактор спрайтовотобразит (Рис. 3: Редактор спрайтов).
Примечание.Кнопка Редактор спрайтовотображается только в том случае, если для параметра Тип текстурывыбранного изображения установлено значение Спрайт (2D и пользовательский интерфейс).
Примечание.Установите для параметра Режим спрайтазначение Нескольков Инспекторе импорта текстур, если ваше изображение состоит из нескольких элементов. .
Вместе с составным изображением вы увидите ряд элементов управления на панели в верхней части окна. Ползунок в правом верхнем углу управляет масштабированием, а кнопка цветной полосы слева от него выбирает, просматриваете ли вы само изображение или его альфа-уровни. Крайний правый ползунок управляет пикселизацией (mipmap) текстуры.
Что такое пиксель арт и как его рисовать?
Перемещение ползунка влево уменьшает разрешение текстуры спрайта. Самым важным элементом управления является меню Sliceв левом верхнем углу, которое дает вам возможность автоматически разделять элементы изображения. Наконец, кнопки Применитьи Вернутьпозволяют сохранить или отменить любые внесенные изменения.
Использование редактора
Самый простой способ использования редактора – это идентифицировать элементы вручную. Если щелкнуть изображение, появится прямоугольная область выбора с ручками по углам. Вы можете перетаскивать ручки или края прямоугольника, чтобы изменить его размер вокруг определенного элемента. Выделив элемент, вы можете добавить другой, перетащив новый прямоугольник в отдельную часть изображения. Вы заметите, что при выборе прямоугольника в правом нижнем углу окна появляется панель:
Элементы управления на панели позволяют выбрать имя для изображения спрайта и задать положение и размер прямоугольника по его координатам. Ширина границы слева, сверху, справа и снизу может быть указана в пикселяхнаименьшей единице в компьютерном изображении. Размер пикселя зависит от разрешения вашего экрана. Пиксельное освещение рассчитывается для каждого пикселя экрана. Подробнее
См. в Словарь . Границы полезны при 9-Slicing спрайтах. Также есть настройки для оси Sprite, которую Unity использует в качестве начала координат и основной «точки привязки» графики. Вы можете выбрать одну из позиций относительно прямоугольника по умолчанию (например, по центру, вверху справа и т. д.) или использовать собственные координаты.
Кнопка Обрезатьрядом с элементом меню «Фрагмент» изменит размер прямоугольника так, чтобы он плотно прилегал к краю изображения на основе прозрачности.
Примечание.Границы поддерживаются только для UI(пользовательский интерфейс) Позволяет пользователю взаимодействовать с вашим приложением. Подробнее
См. в Словарь , а не для 2D SpriteRenderer.
Автоматическая нарезка
Изоляция прямоугольников спрайтов вручную работает хорошо, но во многих случаях Unity может сэкономить вашу работу, обнаружив графические элементы и автоматически извлекая их для вас. Если вы нажмете на меню Фрагментна панели управления, вы увидите эту панель:
Если для типа нарезки задано значение Автоматически, редактор попытается угадать границы элементов спрайта по прозрачности. Вы можете установить опорную точку по умолчанию для каждого идентифицированного спрайта. Меню Методпозволяет вам выбрать, как поступать с существующими выборками в окне. Параметр Удалить существующиепросто заменит все, что уже выбрано, Умныйпопытается создать новые прямоугольники, сохраняя или изменив существующие, а Безопасныйдобавить новые прямоугольники, не меняя ничего уже существующего.
Сетка по размеру ячеекили Сетка по количеству ячеектакже доступны для типа среза. Это очень полезно, когда спрайты уже были размещены в обычном шаблоне во время создания:
Значения Размер пикселяопределяют высоту и ширину фрагментов в пикселях. Если вы выбрали сетку по количеству ячеек, Столбец и строкаопределяет количество столбцов и строк, используемых для нарезки. Вы также можете использовать значения Offset, чтобы сместить положение сетки от левого верхнего угла изображения, и значения Padding, чтобы немного отодвинуть прямоугольники Sprite от сетки. Для Pivotможно задать одно из девяти предустановленных местоположений или можно задать Пользовательское положение Pivot.
Обратите внимание, что после использования любого из автоматических методов нарезки сгенерированные прямоугольники по-прежнему можно редактировать вручную. Вы можете позволить Unity выполнить грубое определение границ и поворотов спрайтов, а затем выполнить все необходимые точные настройки самостоятельно.
Изменение размера многоугольника
Откройте Редактор спрайтовдля многоугольника, и у вас будет возможность изменить его форму, размер и положение поворота.
Форма многоугольника
Введите количество сторон, которое должно быть у многоугольника, в поле Стороныи нажмите Изменить.
Размер многоугольника и поворот
Размер полигона
Чтобы изменить размер многоугольника, щелкните спрайт, чтобы отобразить зеленые линии границ и информационное поле спрайта. Нажмите и перетащите зеленые линии, чтобы создать нужную границу, и значения в полях Границаизменятся.
Поворот многоугольника
Чтобы изменить точку вращения многоугольника (то есть точку оси, вокруг которой движется многоугольник), щелкните изображение, чтобы отобразить информационное окно спрайта. Щелкните раскрывающееся меню Сводкаи выберите параметр. Это отобразит синий круг вращения на многоугольнике; его расположение зависит от выбранного вами параметра поворота. Если вы хотите изменить его дальше, выберите Пользовательский поворот, нажмите и перетащите синий круг поворота, чтобы расположить его.
Источник: unityhub.ru
Лучшая программа для рисования спрайтов
Зарегистрированный пользователь может оставлять отзывы, оценивать статьи и решать задачи на курсе. В дальнейшем пользователи смогут делиться и своим контентом.
—> Приключения —> —> Фантастика —> —> Комедии —> —> Ужасы —> —> 2020 —> —> 2019 —> —> 2018 —> —> 2017 —> —> 2016 —> —> 2015 —> —> —> —> —> —> 5.0 —> —> —> —> —> —> 4.0 —> —> —> —> —> —> 3.5 —> —> —> —> —> —> 3.0 —> —> —> —> —> —> 2.5 —>
Популярные новеллы
Lucy — The Eternity She Wished For
The House in Fata Morgana
Princess Evangile
Перезапись
Дизайн и создание спрайтов
Время на чтение:
Автор статьи:
Где найти спрайты?
Когда начинаешь создавать визуальную новеллу, то начинаешь задумываться о том, где брать изображения. Неудивительно, ведь новелла визуальная, там должно быть что-то кроме буковок. Итак, есть 3 варианта действий:
- Нарисовать самому. Это довольно тяжелый процесс, особенно, если никогда не держал карандаш, но зато это весело. Можно нарисовать всё, что угодно и так, как захочешь сам.
- Частично отрисовать самому, частично позаимствовать чужие ресурсы. Вариант подходит, если нет времени и не получается всё создать с нуля.
- Заимствовать полностью. Самый легкий путь, но придется пожертвовать своими представлениями.
Графика
Допустим, вы уже нашли спрайты. В случае, если вы их рисуете самостоятельно или обрабатываете, необходимо выбрать стиль и графику. Графика бывает двух типов: растровая и векторная. Выбирать надо, основываясь на предпочтениях и возможностях.
В растровой графике можно создать реалистичное изображение. Реалистичность получается за счёт объема, который можно получить, играя прозрачностью кистей. Можно использовать различные эффекты и текстуры. В таком случае, требуются хоть какие-то навыки рисования и, желательно, иметь графический планшет. Из минусов — при увеличении размера изображения можно потерять качество и нельзя экспортировать в векторную графику.
Векторная графика, как правило, выглядит очень мультяшно и легка в построении. Векторные изображения можно без проблем уменьшать и увеличивать, ведь всё изображение хранится в виде набора линий, а не отдельных пикселей.
Инструменты
Для растровой графики обычно используются Adobe Photoshop, PaintTool Sai, Krita, Gimp. Фотошоп — одна из самых многофункциональных программ: можно и рисовать, и обрабатывать изображения, и создавать классные эффекты. Но при этом программа достаточно тяжелая, ест много оперативной памяти, если мощности компьютера позволяют, то можно смело использовать. PaintTool Sai хорошо подходит для художников, имеет не перегруженный интерфейс.
Для векторной графики используются Adobe Illustrator, CorelDraw, Canva. Лучше использовать редакторы, которые заточены именно под работу с векторными изображениями.
Для анимации часто используют метод скелетной анимации: в каждой части, которая должна двигаться, создают кость. После покадрово их смещают и таким образом получается движение. Такую анимацию можно создать в программе Spine и Dragon Bones. Для новелл анимацию можно отрисовать и руками. Например, для анимации моргания потребуется всего 2 изображения: с открытыми и закрытыми глазами.
Функционал RenPy позволяет показывать их поочередно с определенным интервалом. Более сложный функционал больше подходит для катсцен.
Процесс создания
Первый этап — скетчинг (или набросок). Его можно сделать в любом редакторе, даже обычном Paint’e. Можно нарисовать на бумаге, а потом отсканировать/сфотографировать и продолжить рисовать на компьютере. Суть скетча — набросать основные детали. Можно добавить цвет, но это необязательно.
Далее создается лайн (контур). Лайн необязательно должен быть чёрным (в таком случае, рисунок будет более грубым). Можно использовать темно-серый цвет или брать цвет определенной детали (например, для светлого лица контур будет темно-бежевым). После завершения лайна можно удалить слой со скетчем.
Переходим к покрасу. Тут всё просто: есть основной цвет и пара цветов для света и тени, чтобы создать объем. Покрас обычно делается под слоями с контуром.
Если не умеете рисовать, то это не беда. У простых рисунков тоже есть свой шарм, так что может получиться даже круче.
Если неохота делать самому, то есть еще 2 варианта.
1. Срисовать. Берете чей-то рисунок, рисуете его самостоятельно, при этом что-то видоизменяя. Изменения обычно небольшие. Есть нюанс: например, если человек видел уточку сверху, то, увидев уточку снизу, он может это вспомнить. В таких случаях лучше указывать автора идеи (например, добавить в меню новеллы пункт ”Об игре” и там перечислить все источники).
2. Использовать референсы. В этом случае берется поза персонажей или общий концепт для создания своего рисунка. Автора можно не указывать, так как ничего конкретного вы не украли.
Если вы ничего не хотите менять, то можно взять готовые изображения, но, как правило, нужно будет указать автора. При этом не все авторы будут довольны тем, что их работы где-то использовались. Будьте осторожны, берите изображения только в том случае, если уверены, что проблем не будет.
В век развитых технологий для создания изображения можно использовать нейронные сети. Например, DALL-E 2 или Midjourney. В последнее время часто публикуются подборки крутых изображений, созданных нейронками.
Изображение, сгенерированное Dall-e 2
7, 2022
Источник: novelearn.ru
Руководство по созданию пиксельной графики для игр
Итак, мы поработали над созданием маленьких 16х16 спрайтов: Они просты, милы и традициональны для консольных RPG-игр. «Но я хочу сделать экшн-игру: что-нибудь с большими спрайтами! Ну вы знаете, что-то вроде файтинга от Capcom (компания Capcom прославилась своими играми для игровых автоматов — прим. пер.)».
Быть может, из-за настоятельного желания рисовать классные, большие спрайты, вы пропустили предыдущие секции туториала и не занимались созданием маленьких изящных спрайтиков. Если я прав, то вернитесь и прочтите пропущенное. Хоть размер спрайтов изменился, все же базовые принципы, описанные ранее, остаются в силе. Окей, предполагаем что вы читали предыдущие главы и теперь по-настоящему готовы к созданию спрайта, который будет «драться».
Для начала, разрешите мне отметить что техника, которую я сейчас опишу, подходит не только для файтинга ( файтинг — игровой жанр, обычно на экране симулируется схватка двух бойцов — прим.пер). Я использую данный термин повсеместно, потому что позы и положения для учебных спрайтов представляют собой различные боевые стойки. Но сама по себе техника и концепции могут быть применены в различных типах игр: Игра Earthworm Jim, вероятно была сделана с помощью такого же подхода. Учитесь на всём, на чём только можно и адаптируйте изученное под свои нужды. Но мы отвлеклись, теперь давайте взглянем на пару примеров из игры Street Fighter Alpha 3.
Вот это действительно нарисовано со знанием дела. Каждый персонаж обладает своим собственным неповторимым видом. Например, Зангриф — это большая гора мускулов, а Сакура в сравнении с ним маленькая тонкая худышка. Также отметьте существенную разницу в ширине спрайтов этих двоих. Значит, художники не были ограничены некоторыми максимальными размерами спрайтов.
Сакура — это спрайт 76х87, Зангриф — 116х111. Но помните, что обычно стандартным размером считается 100 пикселей в высоту. Ширина обычно будет меньше.
Метод, который использует компания Capcom, неизвестен. У них нет туториалов, либо других разъяснений, касающихся процесса создания спрайтов, что не удивительно, ведь у них и так полно других забот. Всё же я добыл кое-какую информацию, путём анализа их спрайтов и собирая отрывки полезных сведений то тут то там. Давайте рассмотрим картинки Чун-Ли из Street Fighter 3:
(нажми, чтобы увеличить)
Все кадры нарисованы от руки, затем отсканированы и переведены в цифровую форму пиксель за пикселем. Может быть у Capcom есть специальная программа, которая осуществляет рэйтрейсинг (здесь рэйтрейсинг- это процесс перевода нечётких отсканированных изображений, в более аккуратные пиксельные рисунки- прим. пер.).
Так как у нас нет такой программы, мы будем всё делать пиксель за пикселем. Это отнимает много времени. Трудно представить что разработчики такой игры как SF3 обрабатывали таким способом каждый кадр. Но опять же, я не имею понятия, как они это делали, так что догадки строятся только на том, что мы видим. Так или иначе, они делали рэйтресинг — каждый спрайт совершенен.
Линия, вырисовывающая мускулы, имеет ширину в один пиксель. Отсутствуют «пятна» пикселей (они появляются, когда вы рисуете линии мышью, и передерживаете кнопку мыши), и нет анти-аллиасинга на линиях (обычно это происходит при уменьшении картинки до требуемого размера спрайта). Это всё означает, что им приходилось поправлять всё ручками, чтобы получить такие великолепные спрайты. Может быть надписи на японском на этой большой картине говорят «Это инструкции как именно мы рисовали наши спрайты», но я не знаю японский. 🙂
Самая важная часть картины, это большая Чун-Ли в верхнем правом углу. Отметьте малое наличии деталей в ней. Когда делаешь спрайт, требуется показать какое-то определенное количество характерных черт. При рисовании маленького 8х8 лица, не будет возможности отобразить, например, ноздри, так зачем тратить на них время при рисовании на бумаге?
Эти изогнутые линии на ёё одежде, в спрайте будут представлены однопиксельными жёлтыми линиями. Появится небольшая жёлтая свисающая отделка на одежде: но добавиться она только на стадии пиксельной работы. Поэтому, стоит еще в начале, выбрать упрощённый стиль для использования при рисовании кадров анимации на бумаге.
Мне стоит отвлечься, и объяснить, что на самом деле существуют различные способы создания спрайтов. Выбор метода, зависит только от уровня ваших навыков, мастерства и размера создаваемых спрайтов. Если вы делаете спрайты для RPG размером 16х16, нет резона сперва рисовать их на бумаге, сканировать и т.д. Работайте сразу в пикселях. При отсутствии навыка рисования на бумаге, разумнее сразу перейти к рисованию пикселями. Два других метода, применимых при отсутствии сканера или навыка рисования от руки:
Cлева мы видим силуэт. Одно из базовых правил анимации гласит, что зритель должен без проблем различать действия вашего персонажа, даже если он показан силуэтом. Впрочем, в видеоиграх, в отличие от классической анимации, используются особые углы при создании анимированных спрайтов, и это также следует учитывать.
Всё же основной принцип действует с той же силой, поэтому силуэтом можно создавать основы для будущих спрайтов. Рисуя так каждый кадр, можно убедиться, что анимация будет приятна для глаз. Силуэт — это быстрая, грубая форма для фигуры. Её используют чтобы получить общее представление о позе персонаже, о телосложении и .т.д.
Справа — человек-набросок. Принцип прост — набрасывается общая форма спрайта, с линиями конечностей и т.п. У данного метода цель такая же, как и у силуэта, но с его помощью можно получить больше деталей, например показать какая рука находится впереди, или определить структуру мускулов. Этот метод конечно, не лучше силуэта: просто его альтернатива. Пробуйте и экспериментируйте, пока не выберете способ, удобный для вас.
В этом туториале, я буду использовать Photoshop 4.0, но постараюсь использовать его простейшие возможности. Разговаривая об анти-алиасинге и ему подобных вещах, я подразумеваю что они реализованы и в других программах для рисования. И думаю, вы умеете пользоваться одной из них. Всё же, надо отметить, что Photoshop в целом не годится для создания спрайтов.
Причина в том, что Photoshop особым образом изменяет и организует палитру, что не годится для создания игр, с заданной палитрой. Это потому, что подобного типа приложения созданы для обработки фотографий и иллюстраций. Манипуляции с палитрой в этих случаях не играют какой-либо важной роли, в отличии от случая со спрайтами.
Если вы делаете игру, не использующую палитру (а это большинство PC игр, в отличии от консольных собратьев), и вам незачем заботиться о количестве используемых цветов, тогда Photoshop может вам подойти. Я же люблю его использовать для практики рисования спрайтов, т.к. не приходится заморачиваться по поводу подбора и выбора цветов, что имело бы место в редакторе, использующем палитру. Ну что, давайте сделаем спрайт. Для начала, я использую картинку нарисованную от руки, т.е. пойду путём компании Capcom:
Я нарисовал персонаж от руки (на четвертинке обычной бумаги А4), раскрасил её, затем отсканировал (настройки — 300dpi, черно-белый режим):перед тем как уменьшить размер, следует изменить режим изображения на RGB или Grayscale, чтобы работал анти-аллиасинг). У меня получилось довольно большая картинка, и здесь я показываю уменьшенную версию.
Есть маленькие недочёты, вроде странно изогнутой передней ноги и т.д:их надо будет поправить при работе с пикселями, это будет не трудно. Заметьте, что я сделал удвоенный контур для обводов куртки и майки. Это вышло случайно, стоп: подождите, я собирался показать к каким проблемам это привёдёт.
Окей, мы не можем работать с такой большой картинкой, поэтому давайте уменьшим размер до100 пикселей. Она нарисована на белом фоне, в целом размер будет чуть меньше ста пикселей, так как я оставил вокруг фигуры немного пустого места, на тот случай, если я захочу удлинить её волосы. Ах да, при уменьшении я использовал билинеарный фильтр. Помимо него в Photoshop-е есть еще два фильтра, каждый из них действует по-разному:
(нажми, чтобы увеличить)
Фильтр «Ближайший сосед» («Nearest Neighbor») полностью отключает anti-aliasing. Это особенно полезно, если нужно увеличить уже завершённый спрайт раза так в четыре, и показать его разбирающимся людям.
Фильтры «Билинейный» и «Бикубический» делают почти одно и тоже: бикубический похоже даёт больше анти-аллисинга. Наша картинка относительно мала, так что в этом случае большой разницы заметно не будет, но если уменьшать картинку высотой 800 пикселей, эффект будет значительный. Проблема бикубического фильтра — слишком много анти-аллиасинга.
Сравните её правую голень на бикубической картинке и на билинейной. На первой она более размыта. То же самое произошло с рукой, и лицом. Это может мешать при рейтресинге, поэтому я обычно использую билинейный фильтр, чтобы получить меньше анти-аллисианга. Итак, мы получили наш спрайт (95 пикселей в высоту):
Приятная сторона Photoshop (и главная причина его использование в данной технике) это его возможность работать со слоями. Они необходимы при рэйтресинге, можно проводить линии, не трогая оригинальную отсканенную картинку. Если ваша программа, не поддерживает слои, можно сказать, что вы немного встряли. Можно сделать рэйтресинг в Photoshop, а потом перенести результат в ваше родное приложение.
Взгляните, на низ её майку, на уменьшенной версии картинки. На рисованной от руки версии на этом месте были двойные контуры, ими я обозначил место для белого цвета, который я собирался добавить. На уменьшенной версии, там просто смазанное пятно. То же самое с рукой. Именно поэтому детали на одежде Чун-Ли были обозначенными тонкими линиями, остальное разработчики добавляли на стадии пиксельной работы.
Вот быстрый способ настроить Photoshop, что осуществить простой рэйтрейсинг. Исходная картинка будет фоном (убедитесь что вы в режиме RGB), поэтому создайте новый слой. Заполните его определенным цветом (например, синим). Установите для этого слоя режим «screen», и вы увидите спрайт, только черные линии станут синими. Затем совместите слои.
Это нужно затем, чтобы вновь нарисованные линии были поверх слоя исходной картинки. Теперь создайте еще один слой и залейте его белым. Для него установите режим «multiply». Собственно, спрайт будет рисовать как раз в этом слое.
Можно было бы просто сделать слой прозрачным, но тогда пришлось бы постоянно переключаться на инстумент «резинка» чтобы что-нибудь стереть, что конечно же неудобно. В нашем случае, фон будет белым, хоть вы то и его не видите. Можно будет легко переключаться с белого на чёрный цвет (пр учётё, что изначальная установка не менялась), нажимая кнопку X Если вы захотите очистить картинку, сделанную из синих линий, поменяйте режим последнего слоя на «normal» и белый фон, закроет исходную картинку.
Использование заднего фона при прорисовке, заметно уменьшает время работы. Все же помните, что фон нужен только для того, чтобы направлять вашу руку. Обычно лицо, получается смазанным, состоящим из разбросанных повсюду пикселей, так что придётся воссоздать его пикселями. Можно исправить и больший кусок оригинала (я например исправлю ногу), если что-то плохо смотрится в пикселях.
Старайтесь избегать больших пиксельных «пятен»: как у неё на руке например. Эти пятна заметны в углах, ну и еще кое-где. Постарайтесь от них избавиться. Группа из четырёх черных пикселей может сильно портить визуальное восприятие спрайта.
Чтобы от них избавиться, можно чуть подправить позу персонажа:например если на картинке рука и нога накладываются на друг друга, и в результате наложения появляются пятна черных пикселей, следует сдвинуть либо ногу либо руку. От этих пятен, «блобов», можно избавиться в большинстве случаев. Продолжаем:
Я закончил рэйтрейсинг линий чёрным цветом. Осталось добавить некоторые детали, и проработать лицо, особенно глаза, но это лучше делать уже при работе цветом. Давайте начнём раскрашивать спрайт, заполняя цветом его основные области, и не добавляя на данном этапе тени:
Итак, я добавил цвета: я предпочитаю работать не на белом фоне, лучше для него взять какой-нибудь мягкий цвет. Белый фон, делает цвета темнее (особенно её майку). Это фокус, который играют с нами наши глаза. Ладно, давайте добавим теней:
Я предпочитаю, в первую очередь, добавлять тени на коже. Вы можете начать где угодно. Лицо, пожалуй, самая сложная часть спрайта — сложно передать узнаваемое выражение лица, работая всего лишь парой другой пикселей. Нос и рот я обозначил цветом, который чуть темнее самого тёмного оттенка кожи.
Чёрный цвет, слишком выделяет эти детали на лице (рот, так вообще кажется открытым), а тёмный оттенок кожи слишком незаметен. После добавления белого цвета в глаза, стало понятно, что она смотрит в сторону. Продолжим, и прорисуем тени на остальных частях тела нашего персонажа:
С тенями, она смотрится более трехмерной. Но это еще не финиш: Я хочу добавить некоторые детали: отделку на куртке и белые линии на рукавах.
Изначально я планировал две белые линии, которые должны были спускаться по рукавам, но на спрайте для них не хватило места. К тому же белый цвет сильно бы контрастировал с темным цветом её майки. Кажется, что белая линия имеет ширину больше одного пикселя. На самом деле это не так. Наш глаз обманывается, из-за сильного контраста.
Если бы у меня все же сохранилось сильное желание добавить эти две линии на её рукавах, то я мог бы показать вторую линию в таком кадре, где она повёрнута чуть сильнее. Я добавил кое-какие детали её кроссовкам и куртке, изменил черные линии на штанинах, и по той же причине исправил чёрный цвет на ей лице, нос и рот теперь обозначены цветом затененной кожи. Черный цвет слишком выделяется. Последний штрих, который можно внести — добавить цвета в её контур.
Лично, я не люблю раскрашенные контуры. Зато компания Сapcom использует их, причём так, что выглядит всё классно. Я не разобрался в этом вопросе окончательно (все же я думаю, что фишка тут в использовании темных цветов для контуров), и потому предпочитаю черные контуры.
Если их раскрасить, то в целом всё становится размазанным, нельзя определить где начинается или заканчивается какая-то часть одежды ну и т.д. К тому же могут наблюдаться проблемы, если цвет фона будет совпадать с цветом контура. С чёрным фоном будет то же самое, но этого легче избежать. Все же, это моё личное предпочтение, и я не знаю способа, как делать приятные цветные контуры.
(c) 1997-2023 Алексей Гаркушин
Источник: www.gas13.ru