Skip to main content
Module

x/orbs_js/orbs.min.js

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.
Latest
File
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t(e="undefined"!=typeof globalThis?globalThis:e||self)}(this,(function(e){"use strict";e.still="still",e.update="update",e.mesh="mesh",e.customMesh="customMesh",e.canvasShape=mesh,e.sprite="sprite",e.lineRndr="lineRenderer",e.line=lineRndr,e.text="text",e.texture="texture",e.rect="rect",e.circle="circle",e.paths="paths",e.plainText="plainText",e.hitbox="hitbox",e.down="down",e.up="up",e.left="left",e.right="right",e.bottom="bottom",e.drag="drag",e.nill=null,e.yes=!0,e.no=!1,e.Arrow={left:left,up:up,right:right,down:down},e.keys={left:"ArrowLeft",up:"ArrowUp",right:"ArrowRight",down:"ArrowDown"},e.defaultFont="30px Arial",e.error={noSupport:"Your browser dose not support canvas"};class t{constructor(e){this.bgColor=e.bgColor,this.canvasId=e.canvasId,this._drawers=this._theDrawers(),this.campos=[0,0],this.lastUpdate=null,this.deltaTime=0,this.noUpdate={}}setUpImageCacher(){let e=document.createElement("div");return e.style.display="none",e.id="caveImageCache"+Math.round(Math.floor(9999*Math.random())+1e3),document.body.append(e),e.id}zeroToCenter(e){let t=document.getElementById(this.canvasId);if(!t.getContext)return[!1,error.noSupport];var s=t.getContext("2d");if(!0===e)s.translate(t.width/2,t.height/2);else{if(!1!==e)return[!1,"no given boolen"];s.translate(0,0)}}draw(e,t,s,i,n,r,o,a,l,c,d){null==this.lastUpdate&&(this.lastUpdate=Date.now());let u=Date.now();this.fps=t,this.scene=e;let p=a()||document.getElementById(this.canvasId);if(!p.getContext)return[!1,error.noSupport];var y=p.getContext("2d",{alpha:!1});l({scene:e,fps:t,antiAliasing:s,campos:i,imgStore:n,shader:r,renderer:o,canvasObj:a});let v=d.event.keyStroke;d.callback({key:v,event:d.event,delta:this.deltaTime,scene:e,onDirection:e=>{let t=h(v);return t.indexOf(left)>-1&&e==left||(t.indexOf(right)>-1&&e==right||(t.indexOf(down)>-1&&e==down||(t.indexOf(up)>-1&&e==up||(t.indexOf("a")>-1&&e==left||(t.indexOf("d")>-1&&e==right||(t.indexOf("s")>-1&&e==down||t.indexOf("w")>-1&&e==up))))))}}),y.font=defaultFont,y.imageSmoothingEnabled=s,y.fillStyle=this.bgColor,y.clearRect(-50,-50,p.width+100,p.height+100),y.fillRect(-50,-50,p.width+100,p.height+100);let m=[i.x,i.y];m[0]==this.campos[0]&&m[1]==this.campos[1]||(y.translate(m[0]-this.campos[0],m[1]-this.campos[1]),this.campos=m),null==r&&null==r||r(y,{fps:this.fps,screen:p,camera:this.campos});for(var f=0;f<this.scene.vScene.length;f++){let t=e.vScene[f];if(t.collisionLayer&&e.layers.collision[t.collisionLayer]&&t.hitbox.shape==rect){var g={x:t.x-t.width*t.scale/2+t.hitbox.center[0],y:t.y-t.height*t.scale/2+t.hitbox.center[1],width:t.hitbox.width,height:t.hitbox.height};t.collision=[];for(let s=0;s<e.layers.collision[t.collisionLayer].length;s++){let i=e.getObj(e.layers.collision[t.collisionLayer][s]);if(i.name!=t.name&&i.hitbox.shape==rect){let e={x:i.x-i.width*i.scale/2+i.hitbox.center[0],y:i.y-i.height*i.scale/2+i.hitbox.center[1],width:i.hitbox.width,height:i.hitbox.height};g.x+g.width/2<e.x+e.width/2&&g.x+g.width>e.x&&g.y<e.y+e.height&&g.y+g.height>e.y&&g.x!=e.x&&t.collision.push(left),e.x<g.x&&e.x+e.width>g.x&&g.y<e.y+e.height&&g.y+g.height>e.y&&g.x!=e.x&&t.collision.push(right),g.y+g.height/2<e.y+e.height/2&&g.y+g.height>e.y&&g.x<e.x+e.width&&g.x+g.width>e.x&&g.y!=e.y&&t.collision.push(up),e.y<g.y&&e.y+e.height>g.y&&g.x<e.x+e.width/2&&g.x+g.width>e.x&&g.y!=e.y&&t.collision.push(down)}}}if(null!=t.scripts){let e,s=t.scripts;for(var x=0;x<s.length;x++){let i=s[x].importScript||function(){return null},n=s[x].script;i=i(),e=n(t,i,{fps:this.fps,delta:this.deltaTime,screen:p,camera:this.campos,renderer:o})}}if((t.dx||t.dy)&&(t.dx&&(t.x+=t.dx),t.dy&&(t.y+=t.dy)),t.type==mesh){if(t.drawType==rect){this._drawers.rect(y,[t.x-t.width*t.scale/2,t.y-t.height*t.scale/2,t.width*t.scale,t.height*t.scale,t.color])}else if(t.drawType==circle){this._drawers.circle(y,[t.x-t.width*t.scale/2,t.y-t.height*t.scale/2,t.width*t.scale,t.color])}}else if(t.type==sprite){if(t.drawType==texture){this._drawers.texture(y,[t.x-t.width*t.scale/2,t.y-t.height*t.scale/2,t.width*t.scale,t.height*t.scale,t.sprite])}}else if(t.type==text){if(t.drawType==plainText){this._drawers.plainText(y,[t.x-t.width*t.scale/2,t.y-t.height*t.scale/2,t.txt,t.font,t.color])}}else if(t.type==line){this._drawers.lineRndr(y,[t.start,t.end,t.width,t.color])}else if(t.type==customMesh){this._drawers.customMesh(y,t.meshShader,{fps:this.fps,delta:this.deltaTime,screen:p,camera:this.campos,renderer:o},t.meshShader.importScript||function(){return null})}}let w=u-this.lastUpdate;return this.lastUpdate=u,this.deltaTime=w/100,c({scene:e,fps:t,antiAliasing:s,campos:i,imgStore:n,shader:r,renderer:o,canvasObj:a}),[!0]}_theDrawers(){return{rect:function(e,t){return e.fillStyle=t[4],e.fillRect(t[0],t[1],t[2],t[3]),!0},circle:function(e,t){return e.beginPath(),e.arc(t[0],t[1],t[2],0,2*Math.PI),e.fillStyle=t[3],e.fill(),e.closePath(),!0},texture:function(e,t){return e.drawImage(t[4].img,t[0],t[1],t[2],t[3]),!0},plainText:function(e,t){return e.font=t[3],e.fillStyle=t[4],e.fillText(t[2],t[0],t[1]),!0},lineRndr:function(e,t){return e.strokeStyle=t[3],e.lineWidth=t[2],e.beginPath(),(t[0].isVectObj=!0)?e.moveTo(t[0].x,t[0].y):e.moveTo(t[0][0],t[0][1]),(t[1].isVectObj=!0)?e.lineTo(t[1].x,t[1].y):e.lineTo(t[1][0],t[1][1]),e.stroke(),!0},customMesh:function(e,t,s,i){return(0,t.script)(e,i=i(),s),!0}}}}class s{constructor(){this.vScene=[],this.layers={},this.layers.collision={}}add(e){this.vScene.push(e),e.collisionLayer&&scene.layers.collision[e.collisionLayer]&&scene.layers.collision[e.collisionLayer].push(e.name)}scene(){return this.vScene}moveObj(e,t){this.vScene=function(e,t,s){if(s>=e.length)for(var i=s-e.length+1;i--;)e.push(void 0);return e.splice(s,0,e.splice(t,1)[0]),e}(this.vScene,e,t)}getObj(e){for(var t=0;t<this.vScene.length;t++)if(this.vScene[t].name==e)return this.vScene[t]}exportSelf(){return this}collisionLayerSet(e){this.layers.collision[e]=[]}}class i{constructor(e){e.canvas?this.canvas=e.canvas:this.canvas=function(){let e=document.createElement("canvas");return e.id="orbsCanvas"+Math.round(Math.floor(9999*Math.random())+1e3),e.innerHTML="Hmm, Looks like your browser does not support Canvas",e}(),this.antiAliasing=e.antiAliasing||!0,this.canvasId=this.canvas.id,this.canvasObj=e.canvasObj||null,this.events={hoverOver:!1,mouse:{x:0,y:0,primaryBtn:up,drag:!1},keyBoard:{key:"",ctrlKey:!1,shiftKey:!1,altKey:!1,keyStroke:""}},this.onRender=()=>null,this.onBeforeRender=()=>null,this.onAfterRender=()=>null,this.onKeyboardEvent=()=>null,this.imgStore={},this.bgColor=e.bgColor||"#ffffff",this.fps=e.fps||30,this.loop=()=>null,this.renderState=e.renderState||still,this.dynamicCamera=e.dynamicCamera||!1,this.cameraPos=e.camPos||{x:0,y:0},this.shader=null,this.renderState==still?this.updater=!1:this.renderState==update?this.updater=!0:console.error("no proper given renderState.\noptions:( update | still )"),this.scene=e.scene||new s,this.cave=new t({bgColor:this.bgColor,canvasId:this.canvasId}),1==e.disableImageCache||(this.storeId=this.cave.setUpImageCacher())}startRenderCycle(){let e=this.cave;this.onRender(this,this.scene),setInterval((()=>function(e,t,s,i,n,r,h,o,a,l,c,d,u,p,y){if(!0===n){s({fps:r,screen:document.getElementById(l),camera:a});let n=e.draw(i,r,h,a,o,c,d,t,u,p,y);!1===n[0]&&(alert(n[1]),console.alert(n[1]))}}(e,this.canvasObj,this.loop,this.scene,this.updater,this.fps,this.antiAliasing,this.imaStore,this.cameraPos,this.canvasId,this.shader,this,this.onBeforeRender,this.onAfterRender,{callback:this.onKeyboardEvent,event:this.events.keyBoard})),1e3/this.fps)}zeroToCenter(e){this.cave.zeroToCenter(e)}attachCanvas(e){this.canvas=e,this.canvasId=this.canvas.id}addToImgCache(e,t){if(1==e.isImgObj)this.imgStore[t]=e;else{let s=new r(e,t);this.imgStore[t]=s}}setRenderState(e){this.renderState=e||still,this.renderState==still?this.updater=!1:this.renderState==update?this.updater=!0:console.error("no proper given renderState.\noptions:( update | still )")}setSize(e,t){this.canvas.width=e,this.canvas.height=t}setBgColor(e){this.bgColor=e}setScene(e){this.scene=e}draw(e){this.tempScene=e}translateCamera(e){this.cameraPos=e}onLoop(e){this.loop=e}canvasAttactToDom(e,t){"prepend"==t?e.prepend(this.canvas):"append"==t&&e.append(this.canvas),this.canvasObj=()=>document.getElementById(this.canvas.id),document.getElementById(this.canvasId).addEventListener("mouseleave",(e=>{this.events.hoverOver=!0})),document.getElementById(this.canvasId).addEventListener("mousemove",(e=>{this.events.mouse.x=e.offsetX-this.cameraPos.x,this.events.mouse.y=e.offsetY-this.cameraPos.y;for(var t=0;t<this.scene.vScene.length;t++)this.events.mouse.x<this.scene.vScene[t].x+this.scene.vScene[t].width/2&&this.events.mouse.x>this.scene.vScene[t].x-this.scene.vScene[t].width/2&&this.events.mouse.y<this.scene.vScene[t].y+(this.scene.vScene[t].height||this.scene.vScene[t].width/2)&&this.events.mouse.y>this.scene.vScene[t].y-(this.scene.vScene[t].height||this.scene.vScene[t].width/2)?this.scene.vScene[t].events.mouse.hover=!0:this.scene.vScene[t].events.mouse.hover=!1;if(this.events.mouse.primaryBtn==down){this.events.mouse.drag=!0;for(t=0;t<this.scene.vScene.length;t++)this.scene.vScene[t].events.mouse.primaryBtn==down?this.scene.vScene[t].events.mouse.drag=!0:this.scene.vScene[t].events.mouse.drag=!1}else if(this.events.mouse.primaryBtn==up){this.events.mouse.drag=!1;for(t=0;t<this.scene.vScene.length;t++)this.scene.vScene[t].events.mouse.drag=!1}})),document.getElementById(this.canvasId).addEventListener("mousedown",(e=>{this.mouseDown();for(var t=0;t<this.scene.vScene.length;t++)this.events.mouse.x<this.scene.vScene[t].x+this.scene.vScene[t].width/2&&this.events.mouse.x>this.scene.vScene[t].x-this.scene.vScene[t].width/2&&this.events.mouse.y<this.scene.vScene[t].y+(this.scene.vScene[t].height||this.scene.vScene[t].width/2)&&this.events.mouse.y>this.scene.vScene[t].y-(this.scene.vScene[t].height||this.scene.vScene[t].width/2)&&(this.scene.vScene[t].events.mouse.primaryBtn=down)})),document.getElementById(this.canvasId).addEventListener("mouseup",(e=>{this.mouseUp();for(var t=0;t<this.scene.vScene.length;t++)this.scene.vScene[t].events.mouse.primaryBtn=up})),document.body.addEventListener("keydown",(e=>{let t="";1==e.ctrlKey&&(t+="Ctrl+"),1==e.shiftKey&&(t+="Shift+"),1==e.altKey&&(t+="Shift+"),t+=e.key.replaceAll(keys.left,left).replaceAll(keys.right,right).replaceAll(keys.up,up).replaceAll(keys.down,down),this.events.keyBoard={key:e.key,ctrlKey:e.ctrlKey,shiftKey:e.shiftKey,altKey:e.altKey},this.events.keyBoard.keyStroke=t})),document.body.addEventListener("keyup",(e=>{this.events.keyBoard={key:"",ctrlKey:!1,shiftKey:!1,altKey:!1},this.events.keyBoard.keyStroke=""}))}mouseDown(){this.events.mouse.primaryBtn=down}mouseUp(){this.events.mouse.primaryBtn=up}shaderSet(e){this.shader=e}exportSelf(){return this}on(e,t){"render"==e&&(this.onRender=t),"beforeRender"==e&&(this.onBeforeRender=t),"afterRender"==e&&(this.onAfterRender=t),"mouseEvent"==e&&(this.onMouseEvent=t),"keyboardEvent"==e&&(this.onKeyboardEvent=t)}}class n{constructor(e,t,s,i){this.isVectObj=!0,this.x=e||null,this.y=t||null,this.scale=s||null,this.rot=i||null}_giveVector(){return[this.x,this.y,this.scale,this.rot]}}class r{constructor(e,t){this.isImgObj=!0;let s=new Image;s.src=e,this.img=s,this.name=t,this.url=e}}function h(e){return e.split("+")}e.ORBS={setFullScreenGameCss:function(){document.body.setAttribute("style","padding: 0;\n\t\tmargin: 0;\n\t\theight: 100vh")},_:function(){return[new i,new s]},keyEvent:h,renderer:i,scene:s,obj:class{constructor(e){this.name=e.name||Math.round(Math.floor(9999*Math.random())+1e3),this.type=e.type||mesh,this.type==mesh&&(this.drawType=e.drawType),this.drawType=e.drawType||texture,this.type!=line&&this.type!=customMesh||(this.drawType=null),this.scripts=[],this.x=e.x||0,this.y=e.y||0,this.width=e.width||0,this.height=e.height||0,this.color=e.color||"#000",this.scale=e.scale||1,this.rotation=e.rotation||0,this.texture=null,e.vars&&this.vars(e.vars),this.events={mouse:{hover:!1,primaryBtn:up,drag:!1}}}_giveCodec(){return{type:this.type,drawType:this.drawType,x:this.x,y:this.y,width:this.width,height:this.height,color:this.color}}attachScript(e){this.scripts.push(e)}setVars(e,t){this[e]=t}vars(e){for(let t=0;t<Object.keys(e).length;t++)this[Object.keys(e)[t]]=e[Object.keys(e)[t]]}move(e){let t=e._giveVector();this.x=this.x+t[0]||this.x,this.y=this.y+t[1]||this.y,this.scale=this.scale+t[2]||this.scale,this.rotation=this.rotation+t[3]||this.rotation}setPos(e){let t=e._giveVector();this.x=t[0]||this.x,this.y=t[1]||this.y,this.scale=t[2]||this.scale,this.rotation=t[3]||this.rotation}getColide(e){return e==up||e==top?this.collision.indexOf(up)>-1:e==down||e==bottom?this.collision.indexOf(down)>-1:e==left?this.collision.indexOf(left)>-1:e==right?this.collision.indexOf(right)>-1:e?void 0:this.collision.length>0}exportSelf(){return JSON.parse(JSON.stringify(this))}},scriptComponent:class{constructor(e){this.script=e||function(){return null}}attachScript(e){this.script=e}imports(e){this.importScript=e}},Vector:n,Sprite:r,Image:r,Texture:r}}));