Animated water tile

[Deler]

<CENTER>
<TABLE cellSpacing=0 cellPadding=0 width=560 bgColor=#f0f0f0 border=0><TBODY><TR bgColor=#b2b2b2><TD colSpan=4></TD></TR><TR bgColor=#b2b2b2><TD></TD><TD style="FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: #71735c; FONT-FAMILY: tahoma; TEXT-ALIGN: center; valign: middle" width=300 bgColor=#dfdede height=60>Метод создания анимации тайлов воды..</TD><TD style="FONT-SIZE: 10px; COLOR: #999b89; FONT-FAMILY: tahoma; TEXT-ALIGN: right; valign: middle" width=258 bgColor=#dfdede>
Sergey [DELer] Kanev
Lead artist CyberDream Company
28.09.2004. </TD><TD></TD></TR><TR bgColor=#b2b2b2><TD colSpan=4></TD></TR><TR><TD bgColor=#b2b2b2></TD><TD style="TEXT-ALIGN: center" colSpan=2>

<TABLE style="FONT-SIZE: 11px; COLOR: #71735c; FONT-FAMILY: tahoma; valign: middle" cellSpacing=0 cellPadding=10 width=550 border=0><TBODY><TR><TD style="FONT-WEIGHT: bold; TEXT-ALIGN: center" colSpan=2>Создание реалистичной имитации движения водных поверхностей..
</TD></TR><TR><TD></TD><TD> Данный метод позволяет, используя Adobe Photoshop + Adobe ImageReady, достаточно быстро и просто создавать анимированные тайлы воды, автоматизируя процесс отрисовки, что значительно сокращает временные затраты при разработке графики для мобильных игр..
<< Данный метод был опробован в работе над проектом "Hive of Evil" (mobile)..
</TD></TR><TR><TD></TD><TD> Изначально потребуется создать текстуру воды (не обязательно высокого качества, но достаточно контрастную по соотношению светлых и темных участков ), которая послужит исходным материалом для работы.. </TD></TR><TR><TD colSpan=2> Создать новый файл, достаточно крупного размера (так удобнее визуально отслеживать качество тайлинга и анимации). "Залить" слой исходной текстурой. Создать копию слоя.. У верхнего слоя установить "прозрачность" произвольного значения (в данном примере это 30%, но степень прозрачности выбирается индивидуально, в зависимости от вида, контрастности и цветности исходной текстуры). </TD></TR><TR><TD></TD><TD></TD></TR><TR><TD colSpan=2> Далее - переход в ImageReady..
Теперь, создавая фреймы, смещать в каждом последующем верхний слой на несколько пикселов. Направление и шаг смещения выбираются произвольно в зависимости от поставленной задачи.



Главное - чтобы в результате была зацикленная анимация движения.. При размере тайла в 16х16 смещение в каждом фрейме на 2 пиксела создаст спокойную, неторопливую анимацию движения водного потока, чем больше шаг смещения, тем больше скорость движения воды и (!) меньше число фреймов.. Для большего эффекта можно также менять степень прозрачности, визуально отслеживая изменения.. Улучшать качество можно редактируя пикселы в процессе тестирования анимации. </TD></TR><TR><TD> </TD><TD> В этих примерах можно наблюдать различия эффектов, которые достигались изменением направления движений и параметров перемещаемого слоя..
Наиболее удовлетворяющие результаты сохранять в gif, используя рабочую палитру проекта.. </TD></TR><TR><TD colSpan=2> Теперь осталось только сделать разбивку анимационного гифа на кадры и нарезать тайлы, собрав тайлсет анимации воды для дальнейшего использования в игровом проекте..
Открыть анимационный гиф в ImageReady, перейти в Photoshop.. Выполнить операцию "Crop" (C) в произвольном месте, под исходный размер тайла 16х16 px

</TD></TR><TR><TD> Теперь имеем psd файл размером 16х16 px и числом слоев равным количеству фреймов.. каждый слой - готовый тайл воды. Осталось только, поочередно копируя содержимое каждого слоя, объединить в рабочий тайлсет ..


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

x2

</TD><TD></TD></TR><TR><TD colSpan=2> Ниже представлена тестовая анимация водных поверхностей, тайлинг которых выполнялся на основе вышеописанного метода и использовался в процессе разработки графических ресурсов для "Hive of Evil" и некоторых других игровых проектов компании CyberDream..

</TD></TR></TBODY></TABLE>

</TD><TD bgColor=#b2b2b2></TD></TR><TR bgColor=#b2b2b2><TD colSpan=4></TD></TR><TR bgColor=#b2b2b2><TD></TD><TD style="FONT-SIZE: 10px; COLOR: #999b89; FONT-FAMILY: tahoma; TEXT-ALIGN: center; valign: middle" width=300 bgColor=#dfdede height=60>Все использованные графические материалы являются собственностью отдела разработок мобильных игр компании CyberDream</TD><TD style="FONT-SIZE: 10px; COLOR: #999b89; FONT-FAMILY: tahoma; TEXT-ALIGN: right; valign: middle" width=258 bgColor=#dfdede>
</TD><TD></TD></TR><TR bgColor=#b2b2b2><TD colSpan=4></TD></TR></TBODY></TABLE></CENTER>

[redautumn]

Awesome. Thanks for sharing the codes.