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

      Игры    Пикселарт    Уроки    Ссылки    Контакт GAS 13    
  ИМИТАЦИЯ ДВИЖЕНИЯ ВОДНЫХ ПОВЕРХНОСТЕЙ
Автор: Сергей DELer Канев

Данный метод позволяет, используя 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.




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

  урок Photoshop пиксельное меню
Пиксельное меню
Урок пикселарт
anti aliasing
Antialiasing
Урок пикселарт
 
  изометрия
Изометрия
Урок пикселарт
so you want to be a pixel artist
So you want to...
Урок пикселарт
 
  пиксельное лицо
Пиксельное лицо
Урок пикселарт
урок пиксельной графики анимация водных поверхностей
Анимация воды
Урок пикселарт
 
  изометрический бассейн
Бассейн
Урок пикселарт
Урок рисования
Урок рисования
Урок Photoshop
 
  Урок фотошоп рисунок по фотографии
Рисунок по фото
Урок Photoshop
рисуем волосы Урок фотошоп
Рисуем волосы
Урок Photoshop
 
  рисуем волосы Урок фотошоп
Рисуем волосы
Урок Photoshop
Урок Photoshop рисуем глаза
Рисуем глаз
Урок Photoshop
 

(c) 1997-2024 Алексей Гаркушин