JSFiddle - React, Tailwind, and code Playground

by nt_pch

HTML

<script src="https://pixijs.github.io/examples/_site/js/pixi.js"></script>

JavaScript

var renderer = PIXI.autoDetectRenderer(400, 400, null);
document.body.appendChild(renderer.view);

var stage = new PIXI.Container();


var bg = new PIXI.Graphics();
bg.beginFill(0xFF0000, 1);
bg.drawRect(0, 0, 200, 200);
stage.addChild(bg);

bg.interactive = true;
bg.buttonMode = true
bg.on('mousedown', bgDown)
  .on('mouseup', bgUp)
  .on('mouseupoutside', bgUpoutside)
  .on('mousemove', bgMove)
  .on('mouseover', bgOver)
  .on('mouseout', bgOut);



var fg = new PIXI.Graphics();
fg.beginFill(0x00FF00, 1);
fg.drawRect(10, 10, 200, 200);
stage.addChild(fg);


stage.interactive = true;


function bgDown() {
    console.log('down');
}
function bgUp() {
    console.log('up');
}
function bgUpoutside() {
    console.log('up outside');
}
function bgMove() {
    console.log('move');
}
function bgOver() {
    console.log('over');
}
function bgOut() {
    console.log('out');
}


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