Jump to: navigation, search

HTML5 Runtime


HTML5 Image.jpg
Status Released
Release Date 2014
Available for Clickteam Fusion 2.5 Free Edition Clickteam Fusion 2.5 Standard Clickteam Fusion 2.5 Developer
Purchase Expanded Capabilities: Purchase the stand-alone version from the Clickteam Shop Purchase the Steam version
Links About the HTML5 Exporter

HTML5 Export Module Details
HTML5 Export Module 2.5 Support Forum
HTML5 Export Module 2.5 Owner's Lounge

Fusion HTML5.png

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.


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 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".

  • FileSystem Folder.png MyApp
    • FileSystem HTML.png index.html -- Your runtime is executed here.
    • FileSystem Folder.png resources -- Your assets are stored here.
      • FileSystem Audio.png 9999.mp3 -- Silence required in order to play sounds on some devices.
      • FileSystem File.png MyApp.cc1
      • FileSystem File.png MyApp.cch
      • FileSystem Image.png fire1D.png -- For virtual joysticks: P1 pushed down.
      • FileSystem Image.png fire1U.png -- For virtual joysticks: P1 unpushed.
      • FileSystem Image.png fire2D.png -- For virtual joysticks: P2 pushed down.
      • FileSystem Image.png fire2U.png -- For virtual joysticks: P2 unpushed.
      • FileSystem HTML.png index.html -- Redirects to Clickteam's HTML5 webpage.
      • FileSystem Image.png joyback.png -- For virtual joysticks: Beneath the stick.
      • FileSystem Image.png joyfront.png -- For virtual joysticks: Top of the stick.
      • FileSystem Image.png M0001*.png -- All your image assets.
      • FileSystem Audio.png 0000*.wav -- All your audio assets in WAV format.
      • FileSystem Audio.png 0000*.ogg -- All your audio assets in OGG format.
    • FileSystem Folder.png src -- Your source code is stored here.
      • FileSystem Script.png Runtime.js -- Compiled source code.
      • FileSystem HTML.png 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)
  • BitBalloon This is a web hosting platform for hosting static sites and apps. HTTPS is enabled. You create a personal account (You must have a Mozilla Persona or GitHub account.) It is free for _.bitballoon.com URLs and paid for other domain URLs (_.mydomain.com). 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 Mozilla Persona or GitHub account.) There are free & paid plans. You can embed your apps in iframes. (Instructions)
  • Dropbox Pro or Business You can upload your project to the Public folder and share links. You can also embed your apps in iframes. (Compare plans)

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


Available Movements

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. 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 to the Bug Tracker should it be easily reproduced.

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


Contributors to this page

Advaith (38.9%), Lh37 (61.1%)