[SOLVED] HTML5 - found ( may be ) a small quirk with a workaround

Welcome to our brand new Clickteam Community Hub! We hope you will enjoy using the new features, which we will be further expanding in the coming months.

A few features including Passport are unavailable initially whilst we monitor stability of the new platform, we hope to bring these online very soon. Small issues will crop up following the import from our old system, including some message formatting, translation accuracy and other things.

Thank you for your patience whilst we've worked on this and we look forward to more exciting community developments soon!

Clickteam.
  • Hello Clickers.
    I don't know if I've found a bug in the HTML5 exporter, or perhaps is a feature ?

    Scenario: a simple frame with two active object on it. One is "good", the other is "bad". ( quite the same by the film "the good, the bad, the ugly". )
    Jokes apart, the frame has a standard fade-in effect ( set in the frame property panel ). The two objects are created at runtime.
    What happens:
    - using "run this event once" and creating the two objects, it works in Windows-runtime but does not in HTML5, producing a JavaScript error ( see screenshot below)
    - using "run this event once" and creating only the "good" object, works in both runtimes.
    - using "Start of frame" by creating only the "bad" object, it does not work in HTML5.
    - using "Start of frame" by creating the two objects, it works in both runtimes.

    This quite puzzles me. What is wrong with the "bad" active object ?
    I'm aware that there is a workaround to this, that is: delete the bad, create a new one. Problem solved.
    However, I wanted to point this "issue" out. May be can get solved with some JavaScript "magic" ? I'm ready to test any patch ;)

    Attached is the test project "Html5-fade.mfa" . Simply activate one section at a time, and see what happens in html5, accordingly with the comments. Hit F12 on the browser to see the JavaScript error message.


    Thank you for your attention and have a nice day,
    Sergio.


    Please login to see this attachment.

  • The problem with your "bad" object is that it has a qualifier on it. So in this case, the object isn't actually "bad", nor is it corrupted. If you remove the qualifier from the "bad" object, the event on line 2 will work on HTML5.

    It looks like creating an object that has a qualifier attached to it inside of a "Run this event once" statement causes the error on line 1395 in RunLoop.js. This will only occur if the frame has a transition on it though. If the fade-in transition is removed, then the object's will be created without an error.


    You can make the event behave correctly on HTML5 by adding a "Start of Frame" condition to your code. This is also why line 8 works on both platforms without a problem.

    Please login to see this attachment.

    This will change the behavior on both Windows and HTML5 though, and the objects will be created before the fade-in transition, not after like they are on Windows without the "Start of Frame" condition.


    My best guess as to why this problem occurs on HTML5 is that the part of the code in RunLoop.js producing the error runs before the frame is fully loaded during the fade-in transition, and thus can't properly process the qualifiers on the objects that don't yet exist.

  • You should be able to fix this yourself by going to the Data\Runtime\Html5 folder in your Fusion installation directory (typically C:\Program Files (x86)\Clickteam Fusion Developer 2.5\Data\Runtime\Html5 for non-Steam users), opening up the RunLoop.js file, and changing line 1385 from this:

    if (oilPtr.oilRealQualifiers != null) {

    (1/29 Edit: removed bad code suggestion, see Please login to see this link. for newer fix)

  • Hello tobydavis,

    many thanks for your efforts and time ! Your "patch" does indeed work on the file I posted above. However, in my main project ( galaxy cab ) there's still something wrong with fading in, and despite the change in the RunLoop.js, it spits this error out:
    Please login to see this attachment.

    In the RunLoop.js there is another line with the statement " if (oilPtr.oilRealQualifiers != null) { ". I've also changed it accordingly with your suggestion, but it did not change anything. I've then reverted it to its original form, but leaving the line 1385 with your correction, as you suggested.

    I need to investigate further. I've noticed that if I deactivate some part of the code, the error does not occur. But it's not easy to find the "culprit", as activating other parts of the code, the error arises too.
    I'll check if the command "start of frame" eliminates the issue "once and for ever" ;)

    If you mind, I can send you the frame where these errors occur. For this purpose I would like, however, to use a private message - if you agree.
    Let me know.

    Thanks again for your kind support. And sorry if I'm stressing you with this topic.

    Take care,
    Sergio

  • Update.
    I'm trying to nailing down the problem.

    By this event - again a test with a qualifier:

    Please login to see this attachment.

    I get this error:


    Please login to see this attachment.

    If I perform the same test on a simple active ( no qualifier ) it does not raise any JavaScript error:


    Please login to see this attachment.

    Please login to see this attachment.

    It seems there is a problem between fading (in) and qualifiers in the HTML5 extension. I'm willing to help and try any solution.

    Regards,
    Sergio

  • Hi semar,

    If you could PM me the MFA you are using that would be great. And yes I agree, using fades seems to cause a problem with qualifiers that wouldn't normally occur in a frame without a transition on it.

    As far as the patch I suggested in my earlier message, I found that it could mess up behaviors with qualifiers (such as collisions).

    (1/19 Edit: removed code suggestion. See Please login to see this link.)

    I am going to keep investigating this, and I'll update you with any fixes I'm able to make.

    Note: If you ever need to revert all the changes you made to the Html5 runtime without going back through all the files you changed, then you can just re-install the latest Fusion update, which will return the runtime files to their original state.

  • This is indeed really nice to know ! :thumbup:

    Hi semar,

    The problem with the qualifiers seems to be that there is code inside of RunLoop.js that is called only if a frame has a transition applied to it (such as fade in). When that code runs, it calls a function named unBranchPrograms that clears out the list of qualifiers, which results in that null error when the program tries to access them after the fade in. I've come up with a way to fix this.

    Fix 1:

    This fix involves deleting line 668 in RunLoop.js that calls unBranchPrograms after a fade in, which will prevent the qualifier list from being cleared out.

    Please login to see this attachment.

    Fix 2:

    This fix involves adding a line to RunLoop.js. Just add this.rhEvtProg.qualToOiList = this.rhEvtProg.qualToOiListFull; below line 668 as shown below:

    Please login to see this attachment.

    You can also undo the patch I suggested for line 1385 in my earlier messages as it is unnecessary and didn't target the root of the issue.


    (2/5/25 Edit) The correct fix was actually to remove this.qualToOiList = null; on line 4365 in Events.js as per Yves' Please login to see this link.

    Disclaimer:

    I didn't write the runtime, nor am I familiar with all of its components, so I can't guarantee this is definitely the correct solution. I would at least try this fix though and see if you encounter any issues (whether they are related to qualifiers or not). If you do, please mention them here.

    Edited 5 times, last by tobydavis (February 5, 2025 at 12:51 PM).

  • IT WORKS !!!

    Many thanks tobydavis for your patience and time ! Now I can finally use the standard transitions also in HTML5 !

    I really appreciate your work and the detailed informations. You have even corrected/updated your posts above - I'm deeply impressed !

    You own a pizza margherita and a beer from me :)

    I've tested the whole project right now, and also by the second level the transition works like a charm !

    Thanks again for your kindly effort tobydavis - really, really appreciated !

    Best regards,
    Sergio

  • Glad to hear your project is back up and running! I'll have to take you up on that pizza offer if there is ever another Click Convention :)

    It looks like this bug was introduced in Build 295.2. I can't be sure of the details, but there were changes in relation to qualifiers in Events.js (such as the addition of the prepareQualifierList function) that may have caused problems with the previously unproblematic code in RunLoop.js that is triggered after the completion of a transition.

    I believe that Fix #2 is the better one at this point, so I would go with that until there is an official fix (hopefully in Build 296).

    Regards,
    -Toby

    Edited 2 times, last by tobydavis (February 5, 2025 at 12:50 PM).

  • I think your first fix was the good one (removing the line that sets qualToOiList to null in unbranchPrograms). In a previous optimisation the initialization of this array was moved to another routine, and apparently I forgot to remove this line.

  • I think your first fix was the good one (removing the line that sets qualToOiList to null in unbranchPrograms). In a previous optimisation the initialization of this array was moved to another routine, and apparently I forgot to remove this line.

    Hi Yves. I've restored Fix #1 in my earlier comment so other people can see it. I was just really cautious about recommending deleting a line as the fix for the problem.

    I'm glad to hear one of my fixes ended up being correct and I wasn't totally off base here :)

  • Ah sorry, I misunderstood what you meant in your first fix as it was hidden. Actually the correct fix is just removing the line that sets qualToOiList to null in unBranchPrograms, you shouldn't remove the call to unBranchprograms

    Code
    	unBranchPrograms: function ()
    	{
    		this.bReady = false;
    		this.limitBuffer = null;
    		this.listPointers = null;
    		this.eventPointersGroup = null;
    		this.eventPointersCnd = null;
    	},
  • Ah sorry, I misunderstood what you meant in your first fix as it was hidden. Actually the correct fix is just removing the line that sets qualToOiList to null in unBranchPrograms, you shouldn't remove the call to unBranchprograms

    Code
    	unBranchPrograms: function ()
    	{
    		this.bReady = false;
    		this.limitBuffer = null;
    		this.listPointers = null;
    		this.eventPointersGroup = null;
    		this.eventPointersCnd = null;
    	},

    Oh I see. I guess that's the downside to removing things from my comments. I was hoping to cause less confusion for anyone who came across this thread in the future, but I guess I did the opposite. Thanks for clarifying where the actual problem was.

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!