103 lines
3.5 KiB
JavaScript
103 lines
3.5 KiB
JavaScript
//libmain.js
|
|
|
|
(async function() {
|
|
if(typeof PIXI!="object") {
|
|
if(typeof loadfail=="function") {
|
|
loadfail("libmain.js: PIXI(type of "+(typeof PIXI)+") is not an object");
|
|
} else {
|
|
window.alert("libmain.js: PIXI(type of "+(typeof PIXI)+") is not an object");
|
|
}
|
|
return;
|
|
}
|
|
|
|
var libmain= {};
|
|
libmain.settings= {};
|
|
libmain.api= {};
|
|
|
|
/////////////////////////////////////// set default settings
|
|
|
|
libmain.settings.fixed_ratio=16/9;
|
|
libmain.settings.use_fixed_aspect_ratio=true;
|
|
libmain.settings.show_fps=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);
|
|
}
|
|
libmain.canvas.style.width="100%";
|
|
libmain.canvas.style.height="100%";
|
|
libmain.canvas.style.display="inline-block";
|
|
libmain.canvas.style.position="absolute";
|
|
libmain.canvas.style.zIndex=1;
|
|
|
|
// setup pixi application
|
|
libmain.renderer=await PIXI.autoDetectRenderer({
|
|
"preference":"webgpu",
|
|
"canvas":libmain.canvas,
|
|
"antialias":true,
|
|
"backgroundAlpha":0,
|
|
"width":libmain.width,
|
|
"height":libmain.height
|
|
});
|
|
|
|
libmain.stageroot=new PIXI.Container();
|
|
libmain.stageroot.sortableChildren=true;
|
|
libmain.stageroot.boundsArea=new PIXI.Rectangle();
|
|
libmain.render=function() {
|
|
try {
|
|
libmain.renderer.render(libmain.stageroot);
|
|
} catch(e) {
|
|
console.error(e);
|
|
if(typeof loadfail=="function") {
|
|
loadfail(libutil.error2str(e));
|
|
} else {
|
|
window.alert(libutil.error2str(e));
|
|
}
|
|
return;
|
|
}
|
|
requestAnimationFrame(libmain.render);
|
|
};
|
|
requestAnimationFrame(libmain.render);
|
|
|
|
/////////////////////////////////////// end of setup
|
|
|
|
// document resize handler
|
|
libmain.onresize=function() {
|
|
var res=[document.body.clientWidth, document.body.clientHeight, 0, 0];
|
|
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.stageroot.boundsArea.x=0;
|
|
libmain.stageroot.boundsArea.y=0;
|
|
libmain.stageroot.boundsArea.width=res[0];
|
|
libmain.stageroot.boundsArea.height=res[1];
|
|
libmain.renderer.width=res[0];
|
|
libmain.renderer.height=res[1];
|
|
};
|
|
|
|
window.addEventListener("resize", libmain.onresize);
|
|
libmain.onresize();
|
|
|
|
window.libmain=libmain;
|
|
console.log("[libmain] all components initialized successfully.");
|
|
})();
|