HTML5 canvas game performance vs. alternatives [closed]

StackOverflow https://stackoverflow.com/questions/23297181

Question

I am starting development on a HTML5 game using the canvas. Things are going alright so far, but I have some things I am a little puzzled on, mostly having to do with performance of such game. So instead of me running into a bunch of problem deep down the development process, I would be grateful to find out now.

I have before worked in languages such as OpenGL and learned how important it is to render things in an efficient order, this is something that can give a factor of hundreds better performance than just randomly drawing stuff to the screen switching back and forth between textures/shaders etc. Is this something I should keep in mind with a canvas game, or will things automatically be queued up and rendered in an efficient order?

It is going to be a 2D game, but with quite a few objects on the screen, and most of them dynamically desaturated and changed in brightness (filters). Is performance going to be a serious problem?

What are the alternatives, any javascript game-engine that can help performance? Am I going to get a performance boost by switching to WebGL even though standard canvas has hardware-acceleration?

Was it helpful?

Solution

Yes, you'll get a big performance boost with WebGL. Consider using the excellent 2D rendering system called Pixi. It renders sprites to WebGL with a fallback to Canvas.

Or, you can make your own low-level WebGL sprite rendering system using game-shell and gl-modules. gl-now is a good entry point into these modules. You can use them to build your own game engine.

Phaser, is an complete HTML5 game engine that currently has a lot of traction, and uses Pixi under the hood for rendering. A better place than Stackoverflow to look for help about all these issues is http://www.html5gamedevs.com.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top