Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Vishwas Gagrani

Is it possible to animate spritesheet through GSAP ?

Recommended Posts

Hi!

   I have seen many tutorials showing tween animation on objects. However, I want to know if it's possible to animate cells of a spritesheet too using GSAP ? Like how it's done in other frameworks. I am doubtful about this, since spritesheet are probably canvas-only feature. So, if not, is their any alternative to animate images in sequence through GSAP ?

 

Link to comment
Share on other sites

You really only need canvas to unpack a spritesheet, and that's super easy to do using the drawImage method. Just plug in the coordinates of the frame and draw it on a new image or canvas.

ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

suLRZ5E.png

It's better to unpack a spritesheet before use, but not always necessary. I made this demo to show that it really doesn't matter as long as you know where on the spritesheet a frame is located.

See the Pen Eywvzx?editors=0010 by osublake (@osublake) on CodePen


 
Here's the original json...
https://s3-us-west-2.amazonaws.com/s.cdpn.io/106114/explosions.json
 

...and spritesheet for that demo.

https://s3-us-west-2.amazonaws.com/s.cdpn.io/106114/explosions.png
 
.

  • Like 4
Link to comment
Share on other sites

Hello Vishwas Gagrani, and Welcome to the GreenSock Forum!

 

Here is an example of using GSAP to create a sprite-sheet animation using steppedEase like Carl described above.

 

Fire animation sprite-sheet example:

 

See the Pen zrGGmQ by jonathan (@jonathan) on CodePen

 

The Fire was made in Adobe Flash and exported as separate images. Then i used an online sprite-sheet image generator which combined the separate images into one long horizontal sprite-sheet image.

 

:)

  • Like 3
Link to comment
Share on other sites

  • 1 month later...

HI Web Dizajner :)

 

Please try this in your pen:

TweenMax.to(character, 1, {backgroundPosition: "-1288px", ease:SteppedEase.config(7), repeat:-1});

Happy tweening.

:)

  • Like 2
Link to comment
Share on other sites

Now is working fine but I dont understand why?

 

Is it normal to be full width - 1472?

 

See the Pen VpZBZV by anon (@anon) on CodePen

 

Anyway thanks a lot.

Link to comment
Share on other sites

You have your starting frame and 7 additional frames so you really only want to step 7 times. If you moved the background -1472, you'd be 184px beyond the end of the spritesheet. That's why your original was showing that odd little jump on repeat.

 

Happy tweening.

:)

  • Like 6
Link to comment
Share on other sites

That's actually what I was referring to in my post above as that is what I use. Money well spent!

 

A packed sprite sheet uses less memory and can improve performance, especially on mobile devices with limited memory. This is much better than having an ordered sprite sheet where each frame is the same size.

 

MBfZqUV.png

 

 

TexturePacker works with a bunch of different libraries and CSS, or you could manually do it yourself. Here's a demo showing how to use the drawImage canvas method I mentioned above. 

 

 

See the Pen bqEamV?editors=0010 by osublake (@osublake) on CodePen

 

 

.

  • Like 6
Link to comment
Share on other sites

As always, thanks Blake!

 

With the Slide/Modal you helped me with I am loading three images and using a crossfade to make the illustration build to the final image...

Should I think about using the sprite approach? I'm thinking it is one http request instead of three but they are larger images... not sure if I really gain anything performance wise.

 

Click the thumbnail to see the animation (this is an early version not the fixed version):

See the Pen MJxNEJ by jh-thank-you (@jh-thank-you) on CodePen

Link to comment
Share on other sites

One http request is usually better than 3, but it all depends on what you're requesting. One nice thing about TexturePacker is that it will let you know if a sprite sheet is too big, in which case you should be break it up into multiple sprite sheets. 

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×