5

I created a card game using HTML/CSS/JS. It moves animates cards around the screen and animates a scoreboard / messageboard.

The performance on my chromecast is terrible though. Sometimes degrading to 4fps :(. When I debug the app it is using 20mb/512mb of the GPU. I'm wondering if there is any way to enable GPU rasterization or any other advanced GPU features, or if anyone has any tips on how to improve performance of the game.

So far I've been removing textures, transparencies, and simplifying animations. I would love to get some advice on how to get more performance out of the chromecast though. I realize that WebGL would probably allow me more use of the GPU but that would be a rewrite of my animation classes.

DanLatimer
  • 117
  • 8
  • Use CSS animations where possible instead of relying on javascript to animate everything. In general, you will get better performance from CSS animations than you can with JS animations. Without specific code, however, there is no way for me to really help you other than give you broad advice. – kanzelm3 Jul 17 '15 at 03:10
  • IMHO the best way to make html5 game is using WebGL. – Wendy Adi Jul 17 '15 at 03:27
  • If you are drawing on a canvas, definitely use WebGL whenever you can. If you are manipulating DOM, try to stick to CSS3 animations, they tend to be hardware accelerated and highly optimized. – Derek 朕會功夫 Jul 17 '15 at 03:29
  • Thanks guys, the CSS animation advice lead me to investigate why it would be faster... I discovered that with my animation library I was able to force my 2d animations to be rendered in 3d which forces the browser to use the GPU, the performance is INSANELY better! – DanLatimer Jul 17 '15 at 03:40

1 Answers1

1

The trick was to force my javascript animation library to animate my 2d animations as 3d thus making use of the GPU.

DanLatimer
  • 117
  • 8