HTML5 Exporter Documentation

Where do you want to go next?

You can get further help with this topic by going to the topic’s stem.

No subcategories found under HTML5 Exporter.

Share, email or print this help document.

HTML5 Exporter

Product(s) Required:

Clickteam Fusion 2.5 Developer, Clickteam Fusion 2.5 Standard, Clickteam Fusion 2.5+, Clickteam Fusion MacOS, Clickteam Fusion Windows, HTML5

The HTML5 file exporter tries to make your HTML5 application work as close as possible as your Windows (stand-alone) application that you can see in action when you run it with the “Run Application” or “Run Frame” commands, but there are some differences between HTML5 and EXE applications. These differences are usually minor, but they can affect the way your program works. This is the reason why we highly recommend you to use the “Build & Run” option of Clickteam Fusion 2.5, as it will show your application directly inside a web-browser.

Here is the list of the main differences.

  • Background collision mask
    The way the background collision mask is handled is very different compared with the Windows runtime. In HTML5 applications, when you have a “No obstacle” object in front of an “Obstacle” or “Platform” background object, the “No obstacle” object will NOT have any effect on the collisions. Basically, the objects above it WILL have a collision detected, even if your topmost object is “No collision”. The same limitation also occurs when you paste a “No obstacle” object in the background : it will not have any effect on the collisions.
  • String object, display of the string. In the Windows runtime, the text of a string object can go over the vertical size of the object. In HTML5 applications, the text is clipped to the size of the object : you have to set the height of the String object large enough to contain all the text of the object.
  • String object, text height calculation
    Javascript calculates the height of a string of text differently than Windows. The result is that the height of the calculated text is higher than in Windows stand-alone applications. Therefore, vertically centered String objects will be displayed a little lower than in the Windows runtime. You will have to take this into account when positioning String objects in the frame.
  • Many properties of the application and the frame available in Windows are not applicable to HTML5 applications. These properties will be grayed out when you turn your Windows application into a HTML5 File (by changing the Build type in the application’s properties). After being grayed out, even if they are checked, they will have no effect. Example of properties without effect :
    • “Keep display from previous frame”.
    • “Window style properties”.
    • “Window menu”.
    • “Change resolution mode”.
    • “Machine Independent Speed”.
    • “etc.”.
  • Keyboard and mouse events do not occur at exactly the same time in the game loop. This might cause some problems in your application (like objects flashing when you set their position responding to a mouse click). Also right mouse clicks can’t be intercepted.
  • Due to internal encoding of floating point numbers, comparison between floating point numbers may never be true. For example “Counter = 1.23” may not be true as the counter might be at 1.229999999. The solution here is to make a greater/smaller comparison with two conditions. Example “Counter>1.28” and “Counter<1.31”. Note: this is true with the Windows runtime too! However calculations are more precise in the Windows runtime, so this problem may occur less often.
  • Complex calculations involing mixed integers and floating point numbers may (rarely) return a result that is different (but approaching) from the Windows version as the calculation process is different in Javascript and in C++. Solution: put parentheses surrounding the different steps of the expressions to isolate the floating point and integer values.
  • Mouse pointer.Some browers do not allow the retrieval of mouse coordinates out of the application’s window area. This means that when the mouse cursor goes out of the frame, the last known coordinates will be the ones just before the mouse left the area. The mouse will then stay static until it comes back again in the frame.
  • There might be a display priority difference between pasted objects and background objects on the same frame.
  • Layers with unlimited scrolling. You must set the Wrap property of the first layer to ON so that the color of the background of the frame is displayed throughout the scrolling.
  • Files. Javascript cannot write or read any file on the machine of the user. It can save and read data in a specific browser-dependant folder, and read data directly from the web server where the application is located.
    The Edit, List, Combo and Ini objects first try to load the data from a previous data section saved by the application. If they cannot find it, they will try to load it from the binary file section of the application. If the file cannot be loaded from there, they will try to load the file from the web server (the file should be located beside the html file).
    Unlike the Windows runtime, the HTML5 runtime only takes the name and extension of the file into account when retrieving the file : the path and drive are ignored.
    Example : an INI object can have a full pathname (linking beside the Windows “MFA” file), this pathname will be ignored by the HTML5 runtime, and the name and extension of the file will only be used to save and load the INI data.