How to improve performance with many objects in game in HTML5?
What things can I do when it's necessary to show many objects and calculate position, collision detection, reaction, etc. and I want everything look smoothly? Here's an example I'm developing. I want that if I have 100 balls on the screen, I can show them smoothly. But I don't have any idea of how to do it. Every suggestion will be appreciated.
The basic steps to improve performance in canvas can be seen in this HTML5 Rock's Canvas Performance Tutorial.
And, if you are free to handle collision detection without Box2D, check this quad-tree implementation. The quad-tree doesn't deals with collisions directly but can improve performance by reducing the amount of comparisons needed to detect the collisions.
Articles suggestion for further reading:
I see you're using box2d--an excellent and mature physics library. Good choice!
Box2d is fairly well optimized already...and a lot of eyeballs have looked at the code to search for further optimizations.
Therefore (if your design needs permit), your path to improvement is replacing this large library with simpler collision functions.
Check out this set of video tutorials. Ignore the fact it targets processingJS, it still provides a good tutorial on game physics and handling collisions. Skip to the second link if you are already good on physics basics:
Tutorial "home": http://channel9.msdn.com/Series/Sketchbooktutorial
Tutorial chapter on collision of circular objects: http://channel9.msdn.com/Series/Sketchbooktutorial/Simple-Collision-Detection-and-Response