https://wasm4.org/docs/

1<!doctype html>
2<html lang="en" dir="ltr">
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width,initial-scale=1">
6<meta name="generator" content="Docusaurus v2.0.0-beta.4">
7<link rel="alternate" type="application/rss+xml" href="/blog/rss.xml" title="WASM-4 Blog RSS Feed">
8<link rel="alternate" type="application/atom+xml" href="/blog/atom.xml" title="WASM-4 Blog Atom Feed">
9<link rel="search" type="application/opensearchdescription+xml" title="WASM-4" href="/opensearch.xml"><title data-react-helmet="true">Introduction | WASM-4</title><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:url" content="https://wasm4.org/docs/"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:version" content="current"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-react-helmet="true" property="og:title" content="Introduction | WASM-4"><meta data-react-helmet="true" name="description" content="WASM-4 is a low-level fantasy game console for building small games with"><meta data-react-helmet="true" property="og:description" content="WASM-4 is a low-level fantasy game console for building small games with"><meta data-react-helmet="true" property="og:image" content="https://wasm4.org/img/logo.png"><meta data-react-helmet="true" name="twitter:image" content="https://wasm4.org/img/logo.png"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="canonical" href="https://wasm4.org/docs/"><link data-react-helmet="true" rel="alternate" href="https://wasm4.org/docs/" hreflang="en"><link data-react-helmet="true" rel="alternate" href="https://wasm4.org/docs/" hreflang="x-default"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><link rel="stylesheet" href="/assets/css/styles.2e198696.css">
10<link rel="preload" href="/assets/js/runtime~main.947e2340.js" as="script">
11<link rel="preload" href="/assets/js/main.792278bb.js" as="script">
12</head>
13<body>

14<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"dark")}()</script>

14<div id="__docusaurus">
15<div><a href="#" class="skipToContent_1oUP">Skip to main content</a></div><nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Navigation bar toggle" class="navbar__toggle clean-btn" type="button" tabindex="0"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/"><img src="/img/logo.svg" alt="WASM-4 Logo" class="themedImage_1VuW themedImage--light_3UqQ navbar__logo"><img src="/img/logo.svg" alt="WASM-4 Logo" class="themedImage_1VuW themedImage--dark_hz6m navbar__logo"><b class="navbar__title">WASM-4</b></a><a class="navbar__item navbar__link" href="/play">Play</a><a aria-current="page" class="navbar__item navbar__link navbar__link--active navbar__link--active" href="/docs/">Learn</a><a class="navbar__item navbar__link" href="/blog">Blog</a><a class="navbar__item navbar__link" href="/community">Community</a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/aduros/wasm4" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link header-github-link" aria-label="GitHub repository"></a><div class="searchBox_1Doo"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><span class="DocSearch-Button-Key"><svg width="15" height="15" class="DocSearch-Control-Key-Icon"><path d="M4.505 4.496h2M5.505 5.496v5M8.216 4.496l.055 5.993M10 7.5c.333.333.5.667.5 1v2M12.326 4.5v5.996M8.384 4.496c1.674 0 2.116 0 2.116 1.5s-.442 1.5-2.116 1.5M3.205 9.303c-.09.448-.277 1.21-1.241 1.203C1 10.5.5 9.513.5 8V7c0-1.57.5-2.5 1.464-2.494.964.006 1.134.598 1.24 1.342M12.553 10.5h1.953" stroke-width="1.2" stroke="currentColor" fill="none" stroke-linecap="square"></path></svg></span><span class="DocSearch-Button-Key">K</span></span></button></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div class="main-wrapper docs-wrapper doc-page"><div class="docPage_31aa"><button class="clean-btn backToTopButton_35hR" type="button" title="Scroll to top"><svg viewBox="0 0 24 24" width="28"><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z" fill="currentColor"></path></svg></button><aside class="docSidebarContainer_3Kbt"><div class="sidebar_15mo"><nav class="menu thin-scrollbar menu_Bmed menuWithAnnouncementBar_2WvA"><ul class="menu__list"><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" href="/docs/">Introduction</a></li><li class="menu__list-item"><a class="menu__link menuLinkText_1J2g">Getting Started</a><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/getting-started/setup">Setup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/getting-started/hello-world">Hello World</a></li></ul></li><li class="menu__list-item"><a class="menu__link menuLinkText_1J2g">Guides</a><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/guides/basic-drawing">Drawing Basics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/guides/user-input">Handling User Input</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/guides/sprites">Drawing Sprites</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/guides/text">Drawing Text</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/guides/audio">Playing Audio</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/guides/saving-data">Saving Data</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/guides/multiplayer">Multiplayer</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/guides/distribution">Distribution</a></li></ul></li><li class="menu__list-item"><a class="menu__link menuLinkText_1J2g">Reference</a><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/reference/functions">Functions</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/reference/memory">Memory Layout</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/reference/hotkeys">Emulator Hotkeys</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/reference/cli">CLI</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/reference/inspiration">Inspiration</a></li></ul></li><li class="menu__list-item"><a class="menu__link menuLinkText_1J2g">Tutorials</a><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#" tabindex="0">Snake</a></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#" tabindex="0">Making music with IWAS</a></li></ul></li></ul></nav></div></aside><main class="docMainContainer_3ufF"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_3FnS"><div class="docItemContainer_33ec"><article><div class="tocCollapsible_1PrD tocMobile_3Hoh"><button type="button" class="clean-btn tocCollapsibleButton_2O1e">On this page</button></div><div class="markdown"><header><h1 class="h1Heading_27L5">Introduction</h1></header><p>WASM-4 is a low-level fantasy game console for building small games with
16<a href="https://webassembly.org/" target="_blank" rel="noopener noreferrer">WebAssembly</a>. Game cartridges (ROMs) are small, self-contained <code>.wasm</code>
17files that can be built with any programming language that compiles to WebAssembly.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2LWZ" id="why-wasm-4"></a>

17Why WASM-4?<a class="hash-link" href="#why-wasm-4" title="Direct link to heading">#</a></h2><p>Fantasy consoles force developers to work within tech and design limitations. The idea is that by
18removing excess and focusing on the essential, it becomes easier to start <em>and finish</em> developing a
19game. This is in contrast to large game engines like Unity, which can be daunting and distracting.</p><p>WASM-4 is designed to be portable, with the goal of running on any device that can execute
20WebAssembly, even outside of the web. The main implementation runs on web browsers, but a native
21implementation that can run on cheap microcontrollers is planned.</p><p>Finally, WASM-4 is a fun and easy way to experiment with new programming languages. Ever wanted to
22learn Rust, Go, or AssemblyScript? As long as it compiles to WebAssembly, you can build games with
23it.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2LWZ" id="hardware-specs"></a>Hardware Specs<a class="hash-link" href="#hardware-specs" title="Direct link to heading">#</a></h2><ul><li>Display: 160x160 pixels, 4 customizable colors, updated at 60 Hz.</li><li>Memory: 64 KB linear RAM, memory-mapped I/O, save states.</li><li>Cartridge Size Limit: 64 KB.</li><li>Input: Keyboard, mouse, touchscreen, up to 4 gamepads.</li><li>Audio: 2 pulse wave channels, 1 triangle wave channel, 1 noise channel.</li><li>Disk Storage: 1024 bytes.</li></ul><p>Don&#x27;t worry if you don&#x27;t understand what some of this means yet! The rest of this documentation will
24go into depth on how the system works.</p><p>Let&#x27;s get started by <a href="/docs/getting-started/setup">setting up WASM-4</a>.</p></div><footer class="row docusaurus-mt-lg"><div class="col"><a href="https://github.com/aduros/wasm4/edit/main/site/docs/intro.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="20" width="20" viewBox="0 0 40 40" class="iconEdit_2_ui" aria-hidden="true"><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"></path></g></svg>Edit this page</a></div><div class="col lastUpdated_3DPF"></div></footer></article><nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages navigation"><div class="pagination-nav__item"></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/docs/getting-started/setup"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Setup »</div></a></div></nav></div></div><div class="col col--3"><div class="tableOfContents_35-E thin-scrollbar"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#why-wasm-4" class="table-of-contents__link">Why WASM-4?</a></li><li><a href="#hardware-specs" class="table-of-contents__link">Hardware Specs</a></li></ul></div></div></div></div></main></div></div><footer class="footer"><div class="container"><div class="footer__bottom text--center"></div></div></footer></div>

25<script src="/assets/js/runtime~main.947e2340.js"></script>

25

26<script src="/assets/js/main.792278bb.js"></script>

26
27</body>
28</html>