Эффекты в Unity3D. Часть III. Билборды (биллборды), бегущая строка, неоновая реклама, информационные щиты, реклама, рекламные щиты, баннеры.

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

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

Подготовка рекламной площадки в Blender

Для того чтобы создать бегущую строку, нам потребуется поверхность, по которой будет перемещаться рекламный контент. В качестве поверхности можно использовать четырехугольник из примитивов (еще называемый квадом, от английского quad) либо плоскость в Юнити.

На рисунке показан процесс создания примитива квада (или плоскости), который будет выступать в качестве поверхности, по которой будет перемещаться рекламный баннер.
На рисунке показан процесс создания примитива квада (или плоскости), который будет выступать в качестве поверхности, по которой будет перемещаться рекламный баннер.

Вы также можете использовать вместо примитивов созданную Blender плоскость (не забыв создать для нее uv развертку и разместить ее посередине uv плоскости; подготовить плоскость к экспорту (описано в статье Экспорт 3D моделей из Blender в игровые движки Unity3D и Unreal Engine и подготовка моделей к экспорту); экспортировать ее и импортировать в Unity 3D; после чего добавить на сцену).

На рисунке показан процесс создания плоскости в Blender и uv развертки для нее.
На рисунке показан процесс создания плоскости в Blender и uv развертки для нее.

Масштабирование uv развертки осуществляется все той же клавишей ‘S’ (курсор мыши должен при этом находиться в пределах окна uv развертки, о чем я не раз упоминал в предыдущих статьях) и перемещением мыши. Ограничить влияние модификатора масштабирования по высоте вы можете, если после нажатия клавиши ‘S’, нажмете клавишу ‘Y’ (удерживать ее НЕ обязательно; если какую-либо клавишу нужно удерживать, на это будет обращено ваше внимание).

Я не зря разместил uv развертку плоскости в центре uv плоскости, причем так, что она занимает лишь ее треть по высоте, а не все доступное пространство. Вы поймете, почему я так поступил, в заключительной части статьи.

Скачать файлы для создания вывески на дом в формате fbx и blend, а также необходимые текстуры, вы можете здесь (billboard.fbx, billboarduv, 3dbuffercomwhite, 3dbuffercomx3 и billboard.blend) billboard.zip (1184 downloads) .

Теперь нам необходимо создать саму рекламу. Я выбрал белый цвет на черном фоне. И не случайно – далее вы поймете, почему.

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

 

Собираем и анимируем рекламную панель в Unity3D

Импортируйте текстуру рекламы в Unity3D и назначьте ее материалу своей модели. На рисунке ниже розово-фиолетовыми линиями показаны два способа назначения текстуры 3D модели.

Если вы используете примитив Unity3D, то подгоните размеры примитива, используя инструменты масштабирования. Если вы используете плоскость, созданную в Blender, то подгоните размеры текста под границы и размер uv развертки 3D модели.

Получился статичный баннер. Чтобы анимировать баннер и превратить его в бегущую строку, создайте C# скрипт и назовите его BillboardMove. Откройте скрипт и замените все, что увидите внутри него, на следующий код:

 

Более подробно о коде, представленном в данном скрипте, вы можете прочитать в статье Создание водопада в Blender и анимирование воды посредством смещения текстуры и карты нормалей в Unity3D.

Теперь назначьте скрипт 3D модели баннера (плоскости). Вы можете сделать это, если перетащите скрипт на плоскость, находящуюся на сцене. Вы также можете выбрать плоскость Левой Кнопкой Мыши (на сцене или в окне иерархии) и перетащить скрипт в окно Инспектора под кнопку “Add component”. Альтернативным способом назначить скрипт объекту в Unity3D является перетаскивание его на соответствующий объект в окне Иерархии. Эти три способа продемонстрированы на рисунке ниже зелеными стрелками.

На рисунке показаны способы назначения текстуры и скрипта 3D модели в Unity.
На рисунке показаны способы назначения текстуры и скрипта 3D модели в Unity.

Нажимаем кнопку Play и смотрим, что получилось.

На рисунке показана бегущая строка, созданная при помощи скрипта, код которого меняет координаты текстуры в uv пространстве.

На рисунке показана бегущая строка, созданная при помощи скрипта, код которого меняет координаты текстуры в uv пространстве.

А если перетащить всю ту же текстуру с текстом в слот карты высот “Height map”, то получится еще и трехмерная бегущая строка.

На рисунке показан текст, которому была придана трехмерность посредством добавления черно-белой текстуры в слот карты высот “Height Map” в параметрах материала в Unity3D.
На рисунке показан текст, которому была придана трехмерность посредством добавления черно-белой текстуры в слот карты высот “Height Map” в параметрах материала в Unity3D.

 

Неоновая вывеска. Светящаяся бегущая строка

Отличная рекламная бегущая строка, но… для дневного времени суток. Если пригасить свет (выберите на сцене источник света, например, Directional Light и измените цвет и/или интенсивность значения Color), то наша бегущая строка также погрузится во тьму. Таким образом, мы получили бумажную бегущую строку времен 60-ых – 70-ых годов – тогда они были в моде (хотя и сейчаз нечто подобное можно встретить, только в вертикальном исполнении).

Нам нужна светящаяся бегущая строка. Значит нам нужно самосвечение (self-illuminated), для которого есть отдельный параметр “Emission” в меню настроек материала. Более подробно про параметры “Emission” вы можете прочитать на сайте Unity3D в разделе Руководства, посвященного Emission.

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

Если вы хотите сменить цвет свечения, измените цвет Albedo и Emission, например, на красный.

На рисунке показаны настройки для изменения цвета свечения.
На рисунке показаны настройки для изменения цвета свечения.

 

На рисунке показано анимированная светящаяся бегущая строка.

На рисунке показано анимированная светящаяся бегущая строка.

Если вы хотите, чтобы при более интенсивном освещении надпись светилась одним цветом, а ночью – другим, то поставьте для Albedo и Emission разные цвета.

 

Вертикально перемещающаяся реклама. Используем свободное место на текстуре

Помните, в начале статьи при создании плоскости я сказал, что uv развертка плоскости не случайно занимает лишь треть uv пространства? Пришло время воспользоваться созданным преимуществом.

Добавим к существующей надписи в файле текстуры надписи сверху и снизу.

3dbuffercomx3

Изображение (текстура) для новой рекламы.

Заменим текстуру на плоскости, перетащив ее в слот Albedo и слот Emission.

На рисунке показана замененная текстура на плоскости, предназначенной под рекламу. Как видите, ничего не изменилось, кроме цвета рекламы. Еще появилась девушка с бутылкой содовой (текстура с pixabay.com, наложенная на нативную плоскость из Unity3D).
На рисунке показана замененная текстура на плоскости, предназначенной под рекламу. Как видите, ничего не изменилось, кроме цвета рекламы. Еще появилась девушка с бутылкой содовой (текстура, наложенная на нативную плоскость из Unity3D).

Теперь в скрипте BillboardMove в строке rend.material.SetTextureOffset(«_MainTex», new Vector2(offset, 0));” поменяем местами x и y координаты вектора, чтобы получилась строка rend.material.SetTextureOffset(«_MainTex», new Vector2(0, offset));”. Сохраним скрипт и запустим проект.

На рисунке показано вертикальное перемещение изображения по поверхности плоскости, реализованное путем смещения текстуры.

На рисунке показано вертикальное перемещение изображения по поверхности плоскости, реализованное путем смещения текстуры.

 

Смена рекламы “постранично”

А если мы не хотим, чтобы текстура перемещалась, а сменяла одна другую? Тогда заглянем в статью От тайлинга и смещения до атласа текстур на примерах смены обложки для книги и текстуры одежды и кожи персонажа. В данной каждый раз при смене обложки книги использовалась четвертая часть uv развертки, причем менялась, как координата u (она же “x”), так и координата v (она же “y”). В нашем случае нам необходимо смещать текстуру лишь по оси v, причем каждый раз на 1/3.

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

 

Этот скрипт несколько отличается от первоначального и не только тем, что смещение происходит на фиксированные значения.

public Vector2 offsetValue; – объявляем переменную типа Vector2, определяющую положение текстуры в uv пространстве, т.е., на самом деле, данная величина будет содержать значение смещения текстуры;

public Renderer rend; – объявляем переменную с именем rend типа Renderer;

rend = GetComponent<Renderer>(); — переменная “rend” инициализируется (задаем значение переменной)  значением компонента 3D модели “Renderer”. Назначение компонента Renderer в методе Start есть ни что иное как кэширование данного компонента для оптимизации, чтобы не нагружать систему частыми обращениями к компоненту Renderer, например в методе Update.

StartCoroutine(MoveTheTexture()); – регистрируем и выполняем корутину MoveTheTexture(), путем вызова метода StartCoroutine, в качестве параметров которого выступает IEnumerator MoveTheTexture(). Корутины в Unity3D представляют собой C# итераторами, возвращающими IEnumerator;

while(true) – бесконечный цикл, поскольку всегда истинен;

yield return new WaitForSeconds(2.0F); – хотя метод StartCoroutine возвращает значение немедленно, вы всегда можете задержать его, например, при помощи вызова метода WaitForSeconds(float seconds), который задает инструкцию yield’у подождать seconds секунд;

offsetValue = rend.material.GetTextureOffset(«_MainTex»); – получаем текущее положение текстуры. В качестве параметра функции в данном случае выступает Основная текстура. Об остальных параметрах метода вы можете прочитать в Unity Scipting API для Material.GetTextureOffset. Зачем нам нужно получать позицию текстуры? Представьте, что положение текстуры поменял какой-либо другой скрипт, а потом вы запустили скрипт, в котором не забрали текущие параметры текстуры. Что произойдет? Правильно, положение текстуры будет сброшено на захардкоженные значения, как это происходит в скрипте BillboardMove. Чтобы прочувствовать всю важность данного параметра, измените значение офсета текстуры по оси x и оси y (игрек) с 0 на 0.5 в настройках материала объекта, которому назначен скрипт BillboardMove, и запустите проект. Видите, как после старта проекта текстура сбрасывается на нулевые значения? Все дело в значениях Vector2(offset, 0) метода SetTextureOffset, где значение для оси y (игрек) захардкожено и равно 0, а значение offset в первом кадре также равно нулю. Если же сначала забирать текущие значения смещения и использовать их при расчете новых координат uv развертки, то смещение текстуры будет продолжено не с нулевых координат.

yOffsetValue = yOffsetValue + 1.0F/3.0F; — собственно смещение текстуры по вертикали на 1/3 высоты рисунка. Вы можете заменить 1.0F/3.0F на 1.3333333333F и/или вынести данную константу за пределы методов, как это сделано для        scrollSpeed в скрипте BillboardMove. Почему 1.0F/3.0F, а не 1/3, я надеюсь, объяснять не нужно.

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

 

changeimage

 

Файлы для создания вывески на дом в формате fbx и blend, а также необходимые текстуры. Скачать здесь (billboard.fbx, billboarduv, 3dbuffercomwhite, 3dbuffercomx3 и billboard.blend) billboard.zip (1184 downloads) .

 

Автор: Максим Голдобин

goldmaxval@gmail.com

Добавить комментарий