How to build an HTML5 project

• You are working on your application
  You should choose the “HTML5 Development” build type. This option will create a folder with your application and all the code to make it work. It includes all the available extensions at the time of build : you will be able to work on your application and add as many extensions as you want under Clickteam Fusion 2.5, and it will still work fine.
  The best feature of this kind of construction, is the “Build & Run” feature. This option is available in the tool bar on the top of Clickteam Fusion 2.5 window. Click this button, and Clickteam Fusion 2.5 will build your application instantly, launch an internal local web-server and open your default web-browser on the game you just built. The delay before actually seing your application work in the browser is very short, usually under one second. Note: building the mosaics of images may take some time for complex applications. If this is the case, we suggest you to un-check the “Group images in mosaic files” property in the HTML5 properties of the application : the images of your application will be saved as individual files, faster.
  The “HTML5 Development” build type should only be used with the “Build & run” option (you will get an error if you try to launch such an application from a web-server. “HTML5 Final Project” is available to you to create applications to upload to a server.
• You want to release your application
  Choose the “HTML5 Final Project” build type : Clickteam Fusion 2.5 will save the runtime code limited to the extensions only used in your application and compile the code. The runtime code will be smaller, highly compressed and unreadable.
  This option is the one to use if you want to test your application on a web-server. As the runtime code is compressed, uploading the files to the server will also be a lot faster.

What does the Build HTML5 option save?

When you build your game as a HTML5 project, Clickteam Fusion 2.5 :

• Creates a folder with the name of the project in the location you indicated
• Creates a “src” folder in which it saves the Javascript code of the HTML5 runtime (the name of this folder can be modified in the HTML5 properties of the application).
  The “HTML5 Development” build type saves a full, complete and readable Javascript source code, as multiple .js files. This solution should be used during developement as it is a lot faster (compiling the code takes a few seconds), thus enabling you to test your application much faster.
  The “HTML5 Final project” option saves a compressed version of the runtime code, in one .js file.
• Saves your application as “name_of_application.cch” in a “resources” folder. You can change the name of this folder in the HTML5 properties of the application.
• The images used in your application are also saved in the “resources” folder. The images are saved as PNG files. If the “Group images in mosaic files” property (available in the HTML5 properties of the application) is checked, the graphics of your application will be pasted in larger images, reducing the time necessary to load your application from a server. They are saved as individual files if the property is not checked (as said before, unchecking this option may be faster during development).
• The sounds are saved as “OGG” and “M4A”, “OGG” and “MP3”, or “OGG” and “WAV” files, depending on the operating system you use, in the resource folder. The goal being to ensure that the sounds work on every available browsers.
  If your operating system is Windows 7 or 8, sounds will be saved in “OGG” and “M4A” format. If you use an older version of Windows, we recommend you to download and install the LAME MP3 encoder (lame_enc.dll) in the Clickteam Fusion 2.5 Data\Runtime directory. If lame_enc.dll is in the Clickteam Fusion 2.5 Data\Runtime directory and you use Windows 2000, XP, or Vista, Clickteam Fusion 2.5 will save the sounds in “OGG” and “MP3” format. Search for lame_enc.dll with your Internet search engine, you’ll easily find it. If you do not use Windows 7 or 8 and lame_enc.dll is not in your Data\Runtime directory, Clickteam Fusion 2.5 will save the files in “OGG” and “WAV” format and sounds might not work in Internet Explorer.
• Saves a “html” file allowing you to launch your application in a click. The html file produced by a final build can be copied to your own server. You can prevent Clickteam Fusion 2.5 from saving this file (this might become handy at the end of development), however please note that the Build & Run option will launch the browser to this file : this option will not work if it is not present in the project folder.

How to run your HTML5 project.

Modern browsers do not accept loading of data from the local file system. The Clickteam Fusion 2.5 HTML5 runtime needs to load the “CCH” file in order to understand and play the application. As a result, you cannot simply drag & drop the html file of your project onto a web browser (please note that certain versions of Firefox will accept this).
The best way to see your application working in a web browser is to use the “Build & Run” option of Clickteam Fusion 2.5. This option will first build your application in the destination folder, then start an internal local web-server (totally transparent to you), and launch the default web browser pointing to your application.
If you want to test your application on multiple web-browsers, first use the “Build & Run” option to start your application in your default web-browser, copy the link that is displayed in it, then paste it in the browser of your choice. The local web-server will remain active until you close Clickteam Fusion 2.5. You can keep the browser open and rebuild your application in the same folder (using the File / Build option from the menu, or the Build command in the context menu of the application) : you will only have to refresh the page in the browser (with F5) to see the changes.