JavaScript sprite library and game system

First post time.

My JavaScript sprite library is approaching version 1. That is, it may well be ready for somebody else to use and enhance.
I call it Sprite Magic since that was a cool program I had as a kid and I’m feeling rather retro.

Currently I have a base sprite class that takes a lot of parameters to instantiate. It also has a number of methods for flipping, moving, rotating and animating the sprite object. I have deliberately avoided using native .gif animation since I disliked the lack of control over which frame to be displaying. I also had mixed results across browsers with IE not resetting the animation under certain circumstances.

I am first and foremost an artist (I spent some time as a lead artist for Acclaim Entertainment before they went bust) so I deliberately built the code to allow me to construct sprites and simply drop them in without having to re-engineer the code. It works very well.

Other aspects of the library will soon come in to place. The Sprite creation is just one small part of the game system I have in development. Other areas such as tile based layout, user input and collision detection are well under way.

In the broader system I also have a rather cool staging system that allows me to create cut scenes rather simply. The Attract Mode found in the arcades for example is just a neat cut scene.

When there’s a bit more to see I’ll link a page that shows it all in action.

I should add that this is all hand coded JavaScript. I don’t use frameworks since I strive to be a better coder not an implementor of other people’s work.

Post a comment or leave a trackback: Trackback URL.


  • Laura  On May 16, 2009 at 6:05 am

    Have you posted your Sprite Magic libraries anywhere yet? I am interested in cloning some edutainment games that I remember playing as a kid in JavaScript.

    • markw1970  On May 18, 2009 at 8:34 am

      Hi Laura.
      I haven’t posted any library as such since the development very quickly moved in to a game framework.
      I don’t currently have very much time to devote to this development but when I get a chance I will tidy up the code and post it.
      For now you could take code from Hoth Strike and strip out what you need. Please note that this is development code and I haven’t yet tidied it up. There may be a ton of stray global parameters and ugly function calls ;)

      • Laura  On May 22, 2009 at 8:02 pm

        Hi Mark,

        I’m looking at your loop and manageFrameRate functions. I was experimenting with a long nCapRate (5 s) and using alert windows for delays. I found that the program would wait the 5 seconds and then throw up two alerts in rapid succession. I fixed it to be much smoother by doing the following:

        1) instead of using bCapTicker as true/false only, store a value, as such:

        function manageFrameRate() {
        var n = new Date() – nTimeStamp;
        if (n < nCapAmount) {
        bCapTicker = nCapAmount – n;
        } else {
        bCapTicker = 0;

        2) set the nTimeStamp at the beginning of the loop function

        3) modify the call of the next loop as such:

        if (bCapMode) {
        TICKER = setTimeout('loop()', bCapTicker);
        } else {
        TICKER = setTimeout('loop()',0);

      • Laura  On May 23, 2009 at 8:03 am

        First attempt!

  • markw1970  On May 26, 2009 at 8:04 am

    Wow Laura. Nice work :) How did you find it to work with ? I’m a bit embarrassed since I haven’t got around to tidying the code up yet !

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: