Expose A Portable Web Runtime?

[grantshandy]

Recently I wrote wasm4-playground which uses a slightly modified version of the main web runtime. The site had to be built with this repository as a git submodule so it can create its own "frontend" to the runtime by directly importing source from the git submodule. This works fine, but it's not very good practice and it's not very easy to do for one-off creations.

Right now I'm writing a blog post that uses WASM-4 and I had the idea of putting interactive versions of the game inline with the document. I think this could become a pretty common use of WASM-4, and implementing it wouldn't be that hard.

Here's an idea I have for what an API might look like:

let game = new Wasm4Game({
    width: number,
    height: number,
    elem: HtmlElement,
    cartUrl: string,
    cartBase64: string,
    cartBytes: Uint8Array,
    captureFocus: boolean,
    enableReset: boolean,
    silenceLogging: boolean,
});

game.start();
game.stop();
game.reset();

game.loadCartUrl(string);
game.loadCartBase64(string);
game.loadCartBytes(Uint8Array);

Adding this would enable someone to make a page on wasm4.org which allows you to just upload your own .wasm file and play it right there on the site without it being on its own page in the "Play" section. This would also enable a lot more experimentation with embedding WASM-4 in websites.

When it's done it could be hosted as a minified JS lib on wasm4.org or more likely published as an NPM package so people can use one of the many CDNs that mirror it.

Does this sound like something that belongs here? If there's enough demand I can write it myself and create a PR.

[aduros]

This sounds like a good idea, but we'd need to change the runtime to remove event listeners in order to unload cleanly. Currently we never unload because games on wasm4.org are hosted in an iframe.

The iframe embedding is the easiest way to embed a game on a blog or other site, though it hasn't been well documented. You can simply add this tag to your site:

<iframe src="https://wasm4.org/embed/#?url=https://yoursite.com/yourcart.wasm" allow="fullscreen; gamepad; autoplay" frameborder="0"></iframe>

We should document this in the Distribution guide and maybe add an "Embed" button for each game on the Play section.

We can also add extra params to the iframe URL for common settings (mute audio, disable menu, etc).