HTML5 GAME: для спрайтовой анимации лучше использовать Canvas или DIV?
Здравствуйте.
Такой вот вопрос: делаю анимацию персонажа на спрайтах, подскажите стоит ли использовать canvas и в нем анимировать или лучше аниминировать с помощью css-анимации, то есть изменять background-position и использовать @keyframes ?
Какая принципиальная разница в обоих способах? Разве css-анимация по производительности не лучше js?
Canvas в разы шустрее SVG и тем более DOM
CSS анимация построена на перерисовке DOM, она никак не может быть быстрее
P.S. был у меня реальный случай, когда на одной странице одновременно отрисовывался webGL и CSS-transition, первый выдавал 30-40fps, второй заметно пролагивал
У вас еще ничего нет, а вы задумались над оптимизацией? Возьмите готовый движок и не собирайте велосипед из костылей.
JS анимация проигрывает CSS в том случае, когда оперирует DOM, потому что DOM тормозной и эти операции дорогие. canvas быстрый, потому что низкоуровневой.
Finsh: 2D: по количеству учебных материалов лидирует phaser. Можно посмотреть Crafty, он простой, но с хорошей компонентной системой. Если собираетесь писать на TypeScript, то еще Excalibur стоит поглядеть.
3D: BabylonJS или PlayCanvas (это уже целый редактор, напоминающий Unity3D).
- canvas быстрее спрайтов/манипуляции DOM
- png спрайты быстрее svg спрайтов
- канвасами лучше управлять с помощью какой-то либы, вроде https://github.com/d3/d3
