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?
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With