chrism

Thanks again for your help. I’m going to follow your advice and do some tests on performance comparing approaches. Once I’ve settled on a method and workflow I’m happy with from TexturePacker to Greensock I’ll write it up and drop you a line. Cheers!

Wow, thank you for spending the time to do this. This approach looks really interesting and I am going to definitely investigate the way you are using images and hiding/showing them. From my side I have made some good progress I think and am happy with the results so far. You can see where I have got to so far here if you are interested. I customised the exporter from TexturePacker to write slightly more useful JSON to use and have gone a step further and also trimmed the transparency to reduce the number of sheets needed. Besides the preparation of the data from the JSON the main code to animate is this this.tl = gsap.timeline({ repeat: -1, repeatDelay: animation.delay }); for (var i = 0; i < numFrames; i++) { let currentFrame = animation.frames[i]; let x = currentFrame.cornerOffset.x; let y = currentFrame.cornerOffset.y; let width = currentFrame.frame.w; let height = currentFrame.frame.h; let backgroundPosition = `-${currentFrame.frame.x}px -${currentFrame.frame.y}px`; let backgroundPath = this.assetMap.resolve(`assets/animation-png/${currentFrame.texturePath}`); let backgroundImage = `url(${backgroundPath})`; this.tl.set(this.element, { x, y, width, height, backgroundImage, backgroundPosition }, i / (numFrames - 1) * duration); } I was hoping that maybe by preloading those images there would not be notable issues when switching between them. Also, these animations are 24fps so it maybe does not need to be as performant as if I was needed 60fps, for example. Anyway, I’m really pleased to have got a basic working version already with this method. Maybe I should update this to something closer to your approach to improve the performance now? Thanks so much for your advice. Also, I was wondering—once I’ve got this optimised with best practices maybe this could become a useful tutorial for others trying to use TexturePacker assets with Greensock because I didn’t find many (any) resources for this workflow and have learned some stuff during this process which might be useful to others?

I think that the dimensions you see for the image (708 × 750) are the size of the thumbnail preview image, not the uploaded full size image? For example, if you look at this link full size version of the image the dimensions I think should be 1564 × 1656. This should make more sense because it is the image dimension (782 × 414) multiplied by 2 × 4 grid. So this is where those 2 files, the PNG image and the matching JSON file should now match up with what you expected and make sense. So, for example, 01-Bulldozer-0.json describes the 8 frames in the image 01-Bulldozer-0.png. The reason why there is more than just one image and more than just one json file is that there is a limit to the size of the PNG dimensions considered usable, especially on mobile devices. My understanding is that a maximum dimension size of 2048 × 2048 is best practice for mobile devices. Thats why the software does this extra work of splitting the animation up into several separate image (and accompanying json) files. This is called multi-packing apparently. I’ve written the code which loops through all those json files and stitches the frames together to result in something like you expected, it looks like this. async getAnimationData(animationName, sheets) { let textureFilenames = A(); let allFrames = {}; for (let index = 0; index < sheets; index++) { let filename = `${animationName}-${index}`; textureFilenames.push(filename); let path = this.assetMap.resolve(`animation-json/not-trimmed-multipack/${filename}.json`); let req = await fetch(path); let json = await req.json(); let { frames } = json; Object.entries(frames).forEach(([key, value]) => { value.texturePath = `${filename}.png` }); assign(allFrames, frames); } return { sheets, animationName, frames: allFrames, textureFilenames } ; } And the resulting output looks something like you’d expect with image filename, x position and y position... Bulldozer000.png - 01-Bulldozer-0.png - 0 - 0 Bulldozer001.png - 01-Bulldozer-0.png - 782 - 0 Bulldozer002.png - 01-Bulldozer-0.png - 0 - 414 Bulldozer003.png - 01-Bulldozer-0.png - 782 - 414 Bulldozer004.png - 01-Bulldozer-0.png - 0 - 828 Bulldozer005.png - 01-Bulldozer-0.png - 782 - 828 Bulldozer006.png - 01-Bulldozer-0.png - 0 - 1242 Bulldozer007.png - 01-Bulldozer-0.png - 782 - 1242 Bulldozer008.png - 01-Bulldozer-1.png - 0 - 0 Bulldozer009.png - 01-Bulldozer-1.png - 782 - 0 Bulldozer010.png - 01-Bulldozer-1.png - 0 - 414 Bulldozer011.png - 01-Bulldozer-1.png - 782 - 414 So now I’m starting to work with Greensock to see if I can use these values for the animation. Sorry if I have not been precise enough, I hope this makes more sense to you now and why the assets are the way they are? Any advice still very much appreciated. Thanks.

Hi Jack, Sure—and thanks very much for the reply. This is a few of the PNGs and JSON files from a very basic test example animation but will hopefully give you some idea at least. It is the raw output from TexturePacker using no trimming but allowing for multi-packs. I’m using a 2048x2048px limit because that is recommended for supporting mobile browsers. I’d like to trim and pack them more efficiently once I have things generally working OK. There will be lots of individual animations like this so my ultimate goal is to build a nice efficient workflow requiring the minimum of additional effort for adding more animations. From the JSON files I’m able to extract the important data and my instinct was to do something along the lines of... load the JSON files and push each image image information into an array preload the sprite sheets and stack them loop through the entire array of images adding each one to the timeline somehow I found this piece of code from this question posted here before var frames = document.querySelector(".frames"); var spriteSheet = { width: 165, height: 292, total: 64, cols: 12, rows: 6, duration: 2 }; TweenLite.set(frames, { force3D: true }); var tl = new TimelineMax({ repeat: -1 }); for (var i = 0; i < spriteSheet.total; i++) { tl.set(frames, { x: (i % spriteSheet.cols) * -spriteSheet.width, y: Math.floor(i / spriteSheet.cols) * -spriteSheet.height }, i / (spriteSheet.total - 1) * spriteSheet.duration); } Which I felt might be the closest match to help get me started. But yeh, the fact it is over multiple PNG files and how to handle that is a head scratcher! Any help or advice would be very much appreciated Thanks. 01-Bulldozer-0.json 01-Bulldozer-1.json 01-Bulldozer-2.json 01-Bulldozer-3.json 01-Bulldozer-4.json 01-Bulldozer-5.json

Hi, I have seen that using SteppedEase seems to be the recommended way to cycle through bitmaps for an animation. Unfortunately in my case they have to be split over a few separate files because of limitations of PNG image dimensions. TexturePacker does a good job of creating these PNG files and generates an accompanying JSON file with the relevant x, y, width and heights to piece the animation back together. The output looks something like this... [ "image004.png": { "frame": {"x":366,"y":0,"w":367,"h":241}, "rotated": false, "trimmed": true, "spriteSourceSize": {"x":2,"y":129,"w":367,"h":241}, "sourceSize": {"w":782,"h":414} }, "image005.png": { "frame": {"x":733,"y":0,"w":367,"h":241}, "rotated": false, "trimmed": true, "spriteSourceSize": {"x":2,"y":129,"w":367,"h":241}, "sourceSize": {"w":782,"h":414} } ] My question is there a preferred way to use these spritesheets and information to recreate the animation using Greensock? I guess that this is too complex for SteppedEase, which only seems to be able to alter a fixed value a certain number of iterations—but for something more complex like this what would be a sensible approach? I’m quite new to Greensock so looking for some advice really. Thanks!