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, время: 20:33.


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