JSFiddle - React, Tailwind, and code Playground

by Nikhil

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.1.3/pixi.min.js"></script>
<script src="http://1.bp.blogspot.com/-U8E-NbGSyrU/VYKZi3dwh1I/AAAAAAAAP94/kcnuLK9CM-A/s640/pikachu-pixel-art-building-ideas.png"></script>

JavaScript

import * as PIXI from 'pixi.js';

// The application will create a renderer using WebGL, if possible,
// with a fallback to a canvas render. It will also setup the ticker
// and the root stage PIXI.Container
const app = new PIXI.Application();

// The application will create a canvas element for you that you
// can then insert into the DOM
document.body.appendChild(app.view);

// load the texture we need
app.loader.add('bunny', 'http://1.bp.blogspot.com/-U8E-NbGSyrU/VYKZi3dwh1I/AAAAAAAAP94/kcnuLK9CM-A/s640/pikachu-pixel-art-building-ideas.png').load((loader, resources) => {
    // This creates a texture from a 'bunny.png' image
    const bunny = new PIXI.Sprite(resources.bunny.texture);

    // Setup the position of the bunny
    bunny.x = app.renderer.width / 2;
    bunny.y = app.renderer.height / 2;

    // Rotate around the center
    bunny.anchor.x = 0.5;
    bunny.anchor.y = 0.5;

    // Add the bunny to the scene we are building
    app.stage.addChild(bunny);

    // Listen for frame updates
    app.ticker.add(() => {
         // each frame we spin the bunny around a bit
        bunny.rotation += 0.01;
    });
});