AnchorLayout Demo

Lays out two button in two different columns (left & right sides) of the canvas.

by ShukantPal

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/pixi.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/pixi-filters.js"></script>
<script src="https://raw.githack.com/pixijs/pixi-ui/master/bundles/puxi.js/dist/puxi.min.js"></script>
<!DOCTYPE html>
<html>
  <head>
    <title>PuxiJS AnchorLayout Demo - Split Column</title>
  </head>
  <body>
    <canvas id="app-canvas"></canvas>
  </body>
</html>

JavaScript

const app = new PIXI.Application({
  width: 512,
  height: 512,
  view: document.getElementById("app-canvas"),
  backgroundColor: 0xf1f1f1
});

const stage = app.stage.addChild(new PUXI.Stage(512, 512));

const layout = new PUXI.WidgetGroup().useLayout(new PUXI.AnchorLayout());

const btn1 = new PUXI.Button({
  text: "Hello world!"
})

btn1.setLayoutOptions(new PUXI.AnchorLayoutOptions({
  /* anchorLeft, anchorTop, anchorBottom default to zero */
  anchorRight: 0.5,
  horizontalAlign: PUXI.ALIGN.CENTER,
  verticalAlign: PUXI.ALIGN.CENTER,
  width: 0,
}))
btn1.setPadding(4);
btn1.setBackground(0x00ffff);
btn1.setElevation(2);
btn1.makeDraggable();
layout.addChild(btn1);

btn1.on('click', () => { console.log('btn1 clicked!') })

const btn2 = new PUXI.Button({ text: "No drag!"}).setLayoutOptions(new PUXI.AnchorLayoutOptions({
  /* anchorRight, anchorTop, anchorBottom default to zero */
	anchorLeft: 0.5,
  height: 0,
  horizontalAlign: PUXI.ALIGN.CENTER
}))
btn2.setPadding(4);
btn2.setBackground(0xeefa3f);
btn2.setElevation(2);
layout.addChild(btn2);

btn2.on('click', () => { console.log("btn2 clicked!" )})

stage.addChild(layout.setLayoutOptions(new PUXI.FastLayoutOptions({
  width: 512,
  height: 512,
  x: 0,
  y: 0
})));