Как делаются пиксельные игры
В современной игре визуализация так же важна, как и геймплей. С помощью «ожившей картинки» мы теперь не только привлекаем внимание и создаем атмосферу — визуализация рассказывает историю, впечатляет игрока, увлекает игрой и создает желание возвращаться к ней снова и снова.
Едва ли не самая важная часть всех этих процессов — анимация. Она «оживляет» картинку и с ней оживляет игру.
Наша студия накопила немалый опыт создания пиксель-арт анимации, и мы хотим им поделиться. В качестве примеров в этой статье мы будем использовать примеры из игры, которую делаем.
В двух словах о ней для контекста: наша игра будет социальной RPG, действие которой наполовину происходит в небольшом американском городке 60-х годов с множеством активностей, а вторая половина состоит из тактических боев с монстрами в «альтернативном мире».
Без выверенных образов персонажей игра не будет восприниматься целостной. Когда у команды есть сформированное видение того, что хочется донести до целевой аудитории, то можно смело приступать к созданию образа.
Главная героиня в нашей игре – девочка, которая вместе со своими друзьями переживает летние приключения в небольшом американском городке в разгар 60-х. Первоначальный образ должен соответствовать временному периоду, а это значит, что никаких накладных ушек или разноцветных глаз в нём быть не может.
Создание нескольких набросков и поиск лучшей цветовой вариации образа – не самое быстрое решение, но достаточно надёжное. Не стоит им пренебрегать, если вы настроены серьезно. Когда конечный образ утверждён, лучший способ вдохнуть в него жизнь - создание анимации.
Анимации можно разделить на несколько категорий:
- Стандартные или, иными словами, самые необходимые анимации, без которых игра значительно потеряет в качестве. К ним можно отнести анимацию передвижения, бездействия, а также боевые анимации. Разумеется, существуют игры, в которых они отсутствуют, но, согласитесь, игра с такими анимациями оставит намного больше впечатлений.
- Атмосферные - те анимации, которые зарабатывают Вам очки в визуальной составляющей. Опять же игра вполне может обойтись и без них, но взгляните на следующие два примера:
В первом представлена обычная анимация бездействия и ходьбы вниз. Хорошая основа для любой игры.
Во втором примере есть очевидное преимущество - повествование с помощью визуализации.В первом представлена обычная анимация бездействия и ходьбы вниз. Хорошая основа для любой игры.
Во втором примере есть очевидное преимущество - повествование с помощью визуализации.
Продвигаясь по сюжету, игроку предстоит взаимодействовать с другими персонажами. Когда речь идёт о живой картинке, недостаточно написать под репликой персонажа о том, что он шокирован. Лучше передать эту эмоцию визуально. Пусть игрок увидит её по выражению лица на портрете или по действию героя. Игра это не книга, и выбор инструментов в ней гораздо шире.
Перечислять подобные анимации можно очень долго. Даже настройка образа героя через выбор его одежды, прически и цвета давно уже не в новинку. Вопрос только в том, сколько времени и сил вы готовы вложить в это.
Для того, чтобы бег выглядел максимально естественно, художник должен понимать, что движутся не только ноги персонажа, но и всё тело. Передать это можно с помощью небольшого разворота туловища и движения рук.
Важно учитывать, что каждая деталь персонажа имеет собственный вес. Например, волосы при беге будут двигаться более активно, чем рюкзак героини. Последний, в свою очередь, “отстает на кадр” от амплитуды движения хозяйки. Когда она начинает двигаться вверх, рюкзак всё ещё остается в своем прежнем положении и только в следующем кадре поднимается на необходимый уровень.
В то же время нужно чувствовать меру и не анимировать детали персонажа слишком активно. Когда небольшие детали слишком часто меняют свое положение в каждом кадре без необходимости, есть риск, что анимация будет ощущаться слишком перегруженной и неаккуратной.
В качестве первого примера активной анимации рассмотрим атаку. В анимации атаки амплитуда движения активно меняется, она должна быть плавной.
В статике это довольно сложно объяснить, поэтому лучше продемонстрировать этот пример в естественной среде.
В начале атаки героиня двигается плавно. Затем она совершает прыжок и её скорость резко увеличивается, после чего обрывается в момент удара. При этом меч по инерции двигается в направлении удара еще на протяжении нескольких кадров, что подчеркивает его силу.
После удара героиня теряет скорость и её анимация опять становится медленной и более плавной до тех пор, пока она не начнёт двигаться назад на первичную позицию. Стоит отметить, что оказавшись у нужного места, она “проскальзывает” несколько пикселей, уменьшая тем самым скорость и создавая плавность.
Почему же удар в прыжке и отскок? Потому что детальная анимация удара вместе с бегом в одну и другую сторону заняла бы слишком много времени – как внутриигрового, так и производственного. Такое решение приведет к тому, что игрок рано или поздно захочет пропустить длинную анимацию, которую видел уже десятки раз и знает её результат.
Пиксель-арт анимация – трудоемкое для художников и дорогое в производстве удовольствие. Такой визуальный стиль стоит выбирать с осторожностью, если вы делаете вашу первую игру.
Но большие вложения в пиксель-арт анимацию имеют шанс окупиться большой “отдачей” – как в смысле востребованности игры, так и в смысле впечатлений, удовольствия игрока. Но всем, кто, как и мы, обращается к пиксель-арту, мы желаем успехов и удачи на этом пути!
Даже откопала свою старую картинку - вот тогда мне знаний про лишние пиксели не доставало(
я нарисовал шарик, но он 45х74 пиксела. как его сделать больше но оставть таким же пиксельным?
увы, самое главное - принцип создания автор не описал(
Оригинал автомобиля (не мой) - вверху, внизу - моя версия. Пиксель арт прекрасен, молю, еще расскажи про него, а? Вчера только начал осваивать пиксель арт, сегодня уже урок даёшь) быстро растёшь
Очень нравится пиксель-арт, и всегда хотел себя попробовать в нем. Народ, я конечно не совсем ленивая жопа, но скажите. Это что, вот такие все рисунки надо медленно по одному пикселю рисовать? Что-то не очень верится.
Спустя ололо дней после появления этого поста я пришёл сюда и решил нарисовать свой шарик, пользуясь этим уроком.
Вот что получилось :D
это надо в фотошопе создавать документ пикселей 100x300 с dpi 10 примерно? или как?
обьем тоже карандашом только другим цветом придавать?
Кстати вопрос - можно позаимствовать инфу с твоего поста?
где вторая часть?:(
Конечно, я немного опоздал на вечеринку,но будет ли продолжение когда-нибудь?))
Как Вы можете пояснить, что Ваша первая работа появляется за день до первого урока?
Прошёл 1541 день. @squarehead, где часть 2?
Мужик, ты почему больше по пиксель-артам посты не ведешь?У тебя же очень хорошо получается объяснять:((спасибо за урок, мой первый шарик получился на ура.
А где продолжение? Прошло 1952 дня!
Э, я не понял, где продолжение? только подумал что вот нашел норм материал, так нет же. Где.
Законопроект
В госдуму внесён законопроект о запрете СМИ упоминать национальность преступников. Поэтому теперь вы никогда не догадаетесь, кто именно на свадьбе стрелял в воздух.
У расчленёнки нет региональной принадлежности!
Законопроект запрещающий СМИ сообщать национальность
Школа рецептов
Как вас теперь называть?
Когда запретили указывать национальность преступника
Внезапное
Усман Нурмагомедов опознан как водитель
“Рокировочка по-братски” не прокатила, Камал Идрисов направлен в СИЗО до 11 января, ему грозит 10 лет тюрьмы.
Попытка брата Хабиба Нурмагомедова, бойца Bellator Усмана Нурмагомедова, уйти от ответственности за наезд на полицейского, возможно, провалилась. Все дело в том, что стоявшие на посту у Каспийского аэропорта сотрудники правопорядка узнали в водителе, сбившем одного из них на КПП, Усмана Нурмагомедова. Об этом сообщает телеграм-канал SHOT.
Автомобиль преступников был полностью тонирован, но в момент проезда через КПП боковое окно со стороны водителя было открыто, и сотрудники по фото опознали, что за рулем сидел именно Усман Нурмагомедов. Эту информацию полицейские внесли в протокол следователя по делу.
Теперь для Усмана и его друга Камала Идрисова ситуация серьезно осложнилась, так как к ДТП и оставлению места наезда на полицейского потенциально добавилось лжесвидетельствование. Ведь ранее приятели заявили, что за рулем находился Камал, а Усман спал на заднем сиденье после тренировки. Ну и прицепом там идет рассказ про то, что ребята очень торопились и решили, что не сбили человека, а слегка задели его зеркалом. А после они поменялись местами и за руль сел уже Усман - просто так захотелось.
Сейчас следователи изучают видео с камер наблюдения, чтобы точно установить водителя. Камала же после получения новых данных из-под домашнего ареста перевели в СИЗО, где он будет находиться до 11 января. СМИ утверждают, что ему грозит до 10 лет тюрьмы.
Лучшие моды
Взято из просторов телеграмма.
Воспоминания
Думал пирожком отделаешься?
Целевая аудитория
Вчера наша команда по любительскому мини-футболу избежала поражения, и на последних минутах тренировки сравняла счёт. На радостях мы командой решили попить кофе в ближайшем кафе. Коллектив у нас разного возраста, и по большому счёту, мы друг друга почти не знаем. Только имена и марку машины. Например, Андрей на белой Королле.
Сидим, общаемся, и разговор заходит про профессии. Юра на синем Туареге говорит:
Юрий помолчал, а потом продолжил.
- С этой работой я никогда не думал, что так пристально буду следить за прогнозом погоды! Когда в прогнозе я видел эту чёртову снежинку…
Все с сочувствием и поддержкой слушали его. Самый старший из нас, мужчина лет пятидесяти, Максим на сером Прадике, сказал:
- Понимаю. Я в частном доме живу!
Продолжил молодой Андрей на белой Королле:
- Студентом завалил три экзамена. Взял академ. Надо было чем-то полгода заниматься. Устроился торговать синтезаторами. Небольшой отдел в торговом центре. Скучнее в жизни больше ничем не занимался. Через пару дней работы я понял, что эти синтезаторы на фиг никому не нужны. Ну вот, скажите, вы часто покупаете синтезаторы?
За столиком все молчали. Возрастной Максим, что-то хотел произнести, но промолчал. Андрей продолжил.
- Вот! Я просто сидел, окружённый синтезаторами, целыми днями и ничего не делал. Хозяин этого отдела был очень странный тип. Он запрещал мне читать, лазить в телефоне. Я должен был просто сидеть и улыбаться! Более того, хозяин каждый вечер стал отчитывать меня за то, что за день не было продаж. В какой-то момент перестал здороваться даже! Думаю, валить надо от этого чокнутого. Ща получу зарплату за месяц и уволюсь. А если не заплатит?!
Максим на сером Прадике неожиданно сказал:
- Я вспомнил, откуда мне лицо твоё знакомо! Я у тебя синтезатор так купил! Помнишь меня?! С бутылкой пива такой и с чипсами? Я еще тебя ими угостил.
- Что-то припоминаю. Ну как, жалеешь?
- Нет! Это самая лучшая покупка в моей жизни! Я-то не играю… Дочь увлеклась. Играть научилась, поёт. К компу подключила его. Что-то там сводит. Спасибо тебе!
- Не за что! Главное, правильно угадать с целевой аудиторией!
Привет, меня зовут Павел, и я разработчик игр. На идею рассказать о разработке игр людьми, которые ничего не умеют, но горят желанием, меня натолкнул мой брат.
— Я придумал игру, создай мне её.
— А почему ты сам её не создашь?
— Я не умею.
И я задумался, а так ли сложно что-то создать с нынешним количеством уроков и тем по созданию игр в интернете?
С чего начать?
Для начала нам нужна идея, что за игру мы будем создавать, благо у меня была идея брата. Рассмотрим её поближе.
- Это РПГ в средневековом стиле (банально, не правда ли? =) )
- Она должна быть 3D, а не 2D (тут, кстати, довольно интересно, потому как в основном весь интернет пестрит роликами с 2D играми)
- Вид камеры от третьго лица
- Характеристики изменяются сами с повышением уровня, с упором на используемое оружие.
- Лимит уровней — 30
- Предметы привязаны к уровню персонажа (персонаж четвертого уровня не сможет использовать предмет пятого уровня)
- Движок, на котором всё будет работать (в моём случае это Unity: по работе с ним самое большое количество уроков на мой взгляд)
Думаю, что данный план вполне подойдёт для создания шедевра ААА класса =).
Начнём создавать шедевр
В первую очередь регистрируемся на сайте Unity, скачиваем и устанавливаем движок последней версии. Далее перевоплощаемся в человека, который совершенно ничего не знает о движке и о создании игр.
Идём в интернет и спрашиваем «как нам начать использовать Unity?».
Запускаем Unity Hub.
Выбираем NEW и далее 3D проект, пишем название и местоположение проекта.
И открывается сама программа.
И тут, наверное, знатоки начнут кидаться картошкой со словами «Зачем столько воды? Все и так это знают» НО! Материал предназначен в первую очередь для тех, кто ничего не умеет, а не для гуру геймдева =).
Дальше снова идём в интернет либо проходим туториал в самой программе, чтобы научиться основам работы с движком. Для того, чтобы воспользоваться туториалом в программе, нужно в окне Unity Hub нажать на строчку Learn и выбрать любой из проектов. Я советую пройти все уроки и посмотреть несколько роликов по созданию игр.
Как создать модели для игры?
- Научиться моделированию (сложно, долго, но интересно)
- Купить готовый пак моделей (быстро и просто, но за деньги)
Я выбрал второй вариант. Отправляемся в AssetStore. Если у вас не активировалась ваша учетная запись, повторно входим в личный кабинет. И начинаем искать подходящие паки. Я нашел то, что нужно, примерно за 3 минуты по поиску knight. В паке, помимо моделей самих персонажей, были модели окружения. Купил за 10 долларов, нажал Import, поставил все галочки, и пропала проблема, неумения моделировать. 1/4 игры готово.
Сцена
Дальше начинается самое нудное. Нужно собрать рабочую зону (scene, сцену, кому как привычнее называть).
Я привык сначала прописывать персонажей, анимацию, и прочую ненужную (очень нужную) ерунду в начале работы, а уже после того как основные механики готовы, я собираю уровень (локацию, игровую зону). Для начала давайте в сцену поставим кусок земли, на которой будет стоять наш персонаж, и начнём работать с анимацией.
Поскольку мы с вами в этом деле новички, снова лезем в интернет и смотрим, как нам поставить поверхность в игровую зону. Выбираем GameObject -> 3D Object -> Cube, после масштабируем его до простой площадки.
Далее добавляем персонажа (рыцаря, демона, ниндзю, тяночку, или кто вам больше по душе). Персонажа берем из папки Prefabs: мы уже знаем (вспоминаем, чему нас научили во вкладке Learn), что туда сохраняют полностью готовые объекты, персонажей и так далее.
И вот он, наш герой, который будет покорять всех и вся.
Анимация
Помните в рейде «Цитадель Ночи» в World of Warcraft был босс Алуриэль? Когда она произносила заклинания, то кричала «Аннигиляция, репликация, детонация, АНИМАЦИЯ. ». Нам необходимо с криком «Анимация!» наброситься на интернет и понять, как её сделать.
Изучаю кучу материала по созданию анимации, и…, либо я дурак, либо лыжи забыл. Реально перелопатил полтора часа материала, но так ничего более-менее подходящего не нашел. Поэтому я решил объединить несколько уроков в один и собрать простой способ анимации.
Что нужно в первую очередь? По мне — так научиться ходить и бегать. Возьмём анимацию ходьбы и бега.
- В поисковике анимации набираем walking, выбираем понравившуюся анимацию, и ставим галочку In Place
- Далее нам нужно подгрузить FBX модель от купленного пака для того, чтобы анимация не баговала (иногда такой модели может не быть в паке, но сейчас 99% разработчиков дают модель при покупке любого пака бесплатно либо она может лежать на официальном сайте). Тыкаем на upload character и загружаем модель FBX со смешным названием Mixamo_Guy_Naked.fbx.
- Видим, что наш FBX заменил стандартную модель миксамо, и при желании можно кастомизировать анимацию, но этого делать мы, конечно же, не будем. Меня всё устраивает. Я жмякаю кнопку Download, выбираю Frames per Second 60 - анимация ходьбы готова.
- Проделываем туже процедуру с анимацией бега (и другими, в зависимости от того, сколько вы их хотите добавить в данный момент)
Теперь создаём папку Animation в Unity и добавляем туда нашу анимацию. Начинаем настройку.
Выбираем персонажа, inspector, окно Animator, и в строке Controller нажимаем на кругляшок. Появится выбор, где мы и увидим нашу Animation, выбираем её и нажимаем на кнопку Play в Unity. Если вы всё сделали правильно, то сейчас должны наблюдать как ваш персонаж стоит, и у него проигрывается анимация Idle. То есть, он стоит и немного покачивается.
С анимацией разобрались, пора включать снова человека, который ничего не умеет =)
Скрипт W A S D
Анимация у нас есть, теперь нужно заставить нашего персонажа двигаться. Покопавшись в интернете, я узнал, что можно просто добавить компонент Character Controller. Так и сделаем — тыкнем Add Component, в поиск вбиваем Character Controller и добавляем его, в строке Center выставляем Y=1 (нужно, чтобы «яйцо» покрывало всего персонажа. Если у вас получилось меньше или больше, то просто настройте его вручную).
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
public class Move: MonoBehaviour
public float speed = 3.0F;
public float rotateSpeed = 3.0F;
void Update()
float horizontal = Input.GetAxis(«Horizontal»);
float vertical = Input.GetAxis(«Vertical»);
CharacterController controller = GetComponent<CharacterController>();
transform.Rotate(0, horizontal * rotateSpeed, 0);
Vector3 forward = transform.TransformDirection(Vector3.forward);
float curSpeed = speed * vertical;
controller.SimpleMove(forward * curSpeed);
if (controller.velocity == Vector3.zero)
GetComponent<Animator>().SetBool(«Idle», true);
>
if (controller.velocity != Vector3.zero)
GetComponent<Animator>().SetBool(«Idle», false);
>
>
>
Тут я немного поясню скрипт.
Верхние четыре строчки — это подключение библиотек, public class — название скрипта. Если у Вас скрипт называется Moving или что-то в этом роде, то поменяйте название. Учтите, к регистру скрипт тоже придирчив.
public float speed = 3.0F; public float rotateSpeed = 3.0F; — это скорость персонажа, настраивается по желанию. Далее идёт подключение управления Character Controller и, соответственно, анимации.
Перетаскиваем скрипт в Inspector персонажа и проверяем. It's ALIVE.
Но есть нюанс: поворачивается наш персонаж слишком быстро и не подключена анимация бега. Скорость поворота лечится просто — выставляем в строке Rotate Speed 0.5, и наш персонаж больше не использует чит-крутилку из CS GO. Теперь сделаем, чтобы наш персонаж все-таки побежал. Снова интернет, хотя, по мне, тут можно и логически додумать, как всё провернуть, но всё же я нашел строчку кода, чтобы всё заработало. Добавляем в наш код такую строчку
if (Input.GetButtonDown(«Fire3»))GetComponent<Animator>().SetBool(«Running», true);
else if (Input.GetButtonUp(«Fire3»))
GetComponent<Animator>().SetBool(«Running», false);
Если у Вас возникли вопросы, что такое Fire3, то ответ прост: это LShift, а проверить это можно, зайдя File->Build Setting->Player Setting->Input Manager. Эту информацию также не составило труда найти в интернете.
После проверки наш персонаж при нажатии клавиши LShift сменил свою анимацию на бег, но при этом его скорость никак не изменилась. Снова уже по протоптанной дорожке идём сами знаете куда, и я снова нашел строчку кода, которая мне подошла и оказалась полностью рабочей.
if (Input.GetKey(KeyCode.LeftShift))speed = 6.0f;
>
else
speed = 3.0f;
>
В итоге весь скрипт у нас получился такого вида
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
public class Move: MonoBehaviour
public float speed = 3.0F;
public float rotateSpeed = 3.0F;
void Update()
float horizontal = Input.GetAxis(«Horizontal»);
float vertical = Input.GetAxis(«Vertical»);
CharacterController controller = GetComponent<CharacterController>();
transform.Rotate(0, horizontal * rotateSpeed, 0);
Vector3 forward = transform.TransformDirection(Vector3.forward);
float curSpeed = speed * vertical;
controller.SimpleMove(forward * curSpeed);
if (Input.GetKey(KeyCode.LeftShift))
speed = 6.0f;
>
else
speed = 3.0f;
>
if (controller.velocity == Vector3.zero)
GetComponent<Animator>().SetBool(«Idle», true);
>
if (controller.velocity != Vector3.zero)
GetComponent<Animator>().SetBool(«Idle», false);
>
if (Input.GetButtonDown(«Fire3»))
GetComponent<Animator>().SetBool(«Running», true);
else if (Input.GetButtonUp(«Fire3»))
GetComponent<Animator>().SetBool(«Running», false);
>
Всё проверили, всё работает, осталось только прикрепить камеру к персонажу. Без заморочек просто перетаскиваем Main Camera в нашего персонажа, далее её настраиваем как нам удобно, проверяем и празднуем ПОБЕДУ!
Заключение
Думаю, что на этом можно этот пост закончить, но впереди еще много работы: создание локации, проработка боя, квесты, предметы, музыка, и еще бесконечное количество вещей, которые можно сделать. Я пока не решил, буду ли в следующей статье строить город или же займусь боевой системой — всё будет зависеть от настроения.
Я считаю, что не имея никаких знаний и денег, а только немного терпения, можно самому создать свою игру. Если вас смущает покупка пака из Asset Store, то всегда можно найти бесплатные паки. Я порылся в интернете и нашел как минимум 6 ресурсов, которые их предоставляют. Советую помимо интернета начать изучение какого-либо направления гейм дева.
Все описанное в этой статье было собрано без специальных знаний с помощью интернета.
В этом динамичном туториале я покажу вам основные приёмы создания пиксельарта. Спрайты - это картинки в 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. Можете спокойно взять эту палитру и двигаться дальше (или нет! Это не столь важно).
Мы начнем рисовать наш спрайт с наброска карандашом, также как если бы мы рисовали на бумаге. Опираясь на свой опыт, могу сказать, что неплохие пиксельарт художники достаточно хороши в обычном рисовании и наоборот. Так что никогда не помешает улучшить свои навыки рисования.
Дальше мы должны убрать лишние пиксели и сделать все линии толщиной в один пиксель. Но какие пиксели являются лишними? – для того, чтобы ответить на данный вопрос, нам нужно познакомиться с таким понятием как зазубрины.
Нам нужно научиться делать два вида линий: прямые и закруглённые. На бумаге все будет зависеть от контроля мышц, но мы работаем с маленькими цветными блоками, что создает свои трудности.
Для того, чтобы делать хорошие линии, нужно свести к минимуму количество зазубрин: маленьких пикселей или группы пикселей, которые нарушают последовательность линии. Так как в пиксельарте каждый пиксель имеет большое значение, пару зазубрин могут испортить весь спрайт. Представьте, что вы рисуете линию на кусочке бумаги и кто-то внезапно стукает по столу, получившаяся у вас загогулина является тем же, что и зазубрины в пиксельарте.
Читайте также: