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

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.