0
\$\begingroup\$

Is there an optimal way to choose when tweening multiple images as a single image?

For example let's say i have 10 preloaded image objects in my script, and i want to place them one on top of the other (the arrangement is supposed to be dynamic), and then tween it as a single "collage".

Do javascript tweening libraries like Tweenjs/GSAP etc, care about how many objects you tween concurrently (as long as in the end they move in the same direction and with same speed), or is it transparent for the fact that the hardware will move an array of pixels in the end?

Do you think that it would be better - performance-wize - to pre-combine the multiple images into one larger image, and then feed it to the tweening algorithm?

I would like to do it this way, as it would be more transparent to me, seperating the image "collage" process from the tweening process, but i haven't found a way to dynamically create javascript image objects by combining multiple single images.

Thank you.

\$\endgroup\$
0
\$\begingroup\$

One way you can do this is to draw all the images where you want them onto a new canvas (one which is separate from the main canvas, but positioned absolutely exactly on top of the main canvas). Then you can tween the entire canvas element (not the images on the canvas), keeping the images that were drawn on it as one.

\$\endgroup\$
  • \$\begingroup\$ Thanks for the response, but i want to avoid the creation of multiple canvases, because it can affect performance in an unpredictable way. \$\endgroup\$ – ktsangop Feb 17 '14 at 14:47
0
\$\begingroup\$

It seems that for TweenJS, there is no performance penalty in tweening multiple image objects.

After contacting CreateJs support, i got extra information on how to do it.

You can group multiple images (createjs.Bitmap objects) using a createjs.Container, and the only performance penalty is the creation of the container object it self.

Hope this helped someone else too.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.