Как нарисовать взрыв?
Спецэффект взрыва — это, пожалуй, один из наиболее сложных эффектов в разработке. Но если немного разобраться, то все не так сложно, как может показаться на первый взгляд.
Я долгое время не затрагивал тему эффектов в блоге по одной простой причине — у меня было недостаточно опыта в их создании, и свои мысли было сложно как-то сформулировать. Еще совсем недавно создание эффектов для меня было большой головной болью в разработке, но с опытом пришло некоторое понимание и основы, о чем я сейчас немного расскажу.
Раньше я уже рассказывал о самом простом способе разглядеть как нарисованы спецэффекты — это записать экранное видео с игрового процесса игры, которая вам понравилась. Видео можно записать какой-нибудь программой с максимальной частотой кадров, а потом получившийся ролик покадрово внимательно разглядывать. Но признаться подобные ролики хоть и позволяют разглядеть как эффекты нарисованы и работают, но не дают однозначного ответа, как эти эффекты создавать. Поэтому, по мере проб и ошибок, мне удалось выработать определенный список шагов, следуя которым, я создаю эффекты.
Шаг 1. Характер взрыва
Под характером взрыва я подразумеваю то, что именно мы взрываем и где — от этого должен зависеть разлет обломков и поведение дыма. Этот момент, пожалуй, самый важный, так как именно от него будет зависеть правдоподобность нашего взрыва в рамках игрового мира. Рассмотрим примеры: если у нас взрывается астероид в космосе, то взрыв будет без огненной вспышки с плавным разлетом обломков в разные стороны, и скорее всего пыль от взрыва будет двигаться в разные стороны равномерно.
На взрывы в невесомости практически не действует никаких дополнительных физических сил, кроме сил самого взрыва, поэтому эффект взрыва будет равномерным.
А если у нас платформер, и взрыв приемущественно происходит на горизонтальной плоскости, то основная сила взрыва действует вверх и в стороны, выталкивая дым и пламя. В данном случае на дым и пламя могут действовать сторонние силы, поэтому пламя и дым к концу своего существования могут изменять свое поведение в зависимости от действия других сил, причем даже если в игровом процессе не существует других сил. Самое распространенное действие на дым и пламя — это сопротивление воздуху за счет чего их направление может изменяться, а движение постепенно замедляется.
Основная сила взрыва в основном действует вверх поэтому основая масса дыма и пламени поднимается вверх. Но некоторые частички так же могут двигаться с меньшей скоростью вниз, что дает взрыву некий объем. При движении пламени и дыма на них действует сопротивление воздуха, что приводит к их замедлению.
А если у нас бомба липучка для разрушения стен и потолков, то тут нужно помнить, что на тяжелые частицы, в отличии от огня и дыма, гравитация действует быстрее и они падают вниз. Аналогично, если что-то взрывается в воздухе, то тут так же стоит разделить частицы взрыва на тяжелые и легкие —это будет эффектно смотреться.
Дым и пламя легкие, поэтому поднимаются вверх, тяжелые частицы разлетаются в разные стороны и под действием гравитации падают вниз.
Шаг 2. Масштаб взрыва
Когда с характером взрыва определились, следует выяснить, какой должен быть масштаб взрыва. Поскольку для рисования и тестирования эффектов я использую всегда отдельный *.fla от общего с графическим сетом, то я просто перетаскиваю туда оригинальный объект, для которого рисуется взрыв, и рисую эффект прямо поверх объекта. В таком случае ошибиться с масштабами почти невозможно. Конечно, помимо этого следует учитывать и саму силу взрываемого объекта, чтобы эффект взрыва случайно не получился сильнее, чем планируемаея сила взрыва, поэтому посовещаться с программистом на предмет радиуса и силы взрыва будет не лишним ;)
Еще очень хочется заметить, что взрывы, как и любую другую графику, категорически не следует масштабировать походу игры — это первый признак халатной и некачественной работы (имхо). То есть, не следует использовать одинаковый эффект взрыва, например для взрыва гранаты, и для подрыва танка.
Шаг 3. Детали взрыва
Самый распространенный взрыв во Flash играх — это пламя и облако дыма, и в большинстве случаев это всех устраивает. Правда в основном такие взрывы смотрятся очень плоско и скучно. А рецепт сочного взрыва достаточно прост, нужно всего-то нарисовать 3 взрыва в одном! :)
Кто хоть раз пытался и не раз нарисовал взрыв, наверняка знает, что нарисовать взрыв — это достаточно трудоемкая задача, а когда хочется сделать его еще и объемным, то вообще не понятно с какой стороны подступиться. Когда я разглядывал разные эффекты с записанных видео роликов, то обратил внимание на то, что в некоторых случаях отдельные облака дыма имеют разные цвета и перекрывают друг-друга, словно нарисованы на разных слоях. Тут то я и понял, что для получения объемного взрыва нужно всего лишь нарисовать несколько анимированных облаков и совместить их вместе.
Пример отдельных слоев совмещенных в готовый эффект.
Только важно помнить, что, чем светлее объект, тем ближе к зрителю он кажется. То есть, на переднем плане должно быть пламя, потом вспышка, далее светлый дым, а за ним уже остальные более темные оттенки дыма. Еще следует учитывать, что светлый дым мало того, что ближе к зрителю, но и еще более горячий и легкий, а черный дым более холодный и следственно более тяжелый, а значит их поведение должно существенно отличаться. Так же это замечание относится к обломкам и пламени. То есть, для всех составляющих частей взрыва должны быть свои временные интервалы, и не в коем случае все не должно двигаться ,и тем более заканчиваться синхронно.
Шаг 4. С чего начать
Принимая в счет информацию из шага 3, начинать следует с наиболее горячих мест взрыва: с пламени или с дыма, который будет первым после пламени. Если честно, то у меня, например, с пламени не получается начать, так как оно опредленно меньше всего взрыва в целом и временной цикл пламени обычно быстро заканчивается, поэтому на его основе сложно определить временные рамки взрыва. Поэтому, рисование взрыва я всегда начинаю с теплого дыма, который будет на переднем плане — этот дым на мой взгляд, как правило, основа всего эффекта взрыва, на котором держатся все остальные детали.
В качестве основы взрыва удобно использовать теплый дым, потому что он живет почти в течении всего взрыва.
После того, как теплый дым нарисован, можно переходить к рисованию более темного тяжелого дыма или к пламени. В принципе, очередность дальнейших действий уже не принципиальна, так как теплый дым является золотой серединой, и отталкиваясь от него, уже не сложно нарисовать новые детали. Темный дым может появляться после окончания огненной вспышки и исчезает последним, обломки могут исчезать не задолго до окончания теплого дыма, ну а вспышка и пламя появляются первыми и живут не более 6-10 кадров.
Шаг 5. Детализация
При рисовании анимированных эффектов все точно так же, как при рисовании настоящих мультиков. ?значально все кадры анимации взрыва следует рисовать контурами с помощью включенного инструмента OnionSkin — так легче будет следить за предыдущими/следующими кадрами. Когда все кадры для одного дыма нарисованы, то можно сделать для них однотонную заливку, чтобы посмотреть приближенный к финалу результат, но не спешите придавать им объем, так как возможно вы еще решите вернуться и что-то подправить. Далее следует переходить к другим слоям дыма или пламени.
Так же, чтобы максимально оживить дым, еще следует сделать переливание облаков из одного в другое, и образование новых облаков — в двух словах это описать не просто, поэтому тут основной упор на вашу фантазию и изучение красивых эффектов.
Быстрый пример переливания облака дыма.
Кроме того, дым может вращаться и закручиваться в пресловутые формы — небольшое вращение некоторых облаков так же дает жизни дыму. Но тут нельзя просто так закручивать и вращать облака, так как результат может получится хаотичным. Важно помнить, что наибольший выброс энергии идет из эпицентра, поэтому облако дыма справа с наибольшей вероятностью будет вращаться по часовой стрелке, а облако дыма слева — против часовой. Для пламени эти правила примерно такие же. Но в случае с пламенем неплохо смотрится и обратный эффект: для правого облака вращения против часовой и для левого — по часовой :)
Быстрый пример демонстрирующий принцип вращения дыма.
Когда все отдельные слои дыма отрисованы, можно приступить к приданию объема. Работа достаточно трудоемкая и скучная. Для каждого взрывного облака и пламени я обычно использую не более 3х цветов. Первый цвет — это основа облака, второй цвет — это светлые части облака и третий цвет — это темная сторона облака. Распределение цветов на облаке дыма происходит примерно по таким же правилам, как и для всех обычных игровых объектов в игре — учитываем основной источник света. Но хочется отметить, что в случае с ярким взрывом возможно эффектно будет смотреться дым, который будет подсвечиваться непосредственно самой вспышкой. Но поскольку сама вспышка обычно длится всего 4-6 кадров и потом непонятно как быть с подсветкой — я использую сразу общий источник цвета. Кстати, я пока не пробовал, но думаю, что на время существования вспышки делать яркую подсветку облаков дыма от вспышки должно смотреться круто :)
Пример освещения дыма от огненной вспышки.
Ну и когда взрыв нарисован и казалось бы все круто, не забудьте добавить немного ярких искр/точек — вроде мелочь, а смотрится детальнее.
Закрепление
Лучше один раз увидеть, чем сто раз прочитать. Поэтому в заключение я предлагаю посмотреть видео ролик процесса рисования взрыва :) Не смотря на то, что в видео все так красиво и быстро — рисование подобных эффектов для меня наиболее трудоемкий процесс, и рисование конкретно этого взрыва заняло один рабочий день. Но я растянул это на два дня, поскольку рука очень уставала, и работа все же достаточно рутинная.
Процесс рисования взрыва для игры MiningTruck 2: Trolley Transport. Этот же взрыв использовался для взрыва бочек в игре Zombotron. Видео ускорено на 2000%, оригинальная продолжительность видео ролика 250 минут, что чуть более 4х часов. В качестве саундтрэка используется микс: Been Meaning to Mix This - Ernest Gonzales.
Если вы начали рисовать взрыв и у вас не получается, тут главное не нужно расстраиваться и бросать работу. ?значально подобные эффекты для меня лично были большим стрессом, а сейчас рука набилась и появляются новые идеи, как их можно улучшить. В общем, с каждым новым эффектом результат все лучше и лучше!
Вообще тема эффектов очень интересная и обширная. ? пока я готовил эту запись, в голове возникло еще очень много различных мыслей, которыми непременно хотелось бы поделиться, поэтому я надеюсь, что эта запись будет первой в серии об анимированных и программных спецэффектах в играх.
Очень интересно, спасибо!
Безумно интересный и нужный материал! Спасибо огромное Антон!
Отличный урок. Втайне ожидал, когда же ты напишешь и раскажешь о создании взрыва. Спасибо!
большое спасибо за урок, давно чего то подобного ждал.
Антон как всегда подготовил и доступно изложил информацию о том, что на мой взгляд, волновало многих начинающих и не только, разработчиков. Большое спасибо, жду новостей =)
Виху!!Этого урока я ждал, ибо взрывы просто фантастически красивые у тебя в играх :))
Как всегда, очень интересно и вполне доступно. Спасибо:).
Классная статья, всегда восторгался взрывами в твоих играх. Знаю по своему опыту, как сложно нарисовать и анимировать взрыв, а в данном примере работа проделана вообще титаническая! Спасибо за статью.
Очень кстати! Спасибо!
Еще никогда не использовал анимации для эффектов, нарисованные вручную, а не состоящие из частиц, поэтому было особенно интересно почитать!
Вот то что надо! А я уже собирался декомпилить Mining Truck и по его взрывам учиться))
Спасибо ))
супер! огромная благодарность!
хотел уточнить по поводу "не следует масштабировать походу игры" - имеется ввиду использование одного мувика на несколько разнотипных эффектов? или же в принципе лучше не масштабировать ни один эффект? (бывает такое - чуть промахнулся с размером при рисовании и решил проскейлить мувик под нужный объект, теряется ли при этом выразительность эффекта?)
@Lampogolovii
В данном случае теряется обводка по границе. Она имеет фиксированную толщину (все таки brush) и при масштабировании либо исчезает либо становится слишком жирной.
А если еще и растеризованный спрайт, то сам понимаешь - сразу станут видны дефекты.
Насколько я понял, речь шла именно о масштабировании эффектов, созданных для одних объектов под другие объекты. Антон ведь даже пример с гранатой и БТР-ом привел. Если же рисуя взрыв вы вдруг заметили, что ошиблись с размерами на 10 пикселей, то ради Бога, можно масштабировать.
А если на 500 пикселей? В векторной графике нет понятия пиксели. Только одна проблемка, дисплей у вас не векторный (хотя такие есть) и требует растеризации.
Так что рисовать нужно сразу думая о том в каком разрешении будет выводиться изображение и как будут выглядеть ваши изящные тонкие линии и мелкие детали, на решетке в 32х32 пикселя.
наткнулся в rss на ссылку зарубежных игроделов, на эту статью, как вдохновляющую :)
http://elliotp.blogspot.com/2011/10/art-update.html
Антон, обалденный урок! после него стал всматриваться в эффекты в твоих играх, круто сделано все)!!!
@Lampogolovii,
> хотел уточнить по поводу "не следует масштабировать походу игры" - имеется ввиду использование одного мувика на несколько разнотипных эффектов?
Да, под этим я подразумевал использование одного эффекта для разных игровых ситуаций. Например, не стоит использовать эффект взрыва автомобиля так же и для взрыва небольшой гранаты :) Для таких ситуаций разумно использовать разные эффекты.
Я тут немножко выпал из ?нтернет жизни в связи со своими временными разъездами и из-за практически полного отсутствия ?нтернет связи не мог отвечать на письма и комментарии в блоге. В ближайшие 1-2 дня я постараюсь всем ответить и обязательно опубликую новые записи заготовленные за время путешествия! :)
Спасиб большое за урок!
Спасибо, что делишься опытом
СПАС?БО! Очень полезно!
Спасибо! полезный урок.
я вот очень люблю олдскульные пикселартные дымы. Учусь их иметировать флешовыми методами)
Довольно сложная задача это делать 12 кадровый дым в 24 кадровой анимации.. Я вот тут выкручивался с помощью сведения между кадрами через альфу.
http://vitaeviazi.ru/kanevsky/?p=114
@Кanevsky, неприятно смотреть когда вначале яркая вспышка, бьет по глазам, а так довольно качественно. Если бы еще немного подольше, чтобы успеть рассмотреть детали.
@Кanevsky, сам по себе взрыв у вас красивый. Только вот мне, например, хочется каких-то красочных обломков чтоле, может быть по больше дыма и осколков, а то как-то все чересчур стерильно выглядит: равномерно взорвался, равномерно исчез и никаких следов большой макаки! :)
болшия спасеба, мои русски рзик ес очин плоха.
rimacy@yahoo.com
было бы здорово выложить сюда swf с анимацией взрыва этого урока, или анимации взрывов из твоих игр, чтобы в динамике понаблюдать
Круо! Спасибо за туториалы!
Вау, прикольно :)
А что за программа используется внутри видео?
Что-то на флеш не похоже
?нтересно рассказываешь )
Обалдеть. А я то всегда на одном слое все делал..Спасибо.
Отличные взрывы, Спасибо!
Спасибо,очень помогли!!!
фигня
спасибо за ваши труды, очень полезны для начинающих
Антон спасибо огромное очень-очень нужный материал.
P.S. Зомботрон 1 и 2 прохожу постоянно очень игра нравится!
А как вы так рисуете, что у вас предыдущие кадры видно? для этого плагин есть?
и ещё, как у вас яркость так сделана? прозрачно и всякое такое, вроде отдельным клипом, мне очень интересно
@mrKurt, чтобы видеть предыдущие или следущие кадры — плагин не нужен, это стандартная фича. На этой картинке (ссылка) показано где включается.
Спасибо за отличный обзор по взрыву, Антон.
Немного сбил с толку такой момент:
Вы рекомендуете на первом плане рисовать яркую вспышку, потом горячий (светлый)дым и на третьем слое - (темный) холодный.
Но в шаге 4 на переднем плане рисуете светлый дым, а в 5-том шаге (где использовалась для объема подсветка от самого взрыва) - темный холодный дым на переднем плане. У вас как художника все это красиво смотрится, но что должно служить отправной точкой для новичка, которому важно вначале зацепиться за правильный подход а потом уже развиваться и експерементировать?
Антон, спасибо вам огромное за блог.
Такой вопрос. Какие настройки кисти вы используете, рисуя графику для своих игр? У меня планшет Trust, я только пытаюсь что-то нарисовать по своим эскизам (карандаш), но выходит нелепо. Линии получаются разной толщины (при рисовании контура например).
Смотрю спидпейнты других художников во флеше - вроде те же самые настройки и у меня, но у них линии ровные и одинаковой толщины, а у меня нет.
Молодец, очень помогла информация решиться взяться за эту работу!!!
очень не хватает в конце результирующую гифку последнего взрыва из видео) чтобы рассмотреть как следует)
фигня!
это не реалистичный взрыв, а мультяшный
)))
Полезная информация. Спасибо.
enderdbnz Strannik , а ты сам можешь нарисовать взрыв?
Спасибо, Антон. Очень понравилось как описана "конструкция" взрыва - теплый, холодный дым и пламя - так все встает на свои месте и взрыв действительно получается естественней.
Удивительно, но последние два дня учился рисовал взрывы.
25 Сентября 2011
— 18:15
#