JSFiddle - React, Tailwind, and code Playground

by jay3sh

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.6.0/pixi.min.js"></script>
<body>
<div id="pause-resume-dlg">
    <svg width="100px" height="100px">
    <path d="M 25,25 L 25,75 L 75,50 Z"
      style="stroke:#ffffff;fill:#ffffff;stroke-width:5;stroke-linejoin:round">
    </path>
    </svg>
</div>
</body>

CSS

#pause-resume-dlg {
  width : 100px;
  height : 100px;
  position : absolute;
  left : 50px;
  top : 50px;
  display : none;
  background : rgba(0,0,0,0.5);
  border-radius : 20px;
  cursor : pointer;
}

JavaScript

/**
I noticed that in my game the Pixi Application takes lot of CPU resources when it's running. Even when it's in background or is not visible, it consumes the CPU. Two Chrome processes are constantly using 25-30% CPU on my linux box (more on my macOS). It became very troublesome while working from a cafe on my macbook pro without charger. The app drained by battery in no time.

Only way to avoid this is to stop the pixi application ticker when you don't want 
it to consume resources. For a typical Pixi.js application, i.e. a game, it does
make sense for the game to pause when it goes in background. Therefore I wrote
this small routine using the `blur` event handler, to pause the Pixi app, 
whenever the window looses focus. This drops the CPU usage to 6-7% by Chrome processes.

In a browser or electron app, the window.onblur callback will get called whenever
the focus switches from the app window to some other application (or even dev
console). However in jsfiddle environment, you need to click on the application
first and then click somewhere else for testing this functionality. That's 
because the code runs inside an iframe on jsfiddle page. The simple resume dialog
lets you resume the app when you want.
*/


var app = new PIXI.Application(800, 600, {backgroundColor : 0x1099bb});
document.body.appendChild(app.view);

// create a new Sprite from an image path
var bunny = PIXI.Sprite.fromImage('http://pixijs.io/examples/required/assets/basics/bunny.png')

// center the sprite's anchor point
bunny.anchor.set(0.5);

// move the sprite to the center of the screen
bunny.x = app.renderer.width / 2;
bunny.y = app.renderer.height / 2;

app.stage.addChild(bunny);

// Listen for animate update
app.ticker.add(function(delta) {
    // just for fun, let's rotate mr rabbit a little
    // delta is 1 if running at 100% performance
    // creates frame-independent tranformation
    bunny.rotation += 0.1 * delta;
});

var pauseResumeDlg =...