HTML5 Canvas: Cache a static movieclip on stage?

[SSSSSSBenay]

Hello all,

I'm working with Animate's HTML5 Canvas using lots of vector art (no filters), nested movieclips, and classic tweeing in my timeline...I am having performance issues when my published html file is played on full screen browsers. I am attempting to cache my complex artwork in attempts to improve performance. Is it possible to cache a static movieclip that is already placed on the stage? I have tried:

this.movieclip.cache();

without success.

Also, what is the difference/benefit to cacheing complex art in my project rather than simply converting it to bitmap and using it that way?

Thank you in advance...

[kdmemory]

Hi Benay

"... I am attempting to cache my complex artwork in attempts to improve performance. Is it possible to cache a static movieclip that is already placed on the stage? I have tried:"

Well, I'm not entirely sure how you applied the cache() method in your practice. However

this.movieclip.cache();

won't work. What you do with cache() is to capture a certain region of your stage (it might be the region of a movieclip) and the use this for subsequent redraws. See the example in EaselJS for using cache():

var shape = new createjs.Shape();
 shape.graphics.beginFill("#ff0000").drawCircle(0, 0, 25);
 shape.cache(-25, -25, 50, 50);

Consider this about cache();

"Draws the display object into a new element, which is then used for subsequent draws. Intended for complex content that does not change frequently (ex. a Container with many children that do not move, or a complex vector Shape), this can provide for much faster rendering because the content does not need to be re-rendered each tick."

So it can be advantageous in your problem situation, but without the parameters (x, y, width, height) it can't work. And the cache-area is static, essentially like a bitmap cache. If there are any changes within the cached region (animation, size changes etc) you always would have to update yur cache with updateCache().

"Also, what is the difference/benefit to cacheing complex art in my project rather than simply converting it to bitmap and using it that way?"

In my view the this.movieclip(x, y, w, h) is more or less a static bitmap region.

Generally speaking: You posted in the last days already three threads about animations are dragging when viewed in fullscreen.

HTML5 Canvas: Cache a static movieclip on stage?

Slow, dragging animation when Animate HTML5 Canvas is played in full screen browser

Responsive HTML5 Canvas with max width?

Personally I publish a lot of CreateJS/Animate/Canvas stuff for fullscreen presentations. Apart from my beginnings with AnimateCC and CreateJS canvas, when I did a couple of unwise things, I now have no significant problems with expanding the canvas size for fullscreen. I guess in your ways of constructing your creations there must be issues, independent from max width or cache or anything you are currently trying.

Klaus

[SSSSSSBenay]

Hi Klaus,
I really appreciate your time and attention. Yes, I am really struggling with the dragging problem at full screen and as you've noticed with my posts, I am attempting to problem-solve in various ways but without success. This is my first HTML5 Canvas project, I have previously been creating my presentations with Flash and AS3, and exactly as you say I suspect that I am doing something wrong in my way of constructing but I do not know what.

What were some of the unwise practices you were using in the beginning that I perhaps am also doing? I have read articles about javascript optimization and artwork optimization and I don't believe I have any run-away events in the code, I am not using filters in the artwork, I am using only classic tweens instead of motion tweens, etc. As this first project is part of a larger, multi-chapter children's educational program, I really need to correct my errors now so that I can create the full program with animations and interactivity that play at normal speed full screen. Would it be possible for me to share with you my animate file to take a quick look for anything obvious? Thank you again for your time. I really really appreciate your advice.

[kdmemory]

Hi Benay

You could share your Animate file via some cloud like CC, Google Drive, Dropbox, WeTransfer etc.

If you need to keep the share link private (Non-disclosure agreement or something), you could post the link to me in a private message. Roll over my avatar and select Message.

My major unwise practice was related to textfields. I had a lot of textbits and I used static textfields which went all as shapes into the published Javascript file. This created tons of code which slowed the animations massively down. But, this was almostv 4 years ago before the publish option Export document as texture and before I learned to use dynamic texts with Web fonts.

Klaus

[ClayUUID]

To force caching of a moviecliip, all you have to do is set Display -> Render -> Cache as Bitmap in the properties.