pixi-flexible-ui

Library with a flexible component placement system

Setup

npm install -S pixi-flexible-ui

Usage

import { Application } from 'pixi.js';
import { Control } from 'pixi-flexible-ui';

// Create a new application
const app = new Application();

// Initialize the application
await app.init({ background: '#1099bb', resizeTo: window });

// Append the application canvas to the document body
document.body.appendChild(app.canvas);

// Create Root Control element
const rootControl = new Control();
// To be able to access root from any child control
rootControl.host = rootControl;
rootControl.ticker = app.ticker;
app.stage.addChild(rootControl);

app.ticker.add(() => rootControl.layout());

// Example
const imageControl = new ImageControl('images/bunny.png');
imageControl.autoScale = true;
rootControl.addChild(imageControl);

window.addEventListener('resize', () => {
  const { resolution, width, height } = app.renderer;
  const idealViewportWidth = 1920;
  const idealViewportHeight = 1080;
  const wratio = width / idealViewportWidth / resolution;
  const hratio = height / idealViewportHeight / resolution;

  rootControl.width = width / resolution;
  rootControl.height = height / resolution;
  rootControl.childrenScaleRatio = Math.round(Math.min(wratio, hratio) * 100) / 100;
});

License

This content is released under the MIT License.