JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cdnjs.cloudflare.com/ajax/libs/pixi.js/2.0.0/pixi.js"></script>
<script src="http:////ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body onload="init();" style="background:black;">
<div id="start"></div>
JavaScript
//INIT
function init() {
myDisplayResolution = window.devicePixelRatio;
if (myDisplayResolution == 2) {
ww = $(window).width() / 2;
wh = $(window).height() / 2;
} else {
ww = $(window).width();
wh = $(window).height();
}
$('html, body').css({
'overflow': 'hidden',
'height': '100%'
});
welcomestage = new welcomestage();
requestAnimationFrame(welcomestage.animate);
}
//Renderstage
function rendererstage(type, cavansid, width, height) {
var rendererOptions = {
antialiasing:false,
transparent:true,
resolution:myDisplayResolution
}
if (type == "fullscreen") {
width = ww;
height = wh;
}
this.renderer = new PIXI.autoDetectRenderer(width, height, rendererOptions);
document.getElementById(cavansid).appendChild(this.renderer.view);
this.interactive = true;
this.stage = new PIXI.Stage(0x000000, this.interactive);
}
//Welcomestage
function welcomestage() {
var that = this;
//renderer & stage
this.rendererstage = new rendererstage("fullscreen", "start");
//Retina Functions
if (myDisplayResolution === 2) {
// load a retina texture if the resolution is 2
// because of the @x2 in the name pixi will assume the textures resolution is 2
this.logoTexture = PIXI.Texture.fromImage("http://i.imgur.com/gwlPu.jpg");
//found no image with @2x
this.logoTexture.baseTexture.resolution = 2;
} else {
// load a normal texture if the resolution is one
this.logoTexture = PIXI.Texture.fromImage("http://i.imgur.com/gwlPu.jpg");
}
this.letter = new Object();
this.letter.N1 = new PIXI.Sprite(this.logoTexture);
this.blurFil = new Object();
this.blurFil.N1 = new PIXI.BlurFilter();
this.letter.N1.filters = [this.blurFil.N1];
//Add to Stage
this.rendererstage.stage.addChild(this.letter.N1);
//Animate
...