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

Техника неприменима для создания аккуратных блокбастеров. Все мои работы, которые выглядят аккуратно, рисовались в целом с эпизодическим применением кистей, но с жестким доведением результата до идеала вручную, под увеличением и попиксельно.
Техника также абсолютно неприменима для игровой графики. Игровые спрайты/тайлы — это исключительно попиксельная работа под большим увеличением. Жесткая сетка текстур кистей только повредит мелким деталям, которые не подчиняются математическому расположению, а подгоняются под более удачный визуальный результат.
Это — демонстрация изготовления не финальной работы, а наброска. Общее время работы — ровно час, даже с отвлечением на пошаговую точную запись действий в блокнотик.
Итак, мы хотим сделать большую цветную работу за микровремя. Советую выбрать черный фон — если нет серьезного опыта в работе с цветом на Спекки, то черный фон поможет скрыть клэшинг и даст необходимый контраст. В целом, для новичка черный фон — правильный и естественный выбор в реалтайме. Яркие цвета приведут или к клэшингу, или заберут кучу времени, или заберут контрастность, столь важную для вау-эффекта на пати.
Еще совет — не беритесь за мега-полотно. Возьмите одного детального персонажа в центре композиции и занимайтесь им. Не тратьте времени на детализацию фона, пусть всё внимание будет приковано к центру происходящего. На спектруме очень низкое разрешение и мало цветов, поэтому забудьте про дальние детальные панорамы, не хватит времени обеспечить и контрастность, и детальность панорамы в рамках реалтайма.
Чем крупнее персонаж, тем меньше клэшинга. Эту закономерность необходимо заставить работать на себя, пока не появилось достаточного опыта — это экономит время, что для реалтайма приоритет номер 1. Вообще, экономьте время на всём по-максимуму — перед дедлайном вы оцените каждый свой использованный шорткат по достоинству.
Выбор цветов в zxgfx:

В туториале я использую обозначения цветов по номерам. Буква T означает Transparent, то есть при выставлении пикселя этот цвет остаётся на картинке, как есть, не применяется.
Выбор текстур для кисти. Я использую обозначения плотности от 0 до 1. 0 — нуль пикселей, 1/8 — каждый восьмой пиксель ставится, 1/4 — каждый четвертый пиксель ставится, 1/2 — шахматная текстура где каждый второй пиксель ставится на экран, 3/4 — три пикселя из четырех ставятся на экран.

Для толщины кисти я использую те же обозначения, что и в редакторе: 1x1, 2x2 итд.

Рисую просто из головы, от балды, первое, что пришло на ум. Секрет в том, что, вооружившись простым знанием цвета и теней, даже уродливый набросок будет выглядеть хорошо. Простой, примитивный набросок не самого выдающегося чудовища в фронтальном ракурсе.
Кисть: 1x1, заливка: 1, ink: T, paper: T, bright: T, zoom: 3

Кисть: 3x3, заливка: 1, ink: T, paper: T, bright: T, zoom: 3

Кисть: 3x3, заливка: 1/2, ink: T, paper: T, bright: T, zoom: 3

Кисть: 3x3, заливка: 1/4, ink: T, paper: T, bright: T, zoom: 3

Кисть: 3x3, заливка: 1/8, ink: T, paper: T, bright: T, zoom: 3

Кисть: 2x2, заливка: 1, ink: T, paper: T, bright: T, zoom: 3

Кисть: 2x2, заливка: 1/2, ink: T, paper: T, bright: T, zoom: 3

Кисть: 1x1, заливка: 1, ink: T, paper: T, bright: T, zoom: 3

Кисть: 1x1, заливка: 1/4, ink: T, paper: T, bright: T, zoom: 3

Кисть: 1x1, заливка: 1, ink: T, paper: T, bright: T, zoom: 8

Кисть: 1x1, заливка: 1, ink: 7, paper: T, bright: T, zoom: 8

Кисть: 1x1, заливка: 1, ink: 6, paper: T, bright: T, zoom: 8

Кисть: 1x1, заливка: 1, ink: 5, paper: T, bright: T, zoom: 8

Быстро, бессмысленно, но бохато — пока нет опыта для осмысленного выставления цвета, этот прием почти гарантированно сделает работу более разнообразной.
Кисть: 1x1, заливка: 1, ink: T, paper: 1, bright: T, zoom: 8

Кисть: 8x8, заливка: 1/2, ink: T, paper: T, bright: T, zoom: 8

Кисть: 8x8, заливка: 1/4, ink: T, paper: T, bright: T, zoom: 8

Кисть: 8x8, заливка: 1/8, ink: T, paper: T, bright: T, zoom: 8


Кисть: 8x8, заливка: 1, ink: 1, paper: T, bright: T, zoom: 8

Кисть: 8x8, заливка: 1, ink: 2, paper: T, bright: T, zoom: 8

Кисть: 2x2, заливка: 1, ink: T, paper: T, bright: T, zoom: 8

Кисть: 2x2, заливка: 1, ink: T, paper: T, bright: T, zoom: 8

Кисть: 1x1, заливка: 1, ink: T, paper: T, bright: T, zoom: 8


Кисть: 4x4, заливка: 1, ink: T, paper: T, bright: T, zoom: 8

Кисть: 1x1, заливка: 1, ink: T, paper: T, bright: 0, zoom: 6

Кисть: 1x1, заливка: 1, ink: 1, paper: 0, bright: 0, zoom: 6

Кисть: 1x1, заливка: 1, ink: 5, paper: 0, bright: 0, zoom: 6

Кисть: 1x1, заливка: 1, ink: 6, paper: 0, bright: 0, zoom: 6

Кисть: 1x1, заливка: 1, ink: T, paper: 2, bright: 0, zoom: 6

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

Если персонажи недостаточно крупные, то вместо переходов можно потратить время на детали. Включить зум и править все неаккуратные мазки кисти вручную, акцентируя детали и разнообразя заливку. Как тут:

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

Техника неприменима для создания аккуратных блокбастеров. Все мои работы, которые выглядят аккуратно, рисовались в целом с эпизодическим применением кистей, но с жестким доведением результата до идеала вручную, под увеличением и попиксельно.
Техника также абсолютно неприменима для игровой графики. Игровые спрайты/тайлы — это исключительно попиксельная работа под большим увеличением. Жесткая сетка текстур кистей только повредит мелким деталям, которые не подчиняются математическому расположению, а подгоняются под более удачный визуальный результат.
Это — демонстрация изготовления не финальной работы, а наброска. Общее время работы — ровно час, даже с отвлечением на пошаговую точную запись действий в блокнотик.
Итак, мы хотим сделать большую цветную работу за микровремя. Советую выбрать черный фон — если нет серьезного опыта в работе с цветом на Спекки, то черный фон поможет скрыть клэшинг и даст необходимый контраст. В целом, для новичка черный фон — правильный и естественный выбор в реалтайме. Яркие цвета приведут или к клэшингу, или заберут кучу времени, или заберут контрастность, столь важную для вау-эффекта на пати.
Еще совет — не беритесь за мега-полотно. Возьмите одного детального персонажа в центре композиции и занимайтесь им. Не тратьте времени на детализацию фона, пусть всё внимание будет приковано к центру происходящего. На спектруме очень низкое разрешение и мало цветов, поэтому забудьте про дальние детальные панорамы, не хватит времени обеспечить и контрастность, и детальность панорамы в рамках реалтайма.
Чем крупнее персонаж, тем меньше клэшинга. Эту закономерность необходимо заставить работать на себя, пока не появилось достаточного опыта — это экономит время, что для реалтайма приоритет номер 1. Вообще, экономьте время на всём по-максимуму — перед дедлайном вы оцените каждый свой использованный шорткат по достоинству.
Немного о инструментах и терминах
Для начала работы использую ZX Spectrum Screen Editor by A.V.Susekov, или в простонародье zxgfx.Выбор цветов в zxgfx:

В туториале я использую обозначения цветов по номерам. Буква T означает Transparent, то есть при выставлении пикселя этот цвет остаётся на картинке, как есть, не применяется.
Выбор текстур для кисти. Я использую обозначения плотности от 0 до 1. 0 — нуль пикселей, 1/8 — каждый восьмой пиксель ставится, 1/4 — каждый четвертый пиксель ставится, 1/2 — шахматная текстура где каждый второй пиксель ставится на экран, 3/4 — три пикселя из четырех ставятся на экран.

Для толщины кисти я использую те же обозначения, что и в редакторе: 1x1, 2x2 итд.

01
Итак, черный цвет и крупный персонаж. Выбираем ink 7, paper 0 и создаем новый экран. Редактор сам зальет выбранными цветами всё поле, так не придется тратить время на перекрашивание.Рисую просто из головы, от балды, первое, что пришло на ум. Секрет в том, что, вооружившись простым знанием цвета и теней, даже уродливый набросок будет выглядеть хорошо. Простой, примитивный набросок не самого выдающегося чудовища в фронтальном ракурсе.
Кисть: 1x1, заливка: 1, ink: T, paper: T, bright: T, zoom: 3

02
Представим, что здесь свет падает справа и чуть сверху. Берем кисть чуть потолще, заливку оставляем полной и обозначаем самые освещенные участки.Кисть: 3x3, заливка: 1, ink: T, paper: T, bright: T, zoom: 3

03
Оставляем ту же толщину кисти, ставим заливку решетку для полутонов. Обозначаем полутона.Кисть: 3x3, заливка: 1/2, ink: T, paper: T, bright: T, zoom: 3

04
Ставим еще более прозрачную заливку и накидываем остаток градиента в полутонах.Кисть: 3x3, заливка: 1/4, ink: T, paper: T, bright: T, zoom: 3

05
Ставим самую слабую заливку из выбранного набора (1/8) и обозначаем границы морды, заодно на ходу придумав шерсть, как у обезьяны. Более слабую кисть использовать не на лице такого масштаба стоит, она подойдет разве что для фона.Кисть: 3x3, заливка: 1/8, ink: T, paper: T, bright: T, zoom: 3

06
Ставим кисть чуть толще единицы с полной заливкой и добрасываем глаза и зубы, оставшиеся ненарисованными.Кисть: 2x2, заливка: 1, ink: T, paper: T, bright: T, zoom: 3

07
Оставляем кисть толщиной в два пикселя, выбираем шахматную текстуру. У нас остались штрихи от наброска, можно «растворить их», правой кнопкой мышки удалив 50% пикселей по шахматной текстуре. Сравните зубы, рот и блик на носу справа с предыдущей картинкой. Так линии наброска вписались в общую картинку и не выделяются больше.Кисть: 2x2, заливка: 1/2, ink: T, paper: T, bright: T, zoom: 3

08
Выбираем кисть-единичку с полной заливкой и слегка поправляем глаза и нос.Кисть: 1x1, заливка: 1, ink: T, paper: T, bright: T, zoom: 3

09
Ставим заливку 1/4 и под носом на верхней губе маскируем этой решеткой излишне контрастный кусочек.Кисть: 1x1, заливка: 1/4, ink: T, paper: T, bright: T, zoom: 3

10
Опять берем тонкую кисть с полной заливкой для деталей. Увеличиваем zoom и поправляем глаза и заостряем зубы. Это — работа над критичными деталями. Правьте то, на что падает глаз первым, а второстепенные детали отложите на конец работы.Кисть: 1x1, заливка: 1, ink: T, paper: T, bright: T, zoom: 8

11
Пора привнести цвета. Ставим режим рисования Transparent — в этом режиме кисть не меняет пиксели, но может менять цвета, например. Выставляем ярко-белый цвет чернил и «прозрачную» бумагу, красим всё в яркий.Кисть: 1x1, заливка: 1, ink: 7, paper: T, bright: T, zoom: 8

12
А вот и первый фокус, известный каждому опытному zx-графику. Желтый и белый на черной текстуре практически не образуют клэшинга, поэтому можно быстро и безнаказанно покрасить все тени в желтый цвет.Кисть: 1x1, заливка: 1, ink: 6, paper: T, bright: T, zoom: 8

13
Выставляем цвет чернил в голубой и подкрашиваем самые-самые тени. Получили минимальную глубину цвета.Кисть: 1x1, заливка: 1, ink: 5, paper: T, bright: T, zoom: 8

14
Еще стандартный фокус. Если в знакоместе превалирует яркий цвет на черной бумаге, то черный можно без клэшинга высветлить в синий. Ставим чернила в Transparent, а бумагу в синий и в удобных местах чуть снижаем контраст синей подсветкой, добавляя цветового разнообразия.Быстро, бессмысленно, но бохато — пока нет опыта для осмысленного выставления цвета, этот прием почти гарантированно сделает работу более разнообразной.
Кисть: 1x1, заливка: 1, ink: T, paper: 1, bright: T, zoom: 8

15
Теперь пора изобразить фон. Голова в пространстве выглядит не очень, давайте сделаем что-нибудь, что можно изобразить за десять минут. Выбираем широкую кисть 8x8, заливку 1/2 (шахматная решетка) ставим первый полутон градиента.Кисть: 8x8, заливка: 1/2, ink: T, paper: T, bright: T, zoom: 8

16
Ставим чуть более прозрачную заливку (1/4) и толстой кистью ставим следующий переход градиента.Кисть: 8x8, заливка: 1/4, ink: T, paper: T, bright: T, zoom: 8

17
Заливку — еще прозрачнее, аналогично ставим еще кусок градиента.Кисть: 8x8, заливка: 1/8, ink: T, paper: T, bright: T, zoom: 8

18
Грузим ZX-Paintbrush, выделяем градиент и размножаем его по экрану. На ходу приходит мысль перевернуть градиент и поставить его и снизу заодно. Сомневаться некогда — делаем, потом решим, зачем он там нужен.
19
Включаем обратно zxgfx, выбираем толстую кисть в режиме Transparent и полной заливки. Ставим синие чернила и красим градиент в ярко-синий. Толстая кисть перекрашивает большие пространства быстрее, чем тонкая, даже в Transparent.Кисть: 8x8, заливка: 1, ink: 1, paper: T, bright: T, zoom: 8

20
Ставим красные чернила и красим нижний градиент. Снизу типа абстрактная земля-пол, сверху потолок-небо. Покатит, пусть каждый сам додумывает, что там.Кисть: 8x8, заливка: 1, ink: 2, paper: T, bright: T, zoom: 8

21
Выбираем кисть-двойку по толщине, заливку оставляем полной, ставим прозрачные цвета, чтобы не перекрасить случайно чего-то в процессе. Изображаем тень на полу, маскируя следы копи-пейста.Кисть: 2x2, заливка: 1, ink: T, paper: T, bright: T, zoom: 8

22
После критического взгляда удлиняем тень, так чуть реалистичнее.Кисть: 2x2, заливка: 1, ink: T, paper: T, bright: T, zoom: 8

23
Ставим кисть-единицу для точных работ с полной заливкой. В зуме единичными пикселями чуть размазываем тень на полу.Кисть: 1x1, заливка: 1, ink: T, paper: T, bright: T, zoom: 8

24
Чего не хватает? Как-то скучно. Рисовать другие детали некогда, используем смекалку и копи-пейст в ZX-Paintbrush. Не забываем скопировать тень — проще копировать, чем заново рисовать.
25
При копировании подпортил тень. Быстренько удаляем лишнее кистью 4x4 с полной заливкой.Кисть: 4x4, заливка: 1, ink: T, paper: T, bright: T, zoom: 8

26
Понимаю, что чуть не забыл самое важное. На спектруме всё же 15 цветов, а не 7 — я забыл про яркость. Ставим «прозрачные» цвета и «прозрачный» режим выставления пикселей. Ставим яркость Off (0), по затененным местам аккуратно снимаем яркость на центральной морде.Кисть: 1x1, заливка: 1, ink: T, paper: T, bright: 0, zoom: 6

27
Боковые морды слишком яркие, конкурируют с центром композиции. Давайте их перекрасим. Начнем с того, чтобы все голубые места сделать синими. Оставляем яркость выключенной, пусть будут неяркими, ставим синие чернила и красим.Кисть: 1x1, заливка: 1, ink: 1, paper: 0, bright: 0, zoom: 6

28
Теперь аналогично ставим голубые чернила и красим желтые части в голубой.Кисть: 1x1, заливка: 1, ink: 5, paper: 0, bright: 0, zoom: 6

29
А теперь белый — в желтый. Вуаля, соседние морды стали тускнее, больше не лезут в кадр, контрастность и глубина работы выиграли.Кисть: 1x1, заливка: 1, ink: 6, paper: 0, bright: 0, zoom: 6

30
Еще один бессмысленный, но красивый лайфхак. Аналогично синему, можно часть бумаги покрасить в красный. Красный ярче синего, поэтому применить его можно только на совсем уж ярко-залитых знакоместах, красный создает клэшинг гораздо охотнее. Ставим, радуемся — вау-эффекта дешевой ценой стало больше, выглядит бохаче, что и требуется на реалтайме.Кисть: 1x1, заливка: 1, ink: T, paper: 2, bright: 0, zoom: 6

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

Если персонажи недостаточно крупные, то вместо переходов можно потратить время на детали. Включить зум и править все неаккуратные мазки кисти вручную, акцентируя детали и разнообразя заливку. Как тут:

Собственно говоря, вот и всё. Буду очень рад, если кому-то эти несложные приемы пригодятся. Было бы приятно увидеть в реалтайме следы этой техники и новые крутые работы.
28 комментариев