Jump to content
GreenSock

Dave Stewart

Plugin architecture?

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

I have the need to do some sprite sheet animation.

 

It's fairly typical:

  • A single PNG containing multiple images
  • One or several arrays pertaining to frame indices, dimensions and offsets
  • The code will set up the DOM element to the correct size, then update the background position on a frame by frame basis

The spritesheet itself will be generated by Flash Pro.

 

From what I'm aware it's not possible to do this with GreenSock directly, so my plan is either to use Easel JS, or program it manually.

 

It seems a third option though might be to write a plugin for TweenMax.

  • Is that possible?
  • Is it a good idea?
  • Is there an API for this (rather than using something like "onUpdate") ?

Cheers,

Dave

Link to comment
Share on other sites

You can definitely handle this with a GSAP timeline.

 

Something like this could get you started

var timeline = new TimelineMax({ repeat: -1 }),
    spritecount = 10,
    spritesize = 50,
    frametime = 1/30;
for (var i = 0; i < spritecount; i++) {
    timeline.set(image, { backroundPosition: "0px -" + (i*spritesize) + "px" }, i*frametime);
}
timeline.set({}, {}, i*frametime); // adds padding for the final position to display before repeat
Here's a demo that uses a GSAP timeline to control spritesheets (it uses an <img> with position instead of backgroundImage/backgroundPosition though)

See the Pen aJcGl by jamiejefferson (@jamiejefferson) on CodePen

  • Like 3
Link to comment
Share on other sites

Hey guys,

 

Thanks for taking the time to demo some code! That will certainly get me started in the right direction. It looks like the key is TimelineMax.set().

 

I have an Animation class that extends a Sprite class, so I could very easily wrap that code inside and get going pretty quickly.

The core extracted code exported from Flash in EaselJS format looks like this, so as you can see, it would be pretty easy to just loop over that and set the correct properties:
 

{
	images: ["nicky.png"],
	frames: [
		[0, 0, 120, 198, 0, 56, 185.35],
		[120, 0, 120, 198, 0, 56, 185.35],
		[120, 0, 120, 198, 0, 56, 185.35],
		[120, 0, 120, 198, 0, 56, 185.35],
		[120, 0, 120, 198, 0, 56, 185.35],
		[120, 0, 120, 198, 0, 56, 185.35],
		[120, 0, 120, 198, 0, 56, 185.35],
		[120, 0, 120, 198, 0, 56, 185.35],
		[120, 0, 120, 198, 0, 56, 185.35],
		[120, 0, 120, 198, 0, 56, 185.35],
		[120, 0, 120, 198, 0, 56, 185.35],
		[120, 0, 120, 198, 0, 56, 185.35],
		[120, 0, 120, 198, 0, 56, 185.35],
		[120, 0, 120, 198, 0, 56, 185.35],
		[120, 0, 120, 198, 0, 56, 185.35],
		[120, 0, 120, 198, 0, 56, 185.35],
		[120, 0, 120, 198, 0, 56, 185.35],
		[120, 0, 120, 198, 0, 56, 185.35],
		[120, 0, 120, 198, 0, 56, 185.35],
		[120, 0, 120, 198, 0, 56, 185.35],
		[120, 0, 120, 198, 0, 56, 185.35],
		[120, 0, 120, 198, 0, 56, 185.35],
		[120, 0, 120, 198, 0, 56, 185.35],
		[120, 0, 120, 198, 0, 56, 185.35],
		[120, 0, 120, 198, 0, 56, 185.35],
		[120, 0, 120, 198, 0, 56, 185.35],
		[120, 0, 120, 198, 0, 56, 185.35],
		[120, 0, 120, 198, 0, 56, 185.35],
		[120, 0, 120, 198, 0, 56, 185.35],
		[120, 0, 120, 198, 0, 56, 185.35],
		[120, 0, 120, 198, 0, 56, 185.35],
		[120, 0, 120, 198, 0, 56, 185.35],
		[120, 0, 120, 198, 0, 56, 185.35],
		[120, 0, 120, 198, 0, 56, 185.35],
		[120, 0, 120, 198, 0, 56, 185.35],
		[120, 0, 120, 198, 0, 56, 185.35],
		[120, 0, 120, 198, 0, 56, 185.35],
		[240, 0, 121, 198, 0, 57, 185.35],
		[361, 0, 122, 198, 0, 58, 185.35],
		[483, 0, 123, 198, 0, 59, 185.35],
		[606, 0, 124, 198, 0, 60, 185.35],
		[730, 0, 124, 198, 0, 60, 185.35],
		[854, 0, 125, 198, 0, 61, 185.35],
		[0, 198, 126, 198, 0, 62, 185.35],
		[126, 198, 127, 198, 0, 63, 185.35],
		[253, 198, 128, 198, 0, 64, 185.35],
		[381, 198, 129, 198, 0, 65, 185.35],
		[510, 198, 129, 198, 0, 65, 185.35],
		[639, 198, 130, 198, 0, 66, 185.35],
		[769, 198, 131, 197, 0, 67, 184.35],
		[769, 198, 131, 197, 0, 67, 184.35],
		[769, 198, 131, 197, 0, 67, 184.35],
		[769, 198, 131, 197, 0, 67, 184.35],
		[769, 198, 131, 197, 0, 67, 184.35],
		[769, 198, 131, 197, 0, 67, 184.35],
		[769, 198, 131, 197, 0, 67, 184.35],
		[0, 396, 131, 198, 0, 67, 185.35],
		[0, 396, 131, 198, 0, 67, 185.35],
		[0, 396, 131, 198, 0, 67, 185.35],
		[131, 396, 130, 198, 0, 66, 185.35],
		[261, 396, 129, 198, 0, 65, 185.35],
		[390, 396, 128, 198, 0, 64, 185.35],
		[518, 396, 127, 198, 0, 63, 185.35],
		[645, 396, 126, 198, 0, 62, 185.35],
		[771, 396, 125, 198, 0, 61, 185.35],
		[896, 396, 124, 198, 0, 60, 185.35],
		[0, 594, 123, 198, 0, 59, 185.35],
		[123, 594, 122, 198, 0, 58, 185.35],
		[245, 594, 121, 198, 0, 57, 185.35],
		[120, 0, 120, 198, 0, 56, 185.35],
		[120, 0, 120, 198, 0, 56, 185.35],
		[120, 0, 120, 198, 0, 56, 185.35],
		[120, 0, 120, 198, 0, 56, 185.35],
		[120, 0, 120, 198, 0, 56, 185.35],
		[120, 0, 120, 198, 0, 56, 185.35],
		[120, 0, 120, 198, 0, 56, 185.35],
		[120, 0, 120, 198, 0, 56, 185.35],
		[120, 0, 120, 198, 0, 56, 185.35],
		[120, 0, 120, 198, 0, 56, 185.35],
		[120, 0, 120, 198, 0, 56, 185.35],
		[120, 0, 120, 198, 0, 56, 185.35],
		[120, 0, 120, 198, 0, 56, 185.35],
		[120, 0, 120, 198, 0, 56, 185.35],
		[120, 0, 120, 198, 0, 56, 185.35],
		[120, 0, 120, 198, 0, 56, 185.35]
	],
	animations: {
		cup: [0, 35, true],
		cup: [36, 68, true],
		end: [69, 84, true]
	}
}

Cheers,

Dave

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.
×