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

Report content RSS feed Animated Sprite Sheets

Posted by on

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:

//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:

    #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:

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

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


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

Post a comment
Sign in or join with:

Only registered members can share their thoughts. So come on! Join the community today (totally free - or sign in with your social account on the right) and join in the conversation.

Level
Avatar
Avatar
Status
Last Online
Country
United States United States
Gender
Male
Friends
Become friends
Member watch
Start tracking
Blog
Browse
Blogs
Share