BASIC8
Not enough ratings
Making Standalone Player as Web Page
By Tony Wang
Difficulty: everyone
Category: sharing, tool

The "HTML Maker" is a tool which makes standalone player with HTML components across browsers. The exported player bundle contains a specific disk, and can be played without installing any browser plugin.

It's very similar to Making Standalone Player as Executable Binary, so common usages are omitted in this page.
 
Rate  
Favorite
Favorited
Unfavorite
Experimental
The maker solution is still experimental, features might be changed in future.
Getting the HTML Maker
The "HTML Maker" is implemented as a regular disk. Subscribe to the disk on Workshop, then it will be mounted in your BASIC8 environment.
Making
See Making Standalone Player as Executable Binary for common usages.

Besides, check "WASM" for a WebAssembly exporting.

Exported directory will be put under the container directory of the source disk.

The content of the source disk will be packed into the "b8p.data" file.
Distributing
The "HTML Maker" disk is a freeware. You can do whatever you want to with exported bundles, including copying, sharing with others, re-selling to marketplaces, etc.

Exported bundle contains a simple HTML page, JavaScript program, packed disk and optional WebAssembly code, and runs across browsers.

All the "b8p.*" files in the "html" directory are required for further distributing, the "play.html" is a simple shell page, you can customize it as you wish.

Use the prebuilt:


instead of the relative path:

b8p.js
for a minimum asm.js build (not for WebAssembly).
Running
It requires HTML5 capability to run exported (asm.js) player. And or requires WebAssembly capability according to your exporting option.

Some browsers don't allow CORS (Cross-Origin Resource Sharing[en.wikipedia.org]) from a local storage URL, this technology is used to load the exported "b8p.data" file. Therefore you might get a blank or infinite loading screen with these browsers when running it directly from local disk. There are several solutions:

  • Enable the developer tool (menu, panel or whatever), then "Disable Cross-Origin Restrictions", this works for Safari, etc. export without checking "WASM" also for better compatibility
  • Use browsers that support it instead, such as Firefox, Edge, etc.
  • Host the exported content under a web server, for instance the portable Mongoose[cesanta.com] server, or any actual cloud server
Storage
Web based player also supports file accessing, persistence, etc. But it works as a sandbox rather than having the right to access your hard drive directly.

Notice that web based only saves persistence data by the PERSIST statement when:

  1. Losts focus (switch to other application or browser tab)
  2. Passes every few seconds periodically
Limitations
An exported web based player can either run through pure JavaScript (asm.js) or WebAssembly, the former offers better compatibility, the latter is often smaller and runs faster but some old browsers don't support this technology. It's suggested to use the former solution, and try out WebAssembly if you need performance over compatibility.

Some features are limited in the web based player for speed maximization and target size minimization. Including:

  • Supports up to 2 gamepads
  • Archive (ZIP), DATABASE, IMAGE, IO, JSON, NETWORK, WEB libraries are not implemented
  • OPEN_FILE_DIALOG, OPEN_FILE_DIALOG, PICK_DIRECTORY_DIALOG functions are not implemented
  • USE_SOUND_FONT, REGEX functions are not implemented
  • PLAY is implemented but consumes lots of CPU time
  • Other native dedicated functions such as clipboard, are implemented within the JavaScript sandbox

Web based player only supports automatic updating mode, set by the UPDATE_WITH function, it must be invoked once per program. Manual SYNC won't affect rendering. Unlike native players, web based runs in single thread at 60 FPS.

As the running environment is massively different from native executables, it's recommended to continually export and test your program for best appearance and behaviour, if browser is supposed to be the main target.