JSFiddle - React, Tailwind, and code Playground

by georgie

HTML

<script src="http://dat-gui.googlecode.com/git/build/dat.gui.js"></script>
<script src="https://rawgit.com/GoodBoyDigital/pixi.js/1692d11e2343baec736f066c4c8520a5687f6d53/bin/pixi.js"></script>

JavaScript

var params = { tilewidth:500, tilex: 1.4,spritewidth:"-1",round:false, scale:100, outscale:100 };
var gui = new dat.GUI();
gui.add(params,'tilex',0,1100).name('Tile X');
gui.add(params,'round').name('Rounding Tile X?');
gui.add(params,'scale',100, 200, 10).name('Tile Scaling');
gui.add(params,'outscale',100, 200, 10).name('Outer Scaling');
var changeTileWidth = gui.add(params, 'tilewidth',100,10000).name('Tilewidth:')
gui.add(params, 'spritewidth').name('spritewidth:').listen();

var forceCanvas = false;
var renderer = PIXI.autoDetectRenderer(window.innerWidth,window.innerHeight, {
}, forceCanvas);
document.body.appendChild(renderer.view);

var stage = new PIXI.Container();

var assetLoader = new PIXI.loaders.Loader();
assetLoader.add("http://2vc.org/temp/sprite-0.json");
var theTile;
assetLoader.once('complete', function(){
    console.log('loaeded');
    
    var tx = PIXI.Texture.fromFrame('ceiling.png');
    params.spritewidth = tx.baseTexture.width+' ';
    console.log(tx);
    theTile = new PIXI.extras.TilingSprite(tx, 1000, 800);
    theTile.scale.set(1);
    theTile.y = 0;
    stage.addChild(theTile);
});

assetLoader.load();
changeTileWidth.onChange(function(value){
   theTile.width = value;
});
requestAnimationFrame(animate);

function animate() {
	renderer.render(stage);   
  	requestAnimationFrame(animate);
    stage.scale.set(params.outscale/100);
    
    if(theTile){
        theTile.tilePosition.x=-params.tilex
       theTile.scale.set(params.scale/100);
        if(params.round){
            theTile.tilePosition.x = Math.round(theTile.tilePosition.x);
        }
    }
}