JSFiddle - React, Tailwind, and code Playground

by fletcher00

HTML

<script src="https://github.com/GoodBoyDigital/pixi.js/releases/download/v3.0.5/pixi.js"></script>

JavaScript

// You can use either PIXI.WebGLRenderer or PIXI.CanvasRenderer
var renderer = new PIXI.WebGLRenderer(800, 600);

document.body.appendChild(renderer.view);

var stage = new PIXI.Container();
var texture = PIXI.Texture.fromImage("http://www.goodboydigital.com/pixijs/examples/15/displacement_fish1.png", true);

function createSprite() {    
    var s = new PIXI.Sprite(texture);
	return s;
}

var s1 = createSprite();
s1.position = new PIXI.Point(100,100);
stage.addChild(s1);

var s2 = createSprite();
s2.position = new PIXI.Point(100,200);
s2.cacheAsBitmap = true;
stage.addChild(s2);

//setTimeout(function(){ s2.cacheAsBitmap=true; }, 1000);

requestAnimationFrame(animate);

function animate() {
    renderer.render(stage);
    
    requestAnimationFrame(animate);
}