Постоянные читатели

12/30/2012

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


  • 12/19/2012

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

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

    Цвет

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

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

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

    Прямые линии

    С вертикальными и горизонтальными линиями всё понятно, трудности возникают при рисовании линий, расположенных под углом.
    В пиксель-арте есть одно важное правило построения прямых линий под углами:
  • При 45° всё понятно, по диагонали один за одним пикселем рисуем линию.
  • В пиксель-арте не используется угол в 30°, вместо него используется метод построения "один пиксель в сторону, два вверх" что видно на картинке слева. Этот наклон равен 26,565°
  • Модифицируем принцип из прошлого пункта: один пиксель в сторону наклона и 3-4-5 (сколько нам надо)пикселей в длину нашей линии, получим различные углы наклона для наших линий. Всё просто.
  • Окружности и кривые

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

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

    12/18/2012

    Paul Robertson

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

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




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

    12/13/2012

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


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

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

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


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



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


    Фильтр Offset

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


    Отрисовка

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


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

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


    Изометрия

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


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


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


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


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


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

    12/12/2012

    Кухня. Shameless clone 2 изнутри


    Второй пост, по вышедшей игре, на этот раз более содержательный. (первый пост здесь)
    Более того, это просто рип графических ресурсов. Боссы и составные объекты из нескольких спрайтов выкладываю "as is" — в том же виде, в котором отправлял нашему кодеру для сборки в игре.

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

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

    По сравнению с первой частью, врагов стало в два раза больше, ниже спрайт-рип со всеми вражинами.

    12/01/2012

    Shameless Clone 2

    У меня очередной релиз: игра, где я был художником и музыкантом. Изначально хотели просто добавить несколько новых врагов и героев к первой части и сделать режим "Survival", в итоге сурвайвла нет, зато, в отличии от первой части, появилась предыстория, даже вступительный ролик, и много других плюшек.
    На сколько сиквел вышел удачным/плохим — можно посмотреть например здесь: Shameless clone 2 на http://www.newgrounds.com/
    В итоге действие игры проходит в 5-ти разных мирах, градус ебанутости выше чем в первой части.

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


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


    4/16/2012

    Дизайнер - проверь свое зрение!



    Color IQ Test



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

    4/09/2012

    Отчет по релизу


    Итак, наконец-то добрался до небольшого пост-мортема по нашей игре Shameless Clone.
    В целом:
    300к просмотров за первый месяц.

    Newgrounds.com:
    Игра получила Daily 2nd Place и оценку 4.07
    На сегодняшний день 48к просмотров на этом портале.

    kongregate.com:
    Также заняли фронт пейдж, попав в десятку лидеров. Оценка на этом портале 3.55 и 50к поигравших.

    Поиграть можно, например, здесь.


    Об идее
    Идея и разработка были абсолютно спонтанными: однаждны на newgrounds.com увидели очень простую идею, набравшую неимоверное количество просмотров - Nyan-cat.

    3/28/2012

    Кстати!


    Девиантарт тут объявил конкурс на восьмибитный дизайн.
    8-Bit deviantWEAR Design Challenge!
    P.S. Наконец-то гугл додумался связать гуглоакк с блогом. Новый интерфейс, к слову, удачнее прежнего. Мне нравится.