Thursday, June 17, 2010

Colliding with the Raphaël.js Room (delayed reaction)

‹prev | My Chain | next›

While trying to refactor my (fab) game a bit, I run into an odd situation in which the players seem to be continuously colliding with a phantom something. The odd thing is that the players are not in collision at first, but wind up in this state after idling for 20 minutes or so.

Grrr... I hate these hard to reproduce bugs.

To start investigation, I log as much information as possible during collision of raphaël.js elements:
    var c_el = document.elementFromPoint(avatar.attr("cx") + 8,
avatar.attr("cy") + 8);

if (!self.initial_walk &&
!self.mid_bounce &&
c_el != self.avatar.node &&
c_el != self.avatar.paper) {
console.debug(c_el);
console.debug(self.avatar);

self.stop();
self.bounce_away();
}
And then I wait.

A nice feature of the Javascript console in Chrome (and webkit?) is that when you debug an object to the console as I have done, it sends the object itself to the console and not simply a string representation. This means that I can interact with the object to see what it really is.

What I find is that the player is colliding with a rectangle object that is the exact size of the room. In fact, it is colliding with the room itself. For 20 minutes, my player does not collide with the room because I explicitly ignore it:
//...
c_el != self.avatar.paper) {
//...
And then, for some strange reason, it no longer recognizes the room as being the avatar's room ("paper" in raphaël.js parlance).

Thanks again to the Javascript console, I find the rectangle object in the room's "bottom" object:



Testing for collision with that element works at first and continues to work for the duration of my player's time in the room:
    if (!self.initial_walk &&
!self.mid_bounce &&
c_el != self.avatar.node &&
c_el != self.avatar.paper.bottom.node) {
self.stop();
self.bounce_away();
}
Unfortunately, since it takes such a long time for this bug to manifest itself, I cannot be 100% sure that I have isolated the real cause. I will keep an eye on this for the next couple of days.

Day #137

2 comments:

  1. can u plz share ur bounce_away()function?

    self.avatar.node
    what is avatar?

    ReplyDelete
    Replies
    1. The `bounce_away` function is described in: http://japhr.blogspot.com/2010/06/collision-broadcast-with-fabjs.html

      The "avatar" is the circle (or other SVG) raphaël element that represents the player.

      Delete