Введение

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

Поэтому, давайте по старой памяти, воссоздадим некоторую часть этой классической восьмибитной графики из оригинальных «Братьев Супер Марио».

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

Хотя это руководство для Фотошопа, в действительности, вы можете применить его также и в MS Paint. Все, что вам понадобится это инструмент «карандаш» (pencil tool) и немного терпения. Итак, давайте взглянем на строительные блоки игрового мира.

Цветовая палитра надземной местности

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

#FFFFFF – облака, подсветка и т.д.
#000000 – тени, контуры и т.д.
#5482E4 – небо
#3CBEFC – тени облаков
#FCA244 – основа блоков с вопросами
#E45E14 – кирпичи, поверхность земли
#ECD2BC – подсветка кирпичей
#BCFE1C – кусты, подсветка для труб
#04AE04 – холмы, тени для труб, тени кустов

Базовый кирпичный тайл

Все тайловые текстуры в игре имеют размер 32×32 пикселей, потому давайте начнем с квадрата такого размера кирпичного цвета (#E45E14).

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

Проведите вертикальные линии. Каждый кирпич будет 14 пикселей в ширину. Проделайте путь вниз от верхнего ряда, который содержит два полных кирпича.

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

Блок с вопросом

Помните, как прыгали и разбивали такой блок, чтобы получить монетки или грибы, которые находились в нем?

Чтобы нарисовать блок с вопросом, начните с основного цвета блока (#FCA244) и, используя либо карандаш (pencil tool), либо инструмент прямоугольного выделения (rectangular marquee tool), создайте квадрат размером 28×28 пикселей.

Теперь, используя цвет кирпича (#E45E14), сделайте края шириной в два пикселя вдоль верхней и левой стороны квадрата. Затем переключитесь на черный и сделайте края шириной в два пикселя вдоль нижней и правой стороны. Вы должны получить квадрат размером 32×32 пикселя с четырьмя отсутствующими пикселями в верхнем правом и нижнем левом углах, как на картинке.

Далее нам нужно нарисовать болты на кирпиче. Это просто квадраты размером 2×2 пикселей, каждый из которых расположен по краям, как на картинке:

Далее мы нарисуем вопросительный знак цветом кирпича (#E45E14), и наконец, мы дадим ему черную тень шириной в два пикселя. Таким образом, мы закончили рисовать кирпич с вопросом.

Тайл поверхности земли

Узор на тайле поверхности земли немного сложнее. И снова нам нужно начать с тайла размером 32×32 пикселя и цветом кирпича (#E45E14). Затем мы пробежимся вокруг внутренних границ тайла, добавим черные края внизу и справа, и добавим края светлым цветом (#ECD2BC) для верхней и левой сторон. Убедитесь, что оставили квадраты размером 2×2 пикселя и у каждого цвет такой же, как основной цвет кирпича, как на картинке.

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

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

Облака

Облака в игре имеют весьма своеобразную форму, часть которой мы повторим далее для кустов. И снова, это не простая форма, которую легко объяснить. Начните со светлого небесно-голубого цвета фона (#5482E4) и нарисуйте квадрат размером 60×60 пикселей, потому что облако требует четыре тайла для создания.

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

Далее, мы обводим наше облако черным цветом и размером 2×2 пикселя, как на картинке:

Наконец, нам следует взять цвет тени для облака (#3CBEFC) и продолжить создавать для него тени.

Кусты

Как я отметил ранее, кусты и облака имеют схожую форму, поэтому давайте зажмем кнопку Ctrl и кликнем мышью на облаке, чтобы выделить его, затем нажмем Ctrl + C , чтобы скопировать его. Затем создадим новый документ размером 128×32 пикселя и снова придадим фону цвет голубого неба (#5482E4).

Теперь нажмите Ctrl + V , чтобы вставить облако в новый документ. Нам снова нужно выровнять верхний и левый края облака вдоль верхней и левой сторон холста, как на рисунке:

Нажмите на Ctrl + J чтобы продублировать слой и расположить его в правой части холста, как на изображении:

Теперь нажмите Ctrl + V еще один раз, чтобы вставить облако в центр документа, а затем нажмите Ctrl + Shift + [ , чтобы разместить его под остальными слоями.

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

Наконец, возьмите снова инструмент карандаш и закрасьте все голубые участки цветом тени для кустов (#04AE04), затем используя инструмент заливка (bucket tool) с отключенным параметром anti-aliasing, залейте белые пиксели зеленым цветом кустов (#BCFE1C).

Перемещающие трубы

Далее, мы займемся рисованием перемещающих труб. Вспомните, что самая короткая перемещающая труба, которая только может быть, это труба размером 64 пикселя в ширину (один тайл для верхней части трубы, остальной для всей трубы), а ее высота может быть какой только вы захотите, и может быть длинной, при условии, что ее общая высота делится на 32. Сейчас, мы создадим одну такую трубу размером 64×96 пикселей.

Итак, начните с нового документа, определите размер по своему желанию, закрасьте фон голубым цветом (#5482E4). Затем, на верхней части нарисуйте квадратный контур в 2 пикселя черным и размером 64×30 пикселей. Заполните квадрат цветом тени, которая используется для трубы (#04AE04).

Далее нарисуем блики для трубы. Это довольно просто. Три полосы вниз в левой части трубы рисуются цветом подсветки (#BCFE1C). Сначала нарисуем линию шириной 6 пикселей, оставим пространство в 4 пикселя, нарисуем еще одну линию шириной 12 пикселей, опять оставим пространство в 2 пикселя и нарисуем линии шириной в 4 пикселя, как показано на картинке:

На правой стороне трубы, нам нужно нарисовать линию шириной 4 пикселя, а левее другую линию шириной 8 пикселей, узором в виде шахматной доски, где один квадрат должен быть размером 4×4 пикселя, как показано на рисунке:

Теперь, чтобы создать нижнюю часть трубы, просто переместите все на два пикселя с каждой стороны и дорисуйте остальное, как показано на рисунке:

Наконец, добавьте подсветку и тени вдоль верхней части трубы, чтобы закончить рисунок.

Холмы

Направляясь вперед, давайте нарисуем холмы. Холмы имеют странные размеры, и хотя для них необходим блок из тайлов размером 128×60 пикселей (4 тайла в ширину, 2 тайла в высоту), они, на самом деле, наполняют неиспользованное пространство. И все же, давайте начнем с создания изображения размером 128×64 пикселей и даже более того, закрасим фон небесно-голубым цветом (#5482E4).

Далее, направляемся к 18 пикселю от левой стороны холста и используя зеленый цвет (#04AE04), рисуем горизонтальную линию 2 пикселя в ширину и 92 пикселя в длину (эта линия должна дойти прямо до 18 пикселя, который находится от правой стороны холста).

Продолжайте рисовать другие линии такой же ширины поверх, уменьшая с каждым разом их длину на 2 пикселя с каждой стороны, пока холм не достигнет высоты в 32 пикселя.

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

Наконец, разместите пару деревьев на холме, чтобы закончить рисунок.

Монетки

Последнее, но не менее важное, давайте сделаем монетки. Начните с тайла размером 32×32 пикселя и создайте прямоугольник 4×14 пикселей, используя цвет блока с вопросом (#FCA244). Установите прямоугольник вертикально по центру и сместите на 1 пиксель влево от центра горизонтально.

Продолжайте дорабатывать монетку, сделав еще один прямоугольник шириной 6 пикселей и высотой 12 пикселей и поместив в центре на верхней части первого прямоугольника. Установите еще один прямоугольник в верхней части, чтобы получилась овальная форма монетки.

Далее, нарисуйте черный контур шириной 2 пикселя на правой стороне монетки и внутренние линии цветом кирпича (#E45E14), как на рисунке:

Завершение рисования

Теперь мы закончили создание основных компонентов игрового мира и можем построить любой уровень, который только захотим, используя эти базовые спрайтовые блоки. Ну так давайте же займемся этим и создадим свой собственный игровой уровень! Создайте новый документ, размеры которого должны делиться на 32 и установим сетку размером 32×32 , после чего расположим готовые спрайты.

Также можете скачать все спрайты, которые мы сделали в этом уроке, в виде файлов фотошопа.

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