MGDC    

Вернуться   MGDC > Development > Graphics > Pixel Art > Exchange by experience
Справка Пользователи Календарь Все разделы прочитаны

Exchange by experience Technical questions on games graph (nicety and tricks in development sprites, tiles, etc...)

Ответ
 
Опции темы Опции просмотра
  #1  
Старый 02.10.2004, 06:30
Аватар для Deler
Deler Deler вне форума
Pixeloid
 
Регистрация: 10.04.2004
Адрес: Россия, северА
Компания: фриланс
Должность: наёмник
Сообщений: 527
По умолчанию Animated water tile

<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>
Ответить с цитированием

Реклама
  #2  
Старый 02.05.2014, 08:59
redautumn redautumn вне форума
Junior Member
 
Регистрация: 02.05.2014
Сообщений: 1
По умолчанию

Awesome. Thanks for sharing the codes.
Ответить с цитированием
Ответ


Здесь присутствуют: 1 (пользователей: 0 , гостей: 1)
 
Опции темы
Опции просмотра

Ваши права в разделе
Вы не можете создавать темы
Вы не можете отвечать на сообщения
Вы не можете прикреплять файлы
Вы не можете редактировать сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.
Быстрый переход

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Isometric and Tile-based Games Mihalych Programming 0 08.06.2004 18:11


Часовой пояс GMT +4, время: 23:12.


vBulletin® Version 3.6.10.
Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.
Перевод: zCarot