HTML5 GAME: для спрайтовой анимации лучше использовать Canvas или DIV?

Question

[Isaac Clark]

Здравствуйте.
Такой вот вопрос: делаю анимацию персонажа на спрайтах, подскажите стоит ли использовать canvas и в нем анимировать или лучше аниминировать с помощью css-анимации, то есть изменять background-position и использовать @keyframes ?
Какая принципиальная разница в обоих способах? Разве css-анимация по производительности не лучше js?

Answer 1

[Дмитрий Беляев]

Canvas в разы шустрее SVG и тем более DOM
CSS анимация построена на перерисовке DOM, она никак не может быть быстрее

P.S. был у меня реальный случай, когда на одной странице одновременно отрисовывался webGL и CSS-transition, первый выдавал 30-40fps, второй заметно пролагивал

Answer 2

[Константин Китманов]

Ну если у вас остальная игра на дивах, то какой смысл городить канвас ради одной анимации?
Ну и наоборот:)

Comments

[Isaac Clark]

пока еще нет ни того ни другого, я поэтому и уточняю, что лучше.

[Isaac Clark]

Isaac Clark: и какие могут быть подводные камни для каждого из вариантов

[Константин Китманов]

У вас еще ничего нет, а вы задумались над оптимизацией? Возьмите готовый движок и не собирайте велосипед из костылей.

JS анимация проигрывает CSS в том случае, когда оперирует DOM, потому что DOM тормозной и эти операции дорогие. canvas быстрый, потому что низкоуровневой.

[Isaac Clark]

Константин Китманов: дела для себя, просто хочу понять, что лучше, поэтому и изобретаю велосипед.

[Finsh]

Константин Китманов: Какой движок лучше взять?

[Константин Китманов]

Finsh: 2D: по количеству учебных материалов лидирует phaser. Можно посмотреть Crafty, он простой, но с хорошей компонентной системой. Если собираетесь писать на TypeScript, то еще Excalibur стоит поглядеть.
3D: BabylonJS или PlayCanvas (это уже целый редактор, напоминающий Unity3D).

Answer 3

[alvvi]

Canvas и EasleJS / Phaser вам в помощь. Ну или собрать свое подобие движка, если вам нравится велосипедостроение.

Answer 4

[Vlad Feninets]

- canvas быстрее спрайтов/манипуляции DOM
- png спрайты быстрее svg спрайтов
- канвасами лучше управлять с помощью какой-то либы, вроде https://github.com/d3/d3