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

You are not logged in, your comment will be anonymous unless you join the community. Or sign in with your social account:

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