diff --git a/css/main.css b/css/main.css index 6a33308..8be5953 100644 --- a/css/main.css +++ b/css/main.css @@ -1,14 +1,14 @@ -*{ -margin:0; -padding:0; -outline:none; -position:relative; -left:0; -top:0; +* { + margin: 0; + padding: 0; + outline: none; + position: relative; + left: 0; + top: 0; +} +body { + width: 100vw; + height: 100vh; + overflow: hidden; + background-color: #888; } -body{ -width:100vw; -height:100vh; -overflow:hidden; -background-color:#000; -} \ No newline at end of file diff --git a/index.html b/index.html index f1da83b..66c71db 100644 --- a/index.html +++ b/index.html @@ -5,5 +5,5 @@ -
+
\ No newline at end of file diff --git a/js/libmain.js b/js/libmain.js index 1c6f338..2686a8a 100644 --- a/js/libmain.js +++ b/js/libmain.js @@ -1,6 +1,6 @@ //libmain.js -(function() { +(async function() { if(typeof PIXI!="object") { if(typeof loadfail=="function") { loadfail("libmain.js: object PIXI(type of "+(typeof PIXI)+") is not defined"); @@ -11,259 +11,74 @@ } var main_stage= {}; + main_stage.settings= {}; + main_stage.api= {}; - (function() { //init canvas and frame - console.log("[libmain] setting up basic pixi application..."); - //set up main canvas element - main_stage.width=1920; - main_stage.height=1080; - var mainframe=document.getElementById("mainframe"); - var canvas=document.getElementById("stagecanvas"); - if(mainframe===null) { - mainframe=document.createElement("div"); - mainframe.id="mainframe"; - document.body.appendChild(mainframe); + /////////////////////////////////////// set default settings + + main_stage.settings.fixed_ratio=16/9; + main_stage.settings.use_fixed_aspect_ratio=true; + + /////////////////////////////////////// init canvas and frame + + console.log("[libmain] setting up basic pixi application..."); + // set up main canvas element + main_stage.mainframe=document.getElementById("mainframe"); + main_stage.canvas=document.getElementById("maincanvas"); + if(main_stage.mainframe===null) { + main_stage.mainframe=document.createElement("div"); + main_stage.mainframe.id="mainframe"; + document.body.appendChild(main_stage.mainframe); + } + main_stage.mainframe.style.display="inline-block"; + main_stage.mainframe.style.display="inline-block"; + main_stage.mainframe.style.zIndex=0; + main_stage.mainframe.style.backgroundColor="#000000"; + if(main_stage.canvas===null) { + main_stage.canvas=document.createElement("canvas"); + main_stage.canvas.id="maincanvas"; + main_stage.mainframe.appendChild(main_stage.canvas); + } + main_stage.canvas.style.width="100%"; + main_stage.canvas.style.height="100%"; + main_stage.canvas.style.display="inline-block"; + main_stage.canvas.style.position="absolute"; + main_stage.canvas.style.zIndex=1; + + // document resize handler + main_stage.resize=function() { + var res=[document.body.clientWidth, document.body.clientHeight, 0, 0]; + if(main_stage.settings.use_fixed_aspect_ratio) { + res=libutil.calcresize(document.body.clientWidth, document.body.clientHeight, main_stage.settings.fixed_ratio); } - mainframe.style.display="inline-block"; - mainframe.style.display="inline-block"; - mainframe.style.zIndex=0; - mainframe.style.backgroundColor="#000000"; - if(canvas===null) { - canvas=document.createElement("canvas"); - canvas.id="stagecanvas"; - mainframe.appendChild(canvas); - } - canvas.style.width="100%"; - canvas.style.height="100%"; - canvas.style.display="inline-block"; - canvas.style.position="absolute"; - canvas.style.zIndex=1; - main_stage.mainframe=mainframe; - main_stage.canvas=canvas; + mainframe.style.width=res[0]+"px"; + mainframe.style.height=res[1]+"px"; + mainframe.style.left=res[2]+"px"; + mainframe.style.top=res[3]+"px"; + }; - //document resize handler - main_stage.resize=function() { - var res=libutil.calcresize(document.body.clientWidth, document.body.clientHeight, main_stage.width, main_stage.height); - mainframe.style.width=res[0]+"px"; - mainframe.style.height=res[1]+"px"; - mainframe.style.left=res[2]+"px"; - mainframe.style.top=res[3]+"px"; - }; + window.addEventListener("resize", main_stage.resize); + main_stage.resize(); - window.addEventListener("resize", main_stage.resize); - main_stage.resize(); + // setup pixi application + main_stage.renderer=await PIXI.autoDetectRenderer({ + "preference":"webgpu", + "canvas":main_stage.canvas, + "antialias":true, + "backgroundAlpha":0, + "width":main_stage.width, + "height":main_stage.height + }); - //setup pixi application - if(window.suppgl) { - main_stage.renderer=new PIXI.Renderer({"view":canvas, "antialias":true, "transparent":true, "backgroundAlpha":0, "width":main_stage.width, "height":main_stage.height}); - } else { - main_stage.renderer=new PIXI.CanvasRenderer({"view":canvas, "antialias":true, "transparent":true, "backgroundAlpha":0, "width":main_stage.width, "height":main_stage.height}); - } - main_stage.stage=new PIXI.Container(); - main_stage.stage.sortableChildren=true; - main_stage.render=function() { - requestAnimationFrame(main_stage.render); - main_stage.renderer.render(main_stage.stage); - }; - main_stage.render(); + main_stage.stage=new PIXI.Container(); + main_stage.stage.sortableChildren=true; + main_stage.render=function() { + requestAnimationFrame(main_stage.render); + main_stage.renderer.render(main_stage.stage); + }; + requestAnimationFrame(main_stage.render); - })(); - - (function() { //api functions - console.log("[libmain] initalizing api functions..."); - - main_stage.addVideoPIXI=function(pth, width, height, left, top) { //[DEPRECIATED] return=PIXI.Sprite - if(arguments.length<=1||isNaN(Number(width))) { - width=main_stage.renderer.screen.width; - } - if(arguments.length<=2||isNaN(Number(height))) { - height=main_stage.renderer.screen.height; - } - if(arguments.length<=3||isNaN(Number(left))) { - left=0; - } - if(arguments.length<=4||isNaN(Number(top))) { - top=0; - } - var tex=PIXI.Texture.from(pth); - var spr=PIXI.Sprite.from(tex); - spr.width=width; - spr.height=height; - spr.position.x=left; - spr.position.y=top; - spr.anchor.x=0; - spr.anchor.y=0; - main_stage.stage.addChild(spr); - tex.baseTexture.on("loaded", function() { - setTimeout(function() { - tex.baseTexture.resource.source.pause(); - tex.baseTexture.resource.source.currentTime=0; - }, 0); - }); - spr.play=function() { - tex.baseTexture.resource.source.play(); - }; - spr.pause=function() { - tex.baseTexture.resource.source.pause(); - }; - spr.stop=function() { - tex.baseTexture.resource.source.pause(); - tex.baseTexture.resource.source.currentTime=0; - }; - spr.seek=function(t) { - tex.baseTexture.resource.source.currentTime=t; - }; - spr.mute=function(t) { - tex.baseTexture.resource.source.muted=t; - }; - spr.loop=function(t) { - tex.baseTexture.resource.source.loop=t; - }; - return spr; - }; - - main_stage.addVideo=function(pth, width, height, left, top) { //return=HTMLVideoElement - if(arguments.length<=1||isNaN(Number(width))) { - width=main_stage.renderer.screen.width; - } - if(arguments.length<=2||isNaN(Number(height))) { - height=main_stage.renderer.screen.height; - } - if(arguments.length<=3||isNaN(Number(left))) { - left=0; - } - if(arguments.length<=4||isNaN(Number(top))) { - top=0; - } - width*=100; - width/=main_stage.renderer.screen.width; - height*=100; - height/=main_stage.renderer.screen.height; - left*=100; - left/=main_stage.renderer.screen.width; - top*=100; - top/=main_stage.renderer.screen.height; - var elem=document.createElement("video"); - elem.src=pth; - elem.load(); - elem.style.pointerEvents="none"; - elem.style.left=left+"%"; - elem.style.top=top+"%"; - elem.style.width=width+"%"; - elem.style.height=height+"%"; - elem.style.position="absolute"; - elem.style.display="inline-block"; - elem.style.zIndex=-1; - elem.destroy=function() { - elem.parentNode.removeChild(elem); - elem=null; - }; - elem.setposi=function(x, y) { - x*=100; - x/=main_stage.renderer.screen.width; - y*=100; - y/=main_stage.renderer.screen.height; - elem.style.left=x+"%"; - elem.style.top=y+"%"; - }; - main_stage.mainframe.appendChild(elem); - return elem; - }; - - main_stage.addAudio=function(pth) { //return=HTMLAudioElement - var elem=document.createElement("audio"); - elem.style.display="none"; - elem.src=pth; - elem.load(); - elem.destroy=function() { - elem.parentNode.removeChild(elem); - elem=null; - }; - main_stage.mainframe.appendChild(elem); - return elem; - }; - - main_stage.addText=function(text, left, top, cfg) { //return=PIXI.Sprite - if(arguments.length<=1||isNaN(Number(left))) { - left=0; - } - if(arguments.length<=2||isNaN(Number(top))) { - top=0; - } - if(arguments.length<=3||!(cfg instanceof Object)) { - cfg= {"fontFamily":"Arial", "fontSize":35, "fill":0xffffff, "align":"left"}; - } - var spr=new PIXI.Text(text, cfg); - spr.position.x=left; - spr.position.y=top; - spr.anchor.x=0.5; - spr.anchor.y=0.5; - main_stage.stage.addChild(spr); - return spr; - }; - - main_stage.addShape=function(name, left, top, width, height) { //return=PIXI.Sprite - var shape=null; - for(var a=0; a