1
\$\begingroup\$

Recently I made a 2D offline game with HTML5 Canvas and JavaScript. I'm detecting collisions by first checking whether image bounding boxes overlap. If they do, I check against the bounding boxes, to see if there are any pixels that exist in the same location for both images.

I learned the technique from this tutorial (YouTube).

Now I'm making a multi-player version of the game, in a client-server configuration. I've decided to have the server handle all physics, including collision.

However, I'm not sure how to implement that. Since the images are drawn client-side, the server cannot access image's data to do the pixel collision tests. I can make bounding boxes on the server side, but how do I detect pixel collisions?


Tech details: I intend to write the server in node.js, using either CouchDB or MongoDB as my database.

\$\endgroup\$
  • \$\begingroup\$ You could reuse your client-side collision-detection code with the node-canvas module. \$\endgroup\$ – Cory Mar 19 '14 at 7:32
1
\$\begingroup\$

At the conceptual level, the way you do image-based collision tests in server code is by loading images into memory and operating on the grid of pixels they contain, either directly or by using helpful libraries.

Image loading and manipulation libraries like ImageMagick and GraphicsMagick tends to have bindings to pretty much any platform in existence, and node.js is not an exception with the gm and imagemagick modules.

As you'll be doing the tests in software, it's possible that they'll have some impact on CPU usage, but as you claim you're doing broad-phase rejection with bounding volumes already, it's likely to be Good Enough.

Evaluate the libraries and the node-canvas library mentioned in another answer and see what works out. node-canvas has the benefit of being API-similiar to HTML5 canvas, while gm has a richer set of image processing functions.

Edit: The technique demonstrated in the YouTube clip is an naive iteration over the pixel data with an early-out. Doing the same on the server side will at worst be as expensive as the same operation on the client, and if the libraries have some optimized queries or thresholding operations, it's possible that they may be faster.

\$\endgroup\$
  • \$\begingroup\$ But what kinda impact am i to expect? Would it be the same impact as using the game client itself? or since really all i am doing is drawing some of the parts that the canvas is drawing i should expect it to be less? or are the modules more expensive than that? I really appreciate your help. Thanks. \$\endgroup\$ – Matthew Mar 19 '14 at 22:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.