Beep8 logo

Getting Started with Beep8

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

1) Include Beep8

Add the script tag to your HTML:

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

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

2) Add the assets

Copy the assets folder from the Beep8 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/
		beep8.min.js

3) Add a container

Create a div where the game will appear:

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

4) Initialise Beep8

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:
		beep8.color(10, 5);
		beep8.cls();
		beep8.locate(1, 1);
		beep8.print("Beep8 is ready!");
	}

	window.addEventListener(
		"load",
		() => {
			beep8.init(
				main,
				{
					NAME: "beep8 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>Beep8 • Getting Started</title>
	<script src="https://cdn.jsdelivr.net/gh/BinaryMoon/Beep8/dist/beep8.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() {
			beep8.color(10, 5);
			beep8.cls();
			beep8.locate(1, 1);
			beep8.print("Hello from Beep8!");
		}

		window.addEventListener("load", () => {
			beep8.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