Рисуем тайлы. Часть первая

от
Работа с графикой    рисование, тайлы

Привет, друзья! :)
В этой статье, я хочу вас познакомить с некоторыми хитростями, как быстро рисовать тайлы, при этом, имея минимум опыта в Пиксель Арте.
Кое-что я взял из этой статьи и переделал на свой лад.

Ну что, вы готовы рисовать? Если да, тогда поехали! :fan:

В большинстве 2D платформеров, присутствует тайл земли, который и будет основой нашего Тайл Сетa.
Вот с него и начнём, только для начала выберим палитру и размер тайла.
Палитра земли может быть любой, но обычно для почвы берут коричневые и серые цвета.
Если у вас не получается выбрать палитру или сама палитра ни какая, то всегда можно взять палитру из чужих изображении.

После выбора палитры, можно приступить к рисованию!
Но прежде, обратите внимание, как я подготовился к самому рисованию.
В левом углу у меня находится палитра, также заранее подготовлены белые квадраты под размер тайлов.
Размер моих тайлов 32 на 32 пикселей.
Рис. 1

И да, самое важное, соблюдайте, чтобы ваши камни могли соединяться с такими же камнями из соседних тайлов, смотрите на рисунки, синие точки показывают, где должны соединяться с противоположной стороны тайла камни.
Погрешность может быть только в один пиксель, иначе получите уродливую сцену.
Рис. 2
Рис. 3

Теперь можете рисовать. Рандомно рисуем камни и после закрашиваем тайл.
Вот что получилось у меня и получится у вас.
Рис. 4

У нас есть целый один тайл, но для игры этого мало, поэтому мы сейчас будет рисовать тайлы!
Берём наш шаблон с белыми квадратами и как на рисунке раставляем наш готовый тайл на квадраты.
Рис. 5

В этот раз нам будет легче нарисовать новый тайл, так как не нужно помечать соединения камней.
Всё просто, смотрите на соседние тайлы. Рисуем второй тайл, рандомно раставляем камни и закрашиваем тайл.
И вот, уже готов второй тайл!
Рис. 6

Таким макаром можно и не один десяток тайлов сделать. Чем больше разных тайлов, тем разнообразнее сцена.

Итак, почву мы нарисовали, теперь можно рисовать траву.
Возьмём наши тайлы с почвой и спрайт главного героя игры.
Поставим спрайт так, как будто, герой игры идёт по траве.
Выделим красными линиями границу плоскости поверхности по которой будет идти наш герой.
Рис. 7

Убираем спрайт персонажа, после этого берём первый тайл почвы выделенными красными линиями и закрашиваем зелёном цветом линии и их промежуток.
Рис. 8

Верхную часть почвы, которая выше травы закрашиваем белым цветом.
Теперь мы подбираем палитру для травы.
И после этого, можно приступать к рисованию, начинаем с верхней части тайла.
Рисуем как бы холмы или волны, плавно переходящие с одной волны на другую.
А в нижней части от зелени мы рисуем как бы зубчики, но с разными размерами и без острых углов.
При этом не заходим на территорию зелённого цвета и не забываем, что этот тайл будет соединяться с другими тайлами травы, тут тоже самое, как в самом начале с камнями.
Рис. 9

Вот теперь, закрашиваем нашу травку, отделяем одну плоскость от другой при помощи палитры.
В итоге получилось вот такое:
Рис. 10

Но что то в этом тайле не так, интересно, что? :dum:
Не хватает тени от травы.
Берём палитру почвы и затемняем её.
Также на глаз определяем высоту и сдвиг тени.
Я не стал сдвигать тень влево или вправо, тень каждого зубчика строго под своим зубчиком, а высоту тени взял в четыре пикселя.
Короче, у нас получается, вот такой не плохой тайл травы.
Рис. 11

Теперь берём шаблон, копируем в него нашу палитру.
Слева и справа ставим наш первый тайл травы, а в центр второй тайл земли.
Рис. 12

Далее, повторяем всё то, что делали до этого с первым тайлом травы и таким образом, получаем второй тайл травы.
Рис. 13

Всё! Работа закончена!
Можно отдохнуть и полюбоваться что получилось.
Вот так выглядит мой Тайл Сет:
Рис. 14

А так выглядит общая сцена:
Рис. 15

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

Возможно, у вас не получится с первого раза, не отчаивайтесь, друзья, повторите несколько раз и обязательно, что-то и получится.
Не сдавайтесь и не ленитесь, верьте в себя и в свои силы.
С вами был Magatino!
Увидимся в следующей статье :)
  • +18
  • views 11355