View Full Version : Help animating video game sprites, akin to flash animations

07-24-2010, 03:05 AM
Hello everyone! I found this article over devness: http://devness.com/2009/06/playing-w...animated-menu/

It is fantastic, but I'm a complete n00b and I was wondering what the JavaScript would look like if the situation was a little different.

Picture this:

A Super Mario sprite with him standing normally, but to his right is the word "Home".

Upon roll over of either the sprite itself or the text, mario does one of his trademark jumps by the way of a few sprites.

I know how to do this in flash, but I would like to eliminate it so I have maximum compatibility and no external plugins required.

Anyone have any ideas or suggestions?

Any help is greatly appreciated!!

07-24-2010, 03:29 AM
Link is broken.
And I think this can be accomplished without javascript. CSS should be enough to do it, provided you have the sprites set up correctly.

#home {
background-image: url(mariostanding.gif);
#home:hover {
background-image: url(mariojumping.gif);

Old Pedant
07-24-2010, 03:40 AM
But that's a pretty limited "animation". Only two images.

I would assume that you'd actually want 10 to 30 images, flipping from one to the other to achieve the effect of animation.

Of course, you *could* use an "animated gif" image. That is, GIF images, themselves, may consist of a series of images that are displayed one after the other. But that's still pretty limited. You couldn't, for example, have the animation change easily, depending on (say) where "home" is relative to Mario.

07-24-2010, 03:42 AM
Hmm, well, that's not bad..

But that would only work if there was two instances, correct?

1 for the display upon load, and the other after rollover.

I would like about 5 sprites, and when I rollover, it cycles through, some have to be positioned a little different than the previous one too.

I don't think you can do that with only CSS, but I like your suggestion too :)

07-24-2010, 03:54 AM
Yeah animated gifs were my intent. However the transitions will not be smooth.

Mario is standing (static gif) > mouse over > mario is jumping (animated gif) > mouse leaves before mario finishes the jump > mario back to standing

07-24-2010, 04:45 AM
Yeah quertyuiop, that's not bad, but not what I want. It would be better if I could go fully CSS and HTML, but the challenge of the JavaScript, if it even is challenge, appeals to me as well, also the "cool-factor" helps too xD

Old Pedant, yeah, have you heard of the spriter's resource before?

Here's a link to a great sheet of sprites for Luigi, Mario's brother (if you're unfamiliar): http://www.spriters-resource.com/ds/marioandluigi3/sheet/19547

Take a look at the section one down from the top-left. It has a few different instances of Luigi finger-wagging and dancing.

That is exactly what I'm looking for.

For that "animation" consisting of 7 instances of Luigi, I would like to have the button go as follows:

Have instance1 be loaded statically when the page loads.

Then, upon rollover of either the static luigi or the text next to him, then the "animation" will cycle to instance2, and then instance3, instance4 until... instance7 at roughly 12 instances per second.

I would really like to be able to do that with JavaScript if it's possible.

I think it would be a neat effect, and to have it be compatible with all non-flash browsers like the iPhone.

Do you have any ideas as to how that could be accomplished with JavaScript?

For some inspiration, don't forget about my link: http://devness.com/2009/06/playing-with-sprites-and-jquery-animated-menu/

I don't know JS very well, but something about the instance1 placeholder and then upon rollover, some sort of 12 instance per second loop alternating between instance1-7..


07-24-2010, 05:15 AM
Actually! Check out this article I found! I still could use some help interpreting it, but it is closer than what I want than the other one:


If I could somehow add it to be upon rollover, and then add a link, I'll pretty much be good to go!

Great news as well, as long as I use one file for my sprites, it will actually take up LESS space than the animated GIF!!

Old Pedant
07-24-2010, 06:54 AM
??? doing it on rollover is trivial.

<img src="standingthere.png" onmouseover="doTheAnimation()" onmouseout="stopTheAnimation()" />

07-24-2010, 07:11 PM
Well yeah, but I still need to know how to "doTheAnimation()".

I mean I get the concept, but I don't know the JavaScript for it..

07-24-2010, 08:17 PM
OK, I was reading the W3 tutorials, and I thought of a really cool idea to simplify the code, but I'm not sure about how to code it just yet..

Well, to start, my timer should begin upon rollover of the table containing the static image placeholder and the text reading "Home" to make it feel a little bit more like a button.

OK, to keep my animation at 12 frames per second, then the image instance (or frame) should be changed every 750/9 seconds (or 83.33333333).

Now, due to my organized image names, and with them being a little verbose, it actually comes into use.

Each instance is named like mariohammerswing1, mariohammerswing2 all the way to mariohammerswing5.

Now, since the image name is "mariohammerswing" + an incrementing value of 1, perhaps every time the timer reaches the value of 750/9, after it beings upon rollover of course, it loads "marioahmmerswing" plus the next increment of 1, so it would increment to 2, and then to 3, 4 and 5.

Maybe we could use the clearTimeout() method to clear it after each instance was loaded, and then it once it reaches 750/9 again, it will load that incremented image.

I'm not quite sure how to use the setTimeout() method to load each image after the increment though.

Perhaps using a Var InstanceSpeed=750/9 and when the timer reaches InstanceSpeed, it loads the new image, clears the time using clearTimeout() and then begins the time over again.

Anyone have any suggestions?

07-26-2010, 05:46 AM
Actually, thescientest over at W3School Forums replied the following:

"just use onfocus event handler, and it runs a function. This function starts a timer that runs the animation function. That function handles changing the animation, and should also check an incrementing value (which could also be used to dynamically set an image tag's src using a concatination technique) and it can also handle clearing out the timer if the incrementing value reaches a particular value."

Does anyone know how to do some of this stuff? I'm mainly confused about the onfocus event handler..

Any suggestions?