Meme project.

Всем привет, если вы когда-то играли в такие игры как Audiosurf, OSU или Symphony и вам интересно как заставить происходящее на экране отвечать ритму музыки то эта статья для вас. В итоге, у нас должно получиться что-то подобное:


Визуальная составляющая.

Для начала давайте займемся тем, что создадим симпатичный фон для нашей музыкальной визуализации. (Использовать будем Unity, скрипты будем писать на C# в конце статьи будет ссылка на .unitypackage).

Для успешного выполнения поставленной цели нам понадобятся: одно изображение/текстура космической тематики с туманностями и, желательно без звёзд (статичная часть финального проекта), одно изображение/текстура звезд — обязательно с прозрачностью и одна музыкальная композиция которую не жалко заслушать до состояния отвращения.

После того как все необходимое импортировано в проект Unity (я рекомендую создавать для каждого типа импортированных ассетов свои папки (директории) например _Textures, _Sounds, _Music …) создадим материал Nebulas изменим шейдер со стандартного на Unlit/Texture и добавим изображение с туманностями в поле для текстуры.

Далее, создаем в сцене Quad (Create/3D Object/Quad), назовем его Background и добавим ему в качестве материала только что созданный материал Nebulas. После этого нужно растянуть Quad и позиционировать камеру в сцене так, чтобы изображение занимало весь экран и не деформировалось, должно получиться что-то в таком духе:

Теперь нам нужен материал со звездами, здесь технология создания материала немного хитрее.

Во-первых, в настройках импортирования изображения необходимо поставить галочку Alpha Is Transparency (настройки отображаются в окне Inspector при нажатии на изображение). Во-вторых при создании материала нам необходимо выбрать Unlit/Transparent шейдер и добавить в поле текстуры наше изображение со звездами. На экране звезд должно стать больше.

Последним штрихом предлагаю сделать ещё один слой для пущей важности и повышения читабельности наших музыкальных спектров. Для этого создаем ещё один материал который я назвал Mask. Для него будем использовать стандартный шейдер, но режим рендеринга выберем Transparent, цвет черный и опустим альфу до 170. Так же я уменьшил Smoothness материала до 0 и удалил свет из сцены.

Теперь добавим немного магии и заставим наши звезды двигаться, для этого мы напишем небольшой скрипт, который я назвал OffsetMover.

Суть работы данного скрипта заключается в том, что он изменяет отступ текстуры от краев меша модели (в нашем случае это Quad). Сначала можете вручную попробовать изменить значения Offset материала Stars и посмотреть, что получится, ниже полностью приведен скрипт с подробными комментариями.

После того, как скрипт написан, добавляем его на объект с тем материалом, Offset которого мы собираемся изменять (по логике вещей данный скрипт должен работать с большинством (читай всеми) стандартных шейдеров Unity) и начинаем экспериментировать со скоростью и количеством слоев, если удастся найти удачное изображение можно и Bаckground тоже скроллить.


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

P.S. Я постараюсь не затягивать со следующей статьей.

P.P.S https://www.dropbox.com/s/0ah4816g9alp275/Meme.unitypackage?dl=0