Блог

У меня есть серия спрайтов, которые я использую для анимации пользовательского интерфейса, который должен быть на холсте — их около 500, потому что я экспортировал последовательность png из aftereffects, и я просматриваю их с изображением canvas с этим:

 public class VideoPlayerRawImage : MonoBehaviour
{
    public Sprite[] frames;
    public int framesPerSecond = 60;
    public int index;
    public bool paused;
    Image image;

    float t;
    public bool pause;
    public bool done;

    private void Start()
    {
        image = GetComponent<Image>();
    }

    void Update()
    {
        if (!pause)
        {
            t  = Time.deltaTime;

            if (frames.Length > 0 amp;amp; !done)
            {
                index = (int)(t * framesPerSecond) % frames.Length;
                image.sprite = frames[index];
            }
        }

        //repeat
        if(index >= frames.Length-1)
        {
            done = true;
        }
    }
}
  

Я сжимал спрайты следующим образом:

И я уже делал это раньше с текстурами. Проблема в том, что при добавлении этих спрайтов я получаю черный экран после запуска приложения, перед загрузкой сцены и после логотипа unity. Что я могу сделать, чтобы это исправить? Мне нужно использовать спрайты, потому что они нужны мне на холсте.

Unity:

Я предполагаю, что вы не можете просто использовать VideoPlayer компонент вместо этого и загружать видео, а не файл PNG для каждого кадра по той же причине, что и я когда-то: альфа-канал.

В любом случае, импортировать каждый кадр в формате PNG и переключать спрайт в каждом кадре очень неэффективно!

Так что, если речь все равно идет не об alpha chanel, просто используйте видеоплеер с видеоклипом и переходите к шагу 3.2. здесь, используя видеофайл вместо отдельных кадров / WebM-файла.

Если проблема в альфа-канале:

Однажды я нашел решение для создания текстуры, подобной GIF, но с сохранением прозрачности

требуется Adobe MediaEncoder (можно бесплатно протестировать в течение 30 дней).

1. Где-нибудь возьмите отдельные изображения в формате PNG

Я отрисовал свой с помощью Blender3D, но вы, конечно, можете использовать любые рамки PNG с прозрачностью (или без).

Похоже, они у вас все равно уже есть. Однако файлы фреймов должны иметь соответствующие пронумерованные названия, такие как, например, frame_001.png , frame_002.png и т.д.

2. Закодируйте файлы PNG в WebM видеоформат

1. Установите кодек WebM для Adobe Premiere и MediaEncoder

2. Откройте Adobe MediaEncoder

3. Перейдите к File -> AddSource...

   

4. Выберите первый кадр вашей анимации и убедитесь, что PNG file sequence включен.

   

5. В Queue представлении щелкните по текущему целевому кодеку

   

6. Выберите формат WebM (доступен только после установки плагина на шаге 1.)

   

7. в Image Settings разделе вы можете либо изменить настройки, либо просто нажать на Match Source

   

8. В кодеке Settings переключитесь на VP8 , поскольку Unity не поддерживает VP9 (пока?)

   

9. Возможно, вы захотите внести дополнительные изменения, но самое важное: включить Include Alpha Channel

   

10. Когда вы подумаете, что закончили, нажмите Ok в нижней части окна

    

11. Вернувшись в Queue вид, нажмите на символ воспроизведения, чтобы начать кодирование

    

12. после завершения работы и закрытия Adobe MediaEncoder вы найдете результат в той же папке, что и ваши исходные кадры, где в

    

3. Наконец, используйте WEBM «GIF» с прозрачностью в Unity

1. Импортируйте два файла результатов в свой проект Unity.

2. В Assets делать right-click -> Create -> RenderTexture

   

   Назовите это и, возможно, измените размер (остальное должно быть в порядке.)

3. Где-то в вашей сцене в менеджере GameObject есть VideoPlayer компонент. Вам нужен только один (для каждой gif-текстуры). Здесь используйте импортированный WebM файл как VideoClip и созданную текстуру рендеринга с шага 2. как Target Texture .

   

   Включите Loop и (если хотите) Play On Awake (в противном случае вам придется вызывать Play вручную.)

4. Вместо Image компонента используйте RawImage component и в качестве Texture ссылки на созданный RenderTexture с шага 2.

   

Теперь у вас есть прозрачная GIF-анимация с использованием ваших оригинальных рамок PNG в Unity

Просто из-за разницы в размере файла:

• У меня всего около 4,5 Мб отдельных файлов PNG (я использовал 24)
• размер файла WebM составляет около 0,5 мб. Таким образом, это делает его более или менее в 10 раз меньше.

Представьте теперь, сколько места вы могли бы сэкономить, если бы использовали это вместо 500 файлов PNG!

Черный экран

при запуске приложения unity потребуется некоторое время для загрузки сцены, которое зависит от веса сцены.

Измените цвет фона камеры на цвет первого кадра видео на экране загрузки, выбрав цвет из видео с помощью средства выбора цвета в CAMERA-> BACKGROUND. Если вы сделаете это вместо черного цвета, появится цвет первого кадра видео, поэтому он будет плавным, и пользователь не заметит.

мы сделали то же самое в этой игре, вы можете проверить это: Ссылка на игру