diff --git a/index.html b/index.html index a6e968c..a82c025 100644 --- a/index.html +++ b/index.html @@ -6,5 +6,5 @@ -
+ \ No newline at end of file diff --git a/js/libmain.js b/js/libmain.js index 8768301..ffe0e72 100644 --- a/js/libmain.js +++ b/js/libmain.js @@ -19,28 +19,23 @@ libmain.settings.fixed_ratio=16/9; libmain.settings.use_fixed_aspect_ratio=true; libmain.settings.show_fps=true; + libmain.settings.use_anti_alias=true; /////////////////////////////////////// init canvas and frame console.log("[libmain] setting up basic pixi application..."); // set up main canvas element - libmain.mainframe=document.getElementById("mainframe"); libmain.canvas=document.getElementById("maincanvas"); - if(libmain.mainframe==null) { - libmain.mainframe=document.createElement("div"); - libmain.mainframe.id="mainframe"; - document.body.appendChild(libmain.mainframe); - } - libmain.mainframe.style.display="inline-block"; - libmain.mainframe.style.zIndex=0; - libmain.mainframe.style.backgroundColor="#000000"; if(libmain.canvas==null) { libmain.canvas=document.createElement("canvas"); libmain.canvas.id="maincanvas"; - libmain.mainframe.appendChild(libmain.canvas); + document.body.appendChild(libmain.canvas); } - libmain.canvas.style.width="100%"; - libmain.canvas.style.height="100%"; + libmain.canvas.style.width=0; + libmain.canvas.style.height=0; + libmain.canvas.width=0; + libmain.canvas.height=0; + libmain.canvas.style.background="rgba(0,0,0,0.5)"; libmain.canvas.style.display="inline-block"; libmain.canvas.style.position="absolute"; libmain.canvas.style.zIndex=1; @@ -49,17 +44,17 @@ libmain.renderer=await PIXI.autoDetectRenderer({ "preference":"webgpu", "canvas":libmain.canvas, - "antialias":true, + "antialias":libmain.settings.use_anti_alias, "backgroundAlpha":0, - "width":libmain.width, - "height":libmain.height + "width":100, + "height":100 }); libmain.stageroot=new PIXI.Container(); libmain.stageroot.sortableChildren=true; libmain.stageroot.boundsArea=new PIXI.Rectangle(0, 0, 0, 0); libmain.stageroot.cullArea=libmain.stageroot.boundsArea; - libmain.render=function() { + libmain.render_tick=function() { try { libmain.renderer.render(libmain.stageroot); } catch(e) { @@ -71,9 +66,9 @@ } return; } - requestAnimationFrame(libmain.render); + requestAnimationFrame(libmain.render_tick); }; - requestAnimationFrame(libmain.render); + requestAnimationFrame(libmain.render_tick); /////////////////////////////////////// end of setup @@ -83,10 +78,12 @@ if(libmain.settings.use_fixed_aspect_ratio) { res=libutil.calcresize(document.body.clientWidth, document.body.clientHeight, libmain.settings.fixed_ratio); } - libmain.mainframe.style.width=res[0]+"px"; - libmain.mainframe.style.height=res[1]+"px"; - libmain.mainframe.style.left=res[2]+"px"; - libmain.mainframe.style.top=res[3]+"px"; + libmain.canvas.width=res[0]; + libmain.canvas.height=res[1]; + libmain.canvas.style.width=res[0]+"px"; + libmain.canvas.style.height=res[1]+"px"; + libmain.canvas.style.left=res[2]+"px"; + libmain.canvas.style.top=res[3]+"px"; libmain.stageroot.boundsArea.width=res[0]; libmain.stageroot.boundsArea.height=res[1]; libmain.renderer.width=res[0];