pixi latest version test

by realhunts

HTML

<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">

<script src="https://stemkoski.github.io/Three.js/js/Stats.js"></script>
<script src="https://cdn.jsdelivr.net/npm/pixi-filters@latest/dist/pixi-filters.js"></script>
<script src="https://pixijs.io/pixi-lights/lib/pixi-lights.js"></script>

JavaScript

var renderer = PIXI.autoDetectRenderer(window.innerWidth/2, window.innerHeight/2, { antialias: true});
//new PIXI.WebGLRenderer(1, 1, { antialias: false, resolution: 1, autoResize: true});
//PIXI.autoDetectRenderer(window.innerWidth/2, window.innerHeight/2, { antialias: true});
renderer.view.width = window.innerWidth/1.2
renderer.view.height = window.innerHeight/1.2
document.body.appendChild(renderer.view);

var stage = new PIXI.Container();    


var loader = PIXI.Loader.shared,
  resources = PIXI.Loader.shared.resources,
  Sprite = PIXI.Sprite;
  

var stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
stats.domElement.style.zIndex = 100;
document.body.appendChild( stats.domElement );

/*var graphics = new PIXI.Graphics();
graphics.interactive = true;
graphics.lineStyle(0);
graphics.beginFill(0xFFFF0B, 0.5);
graphics.drawCircle(0, 0, 60);
graphics.endFill();
graphics.x = 100;
graphics.y = 100;
stage.addChild(graphics); */   

loader.add('background', 'https://cdn.glitch.com/72c38476-bb33-4035-97f0-b7fc09249ce9%2F5a06e449dc8ea3f788ef0387be408eb2.jpg?v=1577684298116')
loader.add('fairy', 'https://cdn.glitch.com/72c38476-bb33-4035-97f0-b7fc09249ce9%2Fkissclipart-fairy-transparent-background-clipart-fairy-ca40a88ca2b4a970.gif?v=1577684144068')
    .load(startup);



function startup()
{

    var fairy_forest = new PIXI.Sprite(loader.resources.background.texture);

    // Center the sprite's anchor point
    fairy_forest.anchor.set(0.5);

    // Move the sprite to the center of the screen
    fairy_forest.x = renderer.width / 2;
    fairy_forest.y = renderer.height / 2;
    //bunny.scale.set(3, 3);
    stage.addChild(fairy_forest);
var godray = new PIXI.filters.ColorMatrixFilter()//GodrayFilter()
    godray.blackAndWhite(true)
    godray.greyscale(.3)
		/*var godray = new PIXI.filters.ColorMatrixFilter()//GodrayFilter()
    godray.blackAndWhite(true)
    godray.greyscale(.3)
    fairy_forest.filters = [
       ...