Clickteam Fusion 2.5 – HTML5 Runtime Distribution Agreement
This agreement replaces the standard Clickteam Fusion 2.5 Runtime Distribution Agreement in the case of HTML5 applications. In order to distribute your HTML5 application, your must agree to the Clickteam Fusion 2.5 – HTML5 Runtime Distribution agreement. Some parts of this agreement depend on the version of Clickteam Fusion 2.5 you use, Standard or Developer. Please read the sections that correspond to your version. These sections are marked either “Standard version only” or “Developer version only”. The Clickteam Fusion 2.5 – HTML5 Runtime Distribution Agreement is a legal agreement that allows users who have created applications with Clickteam Fusion 2.5 and the HTML5 exporter to distribute their applications outside of their organizations. Standard version only: this agreement includes requirements that affect your application. Including the logo (Standard version only) In order to be able to distribute your application, you must include in the software, in the introduction, end or credits screen, the logo “Made with Clickteam Fusion 2.5”. You will find the logo in the MadeWithMMF2.png file in the Clickteam Fusion 2.5 Data/Runtime/HTML5 directory. If you use the Developer version of Clickteam Fusion 2.5 you do not need to include this logo. What standards must an application meet to distribute the Runtime player? None. Clickteam will not in any way restrict distribution of developers’ products. Does the new application have to be sent to Clickteam for approval? No, you do not need to send your application to Clickteam. After you have built your application with Clickteam Fusion 2.5 and included the logo (Standard version only), you can begin distributing your application. However we would like very much you to advise us when you release a new application/game created with the Clickteam Fusion 2.5 HTML5 exporter. Clickteam Fusion 2.5 – HTML5 Runtime Distribution Agreement WHEREAS Licensee has purchased a legal copy of “Clickteam Fusion 2.5” and its HTML5 exporter. PARTIES (1) The “Licensor“: Clickteam, 7 rue Ernest Renan, 92130 Issy-les-Moulineaux, FRANCE (and any of its subsidiaries, agents, successors and assigns). (2) The “Licensee“: the party executing this Agreement. RECITALS A. This license supplements and amends the Software license issued by the Licensor to the License. B. The Licensee has developed an HTML5 Application that the Licensee desires to publish or utilize, commercially or as freeware application. C. The Licensor is willing to permit the Licensee to utilize the Application upon the terms set out in this Agreement. OPERATIVE TERMS 1. DEFINITIONS 1.1 “Runtime” means the portion of the Software required in order for the Application to operate on hardware on which the Software is not resident. 1.2 “Application” means any HTML5 files built with Clickteam Fusion 2.5. 1.3 “Logo” means the Made With Clickteam Fusion 2.5 logo in the form specified by the Licensor. 2. GRANT 2.1 The Licensor grants to the Licensee a non-exclusive, non-transferable, perpetual, worldwide, royalty-free license to incorporate object code copies of the Runtime in to or with the Application and to copy, distribute, display and perform the Application subject to the terms and conditions of this Agreement. 2.2 The Licensee shall not copy, distribute, display or perform the Runtime (or part thereof) except as part of the Application. 3. LICENSEES COVENANTS AND INDEMNITY 3.1 The Licensee hereby indemnifies the Licensor against all costs, claims, actions or demands arising out of the marketing promotion or distribution of the Application. 4. LIMITS TO LICENSOR’S LIABILITY 4.1 The Licensor accepts no responsibility for the quality of the Application, that shall be the sole responsibility of the Licensee. 4.2 It is the responsibility of the Licensee to evaluate the Software and to apply the Software only for uses that the Licensee has evaluated and considered appropriate, and the Licensor accepts no responsibility for the efficiency of the Software in the production of the Application. 5. MARKINGS AND NOTICES (Standard version only) Ignore this section if you use the Developer version of Clickteam Fusion 2.5. 5.1 The Licensee agrees to include the Logo in the introduction, end or credits screen of the Application. 5.2 The Licensor hereby grants to the Licensee a non-exclusive, non-transferable, perpetual, worldwide, royalty-free license to use the Logo on any copy of the Application and all marketing materials used for the commercial exploitation of the Application. 6. TERMINATION 6.1 The Licensee may terminate this Agreement, at any time, by ceasing to distribute the Application that includes the Runtime. 6.2 The Licensor may terminate this Agreement in the event that the Licensee materially defaults in the performance of any material provisions of this Agreement and the Licensee fails to cure such default (whether remediable or not) within 30 days after notice of such default is given to the Licensee by the Licensor. 7. GENERAL 1. The licenses granted to the Licensee in this Agreement are personal to the Licensee, and the Licensee shall not assign, transfer or sublicense this Agreement (or any right granted herein) in any manner without the prior written consent of the Licensor. 2. French Law shall apply to this Agreement and the parties hereby submit to the exclusive jurisdiction of the French courts. SCHEDULE A Ignore this section if you use the Developer version of Clickteam Fusion 2.5. GUIDELINES FOR USING THE MADE WITH Clickteam Fusion 2.5 LOGO (Standard version only) Trademarks of Clickteam are valuable assets. In order to protect the value of these assets, Clickteam must maintain control over the manner in which its trademarks are used. These guidelines have been established to assist you. If these guidelines are not followed, Clickteam may terminate your right to use the trademarks. Clickteam will provide authorized users with artwork of the logo. This artwork may not be altered in any way. You may not display the logo in a manner which suggests that your product is a Clickteam product, or in a manner which suggests that Clickteam or the logo are a part of your product name. When displayed, the logo cannot be larger than or more prominent than your product name, trademark, logo or trade name. When displayed, the logo
Differences between HTML5 and Windows applications
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.
HTML5 – Inserting a preloader
The HTML5 runtime allows you to insert a preloader in your application. Preloaders are displayed when the images and sounds are loaded from the Internet. If you check the “Include preloader” checkbox, a default preloader is created. (Developer version only) You can choose the kind of preloader you want to use in your application with the next property : Type Indicates whether to use a simple customizable image preloader (Image), or a fully customizable preloader consisting of a frame of your application. The Type property is defined as an Image A default but customizable preloader is created, displaying a growing circle above an image. As a default, a logo of Clickteam Fusion 2.5 is used. This preloader is conceived to work for different sizes of the application’s window. The following properties are available to customize this preloader: Image file. This property contains the path to an image (“PNG”, “GIF” or “JPG”). This image is displayed in the preloader. It is automatically centered in the window, so if the image has the same size as the window, it will lay on the entire surface of the window. You can of course use the alpha channel in your image, this will reveal the background of the window. Color of progress circle. This property contains the color of the progress circle. The preloader indicates the percentage of downloaded data by displaying a growing arc of circle, starting in the bottom and growing anti-clockwise. X coordinate of progress circle. This property contains the X coordinate of the center of the growing circle. Y coordinate of progress circle. This property contains the Y coordinate of the center of the growing circle. Radius of progress circle. This property contains the radius of the growing circle. Thickness of progress circle. This property contains the width of the progress circle. (Developer version only) The Type property is defined as a frame from the application In this case Clickteam Fusion 2.5 will automatically include another frame of the application as a preloader. Frame from this application This property contains the number of the frame to use as a preloader. How to create a preloader frame? Create a new frame Drop any object you want in this frame Drop the HTML5 object in the frame. Under the event editor, this object contains two expressions that you can use in your preloader: Get total length, which returns the total length of the data to be loaded, and Get loaded length which returns the current loaded size. You should use these two values to display the progress indicator in your preloader page. The HTML5 object also contains a condition to detect if the frame runs as a preloader (“Is preloader“). A few things about preloader frames: The preloader does not take any input events into account, keys or mouse clicks will have no effect in a preloader. You should not detect the end of the download in your code. Just display the amount loaded. Do not end the application. Certain browsers load all the data at once : this means that the preloader will go from low (little amount of data loaded) to full (everything loaded) very quickly after a certain wait.
HTML5 specific properties
HTML5 applications have a number of specific properties, allowing you to tweak the way they work. Application properties Generate HTML file If checked, Clickteam Fusion 2.5 will save an html file (named after the name of your application) in the destination folder, so that you can load and launch your application. This html file is essential for the Build & Run option to work. This html file shows you a way to embed and display a Clickteam Fusion 2.5 application in a web page, and is fully commented. You may want to create your own version of this file. If you do so, uncheck this property, and it will not be erased on the next build. Group images in mosaic files If checked, all the different images that your application contains will be grouped in bigger images, called mosaics. This feature dramatically reduces the time necessary to load the graphics of your application. If your application contains a lot of images, the process of creating the mosaics can take some time. You may want to disable this property if the Build & Run option becomes too slow : all the images will be saved as individual files, and the building process will be faster. Do not forget to check this property again before releasing your application. Keep resources between frames If checked, Clickteam Fusion 2.5 will not release the images and sounds between each frame : they will not need to be reloaded the next time your application plays the same frame, thus accelerating the time necessary to enter the frame. Do not use this option if your application has to run on mobile devices, like tablets or phones, as this kind of device does not have as much memory as PCs. Run even if not focus If unchecked, your application will be paused as soon as the browser window looses the focus. If checked, your application will keep on working if the browser window looses the focus. Do not mute samples when application loses focus This property is located in the “Runtime options” page of the application properties. If the previous property is checked (the application will run even if it does not have the input focus), it indicates whether or not Clickteam Fusion 2.5 will stop the sounds when the application loses the focus. You can, for example, keep on playing the sounds with the application paused. Allow offline Allows the generation of an “appcache” file, saved beside the html file, that allows your application to work on the user’s computer even if his machine is not connected to the Internet. All the sounds, images and data are cached in the browser cache file when the user plays your application for the first time, and will be used if the machine is not connected. We suggest you to enable this option only at the end of the development, when your game is complete. Note that, in order for this option to work, the mime type “text/cache-manifest” must be defined on your server for the files ending by “.appcache”. Media folder Contains the directory where all the resources of your application will be saved when you build your project. This property can be empty, in this case all the data will be stored at the root of the project. Changing this property will automatically change the code contained in the html file Clickteam Fusion 2.5 generates. Please note that if you decide to change the directory, you will have to manually erase the previous directory in the build project folder. Source folder Contains the directory where the Javascript source code allowing your application to run is saved. The property can be empty, in this case the Javascript code will be saved at the root of the project’s folder. The same remark as above applies. Joystick images This property contains the images of the touch joystick. Refer to the Joystick property below for more information. Frame properties Each frame also contains some HTML5-specific properties. Display preloader. If a preloader has been defined for your application, this property indicates whether or not to display it for this frame. For a preloader to be displayed, the next two things must be satisfied : 1. The preloader must be defined in the application properties, 2. The display preloader property must be selected. Joystick Clickteam Fusion 2.5 can, when your application is used on a mobile device that has no keyboard, replace the key with a virtual joystick, or a joystick piloted by the accelerometers. The choice is made in a combo box : None No joystick is displayed. Touch joystick A virtual joystick is displayed on the left or right of the screen. Accelerometer joystick The joystick is controlled by the accelerometers of the device. Controlled by an extension You have to drop the “Joystick control” extension on your frame, and use this extension to display or not the joystick. Fire 1 button Displays the first joystick button. Fire 2 button Displays the second joystick button. left handed Reverses the position of the joystick and buttons for left-handed users.
Various considerations about HTML5 project
Clickteam Fusion 2.5 This page contains different chunks of information about the Clickteam Fusion 2.5 HTML5 exporter. Mouse-driven movement The mouse movement in HTML5 games is different from the normal mouse movement. The object is positionned just under the hidden mouse pointer. This implies that the mouse pointer must be above the play area for the object to move. How to keep your application small. Despite the speed of nowadays Internet connections, it is always good to keep the size of your application to a minimum. Here are a few hints to keep the size down: Do not use large backdrop images, but repeat smaller backdrop objects. A large image can be quite big, esspecially if it is complex. Even if the images are highly compressed, a big image will increase the size of the images saved along with your HTML5 application. Most of the time, the background of a game can be created by repeating smaller elements at different locations. Also do not forget the Motif option in the Quick Backdrop object. Use scaling and rotation. Active objects can be rotated and scaled. You should use this feature for as many objects as possible, thus reducing the amount of graphics in your file. Basically, you just create the animations of your object in the right direction, and then check the “Automatic rotations” property in the object’s runtime properties. Your object will be automatically rotated depending on the direction of the movement. A drawback of the rotation and scaling is speed. If your rotated object is involved in collision detections, a rotated and scaled mask must be created in memory to allow the collision system to work. Creating this mask can take some time, esspecially for big objects. Only experimentation will tell you if the process is not too long for your game, but basically the smaller the faster. Sound formats Clickteam Fusion 2.5 does its best to save the sounds so that they work on all the available browsers. The sounds are saved in two different formats. Your system is Windows 7 or 8 The sounds will be saved as “OGG” and “M4A” formats, ensuring a good sound experience on all the browsers available today. Your system is Windows XP, 2000, Vista 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 lame_enc.dll is not in your Data\Runtime directory and you use Windows Vista, XP or 2000, Clickteam Fusion 2.5 will save the files in “OGG” and “WAV” format and the sounds might not work in Internet Explorer. Sounds on iOS On iPhone, iPod and iPad (and certainly any new Apple portable platform to come), Apple restricts the way sounds are played on the device. An iOS device will not play any sound unless the sound has been created by a user interaction (understand a touch on the screen). Clickteam Fusion 2.5 does its best to cope with this restriction, and uses a special touch detector that will start the sounds after the first touch on the screen. The consequence is that your iOS HTML5 application will not play any sound until you touch the screen for the first time. After the first touch, the sound will be loaded as best as possible, and will start playing after a moment. Once a sound is loaded, it will play flawlessly on the device, but do not expect sounds to play immediately after the first touch : there will be a delay before the sound is played for the first time. Joystick The Clickteam Fusion 2.5 Joystick object is by default affected to the arrow keys, SHIFT and CONTROL. These keys will be active if your application is run on a computer with a keyboard. Clickteam Fusion 2.5 allows you to display a virtual joystick to be used on a mobile device. You only have to activate the “Virtual joystick” property in the properties of the frame, and this graphical joystick will be displayed on a mobile device. Switching to full screen To project the user’s machine, Web browsers impose restrictions to full screen : a Javascript application can only switch to full screen as a direct response from the user (a click). As a consequence, the “Change resolution” property has been disabled in the Application properties. You must, in order to switch to full screen, insert the Storyboard / Set full screen action in a event beginning by a Mouse click condition. You can, however, use the “Resize display to fill window size” property (in the Application properties) : your application will fill the entiere browser window, and appear full screen on tablets and telephones.
Building your application as HTML5 project
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
HTML5 Applications and Games
Clickteam Fusion 2.5 allows you to build your application as a HTML5 project that can be directly uploaded to a web server. An HTML5 application will work on modern web browsers, without any modification. This is the perfect modern way to distribute your game or application. Advantages of HTML5 applications The same file will work on any modern web browser, being on a PC, Mac, Linux machines or phone or tablet. Small size of the application : the code of the runtime is shrank to a minimal size of under 300Kb, which is very small for the speed of today’s networks. Furthermore, once loaded, the code of the runtime stays in the browser’s cache and is instantly loaded the next time. Applications run fast : on most PCs and on more and more tablets or phones, Javascript and HTML5 run faster and faster. You will be able to display a large number of objects and have a complex event structure : the HTML5 runtime will cope with it. Secure for the users : your application runs in a sandbox, a restricted area from where it is impossible to harm the user’s machine. Advantages of Clickteam Fusion 2.5 for creating HTML5 applications No need to program in Javascript. You can use Clickteam Fusion 2.5 visual programming system to create amazing games in a much simpler and faster way. The browsers make use of hardware acceleration as soon as it is available, allowing you to display a huge number of objects. Your application can contain a preloader to make people wait while your application is loading. The great majority of the conditions, actions and expressions available for the Windows runtime are available in the HTML5 runtime. A large number of extensions has been ported and the number is increasing on a regular basis. The Build & Run option of Clickteam Fusion 2.5 allows you to instantly test your application in its final state, within a browser, thanks to our internal local Web server.
