PixiUI

When instantiating a SliderBase (or its subclasses), you provide a DoubleSliderOptions object. This object extends ProgressBarOptions and allows you to configure range limits, visual styles for value text, and the slider handles themselves.

Key Options

• min (number, optional): The minimum value of the slider. Defaults to 0.
• max (number, optional): The maximum value of the slider. Defaults to 100.
• showValue (boolean, optional): Whether to display the current value as text.
• valueTextStyle (PixiTextStyle, optional): The style for the value text.
• valueTextClass (PixiTextClass, optional): The class used to render the text (defaults to Text).
• valueTextOffset ({ x?: number, y?: number }, optional): The offset for the value text.
• slider1 (Container | string, optional): The visual representation for the first slider handle. Can be a PIXI Container or a texture name.
• slider2 (Container | string, optional): The visual representation for the second slider handle.
• value1 (number, optional): Initial value for slider 1.
• value2 (number, optional): Initial value for slider 2.

const options: DoubleSliderOptions = {
    min: 0,
    max: 100,
    showValue: true,
    slider1: 'handle_texture_name',
    slider2: myCustomContainer,
    valueTextStyle: { fill: 0xffffff }
};

const slider = new MySliderSubclass(options);

When instantiating an Input, use the InputOptions object to define its behavior and appearance:

type InputOptions = {
    bg: ViewType;
    textStyle?: PixiTextStyle;
    TextClass?: PixiTextClass;
    placeholder?: string;
    value?: string;
    maxLength?: number;
    secure?: boolean;
    align?: InputAlign;
    padding?: Padding;
    cleanOnFocus?: boolean;
    nineSliceSprite?: [number, number, number, number];
    addMask?: boolean;
};

When instantiating a FancyButton, you can pass a ButtonOptions object to define its behavior and appearance.

View Options

• defaultView, hoverView, pressedView, disabledView: Can be a string (texture name), Texture, Container, Sprite, or Graphics.
• icon: A container-based view for the button icon.
• text: The text content for the button.

Layout & Scaling

• padding: Padding for text and icon views. If content exceeds the view size minus padding, it will scale down to fit.
• scale: Base scale of the button.
• anchor, anchorX, anchorY: The anchor point of the button.
• offset: Adjusts the position of state views. Supports state-specific offsets: { default: {x, y}, hover: {x, y}, ... }.
• textOffset, iconOffset: Adjusts the position of the text and icon views.
• defaultTextScale, defaultIconScale: Base scaling for text and icons.
• defaultTextAnchor, defaultIconAnchor: Base anchor points for text and icons.
• contentFittingMode: Controls how text/icons fit the view:
  • 'default': Fits content inside the button.
  • 'fill': Scales content up to fill the view space (accounting for padding).
  • 'none': Applies default scaling/anchoring without constraining to button dimensions.

Advanced Features

• animations: A StateAnimations object defining props and duration for transitions between states.
• nineSliceSprite: An array [left, top, right, bottom] defining slice dimensions. Note: When using this, views must be passed as texture names or Texture instances, not Containers.

The RadioGroup class is a container-based wrapper that manages a collection of CheckBox elements to behave like radio buttons, ensuring only one item can be selected at a time.

To use it, pass a RadioBoxOptions object to the constructor containing an array of CheckBox instances, a ListType (e.g., 'vertical'), and an elementsMargin.

new RadioGroup({
    items: [
         new CheckBox({
             style: {
                 unchecked: `switch_off.png`,
                 checked: `switch_on.png`,
             }
         }),
        new CheckBox({
             style: {
                 unchecked: `switch_off.png`,
                 checked: `switch_on.png`,
             }
         }),
        new CheckBox({
             style: {
                 unchecked: `switch_off.png`,
                 checked: `switch_on.png`,
             }
         }),
    ],
    type: 'vertical'
});

The Slider class allows users to select a single value within a defined range (min to max) using a draggable UI element. It supports snapping to a specific step and provides signals for value updates.

Key Features

• Value Snapping: Use the step option to ensure the slider value snaps to increments (e.g., step: 5).
• Signals:
  • onUpdate: Emitted continuously while the slider is being dragged.
  • onChange: Emitted only when the user releases the slider.
• Visuals: You can provide textures (as strings) or Container objects for the bg (background), fill, and slider (the handle).

Configuration Options

When instantiating Slider, you pass a SliderOptions object:

• bg: Texture or Container for the background.
• fill: Texture or Container for the progress fill.
• slider: Texture or Container for the draggable handle.
• min: Minimum value (defaults to 0).
• max: Maximum value (defaults to 100).
• value: Initial value.
• step: The increment value for snapping (defaults to 1).
• showValue: Boolean to display the current value as text.
• valueTextOffset: An object { x, y } to position the value text relative to the slider handle.

import { Slider } from '@pixi/ui';

const singleSlider = new Slider({
    bg: 'slider_bg.png',
    fill: 'slider.png',
    slider: 'slider.png',
    min: 0,
    max: 100,
    value: 50,
});

// Listen for continuous updates during drag
singleSlider.onUpdate.connect((value) => {
    console.log(`Slider moving: ${value}`);
});

// Listen for changes when released
singleSlider.onChange.connect((value) => {
    console.log(`Slider released at: ${value}`);
});

The Button class allows you to turn any existing PIXI.Container into an interactive button by attaching event listeners to it. You interact with the button via the .view property, which holds the underlying container.

Key features:

• Event Subscription: Use the signals provided by ButtonEvents (like onPress) to handle interactions.
• Enabling/Disabling: Setting enabled to true sets the view's eventMode to 'static' and the cursor to 'pointer'. Setting it to false sets eventMode to 'auto' and the cursor to 'default'.
• View Management: You can swap the underlying container by setting the view property; the class automatically handles disconnecting events from the old view and connecting them to the new one.

import { Container, Graphics } from 'pixi.js';
import { Button } from '@pixi/ui';

const container = new Container();
const button = new Button(
     new Graphics()
         .rect(0, 0, 100, 50, 15)
         .fill(0xFFFFFF)
);

button.onPress.connect(() => console.log('onPress'));

container.addChild(button.view);