obs-js

Read me

NOTE: DOCUMENTION IN PROGRESS

Create beautiful 2D content for the web with a fast lightweight 2D library that works across a lot of devices using HTML5 canvas for the most compatibility.

What to Use Orbs js for and When to Use It

Orbs js is a rendering library that will allow you to create rich, interactive graphics, cross platform applications, and games without having to write a lot of overhead for your project and get extra features like scenes, apis and more.

Orbs js is written to use the HTML5 Canvas for rendering. Out of the box cross-platform compatibility, scenes, camera movement, sprites, shapes, scripting and polished api allows you to create polished and refined experiences relatively quickly with almost no overhead set up.

Docs

Documentation is still progress

Instalation/ Setup

It's easy to get started with Orbs js!

Orbs js can be installed simply using a content delivery network (CDN) URL to embed Orbs js directly on your HTML page or using the npm module

Inatalation Options	Type	Description	Instaling	Usage
JsDeliver	CDN	Simplest, for beginers, components avalible (Browser)	learn to install here	Learn to use here
UNPKG	CDN	Complex, use if you know what you want to do, componets avalible (Browser)	leran to install here	Learn to use here
Download	downloaded	Easy, just download and use in your project (Browser, Node js, Deno)	leran to install here	Learn to use here
Bundle.run	CDN	Simple, for people who know how to use js import staments; has components and core in one import (Browser)	learn to install and use here	learn to install and use here
Skypack	CDN	Kind of complex, components not working, for people who like complex cdns (Browser)	learn to install and use here	learn to install and use here
Npm module	module	For usage in node js projects (node js projects, browser[kind of])	learn to install and use here	learn to install and use here
Deno module	module	For usage in deno projects (deno projects)	learn to install here	Learn to use here

CDN Install (via jsdeliver)

Simplest Install

<!--For Development-->
<script src="https://cdn.jsdelivr.net/gh/imagineeeinc/orbs-js/src/orbs.js"></script>

<!--For production(recommended for speed)-->
<script src="https://cdn.jsdelivr.net/gh/imagineeeinc/orbs-js/src/orbs.min.js"></script>

<!--For official components provided-->
<script src="https://cdn.jsdelivr.net/gh/imagineeeinc/orbs-js/src/orbs.components.js"></script>
<!--Minified-->
<script src="https://cdn.jsdelivr.net/gh/imagineeeinc/orbs-js/src/orbs.components.min.js"></script>

CDN Install (via unpkg)

<!--for the js file-->
<!--Recomended for browser-->
<script src="https://unpkg.com/orbs-js@1.3.1/src/orbs.js" />

<!--components-->
<script src="https://unpkg.com/orbs-js@1.3.1/src/orbs.components.js" />

<!--for npm file-->
<script src="https://unpkg.com/orbs-js@1.3.1/npm/orbs.js" />

Download

Simply download any of the files bellow and include in your project

• Core Engine

• Core Engine (minified)

• Components

• Component (minified)

Add any of these to the head of the html depending on what you need

Usage (for all of the above)

To import in JavaScript (and deno)

use the import variables like this:

// swap the values in the currly braces for what you need to import
// make sure to use the orbsCore to import from, or it won't work
const {ORBS, update, mesh, rect, circle, Vect, customMesh, lineRndr, down, sprite, text, plainText} = orbsCore

// This is all you need for components (make sure the libary is imported in the head of the documnet)
const {components} = orbsComponents

NOTE: do not import the files straight into your js file, you have to include it in the head of your html.

CDN Install (via Bundle.run)

This is one of the efficient yet easy way

<!--add this to your head-->
<script src="https://bundle.run/orbs-js@1.3.2"></script>

easily import in your js with this:

// Import 'orbsCore' and 'components' if needed from 'orbsJs'
// make sure to include the bunde.run url in the head
const {orbsCore, components} = orbsJs

// swap the values in the currly braces for what you need to import
const {ORBS, update, mesh, rect, Vect, down} = orbsCore

// use components how you would like 'components.whatComponentNeeded()'

CDN Install (via skypack)

Use import like this in your js

import orbsJs from 'https://cdn.skypack.dev/orbs-js';

And Import the the functions and values like this

// swap the values in the currly braces for what you need to import
const {ORBS, update, mesh, rect, Vect, down} = orbsJs

// Components dosen't seem to work with skypack currently so use one off the other options from before.

full example for skypack:

// importing the orbs js libary from skypack
import orbsJs from 'https://cdn.skypack.dev/orbs-js/';

// swap the values in the currly braces for what you need to import
const {ORBS, update, mesh, rect, Vect, down} = orbsJs

Npm Module available at npm

install using the bellow in the command line to add to your project.

# npm
npm i orbs-js

# yarn
yarn add orbs-js

Usage in your js file

// use the 'orbsCore' to import the main liabry and 'components' import the components
const {orbsCore, components} = require('orbs-js')

// swap the values in the currly braces for what you need to import
const {ORBS, update, mesh, rect, Vect, down} = orbsCore

// use components how you would like 'components.whatComponentNeeded()'

For Deno

if you are looking for deno you can use the skypack url: https://cdn.skypack.dev/orbs-js?dts. for skypack usage go here

Or the deno.land/x package:

• Core Engine

• Core Engine (minified)

• components

• components (minified)

  usage for deno.land x package

Demos

• html test use to test (github)

• npm module test using jest (github)

• html test used to test (live)

• Example for v1.3.0 on jsfiddle

• Example for v1.3.1 and above on codepen

Features

• shapes (meshes)

• texture

• custom shapes (custom meshes using the HTML5 Canvas API)

• Line rendering

• Text

• Object scripting

• Scene system

• primitive camera system

• variable fps with Delta Time

• mouse events for left button

• pre made components available

• package downloader (downloads the library and any extra things needed)

• Planed Features:

  • collision detection

  • physics

  • keyboard and mouse events

  • global scripting

  • html(& markdown) rendering

  • more customisable shapes

  • better camera

  • better debugging

  • enhance for big projects

Basic Usage/ example

//import functions and values needed
//use 'orbsJs' instead of 'orbsCore' if using skypack
//if using bundle.run use the import core statment first which is bellow \/
//const {orbsCore} = orbsJs
const {ORBS, update, mesh, rect, Vect, down} = orbsCore
//set css for full screen canvas
ORBS.setFullScreenGameCss()
//initiate a new renderer
var renderer = new ORBS.renderer({renderState: update, bgColor: "crimson", fps: 40, width: window.innerWidth, height: window.innerHeight})
//create a new scene
var scene = new ORBS.scene()
//new script component
var script = new ORBS.scriptComponent(function(self,im,ot) {
    if (self.events.mouse.primaryBtn != down) {
    if (self.y > ot.screen.height - 50) {
        self.yMove = -10*ot.delta
    }
    if (self.y < 50) {
        self.yMove = 10*ot.delta
    }
    if (self.x > ot.screen.width - 50) {
        self.xMove = -10*ot.delta
    }
    if (self.x < 50) {
        self.xMove = 10*ot.delta
    }
    self.dx = self.xMove
    self.dy = self.yMove}
    if (self.events.mouse.primaryBtn == down) {
        self.scale = 1.1
    } else {
        self.scale = 1
    }
    return self
})
//create a object named 'rect'
var rects = new ORBS.obj({type: mesh, drawType: rect, name: "rect"})
//set the mesh to 100 by 100@50, 50 with pink color
rects.drawFunc({x: 50, y: 50, width: 100, height: 100, color: "pink"})
//attach the script to the object
rects.attachScript(script)
//set varible 'yMove' to '3' of object 'rects'
rects.setVars("yMove", 3)
//set varible 'xMove' to '3' of object 'rects'
rects.setVars("xMove", 3)
//add the 'rects' object to the scene
scene.add(rects)
//set the renderers dimensions
renderer.setSize(window.innerWidth, window.innerHeight)
//prepend the canvas to the body of the html and setup event listeners
renderer.canvasAttactToDom(document.body, "prepend")
//start the render pipeline
renderer.startRenderCycle()
//add the scene to the renderer
renderer.setScene(scene)

License

This content is released under the MIT License.