mirror of
https://github.com/exoticorn/microw8.git
synced 2026-01-20 19:26:43 +01:00
342 lines
13 KiB
HTML
342 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title></title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
|
|
<link rel="icon" type="image/png" href="/favicon.ico">
|
|
|
|
<style>
|
|
:root {
|
|
/* Primary theme color */
|
|
--primary-color: #202024;
|
|
/* Primary theme text color */
|
|
--primary-text-color: #808070;
|
|
/* Primary theme link color */
|
|
--primary-link-color: #8080a0;
|
|
/* Secondary color: the background body color */
|
|
--secondary-color: #e0e0e8;
|
|
--secondary-text-color: #1a1818;
|
|
/* Highlight text color of table of content */
|
|
--toc-highlight-text-color: #d46e13;
|
|
}
|
|
</style>
|
|
<link href="https://fonts.googleapis.com/css?family=Alfa+Slab+One&display=swap" rel="stylesheet">
|
|
<link href="https://fonts.googleapis.com/css?family=Fira+Sans:400,500,600&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="/normalize.css">
|
|
<link rel="stylesheet" href="https://exoticorn.github.io/microw8/juice.css">
|
|
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
|
|
<header class="pos-absolute" style="background-color: transparent">
|
|
|
|
|
|
<a href="https://exoticorn.github.io/microw8/">
|
|
<div class="logo">
|
|
<img src="https://exoticorn.github.io/microw8/microw8.svg" alt="logo">
|
|
MicroW8
|
|
</div>
|
|
</a>
|
|
|
|
<nav>
|
|
|
|
|
|
|
|
<a class="nav-item subtitle-text" href="https://github.com/exoticorn/microw8">Github</a>
|
|
|
|
|
|
</nav>
|
|
|
|
</header>
|
|
|
|
<div class="hero">
|
|
|
|
<div>
|
|
<section>
|
|
<h1 class="text-center heading-text">A WebAssembly based sizecoding platform</h1>
|
|
</section>
|
|
<a href="v0.1pre4">
|
|
<div class="demonstration-gif" style="width:640px;height:512px;background-color:black"></div>
|
|
</a>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<main>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="toc">
|
|
<div class="toc-sticky">
|
|
|
|
<div class="toc-item">
|
|
<a class="subtext" href="https://exoticorn.github.io/microw8/#versions">Versions</a>
|
|
</div>
|
|
|
|
|
|
<div class="toc-item">
|
|
<a class="subtext" href="https://exoticorn.github.io/microw8/#spec">Spec</a>
|
|
</div>
|
|
|
|
|
|
<div class="toc-item-child">
|
|
<a class="subtext" href="https://exoticorn.github.io/microw8/#memory-map"><small>- Memory map</small></a>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="toc-item">
|
|
<a class="subtext" href="https://exoticorn.github.io/microw8/#uw8-format">.uw8 format</a>
|
|
</div>
|
|
|
|
|
|
<div class="toc-item-child">
|
|
<a class="subtext" href="https://exoticorn.github.io/microw8/#format-version-00"><small>- Format version 00:</small></a>
|
|
</div>
|
|
|
|
<div class="toc-item-child">
|
|
<a class="subtext" href="https://exoticorn.github.io/microw8/#format-version-01"><small>- Format version 01:</small></a>
|
|
</div>
|
|
|
|
<div class="toc-item-child">
|
|
<a class="subtext" href="https://exoticorn.github.io/microw8/#format-version-02"><small>- Format version 02:</small></a>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="toc-item">
|
|
<a class="subtext" href="https://exoticorn.github.io/microw8/#tooling">Tooling</a>
|
|
</div>
|
|
|
|
|
|
<div class="toc-item">
|
|
<a class="subtext" href="https://exoticorn.github.io/microw8/#examples">Examples</a>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="content text">
|
|
|
|
<div id="features" class="heading-text">Overview</div>
|
|
<h2 id="versions">Versions</h2>
|
|
<ul>
|
|
<li><a href="https://exoticorn.github.io/microw8/v0.1pre1">v0.1pre1</a></li>
|
|
<li><a href="https://exoticorn.github.io/microw8/v0.1pre2">v0.1pre2</a></li>
|
|
<li><a href="https://exoticorn.github.io/microw8/v0.1pre3">v0.1pre3</a></li>
|
|
<li><a href="https://exoticorn.github.io/microw8/v0.1pre4">v0.1pre4</a></li>
|
|
</ul>
|
|
<h2 id="spec">Spec</h2>
|
|
<p>MicroW8 loads WebAssembly modules with a maximum size of 256kb. You module needs to export
|
|
a function <code>fn upd()</code> which will be called once per frame.
|
|
After calling <code>upd</code> MicroW8 will display the 320x240 8bpp framebuffer located
|
|
at offset 120 in memory with the 32bpp palette located at 0x13000.</p>
|
|
<p>The memory has to be imported as <code>"env" "memory"</code> and has a maximum size of 256kb (4 pages).</p>
|
|
<p>Other imports provided by the platform, also all in module <code>env</code>:</p>
|
|
<ul>
|
|
<li>
|
|
<p><code>fn acos(f32) -> f32</code></p>
|
|
</li>
|
|
<li>
|
|
<p><code>fn asin(f32) -> f32</code></p>
|
|
</li>
|
|
<li>
|
|
<p><code>fn atan(f32) -> f32</code></p>
|
|
</li>
|
|
<li>
|
|
<p><code>fn atan2(f32, f32) -> f32</code></p>
|
|
</li>
|
|
<li>
|
|
<p><code>fn cos(f32) -> f32</code></p>
|
|
</li>
|
|
<li>
|
|
<p><code>fn exp(f32, f32) -> f32</code></p>
|
|
</li>
|
|
<li>
|
|
<p><code>fn log(f32) -> f32</code></p>
|
|
</li>
|
|
<li>
|
|
<p><code>fn sin(f32) -> f32</code></p>
|
|
</li>
|
|
<li>
|
|
<p><code>fn tan(f32) -> f32</code></p>
|
|
</li>
|
|
<li>
|
|
<p><code>fn pow(f32) -> f32</code></p>
|
|
</li>
|
|
<li>
|
|
<p><code>fn fmod(f32, f32) -> f32</code></p>
|
|
</li>
|
|
<li>
|
|
<p><code>fn random() -> i32</code></p>
|
|
</li>
|
|
<li>
|
|
<p><code>fn randomf() -> f32</code></p>
|
|
</li>
|
|
<li>
|
|
<p><code>fn randomSeed(i32)</code></p>
|
|
</li>
|
|
<li>
|
|
<p><code>fn cls(color: i32)</code></p>
|
|
</li>
|
|
<li>
|
|
<p><code>fn setPixel(x: i32, y: i32, color: i32)</code></p>
|
|
</li>
|
|
<li>
|
|
<p><code>fn getPixel(x: i32, y: i32) -> i32</code></p>
|
|
</li>
|
|
<li>
|
|
<p><code>fn hline(left: i32, right: i32, y: i32, color: i32)</code></p>
|
|
</li>
|
|
<li>
|
|
<p><code>fn rectangle(x1: f32, y1: f32, x2: f32, y2: f32, color: i32)</code></p>
|
|
</li>
|
|
<li>
|
|
<p><code>fn circle(cx: f32, cy: f32, radius: f32, color: i32)</code></p>
|
|
</li>
|
|
<li>
|
|
<p><code>fn line(x1: f32, y1: f32, x2: f32, y2: f32, color: i32)</code></p>
|
|
</li>
|
|
<li>
|
|
<p><code>fn time() -> f32</code></p>
|
|
</li>
|
|
<li>
|
|
<p><code>fn isButtonPressed(btn: i32) -> i32</code></p>
|
|
</li>
|
|
<li>
|
|
<p><code>fn isButtonTriggered(btn: i32) -> i32</code></p>
|
|
</li>
|
|
<li>
|
|
<p><code>fn printChar(char: i32)</code></p>
|
|
</li>
|
|
<li>
|
|
<p><code>fn printString(ptr: i32)</code></p>
|
|
</li>
|
|
<li>
|
|
<p><code>fn printInt(num: i32)</code></p>
|
|
</li>
|
|
<li>
|
|
<p><code>fn setTextColor(color: i32)</code></p>
|
|
</li>
|
|
<li>
|
|
<p><code>fn setBackgroundColor(color: i32)</code></p>
|
|
</li>
|
|
<li>
|
|
<p><code>fn setCursorPosition(x: i32, y: i32)</code></p>
|
|
</li>
|
|
</ul>
|
|
<h3 id="memory-map">Memory map</h3>
|
|
<pre style="background-color:#ffffff;color:#202020;"><code><span>00000-00040: user memory
|
|
</span><span>00040-00044: time since module start in ms
|
|
</span><span>00044-0004c: gamepad state
|
|
</span><span>0004c-00078: reserved
|
|
</span><span>00078-12c78: frame buffer
|
|
</span><span>12c78-13000: reserved
|
|
</span><span>13000-13400: palette
|
|
</span><span>13400-13c00: font
|
|
</span><span>13c00-14000: reserved
|
|
</span><span>14000-40000: user memory
|
|
</span></code></pre>
|
|
<h2 id="uw8-format"><code>.uw8</code> format</h2>
|
|
<p>The first byte of the file specifies the format version:</p>
|
|
<h4 id="format-version-00">Format version <code>00</code>:</h4>
|
|
<p>This file is simply a standard WebAssembly module</p>
|
|
<h4 id="format-version-01">Format version <code>01</code>:</h4>
|
|
<p>The rest of this file is the same as a WebAssembly
|
|
module with the 8 byte header removed. This module
|
|
can leave out sections which are then taken from
|
|
a base module provided by MicroW8.</p>
|
|
<p>You can generate this base module yourself using
|
|
<code>uw8-tool</code>. As a quick summary, it provides all function
|
|
types with up to 5 parameters (i32 or f32) where the
|
|
<code>f32</code> parameters always preceed the <code>i32</code> parameters.
|
|
Then it includes all imports that MicroW8 provides,
|
|
a function section with a single function of type
|
|
<code>() -> void</code> and an export section that exports
|
|
the first function in the file under the name <code>upd</code>.</p>
|
|
<h4 id="format-version-02">Format version <code>02</code>:</h4>
|
|
<p>Same as version <code>01</code> except everything after the first byte is compressed
|
|
using a <a href="https://github.com/exoticorn/upkr">custom LZ compression scheme</a>.</p>
|
|
<h2 id="tooling">Tooling</h2>
|
|
<p>The <a href="https://github.com/WebAssembly/wabt">Web Assembly Binary Toolkit</a> includes
|
|
a few useful tools, eg. <code>wat2wasm</code> to compile the WebAssemby text format to binary
|
|
wasm and <code>wasm2wat</code> to disassemble wasm binaries.</p>
|
|
<p>If you don't like the look of the <code>.wat</code> text format, you might want to take a
|
|
look at <a href="https://github.com/exoticorn/curlywas">CurlyWas</a>, a curly-braces infix
|
|
syntax for WebAssembly.</p>
|
|
<p>Once you have a size-efficient <code>.wasm</code> file, you can use <a href="https://github.com/exoticorn/microw8/tree/master/uw8-tool">uw8-tool</a>
|
|
(currently included in the MicroW8 repository) to strip off sections of the
|
|
WebAssembly module that are provided by the MicroW8 platform.</p>
|
|
<p>Writing code for MicroW8 in C, Rust, AssemblyScript etc. should absolutely
|
|
possible but no examples are provided, yet.</p>
|
|
<h2 id="examples">Examples</h2>
|
|
<ul>
|
|
<li><a href="v0.1pre4#AiP94km33q5hBFbBcKl2W1ZMY67wHByUz15/qRHIr71Dvq8bTVux/DXZzSTKU5MufRXxnGEn6mOul4dil/5WLT1Y+Y/4TGd1E3U4rQaxlpcKObxc5YLdr4xo6jyBND96a569LoECv6Q4EIqxJi+3QPE21r/++js41XsBLr44X/O2XpP3kHQva3B8o6duD5WkLCf7PhsxjTBeND1ADIaJe05JCrBim18RPY9VYFmltqQ9gVzbxE/ZpojR/GJ4aCbx0hRn73RPhpA7Cd4jk0AVSOeRx+7kuHrLzpaeqeYWK5pYd/4Rv+8=">Skip Ahead</a> (230 bytes): A port of my <a href="http://tic80.com/play?cart=1735">TIC-80 256byte game</a> from LoveByte'21</li>
|
|
<li><a href="v0.1pre4#Ag95rdCB5Ww5NofyQaKF4P1mrNRso4azgiem4hK99Gh8OMzSpFq3NsNDo7O7pqln10D11l9uXr/ritw7OEzKwbEfCdvaRnS2Z0Kz0iDEZt/gIqOdvFmxsL1MjPQ4XInPbUJpQUonhQq29oP2omFabnQxn0bzoK7mZjcwc5GetHG+hGajkJcRr8oOnjfCol8RD+ha33GYtPnut+GLe4ktzf5UxZwGs6oT9qqC61lRDakN">OhNoAnotherTunnel</a> (177 bytes): A port of my <a href="http://tic80.com/play?cart=1871">entry</a> in the Outline'21 bytebattle final</li>
|
|
<li><a href="v0.1pre4#AqL8HeK1M9dn2nWNIF5vaq/Vh64pMt5nJIFoFKpBMPUsGtDtpqjo1JbT9LzPhAxCqJ7Yh4TA6oTGd4xhLowf+cWZMY73+7AZmfXJJsBi4cej/hH+4wlAgxFIrnOYnr/18IpnZbsHf0eGm1BhahX74+cVR0TRmNQmYC7GhCNS3mv/3MJn74lCj7t28aBJPjEZhP9fGXdG2u5Egh/Tjdg=">Technotunnel</a> (158 bytes): A port of my <a href="https://tic80.com/play?cart=1873">entry</a> in the Outline'21 bytebattle quater final</li>
|
|
<li><a href="v0.1pre4#AgKaeeOuwg5gCKvFIeiitEwMpUI2rymEcu+DDB1vMu9uBoufvUxIr4Y5p4Jj2ukoNO4PE7QS5cN1ZyDMCRfSzYIGZxKlN2J6NKEWK7KVPk9wVUgn1Ip+hsMinWgEO8ETKfPuHoIa4kjI+ULFOMad7vd3rt/lh1Vy9w+R2MXG/7T61d3c7C6KY+eQNS0eW3ys4iU8R6SycuWZuuZ2Sg3Qxp826s+Kt+2qBojpzNOSoyFqyrVyYMTKEkSl0BZOj59Cs1hPm5bq0F1MmVhGAzMhW9V4YeAe">Font & Palette</a>: Just a simple viewer for the default font and palette.</li>
|
|
<li><a href="v0.1pre2#AQrDAQHAAQIBfwp9A0AgAUEAsiABQcACb7JDmhkgQ5MiBCAEIASUIAFBwAJtQfgAa7IiBSAFlJKRIgaVIgcgByAAskHQD7KVIgIQAEPNzEw/lCIDlCAHIAeUIAOUIAOUQQGykiADIAOUk5GSIgiUIAOTQQqylCACkiIJqCAFIAaVIAiUQQqylCACkiIKqHMgCEEyspQgBpUiCyACkkEUspSocUEFcbJBArIgC5OUQRaylJeoOgB4IAFBAWoiAUGA2ARIDQALCw==">Technotunnel B/W</a> (199 bytes uncompressed): A port of my <a href="https://tic80.com/play?cart=1873">entry</a> in the Outline'21 bytebattle quater final (older MicroW8 version with monochrome palette)</li>
|
|
<li><a href="https://exoticorn.github.io/microw8/v0.1pre2#AQovAS0BAX8DQCABIAFBwAJvIABBCm1qIAFBwAJtczoAeCABQQFqIgFBgNgESA0ACws=">XorScroll</a> (50 bytes uncompressed): A simple scrolling XOR pattern. Fun fact: This is the pre-loaded effect when entering a bytebattle.</li>
|
|
<li><a href="https://exoticorn.github.io/microw8/v0.1pre2#AQp7AXkCAX8CfUEgEA0DQCABskEEspUiAkECspUgALJBiCeylSIDQQWylJIQAEEBspJBoAGylCACQQOylSADQQSylJIQAEEBspJB+ACylCADQRGylCACQQKylJIQAEECspJBELKUIAFBAmxBP2oQEiABQQFqIgFBP0gNAAsL">CircleWorm</a> (126 bytes uncompressed): Just a test for the circle fill function.</li>
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</main>
|
|
|
|
|
|
|
|
</body>
|
|
<script>
|
|
function highlightNav(heading) {
|
|
let pathname = location.pathname;
|
|
document.querySelectorAll(".toc a").forEach((item) => {
|
|
item.classList.remove("active");
|
|
});
|
|
document.querySelector(".toc a[href$='" + pathname + "#" + heading + "']").classList.add("active");
|
|
}
|
|
|
|
let currentHeading = "";
|
|
window.onscroll = function () {
|
|
let h = document.querySelectorAll("h1,h2,h3,h4,h5,h6");
|
|
let elementArr = [];
|
|
|
|
h.forEach(item => {
|
|
if (item.id !== "") {
|
|
elementArr[item.id] = item.getBoundingClientRect().top;
|
|
}
|
|
});
|
|
elementArr.sort();
|
|
for (let key in elementArr) {
|
|
if (!elementArr.hasOwnProperty(key)) {
|
|
continue;
|
|
}
|
|
if (elementArr[key] > 0 && elementArr[key] < 300) {
|
|
if (currentHeading !== key) {
|
|
highlightNav(key);
|
|
currentHeading = key;
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
</html>
|