Все говорили, что на фронтенде написано много страниц, а алгоритм почти не используется. В этой статье мы хотим описать применение алгоритма во внешнем интерфейсе со сцены дизайна экрана пули.Давайте сначала посмотрим на эффект от реализации:
Рисунок 1.1 Барраж-эффект
Перед открытием сначала опишем сложность разработки заграждения, а затем сосредоточимся на описании идеи построения алгоритма.
- Как сделать так, чтобы экраны маркеров с разными размерами шрифта не сталкивались
- Расчет положения экрана пули
- Управление скоростью заградительного огня и реализация анимации
- Заграждение и синхронизация видео
Как сделать так, чтобы экраны маркеров с разными размерами шрифта не сталкивались
Если на экране маркеров используется тот же размер шрифта, проблема коллизии решается относительно просто: ее можно вычислить, только учитывая скорость воспроизведения и положение смещения соседнего экрана маркеров. Однако с экранами маркированного списка с разным размером шрифта очень сложно иметь дело.Начальная позиция экрана маркированного списка не может быть увеличена линейно.Например, если субтитры размещены в первой строке, следующие субтитры могут быть размещены в порядок сверху вниз.
Расчет положения экрана пули
Столкновение только с хорошей конструкцией заграждения в исходном положении может быть только динамичным и эффективным управлением заграждением разного размера. Аналогия, мы получили шквал данных через интерфейс в течение 2 сек., 1000, у каждого субтитра длина, скорость, размер разные, как управлять шквалом, схематическая диаграмма выглядит следующим образом:
Рисунок 2.1 Схематическая диаграмма управления пулевым экраном
Это первый случай, после размещения их по порядку сверху вниз будет несколько проблем:
- Как рассчитать положение экрана пули пять, шесть и семь и циклировать по модулю + накопление в соответствии с верхним значением?
- Когда заграждение 1 или заграждение 3 достаточно длинные, как вовремя пропустить расчет текущей позиции?
- Как использовать освободившуюся позицию при пересчете экрана пули воспроизведение текущего экрана окончено
- Соответствует ли освободившаяся позиция высоте текущего заграждения
- ...
Ряд проблем не будет перечисляться.Основываясь на этом фоне, мы объединили метод мышления математического моделирования, чтобы найти работу аэропорта с очень высоким сходством в сцене заградительного огня. Мы можем думать о заграждении как о самолете.Та же причина, по которой количество заграждений разыгрывается в каждый период времени, совпадает с тем, сколько самолетов выпускает аэропорт в каждый период времени.
Столичный международный аэропорт имеет в общей сложности 3 взлетно-посадочные полосы, две взлетно-посадочные полосы класса 4E и одну взлетно-посадочную полосу класса 4F, с пропускной способностью 90 миллионов пассажиров в 2016 году. Его рабочий механизм заключается в том, что все самолеты используют 3 взлетно-посадочные полосы для выполнения транспортной задачи.
Таким же образом мы также спроектировали несколько ролей: одна гусеничная (ВПП), одна диспетчерская (вышка), а третья барражирующая (самолет).Для каждой роли мы проектируем класс и делим его на Трек, Основной, Пуля.
-
отслеживать
Роль трека очень важна, он может решить проблему расчета положения экрана пули, контроля скорости и обнаружения столкновений.
Во-первых, нам нужно инициализировать дорожку. С точки зрения непрофессионала, сколько взлетно-посадочных полос мы собираемся построить?Мы не физические объекты.Мы можем динамически регулировать количество путей.Принцип расчета следующий:
轨道数量 = 播放器有效高度 / 设备基准字号 * 播放器有效高度：播放器的实际高度减去控制条的高度，因为弹幕不可以遮挡控制条。 * 设备基准字号：移动端是10px，pc端是12px；Почему формула расчета такая? Потому что мы хотим поддерживать различные размеры шрифтов. Представьте, что разные размеры шрифта занимают разное физическое пространство, но если размер дорожки должен быть динамическим, это приведет к очень сложным вычислениям. В данной работе предлагается понятие «виртуальный путь», наиболее распространенным в управлении дорожным движением является слияние или перенаправление дорог. Мы также используем временное объединение соседних физических дорожек в одну дорожку. Таким образом, легко решается проблема заполнения дорожек разными размерами шрифта. Схематическая диаграмма выглядит следующим образом:
Рисунок 2.2 Принципиальная схема расчета орбиты
Далее вспомним рабочий процесс аэропорта:
- Капитан позвонил в диспетчерскую, CZ6132 запросил взлет.
- В настоящее время взлетно-посадочная полоса занята, пожалуйста, подождите
- Шаг 1 выполняется снова через N раз
- Взлетно-посадочная полоса A1 в настоящее время свободна, доступ разрешен
- перейти к шагу 3
- В настоящее время взлетно-посадочная полоса занята, пожалуйста, подождите
- Диспетчерская вышка для проверки использования взлетно-посадочной полосы
- Выход на взлетно-посадочную полосу, взлет завершен
- Капитан сообщил на вышку, что взлет завершен и взлетно-посадочная полоса освобождена.
- Другие самолеты выполняют те же действия, что и выше.
Согласно этой идее, наш рабочий процесс заграждения:
- Заграждение входит в игрок
- Трек рассчитывается в соответствии со скоростью воспроизведения и размером экрана маркера, чтобы увидеть, есть ли подходящий трек для предоставления.
- нет
- У заграждения уведомлений нет подходящей дорожки, подождите, в то же время другие заграждения в очереди заграждения выполняют шаг 1 по очереди.
- имеют
- перейти к шагу 3
- нет
- Плеер загружает DOM экрана пули, начинает воспроизведение и ждет завершения воспроизведения.
- Уведомить дорожку об обновлении занятости дорожки после завершения воспроизведения
- Другие заграждения также следуют вышеуказанным шагам.
Рисунок 2.3 Принципиальная схема расчета доступности пути
Мы разобрались с основными принципами орбит, конечно, есть много деталей, например, как общаться с расписанием, как общаться с экранами пуль и алгоритмами обнаружения виртуальной орбиты. Заинтересованные студенты могут обратиться к кодексу. https://github.com/bytedance/xgplayer/blob/master/packages/xgplayer/src/control/makeBullet.js
- Заградительный огонь Барраж должен в основном реализовать роль «самолета», и мы требуем, чтобы он имел свои собственные атрибуты и методы. Например, диспетчерский центр может получить всю свою основную информацию через id, а управление треком также можно проверить и обновить через экран маркеров. Разумеется, шквал также должен иметь такие функции, как автоматическое обновление статуса, перемещение, уведомление об окончании воспроизведения и автоматическое уничтожение.
- расписание
Планирование — это воплощение постановки сцены, контроля над гусеницами и заграждениями, а также идущего в ногу с игроком. Его обязанности заключаются в следующем:
- Интерактивное управление игроком
- Управление очередью заграждения
- обновление собственного статуса
- преобразование формата данных
- выполнение анимации Или более прямо описать это непосредственно блок-схемой:
После запуска экрана пули сначала проверьте, есть ли кэшированные данные локально.Если нет, напрямую запросите данные и кэшируйте их, затем выполните чтение данных, отфильтруйте данные в очередь экрана пули в первый раз и запустите таймер. в то же время. Данные очереди экрана пули будут периодически запрашивать дорожку, чтобы проверить, можно ли войти в экран пули в очереди.После регистрации дорожки после подтверждения экран пули может войти в проигрыватель, чтобы начать воспроизведение анимации. Таймер будет снова обновлять данные и входить в очередь заграждения каждые 2 секунды (для этого другого бизнеса можно настроить разные правила). После завершения чата-пули расписание и дорожка будут уведомлены.Расписание удалит экземпляр чата-пули из очереди чата-пули, а трек также удалит дорожку, занятую экземпляром чата-пули.
Все реализации кода исходят из парсера, который экономит трафикарбуз игрок, Github