В данной статье описано создание рекламных щитов, меняющихся рекламных «листов» и бегущей строки при помощи смещения текстур и добавления изображению самосвечения.
Подготовка рекламной площадки в Blender
Для того чтобы создать бегущую строку, нам потребуется поверхность, по которой будет перемещаться рекламный контент. В качестве поверхности можно использовать четырехугольник из примитивов (еще называемый квадом, от английского quad) либо плоскость в Юнити.
Вы также можете использовать вместо примитивов созданную Blender плоскость (не забыв создать для нее uv развертку и разместить ее посередине uv плоскости; подготовить плоскость к экспорту (описано в статье Экспорт 3D моделей из Blender в игровые движки Unity3D и Unreal Engine и подготовка моделей к экспорту); экспортировать ее и импортировать в Unity 3D; после чего добавить на сцену).
Масштабирование uv развертки осуществляется все той же клавишей ‘S’ (курсор мыши должен при этом находиться в пределах окна uv развертки, о чем я не раз упоминал в предыдущих статьях) и перемещением мыши. Ограничить влияние модификатора масштабирования по высоте вы можете, если после нажатия клавиши ‘S’, нажмете клавишу ‘Y’ (удерживать ее НЕ обязательно; если какую-либо клавишу нужно удерживать, на это будет обращено ваше внимание).
Я не зря разместил uv развертку плоскости в центре uv плоскости, причем так, что она занимает лишь ее треть по высоте, а не все доступное пространство. Вы поймете, почему я так поступил, в заключительной части статьи.
Скачать файлы для создания вывески на дом в формате fbx и blend, а также необходимые текстуры, вы можете здесь (billboard.fbx, billboarduv, 3dbuffercomwhite, 3dbuffercomx3 и billboard.blend) billboard.zip (1162 downloads) .
Теперь нам необходимо создать саму рекламу. Я выбрал белый цвет на черном фоне. И не случайно – далее вы поймете, почему.
Собираем и анимируем рекламную панель в Unity3D
Импортируйте текстуру рекламы в Unity3D и назначьте ее материалу своей модели. На рисунке ниже розово-фиолетовыми линиями показаны два способа назначения текстуры 3D модели.
Если вы используете примитив Unity3D, то подгоните размеры примитива, используя инструменты масштабирования. Если вы используете плоскость, созданную в Blender, то подгоните размеры текста под границы и размер uv развертки 3D модели.
Получился статичный баннер. Чтобы анимировать баннер и превратить его в бегущую строку, создайте C# скрипт и назовите его BillboardMove. Откройте скрипт и замените все, что увидите внутри него, на следующий код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
using UnityEngine; using System.Collections; public class BillboardMove : MonoBehaviour { public float scrollSpeed = 0.5f; public Renderer rend; void Start () { rend = GetComponent<Renderer>(); } void Update () { float offset = Time.time * scrollSpeed; rend.material.SetTextureOffset("_MainTex", new Vector2(offset, 0)); } } |
Более подробно о коде, представленном в данном скрипте, вы можете прочитать в статье Создание водопада в Blender и анимирование воды посредством смещения текстуры и карты нормалей в Unity3D.
Теперь назначьте скрипт 3D модели баннера (плоскости). Вы можете сделать это, если перетащите скрипт на плоскость, находящуюся на сцене. Вы также можете выбрать плоскость Левой Кнопкой Мыши (на сцене или в окне иерархии) и перетащить скрипт в окно Инспектора под кнопку “Add component”. Альтернативным способом назначить скрипт объекту в Unity3D является перетаскивание его на соответствующий объект в окне Иерархии. Эти три способа продемонстрированы на рисунке ниже зелеными стрелками.
Нажимаем кнопку Play и смотрим, что получилось.
На рисунке показана бегущая строка, созданная при помощи скрипта, код которого меняет координаты текстуры в uv пространстве.
А если перетащить всю ту же текстуру с текстом в слот карты высот “Height map”, то получится еще и трехмерная бегущая строка.
Неоновая вывеска. Светящаяся бегущая строка
Отличная рекламная бегущая строка, но… для дневного времени суток. Если пригасить свет (выберите на сцене источник света, например, Directional Light и измените цвет и/или интенсивность значения Color), то наша бегущая строка также погрузится во тьму. Таким образом, мы получили бумажную бегущую строку времен 60-ых – 70-ых годов – тогда они были в моде (хотя и сейчаз нечто подобное можно встретить, только в вертикальном исполнении).
Нам нужна светящаяся бегущая строка. Значит нам нужно самосвечение (self-illuminated), для которого есть отдельный параметр “Emission” в меню настроек материала. Более подробно про параметры “Emission” вы можете прочитать на сайте Unity3D в разделе Руководства, посвященного Emission.
Перетащите в слот Emission ту же самую текстуру, что вы использовали для Albedo, и измените цвет излучения на белый. Если вы еще не пригасили свет, то сейчас самое время это сделать, чтобы посмотреть, как светится в темноте белым светом ваша наружная реклама на здании.
Если вы хотите сменить цвет свечения, измените цвет Albedo и Emission, например, на красный.
На рисунке показано анимированная светящаяся бегущая строка.
Если вы хотите, чтобы при более интенсивном освещении надпись светилась одним цветом, а ночью – другим, то поставьте для Albedo и Emission разные цвета.
Вертикально перемещающаяся реклама. Используем свободное место на текстуре
Помните, в начале статьи при создании плоскости я сказал, что uv развертка плоскости не случайно занимает лишь треть uv пространства? Пришло время воспользоваться созданным преимуществом.
Добавим к существующей надписи в файле текстуры надписи сверху и снизу.
Изображение (текстура) для новой рекламы.
Заменим текстуру на плоскости, перетащив ее в слот Albedo и слот Emission.
Теперь в скрипте 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.
Давайте будем изменять надпись на рекламном плакате, например, через каждые две секунды, тогда немного изменим скрипт, в упомянутой выше статье:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
using UnityEngine; using System.Collections; public class SetTextureOffset : MonoBehaviour { public Vector2 offsetValue; public Renderer rend; void Start () { rend = GetComponent<Renderer>(); StartCoroutine(MoveTheTexture()); } IEnumerator MoveTheTexture() { while(true) { yield return new WaitForSeconds(2.0F); offsetValue = rend.material.GetTextureOffset("_MainTex"); offsetValue.y = offsetValue.y + 1.0F/3.0F; rend.material.SetTextureOffset("_MainTex", new Vector2(offsetValue.x, offsetValue.y)); } } } |
Этот скрипт несколько отличается от первоначального и не только тем, что смещение происходит на фиксированные значения.
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, я надеюсь, объяснять не нужно.
Файлы для создания вывески на дом в формате fbx и blend, а также необходимые текстуры. Скачать здесь (billboard.fbx, billboarduv, 3dbuffercomwhite, 3dbuffercomx3 и billboard.blend) billboard.zip (1162 downloads) .
Автор: Максим Голдобин
goldmaxval@gmail.com
