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:
//...For now, I will simply comment out references to
// Mark node as player element (for collision detection)
avatar.node.is_player_circle = true;
// ...
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() {This, I can address relatively easily by adding a method that removes all frames being animated as well as each element in each frame:
this.avatar.remove();
this.label.remove();
delete this.x;
delete this.y;
delete this.id;
};
remove: function() {This is browser code, so I cannot rely on
for (var i=0; i<frames.length; i++) {
for (var j=0; j<frames[i].length; j++) {
frame[j].remove();
};
}
}
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) {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:
// ...
// TODO self.initial_walk = false after walk has started
// ...
};
Player.prototype.walk_to = function(x, y) {Grr... that (
// ...
var self = this;
this.avatar.animateAlong(p, time, function(){
self.initial_walk = false;
});
// ...
};
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;Sadly, that is not the last of my woes. Last up is the lack of support for the
setTimeout(function() {self.initial_walk=false;}, 2*1000);
animate()
method when the players bounce away from a collision:Player.prototype.bounce_to = function(x, y) {Blech. I workaround this tonight by using the
this.stop();
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;
};
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.Tomorrow.
Day #238
No comments:
Post a Comment