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://cdnjs.cloudflare.com/ajax/libs/pixi.js/3.0.6/pixi.js"></script>

JavaScript

PIXI.SCALE_MODES.DEFAULT = PIXI.SCALE_MODES.NEAREST

var forceCanvas = true;
var renderer = PIXI.autoDetectRenderer(1000, 500,{}, forceCanvas);
var stage = new PIXI.Container();
var grass, grass1;

var update = function(){
  requestAnimationFrame(update);
  renderer.render(stage);
}

document.body.appendChild(renderer.view);

var build = function(){

  stage = new PIXI.Container();
  var frame = PIXI.Texture.fromFrame('grass');
  
  //trimmed version
  grass = new PIXI.extras.TilingSprite(frame, frame.width, frame.height);
  stage.addChild(grass);
  grass.width = 50;
  frame = PIXI.Texture.fromFrame('grass2');
  
  //untrimmed version
  grass1 = new PIXI.extras.TilingSprite(frame, frame.width, frame.height);
  grass1.width = 50;
  grass1.y = 200;
  stage.addChild(grass1);
}


var loader = PIXI.loader
.add("http://2vc.org/temp/test.json")
.add("http://2vc.org/temp/test2.json")
.load(function(){
  build();
  update();
})


var params = { width:500};
var gui = new dat.GUI();

var changeTileWidth = gui.add(params, 'width',1,1000).name('Width:')

changeTileWidth.onChange(function(value){
   grass.width = grass1.width = value;
});