First Try at Using My Raphael.js Plugin

‹prev | My Chain | next›


Up today, I would like to get my new plugin for raphaël.js, raphael-animate-frames, working in my (fab) game. I have built the plugin with my (fab) game in mind, but do not think that I have nearly everything needed in there. Let's see.

First up, I branch my (fab) game for animate-frames. There is no sense doing this in master. Even though I am reasonably sure that I can get this working, topic branches are easy:

cstrom@whitefall:~/repos/my_fab_game$ git co -b animate-frames
Switched to a new branch 'animate-frames'

With that I start by adding my new plugin to the HTML source:

...
  <script src="/javascript/raphael-min.js" type="application/javascript"></script>
  <script src="http://github.com/eee-c/raphael-animate-frames/raw/master/raphael-animate_frames.js"></script>
  <script src="/javascript/player.js" type="application/javascript">"></script>
  <script src="/javascript/player_list.js" type="application/javascript"></script>
  <script src="/javascript/room.js" type="application/javascript"></script>
...

The room is responsible for adding the player's avatar to the room. Currently, that is a circle

Room.prototype.draw_player = function(player, color) {
  var c = this.paper.circle(player.x, player.y, 10);
  c.attr({fill: color, "fill-opacity": 0.5, stroke: '#000', "stroke-width": 2, "stroke-opacity": 1.0});
  return c;
};

I start there by adding my animation:

Room.prototype.draw_player = function(player, color) {
  var frames = this.player_frames();

  return this
    .paper
    .svg_frames(frames[0], frames[1]);
};

Hrm... Well, that's kinda ugly. I make a TODO note to allow the svg_frames method to accept an array.

After that, I fix several errors as I try to get the player back in the room. Almost immediately the player shows up, but it quite unresponsive and throws lots of errors. Since the avatar in my (fab) game expects it, I add attrs() and onAnimation methods to the frames object:

// ...
    attrs: function () {
      this.list[0][0].onAnimation(fn);
    },

    onAnimation: function(fn) {
      this.list[0][0].onAnimation(fn);
    }
//...

For both, I use the first element in the first frame, which seems a reasonable thing to assume—the first element is the body or the main part of the animation element. Aside from that, I add a paper property so that the avatar can interact with the raphaël canvas as needed.

I finally get to the point that no more errors occur only to find that my player blows up. Literally:



No smooth animation or anything. Rather disheartened, I stop there for the night. I know exactly where I'll pick back up tomorrow.


Day #174