Getting Started with BeepMini

BeepMini is designed to be easy to set up and start using. This guide will walk you through the steps to get your first BeepMini project up and running.

1) Include BeepMini

Add the script tag to your HTML:

<script src="https://cdn.jsdelivr.net/gh/BinaryMoon/b8/dist/b8.min.js"></script>

Prefer local files? Download dist/b8.min.js from the repo and serve it yourself.

2) Add the assets

Copy the assets folder from the BeepMini repo into your project. It contains the built-in fonts and graphics.

Suggested structure:

your-project/
	index.html
	assets/
		font-default.png
		font-tiles.png
		font-actors.png
	dist/
		b8.min.js

3) Add a container

Create a div where the game will appear:

<div id="game-container"></div>

4) Initialise BeepMini

Paste this script at the end of your <body>:

<script>
	async function main() {
		// Your app initialisation code here.
		// For a quick test, print something on screen:
		b8.color(10, 5);
		b8.cls();
		b8.locate(1, 1);
		b8.print("BeepMini is ready!");
	}

	window.addEventListener(
		"load",
		() => {
			b8.init(
				main,
				{
					NAME: "BeepMini Game",
					// Where your asset images live:
					FONT_DEFAULT: "./assets/font-default.png",
					FONT_TILES: "./assets/font-tiles.png",
					FONT_ACTORS: "./assets/font-actors.png",
					// Where to mount the canvas:
					CANVAS_SETTINGS: {
						CONTAINER: "#game-container"
					}
				}
			);
		}
	);
</script>

Complete minimal page

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>BeepMini • Getting Started</title>
	<script src="https://cdn.jsdelivr.net/gh/BinaryMoon/b8/dist/b8.min.js"></script>
	<style>
		html, body { height: 100%; margin: 0; }
		#game-container { height: 100vh; display: grid; place-items: center; }
	</style>
</head>
<body>
	<div id="game-container"></div>
	<script>
		async function main() {
			b8.color(10, 5);
			b8.cls();
			b8.locate(1, 1);
			b8.print("Hello from BeepMini!");
		}

		window.addEventListener("load", () => {
			b8.init(main, {
				NAME: "Hello",
				FONT_DEFAULT: "./assets/font-default.png",
				FONT_TILES: "./assets/font-tiles.png",
				FONT_ACTORS: "./assets/font-actors.png",
				CANVAS_SETTINGS: { CONTAINER: "#game-container" }
			});
		});
	</script>
</body>
</html>

Common gotchas

  • Paths must be correct. If you see missing graphics, check the FONT_* URLs.
  • The container must exist. Ensure #game-container is in the HTML before you call init.
  • Run from a local server, not a file:// URL, to avoid browser security limits. I use MAMP on my Mac, but you can use what you prefer.

Next steps