Автор: Евгений Булатов «Vendigo»

Опубликовано: 25.01.2011

Изменено: 25.01.2011

Постоянная ссылка

Комментарии [7]

Создание скринсейвера Matrix с помощью Magic Particles





Страницы: 1 2 3

Часть V. Таблица цифр


Следующий эффект о котором пойдет рассказ, это построение на экране таблицы из цифр. Строчка за строчкой появляются колонки цифр, которые затем рассыпаются.

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

Скринсейвер Matrix - Таблицы из цифр


На построение полной таблицы уходит 4665 частиц.

Цифры заполняют экран слева направо, строчки идут сверху вниз.

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

Скринсейвер Matrix - Идея построения такой таблицы


Дерево эмиттеров выглядит так:

<p><center><img src="matrix_screensaver_magic_particles29.gif" border="0" width="240" height="174" alt="Скринсейвер Matrix - Хранитель экрана"></center></p>

В процессе создания эффекта была добавлена еще одна частица "Пробел" о ней я расскажу позже.

Итак, начнем. Создаем эмиттер и вложенный тип частиц. Эффект получится довольно длинным поэтому стандартных 10 секунд может не хватить. В панели настроек эмиттера я поставил 60 секунд, чтобы наверняка.

<p><center><img src="matrix_screensaver_magic_particles30.gif" border="0" width="572" height="216" alt="Скринсейвер Matrix - Хранитель экрана"></center></p>

Поскольку 60, вполне ожидаемо оказалось много, <code>Вторая граница видимости</code> оказалась в районе 52% (эффект потянул на 31 секунду).

В процессе настройки ровной и аккуратной таблицы цифр, я выставил <code>Частоту создания частиц</code> 60, такое же число задал для <code>Частоты обновления</code>. Объяснить логически, зачем это нужно, не представляется возможным. К тому же эти настройки делают эффект более тяжелым с точки зрения производительности. Но так получилось. Это из разряда тех непонятных вещей, которые иногда делаешь, что бы добиться результата.

Так же должен быть включен параметр <code>Интерполяция</code>. Это уже чисто техническое требование - без него не будет работать заставка. Этот параметр должен быть включен во всех эффектах для скринсейвера. Что такое <code>Интерполяция</code> можно почитать в справке.

Эмиттер должен выпускать нашу частицу вертикально вниз, в графике <code>Направление эмиттера</code> одна линия -90. Другие графики настраивать не нужно.

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

<p><big><b>Настройка частиц</b></big></p>

<p><b>Тип частиц "Вниз"</b></p>

<p>Графики:<br />
Продолжительность жизни: 17 (секунд).<br />
Излучаемое количество частиц: параметр <code>одна частица</code> включен. График быстро спадает до нуля, вторая точка (х = 3; у = 0).<br />
Размер частицы – не важен. Эта частица не должна отображаться, но что бы заставка работала, на ней все же нужна текстура, поэтому в графике <code>Степень непрозрачности</code> поставьте 0%.<br />
Скорость частицы: один график – 50%</p>
<p>Другие графики в этой частице не востребованы.</p>

<p><b>Тип частиц "Вправо"</b></p>

<p>Внутри частицы "Вниз" создаем тип частиц "Вправо". После этого родительская частица "Вниз" обретает ряд свойств эмиттера. В частности график <code>Направление эмиттера</code>. Перейдите к нему и установите значение 0 градусов.</p>
<p>Графики:<br />
Продолжительность жизни: 3<br />
Излучаемое количество частиц: 0.05<br />
Скорость частицы: 500<br />
Степень непрозрачности: 0%</p>
<p>Остальные графики не используются.</p>

<p><b>Тип частиц "Цифры"</b></p>

<p>Внутри частицы "Вправо" создаем тип частиц "Цифры".</p>

<p>Текстуры:<br />
Загружаем в эти частицы, файлы с числами. Включаем опцию <code>случайная стартовая текстура</code>, <code>скорость смены текстур</code> – 0.<br />
Цвет, такой же как в предыдущих эффектах, можно просто скопировать маркер линии цвета, из другого эффекта, и вставить.</p>

<p>Графики:</p>

<p><center><img src="matrix_screensaver_magic_particles31.gif" border="0" width="459" height="146" alt="Скринсейвер Matrix - Хранитель экрана"></center></p>

<p>Диапазон от 0,1 до 25</p>

<p>Продолжительность жизни этих частиц, представляет собой диапазон уменьшающихся значений. Таким образом, первые частицы живут долго, последние мало. Это приведет к тому, что все они исчезнут примерно в одно и то же время (те что родились позже, просуществуют меньше). Но они исчезнут не одновременно, а с некоторым разбросом, потому что линии две, и есть разница значений.</p>

<p>Верхняя линяя:<br />
(Х – 0, У – 25)<br />
(Х – 5, У – 25)<br />
(Х – 50, У – 0)</p>

<p>Нижняя линяя:<br />
(Х – 0, У – 25)<br />
(Х – 45, У – 0)</p>

<p><code>Излучаемое количество частиц:</code> 0,5<br />
<code>Размер частицы:</code> 16 <br />
<code>Скорость частицы:</code> выключено (0)</p>

<p>На данном этапе я получил ровную таблицу цифр, но без пробелов. Просто поле цифр, выводимых стройными рядами. Нужно было разбить эти цифры пробелами на колонки. Первое, что приходит в голову это настроить график <code>Излучаемое количество частиц</code> прямоугольными зубцами, что бы между рядами цифр возникали промежутки. Но мне показалось, это слишком сложным и не гибким. Вместо этого я скопировал тип частиц "Цифры" поверх, и назвал его "Пробел".</p>

<p><b>Тип частиц "Пробел"</b></p>

<p>Идея заключалась в том, что бы назначить на неё специальную черную текстуру, которая бы перекрывала колонки цифр, в нужных местах, создавая видимость пробелов. Поскольку эта частица находится выше частицы "Цифры" в дереве эмиттеров то она рисуется поверх цифр.</p>
<p>Я создал специальную прямоугольную текстуру 64х32 пикселя. И сделал ее черной. Настраивая частоту рождения этой частицы можно получать колонки цифр разной ширины.</p>

<p>Графики:<br />
<code>Продолжительность жизни:</code> 100<br />
<code>Излучаемое количество частиц:</code> 0.05</p>

<p>Остальные графики не меняем.</p>

<p>Цвет: черный</p>

<p>Чтобы пробел закрывал ровно два символа обратитесь к настройке центра частицы, в панели текстуры. Сместите центральную точку на -14, тогда частица аккуратно перекроет две цифры.</p>

<p>Таблица была готова. Но после этого мне захотелось добавить немного шума в этой ровной таблице. Ведь "Матрица" это киберпанк и немного грязи не помешает. Для этого я поиздевался над графиком <code>Степень непрозрачности, коэффициент</code> таким образом, что бы символы слегка мерцали.</p>

<p>Вот что у меня получилось:</p>

<p><center><img src="matrix_screensaver_magic_particles32.gif" border="0" width="556" height="413" alt="Скринсейвер Matrix - Хранитель экрана"></center></p>

<p>В таком виде, таблица и вошла в заставку.</p>


Часть VI. Изображение из символов матрицы


В конце первой части Матрицы есть сцена, где Нео видит наш мир в виде кода Матрицы.

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

<p class=code>"Дополнительное свойство "оттенок" позволяет <b>влиять на цвет частицы цветом пикселя</b>, из того места на картинке, где частица была создана. Используя "оттенок" вы можете получить изображение исходной картинки, состоящее из маленьких частиц."</p>

Это было именно то, что мне нужно! Не без помощи гугла я нашел в интернете несколько наиболее узнаваемых кадров из трилогии, наподобие этого:

<p><center><img src="matrix_screensaver_magic_particles33.jpg" border="0" width="512" height="410" alt="Скринсейвер Matrix - Хранитель экрана"></center></p>

Затем приступил к реализации эффекта. Используя две могущественные программы (Adobe Photoshop и Magic Particles) через некоторое время я получил вот это (только в динамике):

<p><center><img src="matrix_screensaver_magic_particles34.gif" border="0" width="512" height="410" alt="Скринсейвер Matrix - Хранитель экрана"></center></p>

Ниже я расскажу, как это было сделано.

Подготовка изображения

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

В программе Photoshop я открыл кадр из фильма, увеличил его до 1280х1024 и тонировал в зеленый цвет. Затем сверху над ним я расположил черный слой, в котором были сделаны "отверстия" на расстоянии 18 пикселей друг от друга. Через эти "отверстия" и проглядывал нижний слой. Таким образом, я получил маску, по которой рождались частицы для этого эффекта.

<cite>(Очевидно, что маска получилась довольно низкого разрешения, всего 71 пиксель по горизонтали. Чтобы картинка лучше распознавалась, я так же экспериментировал с фильтром Pixilate — Mosaic и размытием Gaussian Blur)</cite>

Увеличенный фрагмент:

<p><center><img src="matrix_screensaver_magic_particles35.gif" border="0" width="512" height="356" alt="Скринсейвер Matrix - Хранитель экрана"></center></p>

После того как маска была создана я перешел к редактору частиц.

<p><b>Настройка эффекта</b></p>

<p>Создаем эмиттер и вложенный тип частиц. На частицы назначаем текстуры символов матрицы. Эмиттер переключаем на тип <code>Картинка</code> и загружаем в него подготовленное изображение. Здесь же отмечаем галочку <code>Оттенок</code>, графики не трогаем.</p>
<p>Что бы частицы приобретали цвет картинки нужно использовать график <code>Влияние оттенка</code>. Я настроил его так:</p>

<p><center><img src="matrix_screensaver_magic_particles36.gif" border="0" width="460" height="120" alt="Скринсейвер Matrix - Хранитель экрана"></center></p>

<p>В панели эмиттера я использовал следующие настройки:<br />
<code>Продолжительность излучения:</code> 30 секунд<br />
<code>Коэффициент темпа:</code> 0.65<br />
<code>Интервалы видимости:</code> 0.0 – 55.0<br />
<code>Интерполяция:</code> включена</p>

<p>Переходим к частицам. В панели текстуры, отметьте опцию <code>Случайная стартовая текстура</code> и в поле <code>Скорость смены текстур</code> впишите 6. Цвет настройте следующим образом:</p>

<p><center><img src="matrix_screensaver_magic_particles37.jpg" border="0" width="460" height="216" alt="Скринсейвер Matrix - Хранитель экрана"></center></p>

Графики:
<code>Продолжительность жизни:</code> 3.56<br />
<code>Излучаемое количество частиц:</code></p>

<p><center><img src="matrix_screensaver_magic_particles38.gif" border="0" width="459" height="146" alt="Скринсейвер Matrix - Хранитель экрана"></center></p>

<code>Размер частицы:</code> 20
<code>Скорость частицы:</code> 0
<code>Вес частицы:</code>

<p><center><img src="matrix_screensaver_magic_particles39.gif" border="0" width="471" height="128" alt="Скринсейвер Matrix - Хранитель экрана"></center></p>

Таким образом, в начале частиц мало, но их количество интенсивно растет. Первые частицы быстро падают, но постепенно их <code>Вес</code> уменьшается и через некоторое время новые частицы уже не двигаются (Вес = 50%). В это время цвет частиц полностью определяется картинкой в эмиттере, и мы видим на экране кадр из фильма, который составлен из меняющихся символов кода матрицы. Затем частицы снова начинают двигаться вниз, их количество уменьшается и картинка рассыпается.

Всего было создано 5 таких эффектов. Различались они только картинками в эмиттере.


Эпилог


На этом создание заставки было закончено. С тех пор она крутится у меня на мониторе, а на сайте www.astralax.ru она выложена в качестве демонстрации API.

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

Мне помогали: Алексей Седов (Odin_KG), Евгений Ксионда (Ksi2) и Катя Мунина. Большое им спасибо за помощь.

Надеюсь, мой опыт был интересен и полезен. Желаю вам всегда находить вдохновение для ваших идей!


Файлы к статье


Matrix_Vendigo.zip (1.4 Мб)

Здесь вы найдете файл Матрица_12.ptc, в котором можно посмотреть все эффекты освещенные в этом уроке, а также саму заставку Matrix_Vendigo.scr. Там же лежат текстуры и маски для эмиттеров.

Страницы: 1 2 3