Up today, I would like to add a bit of functionality to my raphael-animate-frames plugin for raphaël.js. I would like to be able to position the frames on the raphaël paper—right now, the frames just show up at the top left of the paper.
In my (fab) game, the frames are being drawn thusly:
return thisTo position the player, I could expand the
.paper
.svg_frames(frames[0], frames[1])
svg_frames
method to accept x-y coordinates, but that could get messy. I prefer just supplying the frames themselves. But how to move the player?Raphaël has a
translate()
method to move objects about the paper. Perhaps I could use that?return thisThat'll work. Except it won't. I already have a
.paper
.svg_frames(frames)
.translate(player.x, player.y);
translate()
method in raphael-animate-frames
:translate: function(x, y, seconds) {Aw, dang it. My
for (var i=0; i<this.list.length; i++) {
this.translate_object(this.list[i], x, y, seconds);
}
this.toggle_frames(seconds);
return this;
}
translate()
method has an additional seconds
parameter that is not in the core raphaël translate()
method. I should have named it differently since it behaves differently. Ooh. Or I could treat the the
seconds
parameter as optional. If that parameter is present, then the object moves along a line. If the parameter is not present, then the object moves immediately. That, I can do inside the low-level translate_object()
(translates the individual brush strokes in a frame) method:// animate along that pathI had to add that 50 millisecond guard clause to prevent the player from blowing up again. Besides, animating for 50 milliseconds seems silly.
if (ms && ms > 50)
obj.animateAlong(p, ms);
else
obj.translate(x_diff, y_diff);
I spend a little more time removing debug statements and general clean-up before calling it a night. Tomorrow, I will pick back up with trying to get collision detection working in my (fab) game working again. That may prove to be difficult with the raphael-animate-frames plugin, but hopefully still doable.
Day #177
No comments:
Post a Comment