Скорость большого количества анимированных растровых изображений в EaselJS

Question

У меня, похоже, есть немного проблем с использованием большого количества анимированных растровых изображений (все на основе одного и того же спрайта) при использовании EaselJS. Когда я запускаю пару из них сразу на моей сцене, нет никаких проблем, но при одновременном запуске большего количества их (начиная примерно с 30 до 40) при их перемещении я начинаю их " мерцание "совсем немного, даже при fps около 10.

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

Есть ли у кого-нибудь хорошие советы по увеличению производительности?

Answer 1

попробуйте использовать несколько объектов Stage одновременно.

Answer 2

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

1. Убедитесь, что вы используете современный браузер. По крайней мере, проверьте несколько других браузеров/платформ, чтобы увидеть, имеет ли это какое-либо существенное изменение в производительности. Насколько я понимаю, производительность EaselJS значительно хуже на не-аппаратных ускоренных реализациях холста.

2. Если вы можете, используйте версию TweenJS от createJS по сравнению с другими библиотеками tweening. TweenJS будет привязан к классу Ticker компании EaselJS, который более эффективен.

3. Не звоните stage.update(), если это абсолютно необходимо. С stage.update() - такой дорогой звонок, вы должны быть настолько скупыми, насколько это возможно. Фактически, вы не должны называть его вообще, если вы используете Тикер для регулярного обновления сцены.

4. Кэш мудро и агрессивно. Если у вас есть сложные статические элементы на сцене, кеширование их сэкономит несколько циклов. Однако для кэширования есть накладные расходы, поэтому сохраните их для контейнеров с большим количеством статических элементов или сложной формы.

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

6. stage.snapToPixelsEnabled to true. Это может или не поможет. Теоретически рендеринг растровых изображений на целые пиксели намного эффективнее, однако это может привести к тому, что некоторые анимации станут зазубренными, и я не играл с ним достаточно, чтобы узнать, что такое другие плюсы и минусы.

я смог получить достойную производительность с около 600-800 spritesheets в 30FPS и основных промежуточных кадров с помощью Chrome на 4-летний ИМАК (только быстрый тест).