271 lines
9.7 KiB
JavaScript
271 lines
9.7 KiB
JavaScript
//libmain.js
|
|
|
|
(function() {
|
|
if(typeof PIXI!="object") {
|
|
if(typeof loadfail=="function") {
|
|
loadfail("libmain.js: object PIXI(type of "+(typeof PIXI)+") is not defined");
|
|
} else {
|
|
window.alert("libmain.js: object PIXI(type of "+(typeof PIXI)+") is not defined");
|
|
}
|
|
return;
|
|
}
|
|
|
|
var main_stage= {};
|
|
|
|
(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);
|
|
}
|
|
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;
|
|
|
|
//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();
|
|
|
|
//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();
|
|
|
|
})();
|
|
|
|
(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<main_stage.shapes.length; a++) {
|
|
if(main_stage.shapes[a].name==name) {
|
|
shape=main_stage.shapes[a];
|
|
break;
|
|
}
|
|
}
|
|
if(shape===null) {
|
|
console.error("shape \""+name+"\" is not defined.");
|
|
return false;
|
|
}
|
|
if(arguments.length<=1||isNaN(Number(left))) {
|
|
left=0;
|
|
}
|
|
if(arguments.length<=2||isNaN(Number(top))) {
|
|
top=0;
|
|
}
|
|
if(arguments.length<=3||isNaN(Number(width))) {
|
|
width=shape.canvas.width;
|
|
}
|
|
if(arguments.length<=4||isNaN(Number(height))) {
|
|
height=shape.canvas.height;
|
|
}
|
|
var tex=PIXI.Texture.from(shape.canvas);
|
|
var spr=PIXI.Sprite.from(tex);
|
|
spr.width=width;
|
|
spr.height=height;
|
|
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.addImage=function(pth, left, top, width, height) { //return=PIXI.Sprite
|
|
var tex=PIXI.Texture.from(pth);
|
|
if(arguments.length<=1||isNaN(Number(left))) {
|
|
left=0;
|
|
}
|
|
if(arguments.length<=2||isNaN(Number(top))) {
|
|
top=0;
|
|
}
|
|
if(arguments.length<=3||isNaN(Number(width))) {
|
|
width=tex.width;
|
|
}
|
|
if(arguments.length<=4||isNaN(Number(height))) {
|
|
height=tex.height;
|
|
}
|
|
var spr=PIXI.Sprite.from(tex);
|
|
spr.width=width;
|
|
spr.height=height;
|
|
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;
|
|
};
|
|
|
|
})();
|
|
|
|
window.main_stage=main_stage;
|
|
console.log("[libmain] all components initialized successfully.");
|
|
})();
|