Sunday, September 26, 2010

My Dogfood Stinks

‹prev | My Chain | next›

Having resurrected the animate-frames fork of my (fab) game last night, I am ready to play again with my raphaël.js plugin: animate-frames. If I recall correctly, it is very much a work in progress, but is in good enough shape for a demo.

Unfortunately, the my (fab) game code has evolved significantly since last I played with this code. For one thing, the animate-frames plugin does not have a single node on which various attributes can be set:

// Mark node as player element (for collision detection)
avatar.node.is_player_circle = true;

// ...
For now, I will simply comment out references to node.is_player_circle. I can go back later to get collision detection working well.

Unfortunately, I run into a another problem—the remove() method, used when a player is dropped, is not defined in animate-frames:
Player.prototype.quit = function() {
delete this.x;
delete this.y;
This, I can address relatively easily by adding a method that removes all frames being animated as well as each element in each frame:
    remove: function() {
for (var i=0; i<frames.length; i++) {
for (var j=0; j<frames[i].length; j++) {
This is browser code, so I cannot rely on forEach(). Actually, this is a indication that I ought to be using coffeescript.

At any rate, it works.

Until I hit another problem—collision detection does not work at all. Players simply pass through each other. Eventually, I track this down to the initial_walk attribute on a player. Collision detection does not kick in until the first walk in the room is complete.

The only place that I see initial_walk even mentioned as being set to false is a comment:
Player.prototype.walk_to = function(x, y) {
// ...

// TODO self.initial_walk = false after walk has started

// ...
It has been a while since I last fiddled with the animiate-frames stuff, so I am not even going to bother digging through the history of how I got in this state. Instead, I have a peak back in master since I know that collision detection is working in there. Sure enough, it is set:
Player.prototype.walk_to = function(x, y) {
// ...

var self = this;
this.avatar.animateAlong(p, time, function(){
self.initial_walk = false;

// ...
Grr... that (animateAlong()) is another method that I do not have in animate-frames. I can simulate what I need with setTimeout()—2 seconds after the player first starts walking in the room, wait 2 seconds then mark the initial walk as done:
  var self = this;
setTimeout(function() {self.initial_walk=false;}, 2*1000);
Sadly, that is not the last of my woes. Last up is the lack of support for the animate() method when the players bounce away from a collision:
Player.prototype.bounce_to = function(x, y) {

var self = this;
this.avatar.animate({cx: x, cy: y}, 500, "bounce");
setTimeout(function(){ self.mid_bounce = false; }, 1000);

this.x = x;
this.y = y;
Blech. I workaround this tonight by using the translate() method, but ick. This has been a tough night eating my own dog food. In order, I wanted the node attribute, the animateAlong() method and the animate() method. I am not sure how realistic the node attribute is, but I really ought to be able get the animateAlong() and animateAlong() methods in there.


Day #238

No comments:

Post a Comment