shindig

Lee joined Jul 13, 2012

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

Track this member Report member Profile
Level
63%
ModRealm4
Avatar
Avatar
Offline Since
Jun 18, 2013
Country
United States United States
Gender
Male
Age
29
Member Watch
Track this member
Blog
Browse
Blogs
New
Members only
Views
218 (1 today)
Report Abuse
Report article