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:
//CrusaderLeft
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');
        framecrusaderL++;
  if(framecrusaderL > 7) {
framecrusaderL = 1;
}
 };

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

css code:
    #crusaderLeft {

         /* our flame sprite png */
         position:absolute;
         top:500px;
         left:500px;
         background: url(http://pugetsoundtraining.com/Portfolio/images/CrusaderSwingLeft.png);
         width: 256px;
         height: 256px;
 }

And in the html page I setinterval:

code:
<script type="text/javascript">
setInterval('crusaderLanim()',100);
</script>

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

Level
Avatar
Avatar
Offline Since
Dec 14, 2013
Country
United States United States
Gender
Male
Member Watch
Track this member
Blog
Browse
Blogs
Report Abuse
Report article