142 lines
3 KiB
HTML
142 lines
3 KiB
HTML
<!DOCTYPE HTML>
|
|
<html>
|
|
<head>
|
|
<title>pixi.js example 15 - Filters</title>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: #000000;
|
|
}
|
|
</style>
|
|
|
|
<script src="../../bin/pixi.dev.js"></script>
|
|
</head>
|
|
<body>
|
|
<script>
|
|
var renderer = PIXI.autoDetectRenderer(620, 380);
|
|
|
|
// create an new instance of a pixi stage
|
|
var stage = new PIXI.Stage(0xFFFFFF, true);
|
|
|
|
stage.interactive = true;
|
|
|
|
var bg = PIXI.Sprite.fromImage("BGrotate.jpg");
|
|
bg.anchor.x = 0.5;
|
|
bg.anchor.y = 0.5;
|
|
|
|
bg.position.x = 620 / 2;
|
|
bg.position.y = 380 / 2;
|
|
|
|
var colorMatrix = [1,0,0,0,
|
|
0,1,0,0,
|
|
0,0,1,0,
|
|
0,0,0,1];
|
|
|
|
var filter = new PIXI.ColorMatrixFilter();
|
|
|
|
var container = new PIXI.DisplayObjectContainer();
|
|
container.position.x = 620 / 2;
|
|
container.position.y = 380 / 2;
|
|
|
|
var bgFront = PIXI.Sprite.fromImage("SceneRotate.jpg");
|
|
bgFront.anchor.x = 0.5;
|
|
bgFront.anchor.y = 0.5;
|
|
|
|
container.addChild(bgFront);
|
|
|
|
var light2 = PIXI.Sprite.fromImage("LightRotate2.png");
|
|
light2.anchor.x = 0.5;
|
|
light2.anchor.y = 0.5;
|
|
container.addChild(light2);
|
|
|
|
var light1 = PIXI.Sprite.fromImage("LightRotate1.png");
|
|
light1.anchor.x = 0.5;
|
|
light1.anchor.y = 0.5;
|
|
container.addChild(light1);
|
|
|
|
var panda = PIXI.Sprite.fromImage("panda.png");
|
|
panda.anchor.x = 0.5;
|
|
panda.anchor.y = 0.5;
|
|
|
|
container.addChild(panda);
|
|
|
|
stage.addChild(container);
|
|
|
|
// create a renderer instance
|
|
renderer.view.style.position = "absolute"
|
|
renderer.view.style.width = window.innerWidth + "px";
|
|
renderer.view.style.height = window.innerHeight + "px";
|
|
renderer.view.style.display = "block";
|
|
|
|
// add render view to DOM
|
|
document.body.appendChild(renderer.view);
|
|
|
|
stage.filters = [filter];
|
|
|
|
var count = 0;
|
|
var switchy = false;
|
|
|
|
stage.click = stage.tap = function()
|
|
{
|
|
switchy = !switchy
|
|
|
|
if(!switchy)
|
|
{
|
|
stage.filters = [filter];
|
|
}
|
|
else
|
|
{
|
|
stage.filters = null;
|
|
}
|
|
}
|
|
|
|
// Add a pixi Logo!
|
|
var logo = PIXI.Sprite.fromImage("../../logo_small.png");
|
|
|
|
logo.anchor.x = 1;
|
|
logo.position.x = 620
|
|
logo.scale.x = logo.scale.y = 0.5;
|
|
logo.position.y = 320;
|
|
logo.interactive = true;
|
|
logo.buttonMode = true;
|
|
|
|
logo.click = logo.tap = function()
|
|
{
|
|
window.open("https://github.com/GoodBoyDigital/pixi.js", "_blank");
|
|
}
|
|
|
|
var help = new PIXI.Text("Click to turn filters on / off.", { font: "bold 12pt Arial", fill: "white" });
|
|
help.position.y = 350;
|
|
help.position.x = 10;
|
|
stage.addChild(help);
|
|
|
|
function animate() {
|
|
bg.rotation += 0.01;
|
|
bgFront.rotation -= 0.01;
|
|
|
|
light1.rotation += 0.02;
|
|
light2.rotation += 0.01;
|
|
|
|
panda.scale.x = 1 + Math.sin(count) * 0.04;
|
|
panda.scale.y = 1 + Math.cos(count) * 0.04;
|
|
|
|
count += 0.1;
|
|
|
|
colorMatrix[1] = Math.sin(count) * 3;
|
|
colorMatrix[2] = Math.cos(count);
|
|
colorMatrix[3] = Math.cos(count) * 1.5;
|
|
colorMatrix[4] = Math.sin(count / 3) * 2;
|
|
colorMatrix[5] = Math.sin(count / 2);
|
|
colorMatrix[6] = Math.sin(count / 4);
|
|
filter.matrix = colorMatrix;
|
|
|
|
renderer.render(stage);
|
|
requestAnimFrame(animate);
|
|
}
|
|
|
|
requestAnimFrame(animate);
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|