Skip to content
This repository has been archived by the owner on Feb 23, 2023. It is now read-only.
/ pixi-ui Public archive

Provide a definitive user experience in your PixiJS application without any frontend library!

License

Notifications You must be signed in to change notification settings

pixijs/pixi-ui

Repository files navigation

lerna

PuxiJS

This project was built to provide an user experience module that can be integrated with your PixiJS application. It allows you to render your scene graph with your user interface with very little overhead.

Usage

This project is work-in-progress and is not yet published. The following instructions are draft-only.

npm install puxi.js
const app = new PIXI.Application({ <options> });

const uxStage = new PUXI.Stage({
  width: 512,
  height: 512;
});

app.stage.addChild(uxStage);

uxStage.addChild(new PUXI.Button({
  text: "Hello world!"
}));

uxStage.addChild(new PUXI.Text({
  value: "Click me!"
}).setLayoutOptions({
  new PUXI.FastLayoutOptions({
     width: PUXI.LayoutOptions.WRAP_CONTENT, // width
     height: 60, // height
     x: .5, y: .5, // x, y (center)
     anchor: PUXI.FastLayoutOptions.CENTER_ANCHOR // properly center
  })
}).setPadding(4, 6) // horizontal/vertical padding
    .setBackground(0xffaabb) // background color (can use a PIXI.Graphics too)
    .setBackgroundAlpha(.5) // alpha for background
    .setElevation(2) // drop-shadow on background!
);

About

Provide a definitive user experience in your PixiJS application without any frontend library!

Resources

License

Stars

Watchers

Forks

Packages

No packages published