Skip to main content
J
julianc31943986
Inspiring
February 20, 2020
Question

Animate Canvas and Google Chrome Helper (Mac)

  • February 20, 2020
  • 1 reply
  • 1058 views

I am making some html canvas files, and when I run them in Chrome they work fine but the fan starts whooshing up and if I check in Activity Monitor on my Mac it says Google Chrome Helper is using massive amounts of CPU. To test, I removed all actions, tweens etc, but even with just the graphics sitting there, unanimated, it still used lots of CPU. So I gradually removed the graphic elements, one by one, and the amount of CPU used gradually reduced. So it looks like it is simply the graphics themselves that are the problem. They are, of necessity, quite large graphics - there's nothing I can do about that as it is a requirement of the brief. But I am wondering what I can do to at least minimise the problem. I have looked around online and haven't found any clear info on this apart from the obvious, so I'd be v grateful if anyone could point me at any resources/documentation about this issue.

This topic has been closed for replies.

1 reply

JoãoCésar17023019
Community Expert
JoãoCésar17023019Community Expert
Community Expert
February 20, 2020

Hi.

 

Yeah. You figured it out yourself: your graphical structure may be too complex.

 

Here are some personal tips for performnace improvements:

- Try testing your file with and without exporting the document as texture (Publish Settings > JavaScript/HTML > Image Settings > Export document as texture);

- Consider turning off the advanced layers mode (Ctrl/Cmd + J) if you don't need advanced features like camera or parenting because this mode has some impact on performance;

- Avoid complex containers with lots of children;

- Avoid complex shapes;

- Make sure you're not using color effects/filters;

- Use cache whenever possible;

- Avoid using large bitmaps. This is specially true for mobile devices;

- Try low resolution values for exported bitmaps (Publish Settings > JavaScript/HTML > Image Settings > Resolution);

- Try to balance wisely when an asset should be made of a vector shape or of a bitmap;

- Avoid using too many static text fields because they are exported as raw vector shapes;

- Avoid adding too many listeners;

- Add mouse events to a container and use the event.target property instead of adding a separate mouse event to dozens or hundreds of children;

- If possible set a container.tickChildren to false so the tick will not be propagated to children of a container;

- If using a tick event it may be a good idea to change the Ticker.timingMode and see which one works best for your case;

- Avoid using motion tweens because they are exported as frame by frame animation;

- Avoid having a huge main timeline with lots of tweens;

- Avoing very large shape tween spans.

 

If even with these tips you still can't get your output running with lower CPU and RAM resources, would you mind letting us taking a look at your FLA?

 

 

Regards,

JC

    J
    julianc31943986Author
    Inspiring
    August 6, 2021

    Hi, 

     

    Your answer last year was very helpful and gave me lots of useful pointers.

     

    A year later, I've been asked to do some more Adobe Animate work. I am still trying to get my head around CPU usage and "Google Chrome Helper (Renderer)", so I have been doing more tests.

     

    I made a brand new test Animate Canvas file. I added a single rectangle graphic to the stage, nothing else - no images, no actions, nothing. So it is about as basic as it could be. I've gone "Control > Test movie".

     

    The %CPU for this file goes up and down depending on how large I make the browser. Still, at a browser roughly Ipad pro size, the Activity Monitor says Google Chrome Helper (Renderer) uses about 60% of CPU, just for this almost empty file (On real work files, with images, scripting and so on, the number quickly goes above 100%).

     

    So I'm wondering - maybe I am worrying too much about the CPU usage - perhaps it is unavoidable? Or perhaps there is something in the publish settings that is wrong?

     

    I'd appreciate any more advice - is this CPU usage unusual, in which case I must be doing something wrong? But if so, how come it happens even with a basically empty file?

     

    The only thing i can add, is that the canvases I am being asked to make are 1350 x 1000px, and scale to fill the available browser space. I have tried making the canvas smaller while maintaining the aspect ratio - but it doesn't seem to make any difference.

     

    I've attached my publish settings and doc settings in case they contain useful info.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices