How do I properly scale movie clips for texture atlas export?

[_tal_]

I have a complex movie clip animation that won't play smoothly on a smartphone, unless I use bitmap caching.

Enabling bitmap caching works great for performance, but the lack of scaling options when using a texture atlas appears to make the feature result in horrible visuals (at least in my case).

I have an animated satellite dish. It has multiple pivot points which are used to do motion tweens, and the only way to set the pivot point in Adobe Animate accurately enough to be where I want them is to draw the dish very large, and when I'm done, scale it down to the size I need it to be. Seems like that should be simple enough, so that's what I did.

Unfortuantely, bitmap caching using texture maps are based on the original size of the objects - not the scaled version, which means I end up with something like the images attached.

When I publish the project with the dish being at the regular size (too large for my project), it looks great. When I scale it up (Enlarged.png), I get jagged lines. When I shrink it down (which is what I ultimately want), I get faint lines.

Setting the Stroke Scale to "None" on these lines doesn't help.

Is there an easy way to resize my movie clip so that the texture atlas generated is based on the size I want, and not the original, massive size?

PS. The blue background isn't bitmap-cached, so the lines look good at all sizes.

[JoãoCésar · Accepted solution]

Hi.

The cache method accepts a fifth argument that sets the scale at which the cache will be created. If you cache a MC that is 20 x 20 px then the resulting cacheCanvas will be 40 x 40 px.

instance.cache(x, y, width, height, scale);

As far as I can tell, Animate doesn't use this argument so if a cached instance is scale up it ends up appearing blurred.

You can try to manually change this by going to the output JS file and set a value for the scale manually.

Please also request this feature through this link because I think it would be very helpful to solve the issue you're facing in which cache helps improving performance but it makes instances look bad when they are transformed and also demands the usage of unnecessary big assets.

Regards,

JC

[_tal_]

You are right - that does appear to be the correct, low-level feature that I'm after.

It would be nice if Adobe Animate made use of it.

For now, on a mac, doing this helps:

gsed -i 's/\(\.cache([-0-9]*,[-0-9]*,[-0-9]*,[-0-9]*\)/\1,2/g' main.html

where main.html is the project output file.

This sets the scale of ALL cached items to 2. Change the "2" above to higher numbers if you need to.

Note that in my case, I chose to have Adobe Animate include the JS directly in my output HTML file, so for others, you may need to run this command against the .js that is generated instead.

Also note that here, I'm running this on my MacOS in Terminal, and gsed is NOT part of the regular tools that come with MacOS. You'd need to install homebrew, and then run "brew install coreutils" in order to get gsed. If you know what you're doing, you could also make use of MacOS' regular sed, but the syntax would be different (-i won't work the same way). I'm a Linux guy, and in Linux, gsed is just the regular sed, so I prefer it.

This solution works, but is far from ideal. Every time you make a change to your Adobe Animate project, and publish, it will regenerate your published files, and you'll need to run the above command to fix the scaling. It's easy to forget to do this.

I submitted a feature request as suggested.

Thanks

[JoãoCésar]

Wow. You are very skilled.

And you're right. This approach is just a workaround and it's far from ideal. Hopefully the Animate team you'll add this feature in a near future release.

In the meantime, I think that you can keep coding without worrying about it and just change the cache methods in the final stages when you're ready to publish.

Regards,

JC

[_tal_]

For future reference, the BSD sed version of the same thing is this:

sed -i '' 's/\(\.cache([-0-9]*,[-0-9]*,[-0-9]*,[-0-9]*\)[^ ]*\();\)/\1,2\2/g' main.html

Note: BSD sed is the regular sed MacOS uses

Also note that the above regex has been slightly modified to be idempotent (not cause problems when you run it multiple times).

The ratio you may want to change is in red. Leave everything else alone.

[JoãoCésar]

Excellent! Thank you for the contribution! It will certainly be helpful for someone else.