dranke/microw8
1
0
Fork 0
mirror of https://github.com/exoticorn/microw8.git synced 2026-01-20 19:26:43 +01:00
Code Issues Projects Releases Wiki Activity

Deploy exoticorn/microw8 to exoticorn/microw8:gh-pages

Browse Source
This commit is contained in:
GitHub Actions
2022-01-10 22:53:02 +00:00
commit 18acce932c
13 changed files with 988 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
404.html Normal file
View File

@@ -0,0 +1,3 @@
<!doctype html>
<title>404 Not Found</title>
<h1>404 Not Found</h1>

406
docs/index.html Normal file
View File

@@ -0,0 +1,406 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Docs | </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="box-shadow">
<a href="https:&#x2F;&#x2F;exoticorn.github.io&#x2F;microw8&#x2F;">
<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:&#x2F;&#x2F;exoticorn.github.io&#x2F;microw8&#x2F;docs&#x2F;">Docs</a>
<a class="nav-item subtitle-text" href="https:&#x2F;&#x2F;github.com&#x2F;exoticorn&#x2F;microw8">Github</a>
</nav>
</header>
<main>
<div class="toc">
<div class="toc-sticky">
<div class="toc-item">
<a class="subtext" href="https://exoticorn.github.io/microw8/docs/#overview">Overview</a>
</div>
<div class="toc-item">
<a class="subtext" href="https://exoticorn.github.io/microw8/docs/#memory-map">Memory map</a>
</div>
<div class="toc-item">
<a class="subtext" href="https://exoticorn.github.io/microw8/docs/#api">API</a>
</div>
<div class="toc-item-child">
<a class="subtext" href="https://exoticorn.github.io/microw8/docs/#math"><small>- Math</small></a>
</div>
<div class="toc-item-child">
<a class="subtext" href="https://exoticorn.github.io/microw8/docs/#random"><small>- Random</small></a>
</div>
<div class="toc-item-child">
<a class="subtext" href="https://exoticorn.github.io/microw8/docs/#graphics"><small>- Graphics</small></a>
</div>
<div class="toc-item-child">
<a class="subtext" href="https://exoticorn.github.io/microw8/docs/#input"><small>- Input</small></a>
</div>
<div class="toc-item-child">
<a class="subtext" href="https://exoticorn.github.io/microw8/docs/#text-output"><small>- Text output</small></a>
</div>
<div class="toc-item">
<a class="subtext" href="https://exoticorn.github.io/microw8/docs/#the-uw8-tool">The uw8 tool</a>
</div>
<div class="toc-item-child">
<a class="subtext" href="https://exoticorn.github.io/microw8/docs/#uw8-run"><small>- uw8 run</small></a>
</div>
<div class="toc-item-child">
<a class="subtext" href="https://exoticorn.github.io/microw8/docs/#uw8-pack"><small>- uw8 pack</small></a>
</div>
<div class="toc-item-child">
<a class="subtext" href="https://exoticorn.github.io/microw8/docs/#uw8-filter-exports"><small>- uw8 filter-exports</small></a>
</div>
<div class="toc-item">
<a class="subtext" href="https://exoticorn.github.io/microw8/docs/#distribution">Distribution</a>
</div>
<div class="toc-item-child">
<a class="subtext" href="https://exoticorn.github.io/microw8/docs/#base64-encoded-link"><small>- Base64 encoded link</small></a>
</div>
<div class="toc-item-child">
<a class="subtext" href="https://exoticorn.github.io/microw8/docs/#url-parameter"><small>- url parameter</small></a>
</div>
<div class="toc-item-child">
<a class="subtext" href="https://exoticorn.github.io/microw8/docs/#html-uw8"><small>- .html + .uw8</small></a>
</div>
<div class="toc-item-child">
<a class="subtext" href="https://exoticorn.github.io/microw8/docs/#itch-io"><small>- Itch.io</small></a>
</div>
<div class="toc-item">
<a class="subtext" href="https://exoticorn.github.io/microw8/docs/#uw8-format">.uw8 format</a>
</div>
<div class="toc-item-child">
<a class="subtext" href="https://exoticorn.github.io/microw8/docs/#format-version-00"><small>- Format version 00:</small></a>
</div>
<div class="toc-item-child">
<a class="subtext" href="https://exoticorn.github.io/microw8/docs/#format-version-01"><small>- Format version 01:</small></a>
</div>
<div class="toc-item-child">
<a class="subtext" href="https://exoticorn.github.io/microw8/docs/#format-version-02"><small>- Format version 02:</small></a>
</div>
</div>
</div>
<div class="content text">
<div class="heading-text">Docs</div>
<h1 id="overview">Overview</h1>
<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</code> <code>memory</code> and has a maximum size of 256kb (4 pages).</p>
<h1 id="memory-map">Memory map</h1>
<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>
<h1 id="api">API</h1>
<p>All API functions are found in the <code>env</code> module.</p>
<h2 id="math">Math</h2>
<p>These all do what you'd expect them to. All angles are in radians.</p>
<h3 id="fn-asin-x-f32-f32">fn asin(x: f32) -&gt; f32</h3>
<p>Returns the arcsine of <code>x</code>.</p>
<h3 id="fn-acos-x-f32-f32">fn acos(x: f32) -&gt; f32</h3>
<p>Returns the arccosine of <code>x</code>.</p>
<h3 id="fn-atan-f32-f32">fn atan(f32) -&gt; f32</h3>
<p>Returns the arctangent of <code>x</code>.</p>
<h3 id="fn-atan2-y-f32-y-f32-f32">fn atan2(y: f32, y: f32) -&gt; f32</h3>
<p>Returns the angle between the point <code>(x, y)</code> and the positive x-axis.</p>
<h3 id="fn-sin-angle-f32-f32">fn sin(angle: f32) -&gt; f32</h3>
<p>Returns the sine of <code>angle</code>.</p>
<h3 id="fn-tan-angle-f32-f32">fn tan(angle: f32) -&gt; f32</h3>
<p>Returns the tangent of <code>angle</code>.</p>
<h3 id="fn-cos-angle-f32-f32">fn cos(angle: f32) -&gt; f32</h3>
<p>Returns the cosine of <code>angle</code>.</p>
<h3 id="fn-exp-x-f32-f32">fn exp(x: f32) -&gt; f32</h3>
<p>Returns <code>e^x</code>.</p>
<h3 id="fn-log-x-f32-f32">fn log(x: f32) -&gt; f32</h3>
<p>Returns the natural logarithmus of <code>x</code>. Ie. <code>e^log(x) == x</code>.</p>
<h3 id="fn-pow-x-f32-y-f32-f32">fn pow(x: f32, y: f32) -&gt; f32</h3>
<p>Returns <code>x^y</code>.</p>
<h3 id="fn-fmod-x-f32-y-f32-f32">fn fmod(x: f32, y: f32) -&gt; f32</h3>
<p>Returns <code>x</code> modulo <code>y</code>, ie. <code>x - floor(x / y) * y</code>. This means the sign of the result of <code>fmod</code> is the same as <code>y</code>.</p>
<h2 id="random">Random</h2>
<p>MicroW8 provides a pretty good PRNG, namely xorshift64*. It is initialized to a constant seed at each startup, so if you
want to vary the random sequence you'll need to provide a seed yourself.</p>
<h3 id="fn-random-i32">fn random() -&gt; i32</h3>
<p>Returns a (pseudo-)random 32bit integer.</p>
<h3 id="fn-randomf-f32">fn randomf() -&gt; f32</h3>
<p>Returns a (pseudo-)random float equally distributed in <code>[0,1)</code>.</p>
<h3 id="fn-randomseed-seed-i32">fn randomSeed(seed: i32)</h3>
<p>Seeds the PRNG with the given seed. The seed function is reasonably strong so that you can use</p>
<pre style="background-color:#ffffff;color:#202020;"><code><span>randomSeed(index);
</span><span>random()
</span></code></pre>
<p>as a cheap random-access PRNG (aka noise function).</p>
<h2 id="graphics">Graphics</h2>
<p>The default palette can be seen <a href="../v0.1pre4#AgKaeeOuwg5gCKvFIeiitEwMpUI2rymEcu+DDB1vMu9uBoufvUxIr4Y5p4Jj2ukoNO4PE7QS5cN1ZyDMCRfSzYIGZxKlN2J6NKEWK7KVPk9wVUgn1Ip+hsMinWgEO8ETKfPuHoIa4kjI+ULFOMad7vd3rt/lh1Vy9w+R2MXG/7T61d3c7C6KY+eQNS0eW3ys4iU8R6SycuWZuuZ2Sg3Qxp826s+Kt+2qBojpzNOSoyFqyrVyYMTKEkSl0BZOj59Cs1hPm5bq0F1MmVhGAzMhW9V4YeAe">here</a>. (Press Z on the keyboard to switch to palette.)</p>
<p>The palette can be changed by writing 32bit rgba colors to addresses 0x13000-0x13400.</p>
<p>The drawing functions are sub-pixel accurate where applicable (line, circle). Pixel centers lie halfway between integer
coordinates. Ie. the top-left pixel covers the area <code>0,0 - 1,1</code>, with <code>0.5,0.5</code> being the pixel center.</p>
<h3 id="fn-cls-color-i32">fn cls(color: i32)</h3>
<p>Clears the screen to the given color index. Also sets the text cursor to <code>0, 0</code> and disables graphical text mode.</p>
<h3 id="fn-setpixel-x-i32-y-i32-color-i32">fn setPixel(x: i32, y: i32, color: i32)</h3>
<p>Sets the pixel at <code>x, y</code> to the given color index.</p>
<h3 id="fn-getpixel-x-i32-y-i32-i32">fn getPixel(x: i32, y: i32) -&gt; i32</h3>
<p>Returns the color index at <code>x, y</code>. Returns <code>0</code> if the given coordinates are outside the screen.</p>
<h3 id="fn-hline-left-i32-right-i32-y-i32-color-i32">fn hline(left: i32, right: i32, y: i32, color: i32)</h3>
<p>Fills the horizontal line <code>[left, right), y</code> with the given color index.</p>
<h3 id="fn-rectangle-x-f32-y-f32-w-f32-h-f32-color-i32">fn rectangle(x: f32, y: f32, w: f32, h: f32, color: i32)</h3>
<p>Fills the rectangle <code>x,y - x+w,y+h</code> with the given color index.</p>
<p>(Sets all pixels where the pixel center lies inside the rectangle.)</p>
<h3 id="fn-circle-cx-f32-cy-f32-radius-f32-color-i32">fn circle(cx: f32, cy: f32, radius: f32, color: i32)</h3>
<p>Fills the circle at <code>cx, cy</code> and with <code>radius</code> with the given color index.</p>
<p>(Sets all pixels where the pixel center lies inside the circle.)</p>
<h3 id="fn-rectangle-outline-x-f32-y-f32-w-f32-h-f32-color-i32">fn rectangle_outline(x: f32, y: f32, w: f32, h: f32, color: i32)</h3>
<p>Draws a one pixel outline on the inside of the given rectangle.</p>
<p>(Draws the outermost pixels that are still inside the rectangle area.)</p>
<h3 id="fn-circle-outline-cx-f32-cy-f32-radius-f32-color-i32">fn circle_outline(cx: f32, cy: f32, radius: f32, color: i32)</h3>
<p>Draws a one pixel outline on the inside of the given circle.</p>
<p>(Draws the outermost pixels that are still inside the circle area.)</p>
<h3 id="fn-line-x1-f32-y1-f32-x2-f32-y2-f32-color-i32">fn line(x1: f32, y1: f32, x2: f32, y2: f32, color: i32)</h3>
<p>Draws a line from <code>x1,y1</code> to <code>x2,y2</code> in the given color index.</p>
<h2 id="input">Input</h2>
<p>MicroW8 provides input from a gamepad with one D-Pad and 4 buttons, or a keyboard emulation thereof.</p>
<p>The buttons are numbered</p>
<table><thead><tr><th>Button</th><th>Keyboard</th><th>Index</th></tr></thead><tbody>
<tr><td>Up</td><td>Arrow-Up</td><td>0</td></tr>
<tr><td>Down</td><td>Arrow-Down</td><td>1</td></tr>
<tr><td>Left</td><td>Arrow-Left</td><td>2</td></tr>
<tr><td>Right</td><td>Arrow-Right</td><td>3</td></tr>
<tr><td>A</td><td>Z</td><td>4</td></tr>
<tr><td>B</td><td>X</td><td>5</td></tr>
<tr><td>X</td><td>A</td><td>6</td></tr>
<tr><td>Y</td><td>S</td><td>7</td></tr>
</tbody></table>
<p>In addition to using the API functions below, the gamepad state can also be read as a bitfield of
pressed buttons at address 0x44. 0x48 holds the buttons that were pressed last frame.</p>
<h3 id="fn-isbuttonpressed-btn-i32-i32">fn isButtonPressed(btn: i32) -&gt; i32</h3>
<p>Returns whether the buttons with the given index is pressed this frame.</p>
<h3 id="fn-isbuttontriggered-btn-i32-i32">fn isButtonTriggered(btn: i32) -&gt; i32</h3>
<p>Returns whether the given button is newly pressed this frame.</p>
<h3 id="fn-time-f32">fn time() -&gt; f32</h3>
<p>Returns the time in seconds since the start of the cart.</p>
<p>The integer time in milliseconds can also be read at address 0x40.</p>
<h2 id="text-output">Text output</h2>
<p>The default font can be seen <a href="../v0.1pre4#AgKaeeOuwg5gCKvFIeiitEwMpUI2rymEcu+DDB1vMu9uBoufvUxIr4Y5p4Jj2ukoNO4PE7QS5cN1ZyDMCRfSzYIGZxKlN2J6NKEWK7KVPk9wVUgn1Ip+hsMinWgEO8ETKfPuHoIa4kjI+ULFOMad7vd3rt/lh1Vy9w+R2MXG/7T61d3c7C6KY+eQNS0eW3ys4iU8R6SycuWZuuZ2Sg3Qxp826s+Kt+2qBojpzNOSoyFqyrVyYMTKEkSl0BZOj59Cs1hPm5bq0F1MmVhGAzMhW9V4YeAe">here</a>.</p>
<p>The font can be changed by writing 1bpp 8x8 characters to addresses 0x13400-0x13c00.</p>
<p>All text printing is done at the cursor position, which is advanced after printing each character.
The cursor is not visible.</p>
<p>Text printing can operate in two modes - normal and graphics. After startup and after <code>cls()</code> normal mode is active.</p>
<h3 id="normal-mode">Normal mode</h3>
<p>In normal mode, text printing is constrained to an 8x8 character grid. Setting the cursor position to <code>2,3</code> will start printing at pixel coordinates <code>16,24</code>.</p>
<p>When printing characters, the full 8x8 pixels are painted with the text and background colors according to the character graphics in the font.</p>
<p>When moving/printing past the left or right border the cursor will automatically wrap to the previous/next line. When moving/printing past the upper/lower border, the screen will be scrolled down/up 8 pixels, filling the fresh line with the background color.</p>
<h3 id="graphics-mode">Graphics mode</h3>
<p>In graphics mode, text can be printed to any pixel position, the cursor position is set in pixel coordinates.</p>
<p>When printing characters only the foreground pixels are set, the background is &quot;transparent&quot;.</p>
<p>Moving/printing past any border does not cause any special operation, the cursor just goes off-screen.</p>
<h3 id="control-chars">Control chars</h3>
<p>Characters 0-31 are control characters and don't print by default. They take the next 0-2 following characters as parameters.
Avoid the reserved control chars, they are currently NOPs but their behavior can change in later MicroW8 versions.</p>
<table><thead><tr><th>Code</th><th>Parameters</th><th>Operation</th></tr></thead><tbody>
<tr><td>0</td><td>-</td><td>Nop</td></tr>
<tr><td>1</td><td>char</td><td>Print char (including control chars)</td></tr>
<tr><td>2-3</td><td>-</td><td>Reserved</td></tr>
<tr><td>4</td><td>-</td><td>Switch to normal mode</td></tr>
<tr><td>5</td><td>-</td><td>Switch to graphics mode</td></tr>
<tr><td>6-7</td><td>-</td><td>Reserved</td></tr>
<tr><td>8</td><td>-</td><td>Move cursor left</td></tr>
<tr><td>9</td><td>-</td><td>Move cursor right</td></tr>
<tr><td>10</td><td>-</td><td>Move cursor down</td></tr>
<tr><td>11</td><td>-</td><td>Move cursor up</td></tr>
<tr><td>12</td><td>-</td><td>do <code>cls(background_color)</code></td></tr>
<tr><td>13</td><td>-</td><td>Move cursor to the left border</td></tr>
<tr><td>14</td><td>color</td><td>Set the background color</td></tr>
<tr><td>15</td><td>color</td><td>Set the text color</td></tr>
<tr><td>16-23</td><td>-</td><td>Reserved</td></tr>
<tr><td>24</td><td>-</td><td>Swap text/background colors</td></tr>
<tr><td>25-30</td><td>-</td><td>Reserved</td></tr>
<tr><td>31</td><td>x, y</td><td>Set cursor position (*)</td></tr>
</tbody></table>
<p>(*) In graphics mode, the x coordinate is doubled when using control char 31 to be able to cover the whole screen with one byte.</p>
<h3 id="fn-printchar-char-i32">fn printChar(char: i32)</h3>
<p>Prints the character in the lower 8 bits of <code>char</code>. If the upper 24 bits are non-zero, right-shifts <code>char</code> by 8 bits and loops back to the beginning.</p>
<h3 id="fn-printstring-ptr-i32">fn printString(ptr: i32)</h3>
<p>Prints the zero-terminated string at the given memory address.</p>
<h3 id="fn-printint-num-i32">fn printInt(num: i32)</h3>
<p>Prints <code>num</code> as a signed decimal number.</p>
<h3 id="fn-settextcolor-color-i32">fn setTextColor(color: i32)</h3>
<p>Sets the text color.</p>
<h3 id="fn-setbackgroundcolor-color-i32">fn setBackgroundColor(color: i32)</h3>
<p>Sets the background color.</p>
<h3 id="fn-setcursorposition-x-i32-y-i32">fn setCursorPosition(x: i32, y: i32)</h3>
<p>Sets the cursor position. In normal mode <code>x</code> and <code>y</code> are multiplied by 8 to get the pixel position, in graphics mode they are used as is.</p>
<h1 id="the-uw8-tool">The <code>uw8</code> tool</h1>
<h2 id="uw8-run"><code>uw8 run</code></h2>
<h2 id="uw8-pack"><code>uw8 pack</code></h2>
<h2 id="uw8-filter-exports"><code>uw8 filter-exports</code></h2>
<h1 id="distribution">Distribution</h1>
<h2 id="base64-encoded-link">Base64 encoded link</h2>
<h2 id="url-parameter">url parameter</h2>
<h2 id="html-uw8"><code>.html</code> + <code>.uw8</code></h2>
<h2 id="itch-io">Itch.io</h2>
<h1 id="uw8-format"><code>.uw8</code> format</h1>
<p>The first byte of the file specifies the format version:</p>
<h2 id="format-version-00">Format version <code>00</code>:</h2>
<p>This file is simply a standard WebAssembly module</p>
<h2 id="format-version-01">Format version <code>01</code>:</h2>
<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>() -&gt; void</code> and an export section that exports
the first function in the file under the name <code>upd</code>.</p>
<h2 id="format-version-02">Format version <code>02</code>:</h2>
<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>
</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>

209
index.html Normal file
View File

@@ -0,0 +1,209 @@
<!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:&#x2F;&#x2F;exoticorn.github.io&#x2F;microw8&#x2F;">
<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:&#x2F;&#x2F;exoticorn.github.io&#x2F;microw8&#x2F;docs&#x2F;">Docs</a>
<a class="nav-item subtitle-text" href="https:&#x2F;&#x2F;github.com&#x2F;exoticorn&#x2F;microw8">Github</a>
</nav>
</header>
<div class="hero">
<div>
<section>
<h1 class="text-center heading-text">A WebAssembly based fantasy console</h1>
</section>
<a href="v0.1pre5">
<div class="demonstration-gif" style="width:640px;height:512px;background-color:black"></div>
</a>
</div>
<div class="explore-more text"
onclick="document.getElementById('features').scrollIntoView({behavior: 'smooth'})">
Explore More ⇩
</div>
</div>
<main>
<div class="toc">
<div class="toc-sticky">
<div class="toc-item">
<a class="subtext" href="https://exoticorn.github.io/microw8/#about">About</a>
</div>
<div class="toc-item">
<a class="subtext" href="https://exoticorn.github.io/microw8/#specs">Specs</a>
</div>
<div class="toc-item">
<a class="subtext" href="https://exoticorn.github.io/microw8/#examples">Examples</a>
</div>
<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/#tooling">Tooling</a>
</div>
</div>
</div>
<div class="content text">
<div id="features" class="heading-text">Overview</div>
<h2 id="about">About</h2>
<p>MicroW8 is a WebAssembly based fantasy console inspired by the likes of <a href="https://tic80.com/">TIC-80</a>, <a href="https://wasm4.org/">WASM-4</a> and <a href="https://www.lexaloffle.com/pico-8.php">PICO-8</a>.</p>
<p>The initial motivation behind MicroW8 was to explore whether there was a way to make WebAssembly viable for size-coding. (Size coding being the art of creating tiny (often &lt;= 256 bytes) graphical effects and games.) The available examples so far are all in this space, however, I very carefully made sure that all design decisions make sense from the point of view of bigger projects as well.</p>
<h2 id="specs">Specs</h2>
<ul>
<li>Screen: 320x240, 256 colors, 60Hz</li>
<li>Modules: Up to 256KB (WASM)</li>
<li>Memory: 256KB</li>
<li>Gamepad input (D-Pad + 4 Buttons)</li>
</ul>
<h2 id="examples">Examples</h2>
<ul>
<li><a href="v0.1pre5#AgwvgP+M59snqjl4CMKw5sqm1Zw9yJCbSviMjeLUdHus2a3yl/a99+uiBeqZgP/2jqSjrLjRk73COMM6OSLpsxK8ugT1kuk/q4hQUqqPpGozHoa0laulzGGcahzdfdJsYaK1sIdeIYS9M5PnJx/Wk9H+PvWEPy2Zvv7I6IW7Fg==">Fireworks</a> (127 bytes): Some fireworks to welcome 2022.</li>
<li><a href="v0.1pre5#AgyfpZ80wkW28kiUZ9VIK4v+RPnVxqjK1dz2BcDoNyQPsS2g4OgEzkTe6jyoAfFOmqKrS8SM2aRljBal9mjNn8i4fP9eBK+RehQKxxGtJa9FqftvqEnh3ez1YaYxqj7jgTdzJ/WAYVmKMovBT1myrX3FamqKSOgMsNedLhVTLAhQup3sNcYEjGNo8b0HZ5+AgMgCwYRGCe//XQOMAaAAzqDILgmpEZ/43RKHcQpHEQwbURfNQJpadJe2sz3q5FlQnTGXQ9oSMokidhlC+aR/IpNHieuBGLhFZ2GfnwVQ0geBbQpTPA==">Skip Ahead</a> (229 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 &amp; 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>
<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>
<li><a href="https://exoticorn.github.io/microw8/v0.1pre5">v0.1pre5</a></li>
</ul>
<h2 id="tooling">Tooling</h2>
<p>WARNING: severely out of date. The <code>uw8</code> binary includes a lot of the tool features below.</p>
<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>
</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>

1
juice.css Normal file
View File

@@ -0,0 +1 @@
.text-center{text-align:center}.pos-absolute{right:0;left:0;position:absolute}.box-shadow{box-shadow:0 2px 10px 2px #ddd}.heading-text{font-family:"Fira Sans", sans-serif;font-size:32px;font-weight:600;padding:10px 0 25px 0;color:var(--primary-text-color)}h1,.title-text{font-family:"Fira Sans", sans-serif;font-size:25px;font-weight:500;color:var(--primary-text-color);border-left:var(--primary-color) 8px solid;padding-left:10px}h2,.subtitle-text{font-family:"Fira Sans", sans-serif;font-size:20px;font-weight:500;color:var(--primary-text-color)}.text{font-family:"Fira Sans", sans-serif;font-size:18px;font-weight:400;line-height:26px;letter-spacing:0.2px;color:var(--primary-text-color)}.subtext{font-family:"Fira Sans", sans-serif;font-size:16px;font-weight:400;letter-spacing:0.1px}.content{padding:0 40px;display:flex;flex-direction:column;overflow-x:auto}.content pre{overflow-x:auto;padding:1.25em 1.5em;white-space:pre;word-wrap:normal;background-color:white;color:#4a4a4a;font-size:.875em;font-family:monospace}.content code{background-color:white;color:#4a4a4a;font-size:.875em;font-weight:normal;padding:0.25em 0.5em;font-family:monospace}.content pre code{padding:0}.content a{color:var(--primary-link-color)}.content a:hover{text-decoration:underline}.content blockquote{border-left:#e2dede 8px solid;margin:0;background-color:#f2f1f0;padding:0 20px}body{padding:0;margin:0;box-sizing:border-box;background-color:var(--secondary-color);display:flex;flex-direction:column;min-height:100vh}a{text-decoration:none}ul{margin-top:0.5rem}ul>li{padding:0.3rem 0}p>img{width:100%;height:auto}header{background-color:var(--primary-color);color:black;padding:20px 50px;display:flex;align-items:center;justify-content:space-between}.logo{font-family:"Alfa Slab One", serif;font-size:32px;color:var(--primary-text-color);display:flex;align-items:center;margin:0 40px}.logo img{width:60px;margin:0 25px}.nav-item{margin:0 10px;text-decoration:none;font-size:18px;font-weight:bold}.nav-item:hover{color:#000;text-decoration:underline}.hero{display:flex;align-items:center;justify-content:space-evenly;height:100vh;background-color:var(--primary-color);overflow-x:hidden;padding:0 40px}.hero .explore-more{position:absolute;bottom:20px;cursor:pointer}main{display:flex;padding:50px 100px;flex-grow:1}main .toc{max-width:260px;min-width:240px}main .toc-item{padding:10px 20px;color:#424242}main .toc-item a,main .toc-item-child a{color:var(--secondary-text-color)}main .toc-item a:hover,main .toc-item-child a:hover{cursor:pointer;text-decoration:underline}main .toc-item a.active,main .toc-item-child a.active{color:var(--toc-highlight-text-color)}main .toc-item-child{padding:0 30px 5px;color:#424242}.toc-sticky{border-radius:3px;border-top:5px solid var(--primary-color);background-color:white;position:sticky;position:-webkit-sticky;position:-moz-sticky;position:-ms-sticky;position:-o-sticky;top:10px;padding:10px 0 20px;max-height:100vh;overflow:auto}footer{padding:50px;display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:#202020;color:#fcfcfc}footer a{color:#fcfcfc;text-decoration:underline}@media screen and (min-width: 1280px){.content{max-width:60%;min-width:800px}}@media screen and (max-width: 768px){header{padding:10px 30px;flex-direction:column;align-items:center;justify-content:center}.logo{font-size:28px;margin:10px}.logo img{width:45px;margin:0 10px 0 0}.nav-item{margin:0 5px;font-size:14px}.hero{padding:40px 30px}main{padding:30px}.content{padding:0}.explore-more,.toc{display:none}}

349
normalize.css vendored Normal file
View File

@@ -0,0 +1,349 @@
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
========================================================================== */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
*/
html {
line-height: 1.15; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers.
*/
body {
margin: 0;
}
/**
* Render the `main` element consistently in IE.
*/
main {
display: block;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/* Grouping content
========================================================================== */
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/* Text-level semantics
========================================================================== */
/**
* Remove the gray background on active links in IE 10.
*/
a {
background-color: transparent;
}
/**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none; /* 1 */
text-decoration: underline; /* 2 */
text-decoration: underline dotted; /* 2 */
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/**
* Remove the border on images inside links in IE 10.
*/
img {
border-style: none;
}
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
margin: 0; /* 2 */
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input { /* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select { /* 1 */
text-transform: none;
}
/**
* Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Correct the padding in Firefox.
*/
fieldset {
padding: 0.35em 0.75em 0.625em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box; /* 1 */
color: inherit; /* 2 */
display: table; /* 1 */
max-width: 100%; /* 1 */
padding: 0; /* 3 */
white-space: normal; /* 1 */
}
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
vertical-align: baseline;
}
/**
* Remove the default vertical scrollbar in IE 10+.
*/
textarea {
overflow: auto;
}
/**
* 1. Add the correct box sizing in IE 10.
* 2. Remove the padding in IE 10.
*/
[type="checkbox"],
[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/**
* Remove the inner padding in Chrome and Safari on macOS.
*/
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/* Interactive
========================================================================== */
/*
* Add the correct display in Edge, IE 10+, and Firefox.
*/
details {
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/* Misc
========================================================================== */
/**
* Add the correct display in IE 10+.
*/
template {
display: none;
}
/**
* Add the correct display in IE 10.
*/
[hidden] {
display: none;
}

3
robots.txt Normal file
View File

@@ -0,0 +1,3 @@
User-agent: *
Allow: /
Sitemap: https://exoticorn.github.io/microw8/sitemap.xml

9
sitemap.xml Normal file
View File

@@ -0,0 +1,9 @@
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://exoticorn.github.io/microw8/</loc>
</url>
<url>
<loc>https://exoticorn.github.io/microw8/docs/</loc>
</url>
</urlset>

3
uw8/skipahead.uw8 Normal file
View File

@@ -0,0 +1,3 @@
#<23><>I<EFBFBD>ޮaV<>p<EFBFBD>v[VLc<4C><63><1C><>^<>ȯ<>C<EFBFBD><43>M[<5B><>5<EFBFBD><35>$<24>S<EFBFBD>.}<15><>a'<27>c<EFBFBD><63><EFBFBD>b<EFBFBD><62>V-=X<><58><EFBFBD>Lguu8<75><06><><EFBFBD>
9<EFBFBD>\<5C><>ݯ<EFBFBD>h<EFBFBD><<3C>4?zk<7A><6B>.<2E><02><>8<10><>&/<2F>@<40>6ֿ<36><D6BF>;8<>{.<2E>8_<38><5F>^<5E><><EFBFBD>t/kp|<7C><>n<0F><>,'<27>>1<>0^4=@ <0C><>{NI
<EFBFBD>b<EFBFBD>_=<3D>U`Y<><59><EFBFBD>=<3D>\<5C><>O٦<4F><D9A6><EFBFBD>bxh&<26><>g<>tO<74><4F>; <09>#<23>@H<><48><EFBFBD><EFBFBD><EFBFBD><EFBFBD>z<EFBFBD>Ζ<EFBFBD><CE96><EFBFBD>+<2B>Xw<58><11><>

1
v0.1pre1/index.html Normal file
View File

File diff suppressed because one or more lines are too long

1
v0.1pre2/index.html Normal file
View File

File diff suppressed because one or more lines are too long

1
v0.1pre3/index.html Normal file
View File

File diff suppressed because one or more lines are too long

1
v0.1pre4/index.html Normal file
View File

File diff suppressed because one or more lines are too long

1
v0.1pre5/index.html Normal file
View File

File diff suppressed because one or more lines are too long