I've been programming with Unity for 3+ years. Currently I'm working on games for android and iOS.

Report article RSS Feed Animated Sprite Sheets

Posted by shindig on Mar 16th, 2013

I was playing around with my sprite sheet generator yesterday and made a little sprite player for a webpage using jquery.

I make the sprite sheets with a single click as shown in this vid:

Then use Jquery to move the backgroundposition of the sprite like:

javascript code:
var framecrusaderL = 1;
 function crusaderLanim() {
  var bufferb = 256;
         var leftb = bufferb * framecrusaderL;
         // top stays 0 since all the images are have Y positioned at  0
         var topb = 0;
         $('#crusaderLeft').css('backgroundPosition','-'+leftb+'px -'+topb+'px');
  if(framecrusaderL > 7) {
framecrusaderL = 1;

In my stylesheet CSS file I declare the sprite's div ID:

css code:
    #crusaderLeft {

         /* our flame sprite png */
         background: url(http://pugetsoundtraining.com/Portfolio/images/CrusaderSwingLeft.png);
         width: 256px;
         height: 256px;

And in the html page I setinterval:

<script type="text/javascript">

And Somewhere in the HTML I declare the div ID we declared in CSS:

css code:

And the webpage that plays it can be seen here: Pugetsoundtraining.com

Post a Comment
click to sign in

You are not logged in, your comment will be anonymous unless you join the community today (totally free - or sign in with your social account on the right) which we encourage all contributors to do.

2000 characters limit; HTML formatting and smileys are not supported - text only

Offline Since
Dec 14, 2013
United States United States
Member Watch
Track this member
Report Abuse
Report article