Руководство по созданию пиксельной графики для игр

      Игры    Пикселарт    Уроки   Магазин    Ссылки    Контакт GAS 13    
  SO YOU WANT TO BE A PIXEL ARTIST?
Автор: Tsugumo (перевод 1-2 части Gas 13, перевод 3-11 части Smudgy, редакция Zuiki)

Часть 2: Избавляемся от 'сетки'

А что такое "сетка"? Вот - ужасный пример ... и, к сожалению, так выглядят многие игры:

Сетка как будто говорит игроку: "Вы находитесь не в настоящем мире... Вы ходите по кучке повторяющихся пикселов." Типа в Матрице... (Прим.: переводчик не выдержал.) А поскольку это так и есть, мы пытаемся создать иллюзию, будто дело обстоит иначе. Наилучший способ избавиться от сетки - сделать так, словно её не существует вовсе. Вот некоторые примеры из Albert Odyssey (первый snapshot) и Final Fantasy 3 (второй и третий snapshot'ы):

Albert Odyssey Руководство по созданию пиксельной графики для игр

Final Fantasy 3

Final Fantasy 3

В этих играх успешно устранена эта самая "сетка". Попробуйте-ка найти, где проходят границы между шаблонами внизу посередине первого snapshot'а ... или в центре второго... или в верхних частях здания на третьем. Трудно, не так ли? ВОТ КАК надо устранять сетку. Можно понять, из чего составляются все объекты, но непросто отыскать границы шаблона. Хотя несложно определить их на коричневой крыше на первом snapshot'е, коврике на втором и снежном выступе на третьем, но эй, ведь это не так уж много, правда?

Итак, вернёмся к нашему примеру с ужасной сеткой... На протяжении этого урока я постараюсь показать, как можно сделать сетку невидимой, и, надеюсь, в конце мы научимся стирать её границы. Но начнём с начала: возьмём третий шаблон травы из первой части урока и попытаемся избавиться от сетки. Как я сказал раньше, на этом фрагменте есть места, которые будут плохо выглядеть, когда мы соберем их на карте. Вот что я имел в виду:

grass tile pixel

Теперь на первом рисунке вы видите всё сами. Я размножил тот фрагмент травы на большую область. Можно С ЛЁГКОСТЬЮ сказать, что это - сетка, собранная из шаблонов... Если вы не понимаете, что я подразумеваю, посмотрите на обведённый участок, который выглядит хуже всего. Видите? Эта зёленая область повторяется каждые несколько пикселов (16, чтобы быть точным). Это совсем не похоже на траву. На втором snapshot'е я разбавил несколькими пикселами эти ужасные кляксы в верхнем правом и нижнем левом углах шаблона... Теперь большое раздражающее пятно исчезло, зато возникла другая неприятность, я выделил ее прямоугольником. Проявились горизонтальные "линии" вдоль фрагмента. Это не совсем линии, но этих отдельных пикселов достаточно много, чтобы глаз соединял их в линию. Ещё есть крупная ярко-зеленая капля, которая постоянно повторяется, и если смотреть на второй snapshot в течение минуты, капли сливаются с воображаемыми линиями и кажутся нарисованными на самом деле... Очень отвлекает и ужасно смотрится.

Итак, мы подходим к третьему примеру. Здесь я разбил ту горизонтальную серию пикселов (добавив тёмно-зеленых точек вдоль линии и светло-зеленых выше и ниже линии так, чтобы вместо нескольких горизонтальных рядов получились как бы буквы 'Г'). Если вы не из тех счастливчиков, у которых полно свободного времени, вы никогда не сможете ПОЛНОСТЬЮ избавиться от следов сетки. Если Вы посмотрите на последний snapshot, вы, возможно, всё ещё будете видеть сетку из ярких пикселов, но в сравнении с первоначальным фрагментом вы, думаю, чувствуете разницу.

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

Содержание:

Автор этого сайта получил разрешение на размещение этого урока здесь. Чтобы разместить этот урок на своем сайте, вы должны получить разрешение автора.

  урок Photoshop пиксельное меню
Пиксельное меню
Урок пикселарт
anti aliasing
Antialiasing
Урок пикселарт
 
  изометрия
Изометрия
Урок пикселарт
so you want to be a pixel artist
So you want to...
Урок пикселарт
 
  пиксельное лицо
Пиксельное лицо
Урок пикселарт
урок пиксельной графики анимация водных поверхностей
Анимация воды
Урок пикселарт
 
  изометрический бассейн
Бассейн
Урок пикселарт
Урок рисования
Урок рисования
Урок Photoshop
 
  Урок фотошоп рисунок по фотографии
Рисунок по фото
Урок Photoshop
рисуем волосы Урок фотошоп
Рисуем волосы
Урок Photoshop
 
  рисуем волосы Урок фотошоп
Рисуем волосы
Урок Photoshop
Урок Photoshop рисуем глаза
Рисуем глаз
Урок Photoshop
 

(c) 1997-2016 Алексей Гаркушин