Repository Homepage Docs

Getting Started

get started

Creating a bouncing box

The goal of this section is to give a brief introduction to orbs. We will start by setting up a scene, with a square bouncing across the screen. A working example is provided at the bottom of the page in case you get stuck and need help.

Before we start

Before you can use orbs, you need somewhere to display it. Save the following HTML to a file on your computer, and open it in your browser.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>My first orbs JS Project</title>
		<style>
			body {
				margin: 0;
				background: crimson;
				overflow: hidden;
			}
			canvas {
			    display: block;
			    margin: auto;
			}
		</style>
	</head>
	<body>
		<script src="https://bundle.run/orbs-js@1.3.2"></script>
		<script>
			// Our Javascript will go here.
		</script>
	</body>
</html>

That's all. All the code below goes into the empty <script> tag.

We are also using the bundle.run CDN to import as its the cleanest and preferd way to import.

Basic Set up

To get started in orbs JS you need renderer to render the scene and a scene to put our objects in.

const {orbsCore} = orbsJs

const {ORBS, update, mesh, rect, Vect, down} = orbsCore

ORBS.setFullScreenGameCss()

var renderer = new ORBS.renderer({
    renderState: update,
    bgColor: "crimson",
    fps: 40,
    width: window.innerWidth,
    height: window.innerHeight
})
var scene = new ORBS.scene()

Let's take a moment to understand what's happening here.

we first import orbsCore from orbsJs (orbsJs is the module identifier and orbsCore is the core engine).

Next, we import any values and functions needed; here we have imported everything we need for this project. Then we set some CSS available by the engine to make the canvas full screen, which is really handy.

Then we set the renderer by initiating a new ORBS.renderer; the options are the renderState which is used to determine is the renderer paused or running, bgColor is background colour which is set to crimson, fps is the frames per second set to 40 frames per second

PreviousThe RevampNextIntroduction

Last updated