JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://grantory.com/js/external/libs/pixi.dev.js"></script>
<body>
</body>
CSS
body {
margin: 0;
padding: 0;
background-color: #000000;
}
JavaScript
// create an new instance of a pixi stage
var stage = new PIXI.Stage(0x66FF99);
// create a renderer instance
var renderer = PIXI.autoDetectRenderer(400, 300);
// add the renderer view element to the DOM
document.body.appendChild(renderer.view);
requestAnimFrame(animate);
var objContainer = new PIXI.DisplayObjectContainer();
// create a texture from an image path
var texture = PIXI.Texture.fromImage("http://www.goodboydigital.com/pixijs/bunnymark/bunny.png");
var bunny = [];
for(var i = 0;i < 2;i++){
// create a new Sprite using the texture
bunny[i] = new PIXI.Sprite(texture);
// center the sprites anchor point
bunny[i].anchor.x = 0.5;
bunny[i].anchor.y = 0.5;
// move the sprite to the center of the screen
bunny[i].position.x = 200 + (5 * i);
bunny[i].position.y = 150 + (5 * i);
objContainer.addChild(bunny[i]);
}
var objContainerTexture = objContainer.generateTexture();
var objContainerSprite = new PIXI.Sprite(objContainerTexture);
stage.addChild(objContainerSprite);
function animate() {
requestAnimFrame(animate);
// just for fun, let's rotate mr rabbit a little
bunny.rotation += 0.1;
// render the stage
renderer.render(stage);
}