Я начал писать о программировании игры-платформера. Проект немного заглох из-за моей болезни, но я его продолжаю. Сегодня речь пойдет не о программировании (это тоже будет), а о том, как подготовить графику.
Мы будем использовать бесплатный векторный редактор Xara X 5, о котором я уже неоднократно писал:
Строение игрового уровня
В платформерах игровые уровни сделаны из блоков одинакового размера (хотя можно и разного). Имея набор блоков, можно составить из них уровень.
В данном выпуске я приведу пример рисования одного блока.
Требования к графике
Мой уровень будет иметь тематику вроде тропического острова с древними развалинами. Сейчас я всё ещё в творческом поиске, поэтому
- у меня есть некое представление в голове
- я хочу визуализировать это представление и понять, годится оно или нет
Блок должен выглядеть довольно реалистично, но не совсем, так как в целом стиль будет мультяшный. Я ставлю задачу сделать текстуру старого камня, побитого и поросшего мхом.
Рисовать я буду блок размером 256*256 пикселов. Это слишком много для платформера, но иначе иллюстрации в этом материале будут слишком мелкими. Кроме того, редактор векторный, и значит размер можно менять. Однако это не значит, что можно нарисовать блок любого размера и потом отмасштабировать его как угодно. Рисовать нужно всегда под конкретный размер, в векторе или нет. Только так вы получите 100% совпадение с тем, что видите на экране.
Подготовка Xara
Необходимо перед началом работы настроить Xara в соответствии с данной инструкцией:
После настройки обязательно проверьте, что все размеры пиксельные, и что у вас включена привязка к пиксельной сетке (Window – Snap To Grid).
Описание процесса
Первоначально я хотел дать описание со всеми подробностями – какой инструмент выбирать, что нажать и т.д. Но после того, как я описал первые несколько шагов, стало ясно, что это займёт очень много времени и объёма статьи. Поэтому я буду описывать вкратце, что получилось. Если возникнет необходимость, то лучше записать видео процесса, чем составлять длинные описания.
Начало: квадрат
Я создал квадрат светло-серого цвета размером 256*256 пикселов со скруглёнными углами (это всё делается одним инструментом).
Рельеф
Далее я добавил квадрату рельеф. Это также делается одним инструментом, с возможностью регулировать толщину и угол освещения.
Больше рельефа
В центре первого квадрата я сделал ещё один, также с рельефом, но настроил освещение так, чтобы он был вогнутым.
Орнамент
Поверх центрального квадрата с помощью инструмента кривых я набросал некое подобие древнего орнамента:
После чего, используя инструмент вычитания, я вырезал этот узор из центрального квадрата:
Используя снова инструмент кривых, я подправил контуры узора, и назначил ему цвет чуть потемнее:
В принципе, это всё. Теперь надо поработать над "реалистичностью".
Текстурирование
В качестве текстуры камня, кстати, можно взять любую фотографию, но мне это делать лень, поэтому я применяю такую технику: создаю ещё один квадрат, расположенный поверх оригинального, и делаю ему чёрно-белую заливку фрактальной плазмой (это процедурная заливка, генерирующая двумерный шум):
Затем я просто делаю этот квадрат полупрозрачным и...
Но карту прозрачности тоже можно сделать фрактальной. После подбора параметров получаю:
Далее можно повторять процесс: я создал ещё один квадрат с фрактальной заливкой и прозрачностью. У заливки я сделал зерно меньше. А прозрачность настроил так, чтобы она была едва заметна, но добавляла шероховатости:
Камень стал более материальным. Таким образом можно создать много слоёв, пока не получите требуемый эффект. Можно также делать цветные фракталы:
И вот у меня получился вроде как старый замшелый камень. Прелесть вектора в том, что вы можете в любой момент поменять и формы, и размеры, и цвета, и освещение, и любые другие параметры, и вам не нужно ничего перерисовывать.
Акценты
Временно убираю текстурные слои и добавляю вокруг орнамента тень. Регулирую цвет, размер и прозрачность. Также делаю заливку орнамента чуть темнее в верхней части (вертикальный градиент)
Далее я делаю хитрый финт ушами. Клонирую орнамент, удаляю с него эффект рельефа, и применяю к нему размытие краёв. Задаю ему цвет посветлее и накладываю поверх исходного орнамента, сделав тому заливку потемнее:
Я получил эффект мягкого затенения по углам и вдоль граней и подчеркнул грани. Было-стало:
Я недоволен освещением внешних левой и верхней граней. Делаю ещё один квадрат, который закрывает всё, кроме граней. Делаю ему заодно 4-точечную заливку, чтобы цвет не был монотонным, и добавляю тонкую белую тень вокруг (на рисунке она сиреневая, чтобы было понятно, где она). Подкладываю этот квадрат под орнамент:
Теперь у граней есть светлая граница. Было-стало:
Вариации
Сделав новую текстуру с помощью всё тех же фрактальных заливки и прозрачности, я затем превратил её в растр, а растр наложил несколько раз на камень, применив к нему градиент прозрачности, тонировку цветом, масштабирование и тень:
Заключение
Ну наверное пока всё. Улучшать этот камень можно до бесконечности, добавляя всё новые и новые детали, но у меня заняло в разы больше времени написать этот материал, чем собственно нарисовать камень.
Посмотрим, как всё это выглядит в размере 50%:
Ну и 25% (это уже 64*64 пиксела, что ближе к правде):
Хоть оно как-то и работает, для наилучшего результата в финальной графике нужно будет переделать всё в правильном размере. Ну и конечно, одним блоком здесь не обойтись, их нужно будет нарисовать целую кучу.
