111 lines
2.1 KiB
HTML
111 lines
2.1 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>
|
|
<!--<script src="pixi.js"></script>-->
|
|
</head>
|
|
<body>
|
|
<script>
|
|
|
|
var renderer = PIXI.autoDetectRenderer(630, 410);
|
|
|
|
// create an new instance of a pixi stage
|
|
var stage = new PIXI.Stage(0xFFFFFF, true);
|
|
|
|
stage.interactive = true;
|
|
|
|
var bg = PIXI.Sprite.fromImage("depth_blur_BG.jpg");
|
|
stage.addChild(bg);
|
|
|
|
var littleDudes = PIXI.Sprite.fromImage("depth_blur_dudes.jpg");
|
|
littleDudes.position.y = 100;
|
|
stage.addChild(littleDudes);
|
|
|
|
var littleRobot = PIXI.Sprite.fromImage("depth_blur_moby.jpg");
|
|
littleRobot.position.x = 120;
|
|
stage.addChild(littleRobot);
|
|
|
|
var blurFilter1 = new PIXI.BlurFilter();
|
|
var blurFilter2 = new PIXI.BlurFilter();
|
|
|
|
littleDudes.filters = [blurFilter1];
|
|
littleRobot.filters = [blurFilter2];
|
|
|
|
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);
|
|
|
|
|
|
|
|
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")
|
|
stage.addChild(logo);
|
|
|
|
logo.anchor.x = 1;
|
|
logo.anchor.y = 1;
|
|
|
|
logo.position.x = 630
|
|
logo.scale.x = logo.scale.y = 0.5;
|
|
logo.position.y = 400;
|
|
logo.interactive = true;
|
|
logo.buttonMode = true;
|
|
|
|
logo.click = logo.tap = function()
|
|
{
|
|
window.open("https://github.com/GoodBoyDigital/pixi.js", "_blank")
|
|
}
|
|
|
|
|
|
requestAnimFrame(animate);
|
|
|
|
function animate() {
|
|
|
|
count += 0.01;
|
|
|
|
var blurAmount = Math.cos(count) ;
|
|
var blurAmount2 = Math.sin(count) ;
|
|
|
|
|
|
blurFilter1.blur = 20 * (blurAmount);
|
|
blurFilter2.blur = 20 * (blurAmount2);
|
|
renderer.render(stage);
|
|
requestAnimFrame( animate );
|
|
}
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|