Baxter85

After a bit i made it work in the way i wanted. Now i can set the duration i want and based on that i can speed up or slow down the animation and also control it through gsap if i need to bind it to a input range for debugging. here the final code in case somebody need it for PIXI: const spritesheetTween = (tl, layer, start) => { const fw = 300 const fh = 250 const cols = Math.floor(layer.spritesheet.width / fw) const rows = Math.floor(layer.spritesheet.height / fh) let count = 0 let interval = layer.seconds / layer.frames for (let r = 0; r < rows; r++){ for (let c = 0; c < cols; c++){ if(count < layer.frames) { let xpos = -c * fw; let ypos = -r * fh; tl.set(layer.spritesheet, { pixi: {x: xpos, y: ypos} }, start + count * interval) count++ } } } } thanks Zach!

It worked great! thanks man!

ahhh ok yeah now is clear!

Cool, i'll try that and let you know, just one thing, what stands for the 360?

Hi Zach, thanks for the reply. For the performance, i meant how heavy is on the gpu having 187 textures created at runtime compared to have one only changing position. I know the GPU is really fast but just a thought to understand which method is more convenient being just a simple banner. For the calculation, yes, is what i have done already, maybe i explained it badly (sorry), what i meant is that i used a 0.03 interval just with trial and error, and i would like to know how do i calculate that number in case i have a different a frame rate for the spritesheet ?(unless that inerval number is static since it is based on the fps set on the ticker?). In case i have a spritesheet with different fps than 30 for example, the interval need to change (i suppose if not based on the ticker), how do i find that number (interval) without me trying different values? I know the length in seconds, fps and total frames of the spritesheet, which formula i can use to calculate that number? I'm not a master in Math, so any suggestion to drive me towards the goal is appreciated. Thanks.

guys an update, i found an example here on the forum made by Carl that animates the background property to move the sprite and i thought to adapt it to my needs with PIXI and it works. const playSpritesheet = (tl, layer, start) => { const fw = 300 const fh = 250 const cols = Math.floor(layer.spritesheet.width / fw) const rows = Math.floor(layer.spritesheet.height / fh) let count = 0 let interval = layer.interval for (let r = 0; r < rows; r++){ for (let c = 0; c < cols; c++){ if(count < layer.frames) { let xpos = -c * fw; let ypos = -r * fh; tl.set(layer.spritesheet, { pixi: {x: xpos, y: ypos} }, start + count * interval) count++ } } } } now i need to understand one thing, my guess is that this approach is more performant since i use 1 texture instead of 187 in my case, but i would like to know your opinion, the second thing is that now i can control it with gsap but i still trying to figure out how i can calculate the interval base on the fps and duration i want to give to the animation. Right now i found that the value 0.03 (which is stored in layer.interval) is a perfect match but i would like to calculate that dynamically based on the duration and fps i want. How the heck i can do that? thanks.

Hi guys, i'm trying to find out how to use gsap in conjunction with Pixi to be able to control a spritesheet through the gsap tick but i'm having difficulties to understand how to make it work. Here's how i generate the animatedSprite dynamically from a json feed: texture = images[layer.name].texture const fw = 300 const fh = 250 const sprW = texture.width const sprH = texture.height const cols = Math.floor(sprW / fw) const rows = Math.floor(sprH / fh) const totalFrames = layer.frames let frameCounter = 0 const spriteSheetFrames = [] for(let r=0; r < rows; r++) { for(let c=0; c < cols; c++) { console.log(c * fw, r * fh) if(frameCounter < totalFrames) spriteSheetFrames.push(new PIXI.Texture(texture, new PIXI.Rectangle(c*fw, r*fh, fw, fh))) frameCounter++ } } const animation = {} animation["sequence"] = spriteSheetFrames const spritesheet = new PIXI.AnimatedSprite(animation.sequence) spritesheet.alpha = layer.alpha || 0 spritesheet.x = layer.x || 0 spritesheet.y = layer.y || 0 spritesheet.animationSpeed = layer.speed Now, i have a main timeline that run a sequence of animations on different elements, how i can play the AnimatedSprite and control it with gsap? i tried to do something like this: tl.to(layer.spritesheet, duration, { onStart: () => layer.spritesheet.play(), onComplete: () => layer.spritesheet.stop() }, start) which it works but first is just a hack, second i need to set the duration exactly as the duration of the original animation and third i cannot control it, if i stop the timeline the spritesheet does not stop at all, and that's because i think it does not use the timeline timer. Any suggestion? thanks.