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.

Answers


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:

Broad Phase Collision Detection Using Spatial Partitioning

Collision Detection and Response

Making Games With Box2dWeb


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


Need Your Help

Development Cost of Procedural Programming vs. OOP?

language-agnostic oop procedural-programming

I come from a fairly strong OO background, the benefits of OOD & OOP are second nature to me, but recently I've found myself in a development shop tied to a procedural programming habits. The

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.