В данной статье я расскажу, как сделать меню с элементами видео. В интернете очень мало ответов про загрузку видео с альфа каналом, по этому постараемся разобрать все проблемы.
Данная статья показывает только мое решение данной проблемы, не стоит её воспринимать как полноценный гайд.
Для начала нам потребуется сама кнопка и анимация в видео файле, рассказывать как это сделать, я не стану, но прикреплю видео по которому я сам делал.
(Спасибо автору за видео)
На моменте создания анимации у меня получилось два файла, это рамка сохранённая в .png и .mov анимация.
Осталось загрузить рамку и анимацию в unity, на этом начинаются первые проблемы.
Ошибка:
WindowsVideoMedia error 0xc00d5212 while reading C:/Users/alexa/Unity/Tanks/Assets/Textures/Button/ramka.mov
Context: Setting media type for first video stream
Error details: No suitable transform was found to encode or decode the content.
Нам требуется перекодировать видео в WebM.
Я много перепробовал программ, единственный выход из ситуации был использовать FFmpeg
Для этого скачиваем его GIT по ссылке
Разархивируемся в любое удобное место и приступим к установке.
Заходим в "Изменение системных переменных среды"
Заходим в "Переменные среды"
Нажимаем кнопку "Создать"
Где имя переменной, указываем - path
Где значение переменной, указываем путь до папки bin. Папка находится в директории куда была разархивирована FFmpeg
С настройками окончено, пора кодировать видео. Запускаем командную строку (CMD) и вводим следующее:
ffmpeg -i C:\путь_до_видео\видео.mov -c:v libvpx -pix_fmt yuva420p -auto-alt-ref 0 C:\где будет кодированное видео\out.webm
( не забудьте поставить ваш путь к файлу)
У меня это получилось так:
Нажимаем Enter и запускаем кодирование.
Мы должны увидеть такое окно:
В указанной папке у нас должна появится анимация в формате out.webm
Теперь мы можем загрузить данные файлы в Unity.
В файле с видео ставим галочку на Transcode
Ставим галочку на Keep Alpha и убираем галочку с Import Audio. Жмём Apply.
Переходим к следующему шагу и создаём наши кнопки.
Создаём Canvas, Button. Настраиваем всё по желанию, я сделал примерно так:
Далее:
Удаляем компонент "Image"
В компоненте Button, где Transition, ставим - Animation
Так же параллельно включаем панель анимации, если она не включена
Переходим в проект и создаем Render Texture
На кнопку добавляем компонент Raw Image
Добавляем компонент Video Player.
Где Video Clip вставляем нашу кодированную анимацию.
Где Loop ставим галочку
Где Target Texture выбираем Render Texture который мы создали.
Переходим к создании анимации:
Нажимаем на нашу кнопку, переходим во вкладку анимации и нажимаем Create.
Пишем любое название.
После создания переходим в папку куда была создана анимация и запускаем файл:
Открывается аниматор:
В нём нужно создать в параметрах действия для каждой кнопки:
Нажимаем на + и выбираем Trigger
Пишем название учитывая регистр:
Должно получится так:
Далее в папке с анимациями копируем наш .anim
Назовём примерно так:
Удерживая их, переносим в наш аниматор:
Так как нам для данной статьи другие функции не требуются, по этому мы работаем с Normal - это обычное поведение кнопки и Highlighted - это поведение кнопки когда мы наводим на неё.
Переходим обратно в контроллер и наведём не много порядок, удалим стандартный New Animation который мы переименовали и добавили новый.
У меня получилось так:
Однако нам нужен по умолчанию Normal, выбрать его можно так:
Далее нам нужно протянуть действия поведения анимации.
Т.е изначально у нас Normal, значит когда мы наводим на кнопку нужно переключать на Highlighted.
Нажимаем на Normal и выбираем Make Transition
Перетягиваем стрелочку на Highlighted. Так же делаем и с Highlighted, перетягивая стрелочку обратно на Normal. Это если мы отведём курсор от кнопки, то она вернётся на позицию Normal.
Так же нам нужно отключить возможность перехода после Normal на Highlighted, чтобы Highlighted включался сразу после наведения.
Нажимаем на стрелочку и убираем галочку с Has Exit Time
Далее устанавливаем в Conditions - Highlighted
Так же проделываем со второй стрелочкой:
Далее выделаем Highlighted и устанавливаем скорость на 0.
Далее нам нужно настроить в проекте .anim файлы, поставить на них Loop
Чуть совсем не забыл, нам нужно ещё поставить стандартную рамку для нашей кнопки. Переходим к файлу рамки .png, которую мы загрузили.
и с Default меняем на Sprite (2D and UI). Сохраняем.
Теперь переходим к компоненту кнопки Raw Image и где Textures загружаем наш спрайт.
Теперь у нас есть стандартная кнопка.
Пора переходить к созданием логики, заходим в Animation
Выбираем Highlighted
Далее, нажимаем Add property. Если его нельзя нажать, выбираем наш объект кнопки и тогда он загорится.
в Add Property выбираем Raw Image, а в нём выбираем метод Texture и жмём плюсик.
---
Приступим к записи анимации. Заходим в Animation и жмём красную кнопку.
Как только мы её нажали - мы записываем все действия которые будут происходить при наведение на кнопку ( так как мы используем анимацию для Highlighted, а Highlighted срабатывает когда мы наводим курсор на кнопку ).
Далее переходим в Raw Images и меняем Texture на Render Texture, которую мы создали для видео.
После этого нажимаем снова на красную кнопку чтобы остановить запись
Далее нам нужно создать анимацию для Normal
Выбираем Normal:
Проделываем все те же шаги, добавляем Texture
И нажимаем красную круглую кнопку для записи анимации.
После того как прошла запись переходим в Raw Image и где Textures вставляем теперь не Render texture, а стандартную рамку .png
По умолчанию она уже будет установлена, но для анимации нужно её снова поставить, чтобы она записалась.
После этого отключаем анимацию.
Проверяем на работоспособность:
Кстати, размер нашего видео(анимации) можно настроить тут ( в Render Texture ):
Далее создадим несколько кнопок, просто скопируем текущую и поменяем положение по координатам Y, в целом можно поменять на любое, которое вам нужно.
У нас должно получится так:
Проверяем работоспособность:
Остальные функции и дополнения, это другая тема. В данной статье я показал как с помощью прозрачного видео-файла можно сделать анимированное меню. Желаю успехов :)
