Еще раз о воде - самый главный секрет

10.05.2008, автор Stormit, рубрики: Анимация, Игровые баннеры

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

Не хватает морской пены. Если на воде происходит развитие сюжета, она обязательно будет пениться. Даже небольшие волны, ударяясь о береговые камни, оставляют за собой белый след. Если пену использовать грамотно, то достаточно плоского морского цвета чтобы глаз сразу определил жидкую среду. А добавление предметов водной тематики только усилит эффект:

Я стараюсь пенить воду везде где только можно. Например, пена может возникнуть на гребешках волн (белые барашки), в результате всплеска или в местах контакта поверхности воды с другими предметами. С рисованием волн надеюсь понятно, это было в предыдущих статьях, а сейчас - как заставить воду пениться.

Для рисования пены я использую несколько подходов.
Если вода пенится в результате динамических движений, то я предпочитаю инструмент Кисть (Brush Tool). Дальше просто - рисую 3-5 произвольных состояния (заштриховую все что под объектом плюс шлейф по ходу движения). Стараюсь штриховать не плотно - создается иллюзия волн. Потом к ним применяю Modify -> Shape -> Straighten. Проще форма и меньше размер файла. Если показалось что кадров мало, можно их отразить по оси X или Y (смотря куда движемся) и удлинить анимацию. В первом кадре примера использовался как раз такой подход.

Если анимация медленная (как прибой волн или круги на воде), то тут тоже не нужно заморачиваться - инструментом Карандаш (Pencil Tool) рисуем на скорую руку 2-3 разных формы будущей пены и делаем циклическое перетекание из одной в другую (Shape Tween). Если некоторые участки анимации коверкаются, можно попробовать применить к шейпам Smooth или Straighten, уточнить при помощи направляющих точек (Shape Hint) или добавить в проблемных местах промежуточные кадры. Так сделано в 2-4 кадрах примера (хотя для лодки стоило бы Кисточкой пройтись - давно делал, опыта было меньше).
Мужик на водных лыжах из 5-го кадра тоже из этой серии, но анимация волны не хаотичная, а сделана по-уму.

Такими эффектами можно оживить картинку, особенно если по сценарию в игре возникает пауза и пользователю нужно принять правильное решение.

Для рисования подобных вещей, я предпочитаю пользоваться графическим планшетом - это сильно ускоряет процесс (хотя пока я к нему привыкал, мышкой получалось даже лучше). Еще советую полюбить инструменты Кисть и Карандаш - рисовать так быстрее, а в работах будет больше жизни.

Интересно на 29%

Хотите почитать позже? Добавьте в социальные сети или закладки

(13) Хитрых на тему «Еще раз о воде - самый главный секрет»

  1. ded pb|xto 10.05.2008 в 23:56

    Планшет нужно хороший брать :) Слава Wacom!

  2. Stormit 11.05.2008 в 15:14

    Стыдно признаться, но у меня Genius. Взял чтобы научиться. Набью руку получше и тоже на Wacom перейду.

  3. unodj 11.05.2008 в 20:45

    Флешки с примерами не видно
    вот этот код больше не работает в IE всех версий :( “var so = new SWFObject” и т.д.
    SWFObject dynamic publishing не работает из-за http://blogs.msdn.com/ie/archive/2008/04/08/ie-automatic-component-activation-now-available.aspx
    Майкрософт отключил “кликните, чтобы активировать элемент управления ActiveX”

  4. Stormit 11.05.2008 в 21:00

    Это после обновления случилось?
    Сам я фаерфоксом пользуюсь, но эксплорер 6-й у меня видит все.
    Это что, получается теперь SWFObject не везде пашет?

  5. unodj 12.05.2008 в 09:46

    WinXP SP3 мазафака :) У меня тоже IE6
    Заплатка для всех версий IE
    Майкрософт как-то разрулил патентный спор с какой-то там фирмой насчет ActiveX, из-за которого и начиналась вся эта лабуда со вставкой flash с помощью скриптов, чтобы избежать рамки “кликните, чтобы активировать элемент управления…”
    SWFObject теперь не пашет там, где вставлен таким образом как на этом сайте
    Т.е. “втавить flash вместо”

    больше не работает :( А это было так удобно для вставки альтернативного контента.

  6. pride_conan 12.05.2008 в 10:04

    Если это так, то это хреново. Жди звонков значит((

  7. unodj 12.05.2008 в 10:16

    Я и узнал об этом по звонку клиента :) Говорит: “меню на сайте не отображается”
    Правда я сначала подумал, что у него дата на компе вперед переставлена и во флешке таймаут демо периода сработал.
    Они еще не заплатили за сайт :D
    ps
    А я последние 2-3 года только так flash и вставлял (
    вот интересно, кто виноват, что теперь все сайты переделывать, и КТО ЗА ЭТО ЗАПЛАТИТ?! :D :D

  8. Stormit 12.05.2008 в 10:19

    Если так, то я думаю что новое решение для SWFObject не за горами.
    А Microsoft не упускает случая насолить Adobe :)

  9. unodj 12.05.2008 в 11:57

    я уверен,
    что дело решится небольшой правкой в каком нибудь if (IE){} else if (FF){} в коде SWFObject :)

  10. unodj 12.05.2008 в 11:59

    ps
    где то на просторах интернета нашел цитату из комментария от Майкрософт по поводу предстоящего релиза нового патча:
    “изменения в поведении нашего браузера будут небольшие, но последствия могут стать разрушительными” :D

  11. Рост 14.05.2008 в 17:18

    А знаешь, о чем я еще подумал?

    Дополнительную глубину анимации воды придает крупномасштабное изменение — например, покачивание всей массы в целом. Хотя в анимации я снимаю шляпу перед мастерами — так, чисто ИМХО :)

  12. Stormit 14.05.2008 в 19:30

    Есть такое.
    Пытаешься уследить за всем сразу, но глаз явно не успевает. А чтобы понять простоту, нужно успеть рассмотреть внимательно каждую волну. А пока не успеваешь, кажется что вода сложная и непредсказуемая.

  13. Dojd 04.06.2008 в 20:57

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

Оставить комментарий