Jump to content
Search Community

Sprite animation plugin for TweenMax

spalt08 test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello! 

I didn't find any sprite animation plugin for TweenMax and decide to write my own :) I hope it will be useful for somebody. 

Github link
Demo here
 

I apologize in advance for the quality of the code, this is my first attempt :) 

I will be glad to hear comments and suggestions from GSAP masters and all community.

Link to comment
Share on other sites

Diaco is a resident expert here, and I agree that SteppedEase is a great solution for sprite sheet animation. I just wanted to chime in and say thanks for sharing your alternate solution and please don't hesitate to try your hand at other plugins in the future. I know what it's like to attempt something and not be 1000% confident it's EXACTLY what everyone else would like/want, and worry that I may look dumb for missing some other solution, but trust me - it's good to put your solutions out there and keep pressing forward. Don't be shy around here. 

  • Like 2
Link to comment
Share on other sites

Hello Diaco and GreenSock!
 

Hi spalt08  :)

 

Good job , but seems you need to spend more time to discover all of GSAP power / solutions  .

 

Since we have SteppedEase , there's so simpler way to have Sprite sheet animations .

I use SteppedEase inside my plugin  :) 
Output of the plugin method - simple TweenMax SteppedEase animation

It is just a wrapper to make code clear and shorter :)

 

it's good to put your solutions out there and keep pressing forward

Thanks! I really appreciate your feedback  :)

  • Like 1
Link to comment
Share on other sites

This is cool!

 

After looking at it, I'm wondering how hard it would be to integrate a Spine animation to create more complex animations, like with bones.

 

Demo

http://esotericsoftware.com/files/runtimes/spine-as3/spineboy/

Looks interesting!

Here it is with JavaScript using canvas - https://github.com/EsotericSoftware/spine-runtimes/blob/master/spine-js/spine.js   :)

 

If i would have enough time afterwards I think I will try to make it using TweenMax

Link to comment
Share on other sites

Wow... that's a lot of code!

 

I don't know if you would have to use a runtime because GSAP can do the interpolation. And if you look at the JSON data, most of those properties could easily be converted into a GSAP equivalent (for DOM elements at least).

 

Sample Data

https://github.com/EsotericSoftware/spine-runtimes/blob/master/spine-turbulenz/example/data/goblins.json

Link to comment
Share on other sites

  • 10 months later...
  • 1 year later...

@spalt08, I am curious. I see that a few have suggested using the SteppedEase approach, but what if a single Sprite animation has various loop segments in a single sprite? For instance, a sprite animation might have a walk cycle, run cycle and maybe another cycle. Which can be defined and looped individually. I am not sure how to do that using the SteppedEase approach. Perhaps your plugin could solve this problem?

Link to comment
Share on other sites

Hello awinhayden

 

You will notice that the y value in my background-position (backgroundPosition) in my tweens are a static value of 0.

 

So you can still use the SteppedEase approach if you have only one sprite-sheet.

 

If you have say 2 different sprite animations on one image sprite-sheet, you can make it a horizontal sprite image. And then on the first row have the walk cycle and on the second row of the sprite-sheet have the run cycle. Then depending on which cycle you will be animating you would change the background-position-y for the background-position shorthand property, which would be the second value. Swapping that with a variable to be the background-position y position / value for the second row or first row of the sprite sheet.

background-postion: x y;

Happy Tweening :)

  • Like 2
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.
×
×
  • Create New...