AstralaxAstralax title
Astralax title
Magic ParticlesПродукты
   
  редактор спецэффектов + API для разработчиков игр:

 
   
   
   
  l
                                                                                                                                ine  
   
  позволяет воспроизводить спецэффекты из собственных программ  
  l
                                                                                                                                ine  
   
  универсальные обертки для интеграции API в некоторые графические движки  
  l
                                                                                                                                ine  
   
  редактор спецэффектов для дизайнеров  
  l
                                                                                                                                ine  
   
  несколько игровых проектов  
     
Magic ParticlesГалерея
   
  Игры, которые используют технологию Magic Particles  
  l
                                                                                                                                ine  
   
  Несколько видеофрагментов из игр, использующих технологию Magic Particles  
  l
                                                                                                                                ine  
   
  Спецэффекты на видео, созданные при помощи Magic Particles  
     
Magic ParticlesОбратная связь
   
  Форум, посвященный вопросам использования Magic Particles  
  l
                                                                                                                                ine  
   
  Чтобы оставить сообщение, не требуется регистрация  
  l
                                                                                                                                ine  
   
  Электронная почта разработчиков  
     


 
articles Создаем огонь в редакторах частицВсе статьи
 

 Об авторе
Имя: Евгений Булатов
e-mail: pet-sematary@yandex.ru
Сайт: vendigo.ru
Профессия: художник

 Оглавление

 Дополнительно
Версия для печатиВерсия для печати
Скачать материалы к урокуСкачать материалы к уроку ~  2,36 Мб
Создаем огонь в редакторах частиц
 

Введение

Доброго времени суток, меня зовут Булатов Евгений, я работаю художником в студии Extreme Developers, мы занимаемся разработкой игр. В этом уроке я расскажу о способе создания огня в редакторе частиц Magic Particles.

Частицы стали неотъемлемой частью компьютерной графики. Кино, телевидение, видеоигры, используют их для создания впечатляющих спецэффектов. Magic Particles очень мощный и удобный редактор для создания спецэффектов, выбирая из нескольких решений, мы в итоге остановились на нем.

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

В материалах к уроку вы можете найти файл эмиттера для Magic Particles, текстуры частиц, а также avi-ролик с анимацией огня.

Итак начнем. Нам потребуются редактор частиц Magic Particles и графический редактор, например Photoshop.

Часть I. Создание текстур

Для создания красивого огня очень важны текстуры частиц. Экспериментируя с ними, вы будете всякий раз получать разный огонь.

Magic Particles понимает формат файлов PSD, что очень удобно, и даже его альфа-канал (для прозрачности). Но поскольку мы создаем огонь и будем использовать специальный режим смешивания (в Photoshop режим наложения, называется Screen), то альфа-канал использовать необязательно.

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

Текстуры

Я использовал тонкую кисть с мягкими краями, а затем размазывал края «пальцем» (smudge), при необходимости дублируя слои, и размывая их Gaussian Blur.

Слои

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

Часть II. Редактор частиц

После того, как текстуры готовы, пора переходить к редактору частиц.

Запустите Magic Particles. Вверху находится панель кнопок, нажимаем на ней кнопку «Создать эмиттер», а затем «Создать тип частиц внутри эмиттера».

Создание эмиттера

В окне просмотра у вас начнет расползаться что-то серое и непонятное. В центре этого отображается иконка эмиттера в квадратной рамке. Перетащите эмиттер вниз к краю экрана, и снимите галочки «Показывать эмиттер» и «Показывать область», они находятся на нижней панели.

Для загрузки текстур перетащите все файлы на окно предпросмотра текстуры (или воспользуйтесь кнопкой «Загрузить текстуру», в диалоге открытия файла можно выбрать сразу несколько файлов).

Загрузка текстуры

Теперь переключитесь на вкладку цвет и включите параметр «Интенсивность» (специальный режим смешивания для светящихся частиц, соответствует режиму Screen в Photoshop). Затем щелкните на серой полоске внизу, вы поставите на ней точку — маркер. Эта полоска с помощью маркеров задает цвет частицам на протяжении их жизни.

Настройте цвет следующим образом:

Настройка цвета

Последний маркер должен быть черный. Это нужно для того что бы частицы плавно исчезали (используем особенности режима наложения «интенсивность»). Это цвет пламени нашего огня.

Сейчас текстуры каждой частицы переключаются, программа проигрывает последовательность кадров. Но поскольку мы не рисовали анимацию, то это нам не подходит. Переключитесь на вкладку «Текстура» и поставьте скорость смены текстур равной нулю, также включите параметр «Случайная стартовая текстура». Таким образом, для каждой частицы будет выбираться случайная текстура, неизменная на протяжении ее жизни.

Теперь остается настроить движение частиц, и вы получите настоящий огонь! Но для начала измените интервалы видимости (внизу нижней панели) 9% в начале и 95% в конце. Так программа не будет показывать начало и конец эффекта. Это удобно, если они нам не нужны.

Огонь всегда движется вверх, с постоянной скоростью, выбрасывая разной длины языки пламени. Вверху пламя становится тоньше и постепенно исчезает. Сейчас мы последовательно шаг за шагом приведем движение частиц к этой модели.

Начнем с эмиттера. Переключитесь на эмиттер в дереве эмиттеров (слева), и в самом верхнем графике смените тип эмиттера с точки на линию.

Из этой линии (отрезка) будут испускаться частицы. У нее два параметра: синий график — угол наклона, зеленый — длина линии. Начальные параметры угол — 0, длина — 100 вполне подходят для огня.

Теперь изменим угол испускания частиц. Следующий график «Направление эмиттера, градус». Задайте углы 36° и 144°, чтобы частицы выбрасывались вверх.

Сейчас это не очень похоже на огонь. Переключитесь на частицы и нажмите на панели кнопку инструментов «Настройка графиков».

Настройка графиков

Тут собраны вместе различные параметры частиц; поскольку параметры все рядом, очень удобно настраивать их через это окно. Такие значения частиц, как «Жизнь», «Количество», «Размер», «Скорость» взаимосвязаны. Например, высокий параметр «Скорость» увеличит темп движения частиц и одновременно удлинит пламя, но, понизив значение «Жизнь», вы сможете уменьшить его высоту.

Настройте параметры по своему вкусу или воспользуйтесь этими:

Параметры частиц

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

Перейдем к настройкам графиков. Сейчас огонь кажется слишком плотным, пламя излишне ярким. Найдите график «Степень непрозрачности (коэффициент)» и понизьте его до 35.

Теперь можно заняться движением частиц. Пламя должно подниматься вверх, а сейчас оно выбрасывается во все стороны. Это из-за широкого угла направления эмиттера. Создавая костер, я хотел, что бы пламя немного расширялось внизу, а затем устремлялось вверх. Примерно вот так:

Костер

Сейчас пламя расширяется, осталось направить его вверх. Этого можно добиться, используя параметр «Вес» с отрицательным значением. Частицы будут словно всплывать.

В Magic Particles есть два типа графиков: обычные (серые иконки) и коэффициенты (красные иконки). Обычные графики регулируют свойства частицы на протяжении жизни эффекта (по оси Х отложено время всего эффекта). А коэффициенты меняют частицу на протяжении ее жизни (по оси Х отложено время жизни частицы).

С помощью коэффициентных графиков я сделал так, что в начале движение частицы определяется параметром «Скорость», а в дальнейшем — значением «Вес».

Выглядит это вот так:

Коэффициент скорости

И вес:

Коэффициент веса

Так я получил нужное движение огня.

Поскольку пламя вначале расширяется, а вверху становится тоньше, то я настроил график «Размер (коэффициент)» вот так:

Коэффициент размера

Вы можете понаблюдать за движением одной частицы, если поставите соответствующую галочку в графике «Излучаемое количество частиц». Это бывает удобно, потому что за обилием частиц часто непонятно, как они там двигаются.

Сейчас пламя все еще довольно сильное и высокое. Немного уменьшите его высоту и сымитируйте колебания. Вот к чему я пришел, настраивая графики «Продолжительность жизни» и «Излучаемое количество частиц»:

Коэффициенты

Графики с двумя линиями интересны тем, что они позволяют задавать значения случайным образом в интервале между зеленой и синей линией. Т. е. каждой создаваемой частице будут присваиваться разные значения параметра.

Получилось неплохо, но, чтобы пламя казалось более живым, я добавил вращение частицам. График «Вращение частицы» выставил от 0 до 100. А «Вращение (коэффициент)» сделал затухающим, чтобы убрать неестественное вращение вверху.

Коэффициент вращения

Вот мой результат:

Пример огня

В огонь можно добавить немного искр, создав новый тип частиц внутри эмиттера, а также дым.

Для искр нарисуйте белую точку или черточку на черном фоне и используйте параметр «Интенсивность». Для дыма нужно будет поэкспериментировать с текстурами. Поскольку дым не светится, выключите «Интенсивность», а в настройках цвета придайте ему голубоватый оттенок.

Вот и весь мой нехитрый способ создания огня в редакторах частиц. Скачав файл с примером и текстурами, вы сможете посмотреть мой вариант в Magic Particles.

Часть III. Экспорт и интеграция в игру

После создания огня его нужно вставить в игру. Самым простым способом в данном случае будет рендер огня в покадровую последовательность с последующим зацикливанием ее. Затем эту анимацию можно будет воспроизводить в виде спрайтов в любом месте игры.

К сожалению, в силу природы таких редакторов сделать сходящийся циклический процесс они не могут. Придется обманывать :). Но для начала нам нужно получить последовательность кадров. Ничего сложного в этом нет. Посмотрите на окно экспорта в Magic Particles:

Окно экспорта

Выбираете размер кадра, обычно кратный степени двойки, тип файла, любой графический формат, кроме сжатия с потерями, альфа-канал нам не понадобится, и жмете «Экспорт».

У вас будет очень много кадров, из которых вам нужно будет выбрать небольшой участок, длиной 1-3 сек. Этого будет вполне достаточно.

Для создания плавного перехода я воспользовался Adobe AfterEffects. Не останавливаясь подробно на этом, приведу пару скриншотов:

Adobe AfterEffects

Я импортировал последовательность кадров в AfterEffects и скопировал анимацию вторым слоем. Затем я «разрезал» дорожки посередине и сдвинул их так, чтобы одна заканчивалась в месте разрыва, а другая начиналась. Немного уменьшил время композиции, чтобы слои шли внахлест. А затем непрозрачность верхнего слоя настроил так, чтобы от точки А до точки В она изменялась от 0 до 100%.

После такой операции переход становится почти незаметен. Остается только экспортировать композицию в последовательность кадров, и посмотреть как все это работает в игре.

Есть и другой способ, который позволяет перенести огонь в игру — это использование девелоперской версии программы Magic Particles (Dev). Эта версия имеет в своем составе API для переноса спецэффектов в движок на уровне обработки частиц. Пример использования API можно скачать здесь.

Заключение

Поэкспериментируйте со своим результатом: вы можете сделать огонь более яростным, как пожар, или спокойным, как пламя газовой плиты. Сделать его ярче, тусклее, быстрее или медленнее, ведь огонь бывает совершенно разным. И немного поиграв с параметрами, вы сможете его сделать таким, каким захотите.

В заключение хочу поблагодарить Яшу известного как Snork, Алексея a.k.a. Odin_KG и Машу Зайцеву за помощь в создании урока.

Задавайте вопросы и оставляйте комментарии.
С наилучшими пожеланиями, Евгений Vendigo Булатов.

 
 
   Комментарии

user icon  Astralax10 сентября 2011, 20:07  
АВИ ролик уже не скачивается
Благодарю за сообщение! Перезалил.

user icon  Sanych  (S-Pb)10 сентября 2011, 19:45  
tato13@bk.ru
АВИ ролик уже не скачивается, не может найти страницу.
Если можно, перезалейте пож.

user icon  Тимка  (Гусев)11 мая 2009, 10:13  
http://gcup.ru
Спасибо за статью! Довольно-таки позновательная, ну и полезная, само собой.

user icon  Алексей21 апреля 2009, 14:42  
Ну и пусть тормозит. Не страшно. А вообще эти создатели браузеров никак даже вопрос об одинаковости тегов не решат. Да и в css постоянно какие-то вариации у всех.

user icon  Vendigo18 апреля 2009, 12:50  
http://www.liveinternet.ru/users/jamesdin/
Спасибо за отзывы. И за то, что оперативно заменили анимацию огня на новую. Теперь она зациклена, и наглядно иллюстрирует третью часть урока.

P.S. Млин, она почему то тормозит в Internet Explorer 8

user icon  Алексей18 апреля 2009, 10:52  
Очень ценная статья. Главное приятно то, что ее удалось перевести на английский.

user icon  Юра18 апреля 2009, 7:15  
Спасибо за статью! Она помогла мне понять многие основы в программе.

 
Magic ParticlesСтатьи и видеоуроки
   
  Когда-то давно задолго до появления Magic Particles автор увлекался созданием игр. Самой серьезной свой работой в данной области он считает классическую RTS 'Земля онимодов'. В своё время на этот проект было потрачено огромное количество времени и сил. Недавно автором была написана статья, подробно описывающая процесс разработки данного продукта. Статья больше расчитана на разработчиков, чем на обычного читателя, но тем не менее, писалась она в максимально простом стиле, который автор счёл возможным применить для технического писания. В конце присутсвует 'лирический раздел' доступный для понимания любому человеку.

Ссылка на игру Земля онимодов
 
  l
                                                                                                                                ine  
   
  Magic Particles начинает свои первые шаги в сторону популярного движка для создания компьютерныз игр Unity3D. В статье дается краткое описание плагина и ссылка на скачивание  
  l
                                                                                                                                ine  
   
  Автор программы Magic Particles поясняет разницу между обычными 2D-эффектами и 2D-эффектами, работающими на плоскости в трёхмерном пространстве (свойство '3d сцена' в редакторе). В частности, статья дает объснение ситуации, которая возникает с проигрыванием 2D-эффектов с помошью 3D версии API  
  l
                                                                                                                                ine  
   
     
Magic ParticlesНовости
   
   
  l
                                                                                                                                ine  
   
   
  l
                                                                                                                                ine  
   
   
  l
                                                                                                                                ine  
   
   
  l
                                                                                                                                ine  
   
   
  l
                                                                                                                                ine  
   
   
  l
                                                                                                                                ine  
   
   
  l
                                                                                                                                ine