Подземелье Бесконечности.

Пост чистого восхищения (и ни грамма оплаченной рекламы). Итак — рогалик Dungeon of the Endless.
Собственно, взял посмотреть стилизацию в пиксель-арте (не более), а в результате обнаружил уникальный микс рогалика, головоломки и тавер-дефенса.

Суть: Тюремный корабль огребает от космических Hooligans, наш протагонист отстреливается на спасательной капсуле к ближайшей планете, где и совершает жесткую посадку, проломив капсулой 12 этажей лабиринта. В лабиринте же находится лифт с одной кнопкой (+1 этаж вверх). Задача главного героя — найти на этаже комнату с лифтом, притащить туда кристалл, нажать кнопку, подняться выше выше, и так до последнего 12-го этажа. Всё просто, но тут открываются нюансы...

Геймплей:Стандартный рогалик — герои (1-4 существа) открывают комнаты, получая проблемы в виде монстров, либо ништяки в виде артефактов, временных бафов, ресурсов или новых героев.
Не стандартный рогалик — при открытии новой комнаты, в уже открытых но не освещенных комнатах респаунятся монстры. Подробнее — используя ресурс Dust мы можем включать освещение в той или иной уже открытой комнате, дабы предотвратить респаун монстров. Также монстры НЕ появляются в комнатах с героем и в комнате с кристаллом. Тут и начинается менеджмент и головоломка.

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

В игре есть два режима сложности: Easy и Too Easy, в нормальной жизни равные режимам Hardcore и Nightmare.
На первое прохождение ушло 8 часов и 5 переигровок (первые три часа - изучение геймплея, потом еще 3 часа досконального заглядывания в каждый угол подземелья и два часа целенаправленного быстрого прохождения).

Ну и немного скриншотов.

P.S. Кажется.. Да! именно отсюда я недавно spizdil стилизацию космического бекграунда.

И 100% размер по клику на картинку:

Недельное чтиво — Марсианин

Внезапно! художественная литература.


Не буду советовать и рекомендовать эту книгу — сам еще не прочел до конца, так что просто расскажу, что такое чтиво есть:
Роман о труЪ космо-сурвивалисте, оставленным на красной планете и пытающемся выжить 400+ дней.


Вообще, последнее время практически не читаю худ.лит, отдавая предпочтение кошерной технической литературе по дизигну и арту, но тут совпала тематика книжки и идея игры, что находится сейчас на стадии идеи. Так что — читаю дабы почерпнуть.
Стилистика повествования рваная и местами неприятная (всё же, это первый НФ-роман у автора), но вот мат. часть сделана на удивление знатно — автор не поленился изучить тематику, за что ему спасибо.

Кстати, летом сего года, по книге выйдет фильм от старичка Ридли Скотта.

Видео. Динозавр-мститель-убийца от Пола Робертсона

Paul Robertson. Super Dino Boys.
Как всегда, молодец.

Раз.

Два.

Ждем новых серий.
А еще завтра ненавистный понедельник. Помните об этом.

Китайский сумрачный гений интерфейсов.

Утонченный кайф в готовой работе — для любителей diablo-like, и кайф для GUI-художников, я гарантирую.
Интересно посмотреть, даже без знания китайского языка (хотя, тут всё понятно и без слов)

Для желающих — Оригинал с сопроводительным китайским текстом

Книга на неделю: Йохансен Иттен — Искусство цвета.

Делюсь книжками из серии "must have", отвечающие на кучу вопросов по заданной тематике и поднимающие уровень скилла в той или иной сфере.

Сегодня пойдет речь о теоретической базе к подбору цветов, их сочетаниям и теории цвета в целом. Я перелистал огромное количество книг, книжонок и статей, пытаясь найти ответ на главный вопрос жизни — по какой закономерности синий сочетается с желтым, а зеленый с красным. Посмотренной мукулатуры было просто dohyiya. Все они рассказывали лишь о сочетаниях цветов и видах цветовых сочетаний ( два цвета, три цвета, четыре цвета + вилка по насыщенности), но нигде не было объяснено почему всё именно так как есть. Одним словом всё это были govno-брошюры. 

И вот, в один прекрасный день, я докапался до корня цветовой теории, собственно до человека, осилившего осмысление всех закономерностей цвета, автора классической теории цветов, преподавателя Баухауза, буддиста, тролля и чуточку художника — Йохансена Иттена.

Всенепременно советую его книгу "Искусство цвета", если хотите знать что такое симультантный контраст, почему гармоничные сочетания так нам милы и, самое главное, как сверх-pizdato управляться с цветовым кругом (да,кстати, автором современной круговой цветовой палитры из пейнтера как раз и является наш герой)

А вот и автор:

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

Это будет игра про космос и планеты.
Да, всех с наступившем НГ и сорри за полугодовое отсутствие (На то были причины и имели место важные события в моей жизни)

А так это рисуется:

Злокорень — Разборка босса.

Игра — Abyss Walker2.
Крайне несвойственный для меня пост, с выкладыванием кусков из psd-файла, скетчами и прочим нутром и кишками производства.
Задача — сделать босса в виде злого растения-мутанта, растущего из земли, кусающего и плююшего в героя ядовитыми шипами.
Было решено сделать босса по частям, с независимыми анимациями для каждой части (к слову, это из-за того, что разные части растения могут атаковать героя в разные моменты времени. С другими боссами этот функционал уже не пригодился)

Как обычно, начал с рефов, размышлений, кофеина и предварительного скетча. (Обычно я делаю набросок сразу в ФШ, в этот раз решил сделать на бумаге)
Рисую от руки я фигово, чего уж там, а скетч лужил, скорее для разбивки итогового босса на части и определения примерной формы тела босса.
Как-то так:

Далее лайнинг отдельных частей и их прорисовка в цвет.

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

А как-то так делалась самая, пожалуй сложная анимация — атака пастью.

Еще немного разных частей в препарированном виде:

Ну и финальный результат:

Иконка из быстрого скетча.

Рисуем иконку каменной фиговины способом быстрого скетча и последующим уменьшением.
Как-то так.

В гифке как оно было до.

Как оно стало после.
Собственно конечный вариант.

И еще немного:

Work in Progress

Работа идет полным ходом, проект почти завершен и скоро наконец появится свободное время, чтобы рассказать много интересного.

На картинке видим этапы прорисовки эффекта для заморозки врагов

решено юзать первый вид кристалла, так как враги есть и летающие, а у прочих вариантов ледышки - очень плоское и широкое основание. Окей. решено, делаем.

Вот так из всякого говна, кружков и готового кристалла:


Можно получить анимацию замерзания:

P.S.
Оставайтесь на связи, бложик вновь оживает и превращается в инди-гонзо манускрипт, где отражается проделываемая работа с пылу, с жару.

Hard point

Сделал, продал, зарелизил, запустил. Хард-пойнт вышел в свет.
Игра делалась в одно лицо и была экспериментом "фреймворка для нубов" — Stencyl. Об этом отдельно: Stencyl — удобная среда для игроделания на флеше, если вы (как я) нуб в кодинге. Всё сделано понятно и просто НО! весь ништяк заканчивается, когда вы продали игру через аукцион и пришло время её брендирования под спонсора. Ощущение как будто разработчики stencyl ниразу не продавали игры через FGL, не встраивали лого и загрузчики спонсора. Всё пришлось делать через нереальные костыли.
В целом же, игра оправдала свои ожидания, с учетом крайне неудачной даты запуска — первого января.

iso castle by fool: Покадровое рисование изометрического замка.

Раскадровка процесса рисования
Давно нашел на харде очень годную вещь: gif с покадровой отрисовкой, пожалуй одного из самых известных пиксельных шедевров, изометрического замка от тов. Fool-а aka Юрия Гусева.

Оказалось, на сайте автора эта картинка также сохранилась: http://www.foolstown.com/wip/isowip.gif
Советую в любом GIF-редакторе разобрать это на кадры, можно найти очень мого отличных деталей. Сюда не стал выкладывать, получилось около 50-ти кадров.

Pixel Circle

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

В этом наборе кистей вы найдете окружности, отрисованяе одно-пиксельной линией и диаметром от 1 до 16-ти пикселей.
Плюс к этому: несколько кистей для окружностей с антиальясингом. (Их линии в нектоорых местах толщиной в два пикселя, как взять цвета и сделать анти-альясинг, догадайтесь сами.)


Ну и картинка поглазеть:

how to draw rocks tutorial

Как рисовать камни. Туториал.

Из небольшого making-of решил собрать туториал в картинках, по рисованию камней.
Не пиксель-арт.
Делался бекграунд для текущего проекта под Stencyl, о чем как нибудь расскажу подробнее.

Dithering

Туториал по дизерингу

  — Дизеринг (Dithering) (англ. dither от староанглийского didderen — дрожать.
В компьютерной графике дизеринг используется для создания иллюзии глубины цвета для изображений с относительно небольшим количеством цветов в палитре. (Материал из свободной википедии)

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

Готово! Вы великолепны.

Зачем это было нужно?
Вспомним Gameboy, с его 4-мя оттенками серого или NES с его 54-мя цветами. С такими суровыми ограничениями, дизеринг был очень хорошим приемом.

На кой это нужно сейчас?
Для приадния олдскульного шарма и трушности в пиксель-арте.
Дизеринг   — ,это как минимум,хороший тон. Если игнорировать данный прием, ваш арт будет смотреться незавершенным. (К слову, стоит добавить что дизеринг в пиксель-арте далеко не везде обоснован, и часто заменятся отрисовкой фактуры материала или просто игнорируется)

Вот культовая вещь. Здесь просто дофига дизеринга и всего Два цвета.

Как сделать также круто:

Pixel art color palette. Part2

Часть1 находится здесь

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

3-bit RGB

Стандарт Телетекста с 1976-го года. Прямолинейно и беспощадно - только три бита на определение цвета в пространстве RGB
[Красный (есть/нет)]+[Зеленый (есть/нет)]+[Синий (есть/нет)]
Легко подсчитать, что из сочетаний красного синего и зеленого по типу есть/нет, выйдет всего восемь цветов.
Также, эта цветовая палитра использовалась на TRS-80 Color Computer,Oric и BBC Micro.

4-bit RGBi ZX Spectrum

Восемь цветов было слишком уныло, так что добавив еще один бит к трехбитовой RGB-палитре и поместив в него информацию об интенсивности цвета, получили "16"-ти цветовую палитру (на самом деле 15-ти цветовую, у каждого из 8-ми стандартных цветов был свой темный оттенок со срезанной на половину интенсивностью цвета, однако у черного цвета, понятно, второй оттенок был тоже черный)
Эта модель использовалась в ZX Spectrum, а также на TI 99/4A, Commodore 128 и в IBM-овском видеочипе Color Graphics Adapter.

Thomson computers

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

Pixel art color palette. Part1

С новым годом, пиксель-артисты.
У меня для вас приготовлен подарок.

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

пиксельная палитра объектов для игр

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

На днях опубликую и вторую часть, пока праздники и я решил отдохнуть от пиксель-арта  —   доделываю подборку трушных old-school палитр консолей. NES Atari etc.
Продолжение здесь

Итоги года 2012

В этом году было сделано 5 игр: три из них вышли в свет, одна находится на аукционе и ждет продажи, еще одна уже продана крупному порталу + ждет портирования на мобильные платформы.

— За две игры я горд (Hired Heroes научили ставить рисование графики на поток)

— за одну игру мне стыдно (пластилиновый санта - это был эксперимент, который надо было доделать и нельзя было хоронить.)

— Одна игра стала брендом (Это я про Shameless clone)

— Еще одна игра была сделана очень быстро, на арт ушло всего 2 недели и был опробован новый для меня стиль рисования. (Forgotten Cave)

Forgotten Cave

Своеобразный жанр, который даже сложно описать. Наверное квест-логика-запоминалка. Играем за кота-кальмара в темной пещере. На каждом уровне надо добраться до финиша по неосвещенной, полной опасностей, пещере, используя факелы для освещения небольшой области. Число факелов ограничено и горят они тоже определенное время.
Самый быстрый проект для меня. Изначально был готовый движок игры, не хватало графики для слегка измененной концепции. Один тайл-сет, один персонаж, факелы, лифты, иконки для "Ачивок" и бекграунд.

Для этой игры решил попробовать новый для меня стиль рисования: Тайлы и объекты рисуются в два раза больших размеров, чем должны быть в игре, при этом используется жесткая кисть со 100%-ной непрозрачностью и 100%-ным нажимом.
Результат мне понравился, надеюсь в наступающем году удастся сделать вторую часть игры – артхаусную и психоделическую бродилку.
Считаю также, что главный герой в игре тоже удался: Получился слиянием логотипа андройда, какого-то адского черта из буржуйского мультика, окто-кота, монстров из пакмана и Скифчи.

Hired Heroes

TBS (Turn Base Strategy) — Пошаговая стратегия в фентезийном мире, с магазином артефактов и монашками. Есть враги, есть нанимаемые юниты (классические воин, маг, лучник, хиллер) есть артефакты, улучшающие параметры нашего отряда.
Самый удачный и самый трудоемкий проект. 3 месяца непрерывной работы. 1300 тайлов:

500 тайлов  — анимации всех героев.

500 тайлов   — анимации всех врагов.

130 тайлов   — тайлсет местности и окружения.

130 тайлов   — анимация спец-эффектов.
Сюда же можно добавить озвучку и два саундтрека (один мне и самому понравился, что бывает редко)и глобальную карту. Главный экран заказывали на аутсорс.

Туториал. Линии и контуры.

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

Цвет

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

Толщина линии

Линия должна быть в 1 пиксель толщиной. (sic!) Это правило вполне может быть нарушено при последующей закраске объекта и работе с цветом. Доверяйте глазам и чувству стиля. Однако утолщать контурные линии, если того и требует конкретный случай, лучше уже при окрашивании объекта.

Прямые линии

С вертикальными и горизонтальными линиями всё понятно, трудности возникают при рисовании линий, расположенных под углом.
В пиксель-арте есть одно важное правило построения прямых линий под углами:

При 45° всё понятно, по диагонали один за одним пикселем рисуем линию.

В пиксель-арте не используется угол в 30°, вместо него используется метод построения "один пиксель в сторону, два вверх" что видно на картинке слева. Этот наклон равен 26,565°

Модифицируем принцип из прошлого пункта: один пиксель в сторону наклона и 3-4-5 (сколько нам надо)пикселей в длину нашей линии, получим различные углы наклона для наших линий. Всё просто.

Окружности и кривые

Окружности делаются следующим образом - Elliptical Marquee Tool без анти-альясинга (Настройка фотошопа для пиксель-арта) зажав shift или alt+shift, тут кому как удобнее, получаем выделение круга необходимого нам диаметра, и рисуем контур толщиной в один пиксель, придерживаясь приведенных выше правил. Тоже самое с эллипсом.
Изгибы, неровные линии и прочие более сложные вещи отрисовываем по тем же правилам.

Я часто, для ускорения работы или от лени, провожу линию на планшете "как рука ляжет",а потом уже исправляю ошибочные и проблемные участки контура.

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

Следующий туториал будет по дизерингу.
Всем будда.

Paul Robertson

Эпичнейший пиксель-артист с извращенной фантазией. Безграничный полет этой фантазии можно оценить в видео ниже.

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

http://probertson.livejournal.com — Блог художника. http://probertson.deviantart.com/gallery/ — Его аккаунт на Девиантарте.

Туториал. Тайлинг текстур

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

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

Палитра, материал, сетка

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

Самым темным цветом я набрасываю "сетку" — будущее расположение элементов текстуры на тайле.
Выделяем область сетки, равную размерам будущего тайла — в данном случае это 50x50 пикселей и вырезаем этот фрагмент. Затем открываем новый документ (размер должен равняться размеру планируемого тайла) и вставляем фрагмент нарисованной сетки туда.

(Да, размеры тайлов должны быть определены еще на стадии задумки игры, а при рисовании очень помогает такой инструмент, как Grid, он должен быть включен, а привязка кисти выключена. Туториал по настройке фотошопа для пиксельарта был ранее выложен ЗДЕСЬ)

Фильтр Offset

Заходим во вкладку filters > Others > Offset и применяем смещение на нашем документе. Параметры задаем так: (размер тайла)/2. В нашем случае 50/2=25 пикселей. Смотрим что вышло.
Когда сетка затайлена — можем еще раз применить offset, а можем продолжить работать и так — тайлится текстура будет в любом случае.

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

Отрисовка

Далее наступает сплошной пиксель-арт: заливаем всё более светлым цветом ( я использую цвет, на один уровень темнее чем средний из выбранной палитры, по личному опыту - так выходит удобнее)

Рисуем текстуру булыжников, не забывая о выбранном направлении освещения и применяя offset, если нужно уточнить не нарушена ли бесшовность. (в принципе с опытом это можно проделывать без фильтра смещения, а просто на глаз)

Доводка и коррекция

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

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

Теперь последний штрих — цветокоррекция. (Я обычно применяю корректирующие слои) В Ajustment layers выбираем Selective colors и настраиваем необходимые оттенки, после этого можно применить слой Color ballance.

Изометрия

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

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

Полезные советы:

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

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

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

Да, кстати, трюк со смещением на половину размера тайла отлично подходит не только для пиксель арта, но и для создания обычных рисованных текстур для 2д и 3д игр.

Еще примеры: тайлы из двух вышедших игр и одной, находящейся сейчас в разработке.

На этом у меня всё, надеюсь этот урок окажется полезным.