Игрострой

Три грани текстуры

Создание текстур в Adobe Photoshop

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

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

Кстати, если вы до сих пор ни разу не творили в «Фотошопе», то данный урок — прекрасный способ разобраться, как работает эта программа.

Текстура дерева

Запустите «Фотошоп», создайте новое изображение ( File\New ) размера 200x500 пикселей в цветовой схеме RGB. Используя стандартный инструмент Paint Bucket (клавиша G ), залейте фоновый слой любым цветом, исходя из того, какого цвета дерево вы хотите получить в результате. Если это сосна — подойдут светло-желтые оттенки, а для дуба, например, характерны темные коричневые тона. Мы выбрали цвет #a0771f.

Далее выполните зашумление картинки. Для этого проделайте следующие действия. Выберите пункт меню Filter\Noise\Add Noise. Перед вами появится окно настройки параметров выбранного фильтра, значения которых подбираются экспериментальным путем и главным образом зависят от размера исходного документа. Определите уровень зашумления изображения, изменив значение атрибута Amount. Для «деревянной» текстуры настоятельно рекомендуем использовать значения в диапазоне от 40 до 60%. В поле Distribution (Распределение) выберите пункт Gaussian (По Гауссу). Чтобы применить фильтр только к тоновым элементам изображения, не меняя его цвета, отметьте галкой параметр Monochromatic.

Теперь давайте преобразуем созданную поверхность в гладкую доску с помощью фильтра Motion Blur. Выполните команду Filter\Blur\Motion Blur. В появившемся окне присвойте параметру Angle (Угол) значение 90 с тем, чтобы древесные полосы (волокна) прошли вертикально. Значение характеристики Distance определите самостоятельно (в нашем случае — 40). Когда закончите, нажмите OK. Уже сейчас нетрудно заметить сходство получившейся картинки с настоящим деревом, но до полноценной текстуры еще далеко.

Следующий этап работы — придание изображению естественного, природного вида. Создайте новый слой командой Layer\New Layer (альтернатива — комбинация клавиш Shift+Ctrl+N ). Удостоверьтесь в том, что у вас установлены основные цвета по умолчанию (клавиша D ), то есть передний план — черный, а фон — белый. Примените к изображению фильтр Clouds ( Filter\Render\Clouds ). Затем перейдите во вкладку Layers на панели в правом нижнем углу «Фотошопа», щелкните правой кнопкой мыши по второму слою и выберите в контекстном меню команду Blending Options. В открывшемся окне выберите из выпадающего списка Blend Mode режим смешивания слоев Soft Light , задайте параметру Opacity любое значение от 50 до 100 (в зависимости от того, насколько четкую древесную структуру вы хотите получить) и нажмите OK. Объедините слои изображения командой Layer\Flatten Image.

Нетрудно заметить, что после применения фильтра Motion Blur в верхней и нижней частях изображения появилось искажение. Для устранения дефекта активируйте инструмент Crop Tool (клавиша C ), выделите ту часть картинки, где не наблюдается растяжение, и нажмите клавишу Enter.

Обозначим на арте места расположения сучков дерева. Вооружитесь инструментом Elliptical Marquee Tool (клавиша M ), выделите небольшой участок изображения и примените фильтр Wave ( Filter\Distort\Wave ). В открывшемся окне установите параметру Number of Generations (он задает число источников волн) значение 15, далее жмите на кнопку Randomize до тех пор, пока не добьетесь желаемого результата. По аналогии вы можете добавить еще несколько сучков, используя фильтр Twirl. Чтобы повысить четкость изображения, воспользуйтесь фильтром Sharpen , который проживает в меню Filter\Sharpen.

Изготовим тайл (бесшовную текстуру) на основе полученного изображения. Выделите картинку и скопируйте ее в буфер обмена ( Ctrl+A , Ctrl+C ). Затем создайте новое изображение произвольного размера, скажем 500x200 пикселей, и вставьте в него арт из буфера. Выделите текстуру (для этого достаточно зажать клавишу Ctrl и щелкнуть левой кнопкой мыши по слою с картинкой) и примените к ней фильтр Pattern Maker из меню Filter ( Alt+Shift+Ctrl+X ). В окне настроек инструмента обязательно присвойте параметру Offset (Смещение) из секции Tile Generation значение Vertical. Остальные характеристики настраиваются методом проб и ошибок.

Текстура камуфляжа

Создайте новое изображение любого размера и залейте фоновый слой любым светлым цветом (он будет основным) — например, #574d32.

Чтобы добавить на картинку камуфляжные пятна, сделайте следующее. Создайте новый слой командой Layer\New Layer (комбинация горячих клавиш Shift+Ctrl+N ). Нажмите клавишу D на клавиатуре, чтобы воспользоваться цветовыми параметрами, установленными по умолчанию разработчиками. Примените к заготовке фильтр Clouds ( Filter\Render\Clouds ). Затем выберите пункт меню Image\Adjustments\Threshold и повысьте контрастность, изменяя параметр Threshold Level. Выделите области черного цвета с помощью инструмента Magic Wand Tool (клавиша W ). Выполните команду Select\Modify\Smooth для смягчения краев выделения, а следом за ней — Select\Modify\Expand , чтобы слегка увеличить радиус выделения.

Отключите слой с облаками. Для этого на панели в правом нижнем углу редактора переместитесь во вкладку Layers и щелкните левой кнопкой мыши по иконке глаза напротив нужного слоя. Затем сделайте активным основной слой, щелкнув по нему левой кнопкой мыши. Последний штрих — выберите инструмент Paint Bucket (клавиша G ) и залейте выделенные участки темно-коричневым цветом.

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

Текстура ржавого металла

Создайте новое квадратное изображение в формате RGB размера 256x256 пикселей с прозрачным фоном. Используя инструмент Paint Bucket , залейте фоновый слой цветом #595757 (основной цвет будущего металла). Затем на панели инструментов в левой части экрана выберите инструмент Burn Tool (с его помощью изменяется яркость пикселей в сторону уменьшения) (клавиша O ) и затемните некоторые фрагменты изображения.

Далее активируйте инструмент Dodge Tool (Осветлитель; клавиша O ) и на панели инструментов в верхней части экрана выберите из выпадающего списка Range пункт Highlights , а параметру Exposure задайте значение 15%. Осветлите некоторые области изображения — получится почти законченная текстура металла.

Остается добавить ржавчину. Первым делом на панели инструментов в левой части программы назначьте переднему плану оранжево-красный цвет (цвет ржавчины), а фону — черный. Создайте новый слой ( Ctrl+Shift+N ) и примените к нему сначала один раз фильтр Filter\Render\Clouds , а затем три раза фильтр Difference Clouds.

Теперь нужно избавиться от черного цвета, чтобы осталась одна только ржавчина. Выполните команду Select\Color Range , щелкните левой кнопкой мыши по черной области и нажмите OK. Затем удалите выделенную область. Наконец, на панели Layers в правом нижнем углу «Фотошопа» смените стандартный режим наложения слоя ( Normal ) на Color Dodge и задайте параметру Opacity (Прозрачность) значение 50.

Последнее, что нужно сделать, — добавить шум к слою с ржавчиной. Для этого выберите пункт меню Filter\Noise\Add Noise и в появившемся окне присвойте параметру Amount значение в диапазоне от 10 до 20%, а также поставьте метки напротив пунктов Gaussian (По Гауссу) и Monochromatic.

Коротко о важном

Самое интересное, что произошло с игрострой-программами за прошедший месяц

• Autodesk запустила «облачный» сервис Project Photofly ( labs.autodesk.com/technologies/photofly/), который умеет создавать полноценные 3D-модели на основе цифровых фотографий. Чтобы опробовать это чудо самостоятельно, достаточно зайти на сайт.
• Вышла обновленная (3.4) версия конструктора 2D-игр Visionaire Studio ( www.visionaire-studio.net). Если вы вдруг не в курсе, то это программа, в которой почти без всякого знания программирования можно сделать несложный платформер или даже RPG. Улучшен интерфейс, повышена производительность и добавлено несколько новых функций. Отличный повод попробовать себя на игрострой-поприще.
• Состоялся релиз 2.53 бета-версии бесплатного пакета 3D-моделирования Blender ( www.blender.org). Изменениям и улучшениям подверглись практически все элементы программы — пользовательский интерфейс, инструменты для моделирования и текстурирования объектов, анимационная система, рендер-движок и многое-многое другое.
• Отличная новость для всех трехмерщиков (особенно для начинающих). Популярный оптимизатор 3D-моделей VizUp ( www.vizup.com) эволюционировал до версии 3.7. Разработчики довели до ума алгоритм обработки границ текстур и их сохранения, улучшили модули для импорта объектов форматов OBJ и STL и внесли еще ряд мелких изменений.