In a place where your fantasy can roam free, there won't be any boundaries to what your imagination can create.
Misha’s Tech Playground
graphics, fun and code play
I'm crazy - but who cares? My ideas are constantly dwelling and this is the place for them to pour out and form into something good. Only active participation will ultimately make this place come to life.
Javascript Sprite Animation
How To Use Javascript To Animate
This is a repost from playground.3d-m.de from May 19th, 2007
Coded up in about 10 minutes, this is just a test to check the performance of script based animation. The sprite consists only of one continuos image strip which is animated using a Javascript Interval.
So Why No Animated GIF?
Well, first of all this image is a PNG – but it could be a JPG or any other format also. Further this could be used to make extremely efficient rollovers because there is no need to load two separate images. And finally, it was just plain fun to make it 
What wasn’t so much fun was the PNG behavior in IE 6. But using an ugly css hack and slightly more difficult DOM tree it works in IE 5.5+ also.
Link: javascript sprite animation
Update (May-09-2007 | 8:30)
I added keyboard control to the ball in all Standards based browsers (non IE). So the ball can be controlled with the arrow keys (left and right) and will stop at the borders of it’s containment. The stopping is not yet handled nicely and is a little bit jerky, but I will eventually get it right.
Update (May-09-2007 | 9:00)
I couldn’t just leave it at that and had to add IE support 
Update (May-09-2007 | 12:00)
I couldn’t resist - I made a slightly advanced version with full arrow key control. The ball now has semi transparent shadow and moves across a map generated by a simple tile engine.
Link: sprite tile
Tags: Games, tile graphics
3 Responses to “Javascript Sprite Animation”
Leave a Reply
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Animating with Scroll Properties, A view on Performance…
Having had some time to polish up the AnimSprite Object of the game engine I had a chance to make a small performance test. I decided to give some insights on ow this style of animation works and to post the code that goes along with it for your person…
Scripted Image Mosaics…
Here’s another useful tidbit.
I already wrote a lot of posts about Javascript Sprites, how to animate them and how they perform. What I neglected so far is how they actually get on the stage or the page to use the correct term. Another fact is also th…
Hi. This is really interesting post. Thank You! I have just subscribed to Your rss!
Best regards