Tuesday, July 27, 2010

Careful Naming

‹prev | My Chain | next›

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 this
.svg_frames(frames[0], frames[1])
To position the player, I could expand the 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 this
.translate(player.x, player.y);
That'll work. Except it won't. I already have a translate() method in raphael-animate-frames:
    translate: function(x, y, seconds) {
for (var i=0; i<this.list.length; i++) {
this.translate_object(this.list[i], x, y, seconds);
return this;
Aw, dang it. My 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 path
if (ms && ms > 50)
obj.animateAlong(p, ms);
obj.translate(x_diff, y_diff);
I had to add that 50 millisecond guard clause to prevent the player from blowing up again. Besides, animating for 50 milliseconds seems silly.

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