JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/3.0.8/pixi.min.js"></script>
<div class="canvas1"></div>
<div class="canvas2"></div>
CSS
.canvas1 {
width:50%;
float: left;
}
.canvas2 {
width: 50%;
float: left;
}
JavaScript
// create an new instance of a pixi stage
var stage = new PIXI.Container();
stage.scale.x = stage.scale.y = 0.5;
var width = window.innerWidth/2;
var height = window.innerHeight;
// create a renderer instance
var renderer = PIXI.autoDetectRenderer(width, height, null);
$('.canvas1').append(renderer.view);
renderer.backgroundColor = 0x97c56e;
var mirrorRenderer = PIXI.autoDetectRenderer(width, height, null);
$('.canvas2').append(mirrorRenderer.view);
var renderTexture = new PIXI.RenderTexture(mirrorRenderer, width, height);
var mirrorStage = new PIXI.Sprite(renderTexture);
requestAnimationFrame( animate );
// create a texture from an image path
var texture = PIXI.Texture.fromImage("http://www.goodboydigital.com/pixijs/examples/8/bunny.png");
createBunny(100, 100)
function createBunny(x, y)
{
// create our little bunny friend..
var bunny = new PIXI.Sprite(texture);
// bunny.width = 300;
// enable the bunny to be interactive.. this will allow it to respond to mouse and touch events
bunny.interactive = true;
// this button mode will mean the hand cursor appears when you rollover the bunny with your mouse
bunny.buttonMode = true;
// center the bunnys anchor point
bunny.anchor.x = 0.5;
bunny.anchor.y = 0.5;
// make it a bit bigger, so its easier to touch
bunny.scale.x = bunny.scale.y = 3;
// use the mousedown and touchstart
bunny.mousedown = bunny.touchstart = function(data)
{
// data.originalEvent.preventDefault()
// store a refference to the data
// The reason for this is because of multitouch
// we want to track the movement of this particular touch
this.data = data;
this.alpha = 0.9;
this.dragging = true;
};
// set the events for when the mouse is released or a touch is released
bunny.mouseup = bunny.mouseupoutside = bunny.touchend = bunny.touchendoutside = function(data)
{
this.alpha = 1
this.dragging = false;
// set the interaction data to null
this.data =...