MovieClip performance issue #1048
Comments
|
Hi @LiorZar - just looking into this and on our local version of CreateJS I have added totalFrames check in the advance() method like so: if (this.paused || this.totalFrames <= 1) { return; } Is that something like what you did? Indeed, it appears as you say where the original CreateJS runs through a series of functions including _updateTimeline(), setPosition(), _updatePosition(), _updateTargetProps() and a bunch of tests within these. When we return if it is a single frame, it does not run through those functions and tests. I am not sure what will happen if the frame does not advance with respect to the rest of CreateJS. For example, calling scripts. I added a script on the Adobe Animate timeline for the MovieClip and it ran it once in the original CreateJS and it ran it once in the modified CreateJS so that seems good. What about clips within clips? Or possibly clips within clips that were not made with Animate and have other modes set? If others would like to try the change it is quite simple. Go to the advance() method of a MovieClip and adjust Or here is our test CreateJS: https://zimjs.org/cdn/1.3.3/createjs_doc_single.js I will pass it along to some of our users and see if they will test it. Cheers - and thanks for bringing up the issue. |
|
wow, thanks for replying.
this is my version
c.advance = function(b) {
var c = a.INDEPENDENT;
if (this.mode === c) {
for (var d = this, e = d.framerate;
(d = d.parent) && null === e;) d.mode === c && (e = d.
_framerate);
if (this._framerate = e, !this.paused) {
var f = null !== e && -1 !== e && null !== b ? b / (1e3 / e
) + this._t : 1,
g = 0 | f;
for (this._t = f - g; g--;) this._updateTimeline(this.
_rawPosition + 1, !1)
}
if( 1 === this.totalFrames )
this.mode = a.SINGLE_FRAME;
}
}
I'm building a game that runs on televisions browsers which are slower
(even than mobile) and this simple change increate FPS x3 times.
In the original AS3 Animate, you can inherit from Sprite, the current
version you can only inherit from MovieClip.
In order to give an object an instance name is must be a MovieClip :(.
In AS3 a Sprite is a MovieClip with a single frame.
From my POV my code change go to the advance method only once and will not
run it again. which makes it fast.
One more important thing (sorry for the long email)
a standard scenario when using animate is to create a single frame
MovieClip with all the assets you need in layers.
give each one an instance name. (e.g in the main lobby, have login screen,
signup screen, etc...)
and in the lobby code remove all the screens that are not in use from the
display list. instead of changing them to visible = false;
if the MovieClip is not defined as a SINGLE_FRAME, you cannot remove things
from the display list.
the _updateTimeline will return everything you removed in the next frame
Again thanks a lot for replying
Best regards
Lior
…On Fri, Aug 7, 2020 at 5:59 PM Dan Zen ***@***.***> wrote:
Hi @LiorZar <https://github.com/LiorZar> - just looking into this and on
our local version of CreateJS I have added totalFrames check in the
advance() method like so:
if (this.paused || this.totalFrames <= 1) { return; }
Is that something like what you did?
Indeed, it appears as you say where the original CreateJS runs through a
series of functions including _updateTimeline(), setPosition(),
_updatePosition(), _updateTargetProps() and a bunch of tests within these.
When we return if it is a single frame, it does not run through those
functions and tests.
I am not sure what will happen if the frame does not advance with respect
to the rest of CreateJS. For example, calling scripts. I added a script on
the Adobe Animate timeline for the MovieClip and it ran it once in the
original CreateJS and it ran it once in the modified CreateJS so that seems
good. What about clips within clips? Or possibly clips within clips that
were not made with Animate and have other modes set?
If others would like to try the change it is quite simple. Go to the
advance() method of a MovieClip and adjust
if (this.paused) { return; }
to
if (this.paused || this.totalFrames <= 1) { return; }
Or here is our test CreateJS:
https://zimjs.org/cdn/1.3.3/createjs_doc_single.js
I will pass it along to some of our users and see if they will test it.
Cheers - and thanks for bringing up the issue.
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#1048 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/ABXRS7GTXYWDJILHIQKLRTTR7QJEPANCNFSM4NWXYC7A>
.
|
|
Hi @LiorZar I think you are working in the minified file and I am working in the non-minified file. Not a big deal, but just mentioning it. So... I can't tell for sure, is the only change you made to yours that you added the test if the totalFrames is 1 then make the clip SINGLE_FRAME? I adjusted my change to that as follows: if (this.totalFrames == 1) this.mode = MovieClip.SINGLE_FRAME; and then adjusted my earlier change from When I run this version which can be found at https://zimjs.org/cdn/1.3.3/createjs_doc_single2.js then a simple moveclip on the stage works fine - but it does not call the frame script on the timeline of the MovieClip. I am not sure if this is normal behaviour for a single frame clip - I would not think so. What are your thoughts? I just want to check to see if that was the only change you made before digging into it further. |
|
In #1038 it is mentioned that there is an _off property that will stop the object from showing up in the timeline if it is set to false. Apparently visible does the same thing. We are exploring there if toggling this directly in the addChild() and removeChild() would give the expected result and if there would be other issues if we did that. |
|
it looks good, i don't understand why it will not call scripts on the first
(and only) frame, at least once.
it is done inside the updateTimeline? and the updateTimeline is called once.
Maybe inside the updateTimeline there is another check of the movieclip
mode (i see there is)
this is not normal behavior it should be called at least once.
Thanks
Lior
…On Sat, Aug 8, 2020 at 7:37 PM Dan Zen ***@***.***> wrote:
Hi @LiorZar <https://github.com/LiorZar> I think you are working in the
minified file and I am working in the non-minified file. Not a big deal,
but just mentioning it. So... I can't tell for sure, is the only change you
made to yours that you added the test if the totalFrames is 1 then make the
clip SINGLE_FRAME? I adjusted my change to that as follows:
if (this.totalFrames == 1) this.mode = MovieClip.SINGLE_FRAME;
and then adjusted my earlier change from
if (this.paused || this.totalFrames <= 1) { return; }
to what it was before:
if (this.paused) { return; }
When I run this version which can be found at
https://zimjs.org/cdn/1.3.3/createjs_doc_single2.js then a simple
moveclip on the stage works fine - but it does not call the frame script on
the timeline of the MovieClip.
I am not sure if this is normal behaviour for a single frame clip - I
would not think so. What are your thoughts? I just want to check to see if
that was the only change you made before digging into it further.
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#1048 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/ABXRS7H6S25LJ4VSMPXOL2TR7V5NNANCNFSM4NWXYC7A>
.
|
|
Agreed - the script should be called at least once. Did you or could you try out the script here and confirm that it does not call the script in the timeline: https://zimjs.org/cdn/1.3.3/createjs_doc_single2.js And while you are at it... could you test this and see if the following works for you to perform better on TV and still works with your clips: https://zimjs.org/cdn/1.3.3/createjs_doc_single.js I am still waiting on others for the test - August is sometimes a quiet time ;-) |
|
yes, but will have the answer on monday
…On Sun, Aug 9, 2020 at 3:57 PM Dan Zen ***@***.***> wrote:
Agreed - the script should be called at least once. Did you or could you
try out the script here and confirm that it does not call the script in the
timeline: https://zimjs.org/cdn/1.3.3/createjs_doc_single2.js
And while you are at it... could you test this and see if the following
works for you to perform better on TV and still works with your clips:
https://zimjs.org/cdn/1.3.3/createjs_doc_single.js
I am still waiting on others for the test - August is sometimes a quiet
time ;-)
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#1048 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/ABXRS7DG7TAWLFWDPBI6OTLR72MKVANCNFSM4NWXYC7A>
.
|
|
|
danzen
added a commit
that referenced
this issue
Mar 27, 2021
From #1048 - "I checked the FPS on LG TV and so it is done from 60 to 20. On a static image. After research, I found that in the advance method in MovieClip class there is a constant check to update the frame. I added a change to check if the MovieClip class total frame is equal to 1 to change it the mode of the MovieClip to a single frame. This increases performance back to 60 FPS." - LiorZar Has been tested but keep an eye on it - @gskinner might want to double check it.
danzen
added a commit
to danzen/zimjs
that referenced
this issue
Apr 18, 2021
CAT 04 - Codename Diamond ZIM EASE https://zimjs.com/ease Customize the easing equation with sliders and pass results into ZIM animate() Looks like this ease:zimEase([1.746,0.4,-0.91,0.8]) Added "snap", "ballistic" and "slowmo" eases with In, Out and InOut settings These act like the existing eases "elasticIn", "backInOut", etc. See https://zimjs.com/cat/easeexamples.html ZAPPS TOOL -- PWA 82.4 https://zimjs.com/zapps.html Made a tool to create and zip the files for a PWA (Progressive Web App) This looks like Distill, Wonder and AssetTool (which have been slightly modernized). This was quite a large undertaking and we hope it turned out well. The system takes the place of 70 steps to make mobile apps using GitHub, PhoneGapBuild, signing keys, etc. Added a PWA() class in ZIM that the tool will insert (or can be done manually) This is used to make a custom message when on mobile browser to add to mobile home screen (A2HS) The rest of the system creates the following files: manifest.json serviceworker.js libraries/ directory with local zim and createjs files icons/ directory with icons zapp.html with file calls and meta tags (and PWA call) readme.txt - with instructions to replace index with zapp.html code The code page has been updated to feature the tool (see Code Page updates) ZAPPS vs ZAP We know that we already have a ZIM Zap tool down in the gold bars this is for sharing files and will remain as is. We will refer to the new Zapps tool in the plural. Zapps is how we would like to refer to the projects we make with ZIM You are welcome to call your projects Zapps too - or a Zapp (singular) It is Z for ZIM and apps for apps - but Zapps also sound really fast! And that is a great thing about ZIM - we can make apps fast! Zapps! SVG ASSETS https://zimjs.com/cat/svg.html SVG is now automatically converted to a Bitmap - thanks carddealer for the prompting when passed into the Frame assets parameter or frame.loadAssets() assets parameter. This can be used directly as a bitmap with asset("pic.svg").center(); etc; The original SVG is available as an svg property on the bitmap. The original SVG can be used in SVGContainer() to make it editable with Blob, Squiggle and transform. The SVGContainer is still considered experimental and may not accept all SVG But a while back, it was improved to handle arcs properly. Added width and height parameters to svgToBitmap() Added params parameter to svgToBitmap to pass object through to callback after bitmap param used internally by Frame to handle SVG images TIMECHECK now defaults to false. You can turn it to true to make sure that your times are good. MOBILE FPS Default FPS for mobile has been changed from 30fps to 60fps now that most devices are more powerful this can be set back with Ticker.setFPS(30,60); for 30 on mobile and 60 on desktop. KIDS https://zimjs.com/slate Added Phone and Portrait CheckBoxes to ZIM Kids - thanks Karel Rosseel for the idea KEYBOARD LAYOUTS https://zimjs.com/cat/keyboard.html Added layout parameter (at end) with "arabic", "hebrew", "turkish" and "azerty" settings (or "querty" default). These change the data to show different keyboards. Thanks Hussein Ghaly (arabic), Racheli Golan (hebrew), Ferudun Vural (turkish) and Karel Roseel (azerty). Also added an override mapping for lower to upper and upper to lower case letters to the data parameter data. Adjusted data to handle any number of rows (min 10) for custom layouts And added a "back" special key that is like "backspace" but only takes up one key size The "spacebar" now takes up whatever space is left so the bottom row is always at the max number of columns GRID Added allowToggle, cache and numbers parameters before style parameter Added numbersX and numbersY properties to individually set visible false if desired These changes make the Grid ready to be used for charts GENERAL Added dragPaused property to objects with drag() to pause or unpause dragging this keeps setting like boundary where noDrag() does not BREAK Added a corner parameter and property to Triangle after borderWidth and before center parameter new Triangle(500,500,500,red,black,5,[20,20,100]).center() A negative wait time can be provided to animations in the animate() series this will start an animation before the previous animation ends - thanks Ami Hanya for the excellent idea Added a toggle() method and toggled property to List when accordion is set this will toggle the outermost (first) accordion - good for opening and closing a pulldown - thanks Ofweird Top for the suggestion! Removed a test for touch to scroll page in tag mode if swiping on stage on allowDefault true It was causing double mouse events - will see if we can figure out a way to do the page scroll. updated the code page Organization to latest ZIM Made Dial accept currentValue style - left it out previously Made Slider and Dial accept VEE for min, max, step and currentValue also set these so delayPick works for instance, when tiling List animateTo() has its timePerItem fixed = was switched the wrong way for s/ms Adjusted List to capture selectedIndex, selected when tabs are used Adjusted List to animateTo() an item if tabbing and the item is not in view (top left reg assumed) Tabs - added keyLoop parameter at end before style which defaults to true to wrap tabs when tab key reaches end or start made List set keyLoop to false so List does not go past its ends when the tab key is used. Made Layout accept DisplayObjects as region objects - for default values eg. new Layout(stage, [header, content, footer]) gets converted to new Layout(stage, [{object:header}, {object:content}, {object:footer}]) Made it so an object passed into Layout as a region will update its outline() if there is one Made debug() chainable in physics (and updateDebug(), removeDebug()) Made ColorPicker have a selectedColor parameter along with the existing selectedIndex parameter BREAK for the List accordion tree object, changed the arrow property to expander with three types: "plus", "arrow" or "none" - thanks Ofweird Top for the suggestion. Also adjusted list to not apply backgroundColor style for label (not item, but actual label) that messes up rollover and shade colors Fixed ZIM ISO example https://zimjs.com/iso/ to not have scaling problem with older game module. CODE PAGE Updated Code template to include less comments. Updated Meta Tags examples https://zimjs.com/templates/meta.html Added FONT to ZIM Tips Reorganized the Code Page as follows: removed the last sections: organization, treats, createjs, principles, programming and added them to a darkpaper page - linked to in the Code Help section. Converted these to ES6 as well. Shortened the template and removed the "minimal" template. Linked to more to get to the rest of the templates so removed the second template section. Added a FEATURES section with Mobile (Zapps), SHIM for Animate and Accessibility. This leaves the following sections: START, FEATURES, CDN, HELP, TOOLS and LIBRARIES Inserted a link bar to these in between each of the sections for easy navigation Took Badges out of HELP and added Medium and DevTO site in HELP. CREATEJS GITHUB updated ZIM CreateJS to 1.3.3 (Codename Diamond - 10 years!) but also made the following legacy changes to the CreateJS GitHub repository: Fixed Polystar last bevel or miter CreateJS/EaselJS#1046 Added drawPolygon() and pg() graphics methods CreateJS/EaselJS#1058 Adjusted MovieClip to not avoid extra processing if one frame CreateJS/EaselJS#1048 Adjusted SoundJS XHR test locally as was giving errors for local sounds It still gives a warning for needing to interact before playing sounds We are not playing the sound but just testing So we respond with a warning that says sounds are ready to play. CreateJS/SoundJS@5213ac5 Adjusted TweenJS to add a hook for change tween properties dynamically CreateJS/TweenJS@6df2b9c NOT yet added to CreateJS repository - will test - but is in the ZIM 1.3.3 createjs: Fixed selecting on touch screen on Chrome issue with allowDefault false Thanks Ferudun for testing and thoughts. CreateJS/EaselJS#997
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I'm using Adobe Animate HTML5 to create a board game to run on Smart TV (low-performance machine).
All my previous games were done using AS3. I quickly found there is no way to create a Sprite anymore (A movie clips with only 1 frame). After creating my board game (no code yet just elements) which is basically movie clips inside other movie clips. All single frame.
I checked the FPS on LG TV and so it is done from 60 to 20. On a static image. After research, I found that in the advance method in MovieClip class there is a constant check to update the frame. I added a change to check if the MovieClip class total frame is equal to 1 to change it the mode of the MovieClip to a single frame. This increases performance back to 60 FPS.
All MovieClips are created in independent mode, so once the move to the next frame the add the elements in that frame to the stage. if the MovieClip is only 1 frame this is redundant.
With Adobe Animate you cannot create an old as3 Sprite.
The text was updated successfully, but these errors were encountered: