Пятница, 25.07.2025, 05:49

PiXELART Z0NE













Мы переехали на Pixel.ReSampled.Ru.

Нажмите на это сообщение, если не хотите ждать.

Меню сайта
Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0
Календарь
«  Май 2012  »
Пн Вт Ср Чт Пт Сб Вс
 123456
78910111213
14151617181920
21222324252627
28293031
Архив записей

Блог

Главная » 2012 » Май » 02 » Имитация движения водных поверхностей
18:37
Имитация движения водных поверхностей

Данный метод позволяет, используя Adobe Photoshop + Adobe ImageReady, достаточно быстро и просто создавать анимированные тайлы воды, автоматизируя процесс отрисовки, что значительно сокращает временные затраты при разработке графики для мобильных игр... Эта методика была опробована в работе над проектом "Hive of Evil".

Concept test graphics, project: Hive of Evil

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

Создать новый файл, достаточно крупного размера (так удобнее визуально отслеживать качество тайлинга и анимации). "Залить" слой исходной текстурой. Создать копию слоя.. У верхнего слоя установить "прозрачность" произвольного значения...

Создание реалистичной имитации движения водных поверхностей, используя Adobe Photoshop и Adobe ImageReady

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

Далее - переход в ImageReady... Теперь, создавая фреймы, смещать в каждом последующем верхний слой на несколько пикселов. Направление и шаг смещения выбираются произвольно в зависимости от поставленной задачи. Главное - чтобы в результате была зацикленная анимация движения... При размере тайла в 16х16 смещение в каждом фрейме на 2 пиксела создаст спокойную, неторопливую анимацию движения водного потока, чем больше шаг смещения, тем больше скорость движения воды и (!) меньше число фреймов... Для большего эффекта можно также менять степень прозрачности, визуально отслеживая изменения... Улучшать качество можно редактируя пикселы в процессе тестирования анимации.

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

  

Теперь осталось только сделать разбивку анимационного гифа на кадры и нарезать тайлы, собрав тайлсет анимации воды для дальнейшего использования в игровом проекте... Открыть анимационный гиф в ImageReady, перейти в Photoshop... Выполнить операцию "Crop" (C) в произвольном месте, под исходный размер тайла 16х16 px



Теперь имеем psd файл размером 16х16 px и числом слоев равным количеству фреймов.. каждый слой - готовый тайл воды.

Осталось только, поочередно копируя содержимое каждого слоя, объединить в рабочий тайлсет.

В результате столь несложных и малозатратных по времени махинаций получили бесшовную анимационную текстуру водной поверхности:


(zoom 200%)

 

Ниже представлена тестовая анимация водных поверхностей, тайлинг которых выполнялся на основе вышеописанного метода в процессе разработки графических ресурсов для "Hive of Evil" и некоторых других игровых проектов компании CyberDream.

  

Все использованные графические материалы являются собственностью отдела разработок мобильных игр компании CyberDream

Просмотров: 850 | Добавил: defaultNick | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]