{"id":20719987,"url":"https://github.com/imagineeeinc/orbs-js","last_synced_at":"2025-07-31T22:33:12.007Z","repository":{"id":48061424,"uuid":"359363228","full_name":"imagineeeinc/orbs-js","owner":"imagineeeinc","description":"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.","archived":false,"fork":false,"pushed_at":"2022-11-01T18:52:30.000Z","size":279,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-07T02:07:01.369Z","etag":null,"topics":["canvas","game-2d","game-framework","html5-canvas","html5-game","javascript","js-game","js-library"],"latest_commit_sha":null,"homepage":"https://imagineeeinc.github.io/orbs-js/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/imagineeeinc.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-04-19T07:11:37.000Z","updated_at":"2023-08-20T08:04:36.000Z","dependencies_parsed_at":"2023-01-21T06:47:24.283Z","dependency_job_id":null,"html_url":"https://github.com/imagineeeinc/orbs-js","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"purl":"pkg:github/imagineeeinc/orbs-js","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imagineeeinc%2Forbs-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imagineeeinc%2Forbs-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imagineeeinc%2Forbs-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imagineeeinc%2Forbs-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/imagineeeinc","download_url":"https://codeload.github.com/imagineeeinc/orbs-js/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/imagineeeinc%2Forbs-js/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268127190,"owners_count":24200326,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-31T02:00:08.723Z","response_time":66,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["canvas","game-2d","game-framework","html5-canvas","html5-game","javascript","js-game","js-library"],"created_at":"2024-11-17T03:19:00.032Z","updated_at":"2025-07-31T22:33:11.895Z","avatar_url":"https://github.com/imagineeeinc.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"#### NOTE: Project is dead, a succsessor coming soon...\r\n# obs-js\r\n#### NOTE: DOCUMENTION IN PROGRESS\r\n\r\n\u003cp align=\"center\"\u003e\r\n  \u003cimg src=\"https://imagineeeinc.github.io/orbs-js/orbs.png\" width=\"20%\"\u003e\r\n\u003c/p\u003e\r\n\r\n![npm bundle size](https://img.shields.io/bundlephobia/min/orbs-js?logo=npm)\r\n![npm downloads](https://img.shields.io/npm/dm/orbs-js?logo=npm)\r\n![npm version](https://img.shields.io/npm/v/orbs-js?logo=npm)\r\n![GitHub](https://img.shields.io/github/license/imagineeeinc/orbs-js?logo=github)\r\n\r\nCreate 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.\r\n\r\n## What to Use Orbs js for and When to Use It\r\n\r\nOrbs 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.\r\n\r\nOrbs js is written to use the [HTML5 Canvas](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API) 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.\r\n\r\n## Docs\r\n\r\n__Documentation is still progress__\r\n\r\nRead the docs [here](https://imagineee.gitbook.io/orbs-js/) on gitbook\r\n\r\n## Instalation/ Setup\r\n\r\nIt's easy to get started with Orbs js!\r\n\r\nOrbs 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\r\n\r\n\r\n| Inatalation Options | Type       | Description                                                                                                | Instaling                                                     | Usage                                                         |\r\n| --------------------- | ------------ | ------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------- | --------------------------------------------------------------- |\r\n| JsDeliver           | CDN        | Simplest, for beginers, components avalible (Browser)                                                      | [learn to install here](#cdn-install-via-jsdeliver)           | [Learn to use here](#usage-for-all-of-the-above)              |\r\n| UNPKG               | CDN        | Complex, use if you know what you want to do, componets avalible (Browser)                                 | [leran to install here](#cdn-install-via-unpkg)               | [Learn to use here](#usage-for-all-of-the-above)              |\r\n| Download            | downloaded | Easy, just download and use in your project (Browser, Node js, Deno)                                       | [leran to install here](#download)                            | [Learn to use here](#usage-for-all-of-the-above)              |\r\n| 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](#cdn-install-via-bundlerun)   | [learn to install and use here](#cdn-install-via-bundlerun)   |\r\n| Skypack             | CDN        | Kind of complex, components not working, for people who like complex cdns (Browser)                        | [learn to install and use here](#cdn-install-via-skypack)     | [learn to install and use here](#cdn-install-via-skypack)     |\r\n| Npm module          | module     | For usage in node js projects (node js projects, browser[kind of])                                         | [learn to install and use here](#npm-module-available-at-npm) | [learn to install and use here](#npm-module-available-at-npm) |\r\n| Deno module         | module     | For usage in deno projects (deno projects)                                                                 | [learn to install here](#for-deno)                            | [Learn to use here](#usage-for-all-of-the-above)              |\r\n\r\n### CDN Install (via jsdeliver)\r\n\r\n***Simplest Install***\r\n\r\n```html\r\n\u003c!--For Development--\u003e\r\n\u003cscript src=\"https://cdn.jsdelivr.net/gh/imagineeeinc/orbs-js/src/orbs.js\"\u003e\u003c/script\u003e\r\n\r\n\u003c!--For production(recommended for speed)--\u003e\r\n\u003cscript src=\"https://cdn.jsdelivr.net/gh/imagineeeinc/orbs-js/src/orbs.min.js\"\u003e\u003c/script\u003e\r\n\r\n\u003c!--For official components provided--\u003e\r\n\u003cscript src=\"https://cdn.jsdelivr.net/gh/imagineeeinc/orbs-js/src/orbs.components.js\"\u003e\u003c/script\u003e\r\n\u003c!--Minified--\u003e\r\n\u003cscript src=\"https://cdn.jsdelivr.net/gh/imagineeeinc/orbs-js/src/orbs.components.min.js\"\u003e\u003c/script\u003e\r\n```\r\n\r\n### CDN Install (via unpkg)\r\n\r\n```html\r\n\u003c!--for the js file--\u003e\r\n\u003c!--Recomended for browser--\u003e\r\n\u003cscript src=\"https://unpkg.com/orbs-js@1.3.1/src/orbs.js\" /\u003e\r\n\r\n\u003c!--components--\u003e\r\n\u003cscript src=\"https://unpkg.com/orbs-js@1.3.1/src/orbs.components.js\" /\u003e\r\n\r\n\u003c!--for npm file--\u003e\r\n\u003cscript src=\"https://unpkg.com/orbs-js@1.3.1/npm/orbs.js\" /\u003e\r\n```\r\n\r\n### Download\r\n\r\nSimply download any of the files bellow and include in your project\r\n\r\n- [Core Engine](https://raw.githubusercontent.com/imagineeeinc/orbs-js/main/src/orbs.js)\r\n- [Core Engine (minified)](https://raw.githubusercontent.com/imagineeeinc/orbs-js/main/src/orbs.min.js)\r\n- [Components](https://raw.githubusercontent.com/imagineeeinc/orbs-js/main/src/orbs.components.js)\r\n- [Component (minified)](https://raw.githubusercontent.com/imagineeeinc/orbs-js/main/src/orbs.components.min.js)\r\n\r\n\u003cbr\u003e\r\n\r\n__Add any of these to the head of the html depending on what you need__\r\n\r\n### Usage (for all of the above)\r\n\r\n__To import in JavaScript (and deno)__\r\n\r\nuse the import variables like this:\r\n\r\n```js\r\n// swap the values in the currly braces for what you need to import\r\n// make sure to use the orbsCore to import from, or it won't work\r\nconst {ORBS, update, mesh, rect, circle, Vect, customMesh, lineRndr, down, sprite, text, plainText} = orbsCore\r\n\r\n// This is all you need for components (make sure the libary is imported in the head of the documnet)\r\nconst {components} = orbsComponents\r\n```\r\n\r\nNOTE: do not import the files straight into your js file, you have to include it in the head of your html.\r\n\r\n### CDN Install (via Bundle.run)\r\n\r\n__This is one of the efficient yet easy way__\r\n\r\n```html\r\n\u003c!--add this to your head--\u003e\r\n\u003cscript src=\"https://bundle.run/orbs-js@1.3.2\"\u003e\u003c/script\u003e\r\n```\r\n\r\neasily import in your js with this:\r\n\r\n```js\r\n// Import 'orbsCore' and 'components' if needed from 'orbsJs'\r\n// make sure to include the bunde.run url in the head\r\nconst {orbsCore, components} = orbsJs\r\n\r\n// swap the values in the currly braces for what you need to import\r\nconst {ORBS, update, mesh, rect, Vect, down} = orbsCore\r\n\r\n// use components how you would like 'components.whatComponentNeeded()'\r\n```\r\n\r\n### CDN Install (via skypack)\r\n\r\n__Use import like this in your js__\r\n\r\n```js\r\nimport orbsJs from 'https://cdn.skypack.dev/orbs-js';\r\n```\r\n\r\n__And Import the the functions and values like this__\r\n\r\n```js\r\n// swap the values in the currly braces for what you need to import\r\nconst {ORBS, update, mesh, rect, Vect, down} = orbsJs\r\n\r\n// Components dosen't seem to work with skypack currently so use one off the other options from before.\r\n```\r\n\r\nfull example for skypack:\r\n\r\n```js\r\n// importing the orbs js libary from skypack\r\nimport orbsJs from 'https://cdn.skypack.dev/orbs-js/';\r\n\r\n// swap the values in the currly braces for what you need to import\r\nconst {ORBS, update, mesh, rect, Vect, down} = orbsJs\r\n```\r\n\r\n### Npm Module available at [npm](https://www.npmjs.com/package/orbs-js)\r\n\r\ninstall using the bellow in the command line to add to your project.\r\n\r\n```bash\r\n# npm\r\nnpm i orbs-js\r\n\r\n# yarn\r\nyarn add orbs-js\r\n```\r\n\r\n__Usage in your js file__\r\n\r\n```js\r\n// use the 'orbsCore' to import the main liabry and 'components' import the components\r\nconst {orbsCore, components} = require('orbs-js')\r\n\r\n// swap the values in the currly braces for what you need to import\r\nconst {ORBS, update, mesh, rect, Vect, down} = orbsCore\r\n\r\n// use components how you would like 'components.whatComponentNeeded()'\r\n```\r\n\r\n### For Deno\r\n\r\nif you are looking for deno you can use the skypack url: `https://cdn.skypack.dev/orbs-js?dts`. for skypack usage go [here](#cdn-install-via-skypack)\r\n\r\nOr the deno.land/x package:\r\n\r\n- [Core Engine](https://deno.land/x/orbs_js/orbs.js)\r\n- [Core Engine (minified)](https://deno.land/x/orbs_js/orbs.min.js)\r\n- [components](https://deno.land/x/orbs_js/orbs.components.js)\r\n- [components (minified)](https://deno.land/x/orbs_js/orbs.components.min.js)\r\n  [usage for deno.land x package](#usage-for-all-of-the-above)\r\n\r\n## Demos\r\n\r\n- [html test use to test (github)](https://github.com/imagineeeinc/orbs-js/blob/main/test/index.html)\r\n- [npm module test using jest (github)](https://github.com/imagineeeinc/orbs-js/blob/main/test/test_npm.test.js)\r\n- [html test used to test (live)](https://imagineeeinc.github.io/orbs-js/test/)\r\n- Example for v1.3.0 on [jsfiddle](https://jsfiddle.net/Imagineee/1pzmrjLt/26/)\r\n- Example for v1.3.1 and above on [codepen](https://codepen.io/imagineeeinc/pen/abWYjLN)\r\n\r\n## Features\r\n\r\n- shapes (meshes)\r\n- texture\r\n- custom shapes (custom meshes using the HTML5 Canvas API)\r\n- Line rendering\r\n- Text\r\n- Object scripting\r\n- Scene system\r\n- primitive camera system\r\n- variable fps with Delta Time\r\n- mouse events for left button\r\n- pre made components available\r\n- package downloader (downloads the library and any extra things needed)\r\n- Planed Features:\r\n  - collision detection\r\n  - physics\r\n  - keyboard and mouse events\r\n  - global scripting\r\n  - html(\u0026 markdown) rendering\r\n  - more customisable shapes\r\n  - better camera\r\n  - better debugging\r\n  - enhance for big projects\r\n\r\n## Basic Usage/ example\r\n\r\n```js\r\n//import functions and values needed\r\n//use 'orbsJs' instead of 'orbsCore' if using skypack\r\n//if using bundle.run use the import core statment first which is bellow \\/\r\n//const {orbsCore} = orbsJs\r\nconst {ORBS, update, mesh, rect, Vect, down} = orbsCore\r\n//set css for full screen canvas\r\nORBS.setFullScreenGameCss()\r\n//initiate a new renderer\r\nvar renderer = new ORBS.renderer({renderState: update, bgColor: \"crimson\", fps: 40, width: window.innerWidth, height: window.innerHeight})\r\n//create a new scene\r\nvar scene = new ORBS.scene()\r\n//new script component\r\nvar script = new ORBS.scriptComponent(function(self,im,ot) {\r\n    if (self.events.mouse.primaryBtn != down) {\r\n    if (self.y \u003e ot.screen.height - 50) {\r\n        self.yMove = -10*ot.delta\r\n    }\r\n    if (self.y \u003c 50) {\r\n        self.yMove = 10*ot.delta\r\n    }\r\n    if (self.x \u003e ot.screen.width - 50) {\r\n        self.xMove = -10*ot.delta\r\n    }\r\n    if (self.x \u003c 50) {\r\n        self.xMove = 10*ot.delta\r\n    }\r\n    self.dx = self.xMove\r\n    self.dy = self.yMove}\r\n    if (self.events.mouse.primaryBtn == down) {\r\n\t\tself.scale = 1.1\r\n    } else {\r\n        self.scale = 1\r\n    }\r\n    return self\r\n})\r\n//create a object named 'rect'\r\nvar rects = new ORBS.obj({type: mesh, drawType: rect, name: \"rect\"})\r\n//set the mesh to 100 by 100@50, 50 with pink color\r\nrects.vars({x: 50, y: 50, width: 100, height: 100, color: \"pink\"})\r\n//attach the script to the object\r\nrects.attachScript(script)\r\n//set varible 'yMove' to '3' of object 'rects'\r\nrects.setVars(\"yMove\", 3)\r\n//set varible 'xMove' to '3' of object 'rects'\r\nrects.setVars(\"xMove\", 3)\r\n//add the 'rects' object to the scene\r\nscene.add(rects)\r\n//set the renderers dimensions\r\nrenderer.setSize(window.innerWidth, window.innerHeight)\r\n//prepend the canvas to the body of the html and setup event listeners\r\nrenderer.canvasAttactToDom(document.body, \"prepend\")\r\n//start the render pipeline\r\nrenderer.startRenderCycle()\r\n//add the scene to the renderer\r\nrenderer.setScene(scene)\r\n\r\n```\r\n\r\n# The Revamp\r\n\r\nA revamp will be coming to the orbs JS engine that will simplify the creation of content as it seems to complicated to get a simple square moving on the screen. This new revamp will throw the previous project paradigm out the windows in favour for a simpler declarative method of just calling functions. This can also reduce the bundle size quite a bit, but this is the revamp of the project structure and ~~not the rendering engine~~ A fancy new simplified rendering engine called [MayoGL](https://github.com/imagineeeinc/MayoGL), remember that, this also allows for more customizability of the project. The idea of the revamp also comes from [Kaboom JS](https://kaboomjs.com/), so do check it out.\r\n\r\nSorry for no docs for pre-v1.4.0 (so, after the update you have to look at the source code to understand how to use the pre-1.4.0, but I don't think its needed as the newer one will be far more efficient on time.), but as soon as the 1.05.0 releases with the new system there will be (I hate writing docs)\r\n\r\n## License\r\n\r\nThis content is released under the [MIT License](http://opensource.org/licenses/MIT).\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimagineeeinc%2Forbs-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fimagineeeinc%2Forbs-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimagineeeinc%2Forbs-js/lists"}