Как рисовать пиксельные спрайты для 2d игр

Обновлено: 05.07.2024

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

Как уже было сказано выше, история развивалась далеко не в пользу пикселей. Научный прогресс буквально погубил этот вид искусства и оставил только в узких кругах. Но с появлением телефонов всё поменялось. Опять появились не сильно производительные устройства, а игры туда добавить надо. Где экран с низким разрешением, там и пиксельная графика в играх.

В современных реалиях Pixel art устоялся благодаря появлению такого жанра, как инди и просто бешеному успеху игр MineCraft и Terraria. Инди-разработчики используют пиксельную графику по причине низкого порога вхождения (обучиться её созданию довольно легко) и скорости рисования (если объекты не сильно детализированы). И благодаря играм, упомянутым выше, люди уже привыкли к такому Pixel art и будут относиться к игре лояльно.

Перейдём к созданию Pixel art. Тут всё очень просто и, если вы когда-нибудь строили дома в MineCraft, вы быстро вольётесь в пиксельную графику. Также стоит упомянуть, что все написанное ниже — это лишь советы и рекомендации, а никак не правила. Если у вас получается отличный рисунок, вопреки всему написанному ниже, то кому какое дело к тем словам?

Существует огромное количество различных решений, направленных конкретно на пиксельную графику. Множество из них неплохие, а некоторые даже хорошие и удобные в использовании. Но всё-таки большая часть художников отдаёт своё предпочтение фотошопу. Он привычен и удобен, собственно, как и все программы от Adobe.


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


На созданном проекте нужно подготовить сетку. Для начала открываем окно “Просмотр”, находим пункт “Показать”, включаем сетку и отключаем пиксельную сетку. Стандартная пиксельная сетка не очень удобная, поэтому мы настроим свою.


Перейдём к самой настройке. Открываем окно “Редактирование”, находим пункт “Настройки” в самом низу окна. В открывшемся окне выбираем “Направляющие, сетка и фрагменты…”.


Далее выставляем основные параметры, как показано на фото ниже.


Слева сверху этого же окна выбираем пункт “Основные”. Выставляем интерполяцию изображения на “По соседним пикселям…”. Таким образом наш арт не будет сглаживаться.


Также для того, чтобы белые пиксели было хорошо видно, на панели слоёв кликаем два раза на фон и делаем его слоем. Затем нажимаем сочетание клавиш Ctrl + U. В открывшемся окне выставляем яркость примерно на -32.


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


● Не делать соединяющие пиксели

Для наглядности я нарисовал доллар на фотографии ниже. Красным цветом выделены те самые соединяющие пиксели. Интуитивно кажется, что они делают арт плавнее и соответственно красивее. Но, зачастую, это не так.


● Убирать изломы

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


● Создавайте новый слой

В начале работы не забывайте создавать новый слой и работать на нём. Не нужно рисовать прямо на фоне. Также научитесь работать со слоями. Этот навык значительно ускорит и облегчит вашу работу.

Наконец то пришло время для самого пиксель арта. Почему именно трезубец? На самом деле, он просто первый пришёл в голову… Ну и в его форме есть интересные моменты.


* Форма

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

Здесь нам нужно определиться с позицией источника освещения. После выбираем наш основной цвет, делаем его немного темнее и рисуем тени. На ручке трезубца тоже можно было создать тень, но этого я делать не стал. Ведь рукоятка слишком узкая (1 px, не считая обводки) и с взятой мною позицией источника света было бы сложно выбрать между тенью и бликом…

* Блики

Ставить их нужно на самые освещённые места. Чтобы выбрать цвет, также берём основной, но делаем его не темнее, а светлее. Блики не должны быть слишком заметными, ибо тогда они будут выбиваться из общей картины.

* Обводка

Возвращаемся к ней. Для интерактивных предметов её лучше оставлять. Её можно сделать не чёрную, а, например, коричневую, как в случае с трезубцем. Для не интерактивных предметов (фоновые вещи, с которыми нельзя взаимодействовать) можно вообще убирать обводку.

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


Используют пиксельную графику в основном в играх, так как сложно представить другой медиа продукт в таком стиле…

Есть два способа рисовать 2d персонажей.
Первый способ, это как говориться карандашом. Если говорить о цифровом рисование, то с помощью мышки или графического планшета.

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

На данном изображение вы видите набор различных заготовок поз для человека.


  • Но, есть такое понятие как пиксельная/растовая графика. Все что мы с вами видим на мониторах и даже просматривая эту статью, а так же изображение выше, это все растовая графика, которая в свою очередь состоит из маленьких пикселей (квадратиков) содержащих тот или иной цвет. В сумме когда их много они начинают формировать плавные оттенки давая хорошие цвета. И как раз рисуя кистью в фотошопе вы используете этот самый растовый подход.
  • Есть второе понятие, это векторная графика. Она работает иным способом. С помощью математических вычислений изображение в не зависимости от расстояния и количества пикселей, просчитывается максимально качественным (без углов). Но и самое главное для нас преимущество, это совершенно новый подход к рисованию любых спрайтов. Мы вместо кисти используем точки, расставляя их формируем векторную линию, а после заполняем ее цветом или просто придаем определенную толщину. Что бы научится с такой графикой работать вам нужно поискать информацию подобного характера, но я скоро постараюсь написать на эту тему еще полезные статьи, а может даже выложить бесплатный не большой курс, который позволит вам научится основам работы с векторной графикой.

Лучшая программа для работы с векторной графикой это Adobe Illustrator CC. Но инструмент векторной графики есть и в фотошопе. Но как правило его не достаточно.

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

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

Конечно, что бы создавать красивых персонажей или любые другие объекты вам придется немного набить руку, изучить интерфейс программы, дизайнерские подходы, анатомию человека и просто набраться опыта.

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

Если вам понравилась статья и она была полезна, я постараюсь сделать подобного рода еще статью. Но и самое главное, затронуть тему анимации, и рассказать при помощи какой программы можно легко анимировать 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. Можете спокойно взять эту палитру и двигаться дальше (или нет! Это не столь важно).

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

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

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

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


Фотошоп, полный курс (YouTube, 44 видео) – дают базу по Фотошопу.

Курс Adobe Photoshop с нуля (YouTube, 17 видео) – обещают довести до среднего уровня владения программой.

Уроки Фотошопа с нуля (YouTube, 43 видео) – пошаговые уроки Фотошопа с нуля.

Эксперт в Photoshop за 30 дней (YouTube, 24 видео) – если каждый день выделять 2 часа на прохождение курса, то через месяц станете экспертом по Фотошопу.

Illustrator

Illustrator – векторный графический редактор .

Adobe Illustrator – От нуля до новичка графического дизайна (Udemy, 24 лекции) – изучите базу и создадите два логотипа.

Adobe Illustrator. Базовый курс (YouTube, 58 видео) – пройдете путь от основ до первых иллюстраций.

Курс Adobe Illustrator (YouTube, 5 видео) – с нулевыми знаниями за пять дней станете уверенным новичком.

Полный курс обучения Adobe Illustrator (YouTube, 115 видео) – обзор всего, что есть в Иллюстраторе. Видео короткие: в среднем 4 минуты.

Unreal Engine

Unreal Engine – игровой движок .

Создание игр и приложений на Unreal Engine (Stepik, 50 уроков) – познакомитесь с базовыми понятиям движка. По отзывам курс занимает 2-3 часа.

Платформер на Unreal Engine 4 (YouTube, 12 видео) – запилите пиксельный 2D-платформер.

Unity

Unity – среда разработки игр .

Введение в Unity (Stepik, 15 уроков) – настроите среду разработки, создадите первую сцену и разработаете AR-приложение.

Создание платформера Unity2D (YouTube, 10 видео) – за полтора часа создадите платформер.

Игра на Unity за 10 минут для Андроид и ПК (YouTube, 1 видео) – за 10 минут поймете, геймдев – это ваше или нет.

Как я сделал свою первую 2D игру в Unity (YouTube, 8 видео) – автор видео рассказывает, как смешать сеттинг Древнего Рима (гладиаторские бои) с пиксельной 2D-графикой и сделать из всего этого мобильную игру для Android.

Создание кликера на Unity (YouTube, 7 видео) – напишите кликер на Unity.

Уроки Unity для начинающих (YouTube, 9 видео) – создадите аркадную 2D-игру на Unity.

Blender

Blender – ПО для создания 3D-графики .

3D-моделирование в blender (Stepik, 10 уроков) – создадите простые, сложные и кошмарные модели. Поймете, чем огонь по физике отличается от воды и дыма, сделаете кадрированную и скелетную анимацию.

Моделирование в Blender 3D v2.8 для начинающих (Stepik, 13 уроков) – узнаете об основных возможностях и освоите базовые принципы работы с Blender 3D.

GameMaker: Studio

GameMaker: Studio – игровой движок .

Уроки по GameMaker Studio (YouTube, 10 видео) – создадите RPG-игру.

Делаем игру в GameMaker (YouTube, 1 видео) – напишите простой код, используя встроенный скриптовый язык GML; научитесь рисовать графику и делать звуки. В итоге получите небольшую игру.

Видеокурс по GameMaker Studio 2 (YouTube, 6 видео) – подробный курс, на котором учат создавать уровни, персонажей, анимировать их действия и писать скрипты.

Aseprite

Aseprite – программа для создания анимированных спрайтов.

Aseprite для самых маленьких (YouTube, 1 видео) – полный обзор Aseprite.

Как нарисовать пиксель арт новичку (YouTube, 3 видео) – все, что нужно знать новичку при работе с Aseprite.

Плейлист по пиксель арту (YouTube, 73 видео) – разбирают, наверное, все что касается пиксель арта.

Гайд Aseprite (Анимация) (YouTube, 7 мин.) – рассказывают, как сделать анимацию в Aseprit.

RPG MAKER MV

RPG MAKER MV – программы для создания компьютерных игр жанра JRPG.

RPG MAKER MV (YouTube, 27 видео) – узнаете как создавать персонажа, квесты, добывать ресурсы и взламывать сундуки.

RPG Maker MV на канале AniKid (YouTube, 138 видео) – тонна информации о RPG Maker MV.

Construct 3

Construct 3 – конструктор двумерных игр .

Udemy регулярно – несколько раз в месяц – проводит распродажи курсов, и цена падает до 900-1100 рублей. Если курс не подошел, деньги всегда можно вернуть на банковскую карточку или на счет в Udemy. Возврат на счет Udemy происходит моментально.

История игровой индустрии

История видео игр (1889-2015) (YouTube, 1 ч. 46 мин.) – история видеоигр за 126 лет.

Краткая история видеоигр (YouTube, 10 мин.) – коротко и по делу.

История видеоигр (YouTube, часть 1 , часть 2 , часть 3 ) – история игр в трех частях.

Эволюция видеоигр (1940-2020) (YouTube, 21 мин.) – последовательно рассказывают об этапах эволюции видеоигр.

Краткая история видеоигр (YouTube, 4 видео)– рассказывают об истории видеоигр при поддержке библиотеки им. Н. А. Некрасова.

История Российской игровой индустрии (YouTube, 7 видео) – обзор российской игровой индустрии.

Почему 2D игры до сих пор живы? Проблемы перехода от 2D к 3D (YouTube, 18 мин.)– узнаете, почему 2D-игра все еще может конкурировать с 3D-игрой.

Итоги десятилетия. 10 лучших платформеров декады – от Celeste и Cuphead до Guacamelee! (YouTube, 18 мин.) – познакомитесь с десятью лучшими платформерами, выпущенными с 2010 по 2020 г.

Платные ресурсы

Полноценных бесплатных курсов для 2D-художника с нуля на русском языке нет (напишите в комментариях, если знаете). Поэтому предлагаем вам два варианта:

  1. Самостоятельный, продолжительный и неровный.
  2. Прагматичный: заплатить за обучение и получить гарантированный оффер на работу.

Первый вариант подходит для хобби. Второй – путь в профессию, в индустрию игр с заказами, дедлайнами и зарплатой.

Телеграм-каналы по геймдеву

Unreal Engine – канал о движке Unreal Engine c чатом .

Разработка игр – статьи и материалы о разработке игр.

Blender_ru: избранное – уроки, материалы, полезные советы по Blender.

Blender Sculpt – канал по скульптингу в программе Blender.

GameDev – канал об игровой индустрии, маркетинге и программировании.

Unity News – делятся новостями из мира Unity.

Двигай пиксель! – канал о компьютерной графике.

CG field – много интересного по теме CGI и NFT.

Кодзима Гений – о видеоиграх в целом и геймдизайне в частности.

Dark Max – лайфхаки по 3ds Max.

Substance Painter & Designer – чат по Substance Painter и Designer.

Conceptart.education – все необходимое для начинающего и уже продвинутого концепт-художника.

ruArt – регулярно публикуют работы своих подписчиков.

Календарь событий игровой индустрии – информируют о событиях игровой индустрии и крупных конференциях на территории СНГ.

Главная » Как программисту создать игровую графику (или как подделать ее в стиле игрового художника)

Как программисту создать игровую графику (или как подделать ее в стиле игрового художника)

Введение

alt

alt

Совет Первый: начните с определения палитры

alt

Но где мне найти палитру? Я даже не могу подобрать цвета, когда одеваюсь утром!

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

alt

Ресурсы:

Я не умею рисовать.

alt

alt

Подсказка Третья: простые формы и силуэты

alt

Круг, Квадрат, Треугольник, Ромб, Трапеция, Параллелограм, и т.д. Вы знаете как точно высчитать их площадь, но вы знаете, что нарисовать их получается плохо? Сделайте наброски нескольких форм от руки, затем добавьте глаза (для персонажа) или колеса (для техники) или что-нибудь еще. Они, возможно, получатся смешными и нелепыми, и совсем неточные.



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

Это наиболее важно в 3D. Назначьте твердый черный материал и рассмотрите модель на белом фоне (или наоборот). Увеличивайте ее масштаб до тех пор, пока она не будет такой, какой вы хотели бы, чтобы она была на экране во время обычной игры.

Подсказка Четвертая: рисуйте больше, чем вам нужно

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


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

Подсказка Пятая: работайте в большем разрешении


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

Он пока еще неаккуратный и малодетализирован, но вскоре мы применим эффект даунсэмплинга, который скроит все это.

Подсказка Шестая: следите за краями


Шаг первый: оградите версию с высоким разрешением на прозрачном фоне


Шаг второй: понизьте разрешение до целевого


Шаг третий: сделайте четкие края

Получить правильные края можно следующим способом:

Теперь у вас должен получиться спрайт со сглаженными четкими краями.


Шаг четвертый: подчистите пиксели

Теперь вам нужно повозиться с каждым пикселем в отдельности. Ваш контур будет возможно немного излишним, используйте карандаш (инструмент pencil tool) для того, чтобы очистить его и добавить детализации частям спрайта, которые получились немного размытыми после уменьшения размера. Здесь я немного подчистил лицо, хвост и антенны.


Готово: завершенный спрайт врага

Вот завершенный спрайт в обычном и 2x размерах. Он не идеален и, разумеется, не сделает из меня сразу художника, но он кажется вполе приемлемым для программиста.


Подсказка Седьмая: создавайте разнообразие


Подсказка Восьмая: избегайте анимации


  • Используйте тему, которой не нужно этого. Космическим кораблям не нужно много анимации. Для машин вы можете просто сделать движение колес. Если вы можете придумать способ, который не требует анимации, то это намного лучше и сэкономишь время для кодинга.
  • Начните с маленьких хитростей. Просто отразите верхнюю часть спрайта персонажа по-горизонтали и получите два кадра. Можете взглянуть на замечательные спрайты из старых игр, чтобы узнать, что они нарисованы всего в нескольких вариациях.
  • Используйте шаблоны. Не пользуйтесь рипам спрайтов, используйте позы персонажей из них. Для этого срайта я нашел шаблон Мега-Мена и нарисовал новый спрайт, но использовал такие же позы.
  • Ротоскопирование сейчас применяется не только для создания поющих орков в мультипликации или в кино. Многие цифровые камеры в наше время имеют режим съемки серий кадров или позволяют снимать короткий видеоролик и выбирать из него отдельные кадры. Снимите самого себя, выполняющего простые действия, отберите нужный кадр и начните трассировку. Внимание: это может стать бесполезной тратой времени, если вы будете неосторожны, поэтому не увлекайтесь этим занятием. Это просто совет.

Подсказка девятая: Скайбокс

Делаете 3D-игру?

Реализация простого скайбокса не так уж сложна. В то же время, с точки зрения визуальной ценности, он того стоит. Скайбокс выполняет важную работу по заполнению игрового экрана.

Но где мне достать хорошее изображение скайбокса?


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

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


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

Подсказка одиннадцатая: приобретите планшет

Даже если у вас нет стремлений стать игровым художником, но если рисуете какой-нибудь арт на компьютере, то вам нужно приобрести планшет. Необязательно большой или дорогой, можно купить планшет фирмы Wacom. Потому что рисование мышью схоже с рисованием кирпичом на бумаге.

Многие люди, которых я знаю, впервые купившие планшет, не спешили его использовать. Вот некоторые советы, которые помогут максимально эффективно использовать планшет.

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

Читайте также: