PixiJS DisplayObject Transform Demo

Demonstrates how to use the transformation properties of PIXI.DisplayObject.

by Hooman Askari

HTML

<script src="https://pixijs.download/dev/pixi.min.js"></script>
<html>
  <head>
    <title>PixiJS DisplayObject Transform Demo</title>
  </head>
  <body>
  </body>
</html>

JavaScript

const app = new PIXI.Application({
	backgroundColor: 0xdddaaa,
	width: 400,
  height: 400
});
const renderer = app.renderer;
const stage = app.stage;
const ticker = app.ticker;
const view = app.view;

document.body.appendChild(view);

const display = new PIXI.Graphics();
display.position = new PIXI.Point(10 + 190, 10 + 190);
display.width = 390;
display.height = 390;

display.beginFill(0xfabcde);
display.drawRect(0, 0, 380, 380);
display.endFill();

/*!-- This is the "transform demo" --!*/
display.pivot = new PIXI.Point(190, 190);

stage.addChild(display);

ticker.add((time) => {
	display.angle += (time / 100) * 180;
  display.scale = new PIXI.Point(
  	Math.sin(display.rotation),
    Math.sin(display.rotation));
});
/*!----!*/