Status	Released
Release Date	2014 2014
Available for
Links	Purchase Support View on Steam About the HTML5 Exporter HTML5 Exporter Details HTML5 Export Module 2.5 Owner’s Lounge

The HTML5 Runtime exports creations for use any HTML5 browser that supports the Canvas element. The file needs to be placed on a web server to work as the creation cannot be locally ran through the file system. The free but limited version of the exporter is bundled with all versions of Clickteam Fusion 2.5 as of build 284. The free edition only exports to this limited version.

Contents

• Build Types
  • HTML5 Application (limited version)
  • HTML5 Development
  • HTML5 Final Project
• Structure
• Running on a local system
• Running on a external server
• Free Version
• Debugging

Build Types

There are three build types for HTML5:

HTML5 Application (limited version)

See Free Version.

HTML5 Development

This bundles the source code for all the extensions within Runtime.js, which will accelerate the time required to build the creation but use more disk space. The events used in your creation (the “source code”) is also compiled with no obscuration, allowing for debugging or modification. This should not be uploaded to a live production server, as this could potentially allow others to steal your source code.

HTML5 Final Project

The build time will take slightly longer, but will only result in obscured runtime code and the assets required for your creation. This is intended for final exports as it prevents hackers from stealing your source or modifying runtime behaviour.

Structure

The exporter creates files for use on a web server only. If the creation is attempted to run on a local computer (via the file system) than the web browser will display an error as it is not designed to do so.

Suppose the name of the creation is “MyApp”.

• MyApp
  • index.html - Your runtime is executed here.
  • resources - Your assets are stored here.
    • 9999.mp3 - Silence required in order to play sounds on some devices.
    • MyApp.cc1
    • MyApp.cch
    • fire1D.png - For virtual joysticks: P1 pushed down.
    • fire1U.png - For virtual joysticks: P1 unpushed.
    • fire2D.png - For virtual joysticks: P2 pushed down.
    • fire2U.png - For virtual joysticks: P2 unpushed.
    • index.html - Redirects to Clickteam’s HTML5 webpage.
    • joyback.png - For virtual joysticks: Beneath the stick.
    • joyfront.png - For virtual joysticks: Top of the stick.
    • M0001*.png - All your image assets.
    • 0000*.wav - All your audio assets in WAV format.
    • 0000*.ogg - All your audio assets in OGG format.
  • src - Your source code is stored here.
    • Runtime.js - Compiled source code.
    • index.html - Redirects to Clickteam’s HTML5 webpage.

Running on a local system

As you cannot run index.html directly from the file system, you will need a web server and access it via a URL. There are a few various methods.

• By pressing Build & Run within Fusion.
  • This runs a Lacewing-powered web server on your local system, opening your web browser.
  • This option is not compatible for Mac or Wine users.
• Using python’s web server module.
  • Python must be installed on your system.
  • Open a command prompt with your creation folder as the working directory.
  • Type this command to host on port 8080: python -m SimpleHTTPServer 8080
• Running your own local web server
  • Apache - Windows, Mac, Linux, and others.
  • Microsoft Internet Information Services (IIS) - Windows only.
  • Personal Web Sharing - Mac only.

Running on a external server

There are many services available that will allow you to host your HTML5 creations, some free and others paid.

• PKSoft Shared FTP Server: This is for Fusion users to host their games and is intended for testing purposes. Other users can see your files, because it is a shared login. You cannot embed your apps. (Instructions)
• Netlify: This is a web hosting platform for hosting static sites and apps. HTTPS is enabled. You create a personal account (You can also use a GitHub, GitLab, or Bitbucket account.) There are [free & paid plans](https://www.netlify.com/pricing/. You can embed your apps in iframes. (Instructions)

Free Version

The free version comes bundled with Fusion 2.5 build 284 and later. It is also the only exporter available for Clickteam Fusion 2.5 Free, which features more editor limitations.

Runtime Limitations

• Each application cannot contain more than 3 frames.
• Each frame cannot contain more than 100 backdrop objects and 30 other objects.
• Each frame cannot contain more than 150 events.

Available Objects

• Active
• Backdrop
• Button
• Combo Box
• Counter
• Edit Box
• fgl (Advertisements)
• Hi-Score
• HTML5
• List
• Lives
• Physics - Engine
• Physics - Fan
• Physics - Magnet
• Physics - Particles
• Physics - Rope and Chain
• Question & Answer
• Quick Backdrop
• Score
• ScreenZoom
• String
• Sub-Application

Available Movements

• Clickteam Circular
• Clickteam Invaders
• Physics - Static
• Physics - 8 directions
• Physics - Bouncing ball
• Physics - Background
• Physics - Platform
• Physics - Spring
• Physics - Spaceship
• Physics - Race car

Information from Clickteam

Debugging

Most major web browsers feature “Developer Tools” that allow debugging and inspection of code. This can usually be activated by pressing F12 or Ctrl+Shift+I (command+option+I on macOS). The web console can be invaluable to identify why a project is not loading or a trace back of a crash or freeze.

For instance, a common error that may occur is:

Uncaught ReferenceError: Runtime is not defined

This is because the Runtime.js file is not accessible. This could be due to the fact it’s non-existent, is pointing to the wrong file (eg. RuntimeDev.js) or there is a permissions error on the web server.

If the HTML5 runtime promptly halts and freezes due to an error, this could be as a result of a bug in an extension or object, which can be reported on the forum should it be easily reproduced.

If no buttons show up and you cannot click on active objects, upgrade to build 285.1.