pixi.js
Version:
<p align="center"> <a href="https://pixijs.com" target="_blank" rel="noopener noreferrer"> <img height="150" src="https://files.pixijs.download/branding/pixijs-logo-transparent-dark.svg?v=1" alt="PixiJS logo"> </a> </p> <br/> <p align="center">
1,543 lines (1,542 loc) • 1.61 MB
TypeScript
// Generated by dts-bundle-generator v9.5.1
/**
* Minimal `EventEmitter` interface that is molded against the Node.js
* `EventEmitter` interface.
*/
export declare class EventEmitter<EventTypes extends EventEmitter.ValidEventTypes = string | symbol, Context extends any = any> {
static prefixed: string | boolean;
/**
* Return an array listing the events for which the emitter has registered
* listeners.
*/
eventNames(): Array<EventEmitter.EventNames<EventTypes>>;
/**
* Return the listeners registered for a given event.
*/
listeners<T extends EventEmitter.EventNames<EventTypes>>(event: T): Array<EventEmitter.EventListener<EventTypes, T>>;
/**
* Return the number of listeners listening to a given event.
*/
listenerCount(event: EventEmitter.EventNames<EventTypes>): number;
/**
* Calls each of the listeners registered for a given event.
*/
emit<T extends EventEmitter.EventNames<EventTypes>>(event: T, ...args: EventEmitter.EventArgs<EventTypes, T>): boolean;
/**
* Add a listener for a given event.
*/
on<T extends EventEmitter.EventNames<EventTypes>>(event: T, fn: EventEmitter.EventListener<EventTypes, T>, context?: Context): this;
addListener<T extends EventEmitter.EventNames<EventTypes>>(event: T, fn: EventEmitter.EventListener<EventTypes, T>, context?: Context): this;
/**
* Add a one-time listener for a given event.
*/
once<T extends EventEmitter.EventNames<EventTypes>>(event: T, fn: EventEmitter.EventListener<EventTypes, T>, context?: Context): this;
/**
* Remove the listeners of a given event.
*/
removeListener<T extends EventEmitter.EventNames<EventTypes>>(event: T, fn?: EventEmitter.EventListener<EventTypes, T>, context?: Context, once?: boolean): this;
off<T extends EventEmitter.EventNames<EventTypes>>(event: T, fn?: EventEmitter.EventListener<EventTypes, T>, context?: Context, once?: boolean): this;
/**
* Remove all listeners, or those of the specified event.
*/
removeAllListeners(event?: EventEmitter.EventNames<EventTypes>): this;
}
export declare namespace EventEmitter {
export interface ListenerFn<Args extends any[] = any[]> {
(...args: Args): void;
}
export interface EventEmitterStatic {
new <EventTypes extends ValidEventTypes = string | symbol, Context = any>(): EventEmitter<EventTypes, Context>;
}
/**
* `object` should be in either of the following forms:
* ```
* interface EventTypes {
* 'event-with-parameters': any[]
* 'event-with-example-handler': (...args: any[]) => void
* }
* ```
*/
export type ValidEventTypes = string | symbol | object;
export type EventNames<T extends ValidEventTypes> = T extends string | symbol ? T : keyof T;
export type ArgumentMap<T extends object> = {
[K in keyof T]: T[K] extends (...args: any[]) => void ? Parameters<T[K]> : T[K] extends any[] ? T[K] : any[];
};
export type EventListener<T extends ValidEventTypes, K extends EventNames<T>> = T extends string | symbol ? (...args: any[]) => void : (...args: ArgumentMap<Exclude<T, string | symbol>>[Extract<K, keyof T>]) => void;
export type EventArgs<T extends ValidEventTypes, K extends EventNames<T>> = Parameters<EventListener<T, K>>;
export const EventEmitter: EventEmitterStatic;
}
declare type RgbColor = {
r: number;
g: number;
b: number;
};
declare type HslColor = {
h: number;
s: number;
l: number;
};
declare type HsvColor = {
h: number;
s: number;
v: number;
};
declare type WithAlpha<O> = O & {
a: number;
};
declare type RgbaColor = WithAlpha<RgbColor>;
declare type HslaColor = WithAlpha<HslColor>;
declare type HsvaColor = WithAlpha<HsvColor>;
/**
* Array of RGBA color components, where each component is a number between 0 and 1.
* The array must contain exactly 4 numbers in the order: red, green, blue, alpha.
* @example
* ```ts
* // Full white (opaque)
* const white: RgbaArray = [1, 1, 1, 1];
*
* // Semi-transparent red
* const transparentRed: RgbaArray = [1, 0, 0, 0.5];
* ```
* @remarks
* - All components must be between 0 and 1
* - Array must contain exactly 4 values
* - Order is [red, green, blue, alpha]
* @see {@link Color} For the main color utility class
* @category color
* @standard
*/
export type RgbaArray = [
number,
number,
number,
number
];
/**
* Valid color formats supported by PixiJS. These types extend from [colord](https://www.npmjs.com/package/colord)
* with additional PixiJS-specific formats.
*
* Common Formats:
* ```ts
* // CSS Color Names
* new Color('red');
* new Color('blue');
* new Color('green');
*
* // Hex Values
* new Color(0xff0000); // RGB integer
* new Color('#ff0000'); // 6-digit hex
* new Color('#f00'); // 3-digit hex
* new Color('#ff0000ff'); // 8-digit hex (with alpha)
* new Color('#f00f'); // 4-digit hex (with alpha)
*
* // RGB/RGBA Objects
* new Color({ r: 255, g: 0, b: 0 });
* new Color({ r: 255, g: 0, b: 0, a: 0.5 });
*
* // RGB/RGBA Strings
* new Color('rgb(255, 0, 0)');
* new Color('rgba(255, 0, 0, 0.5)');
* new Color('rgb(100% 0% 0%)');
* new Color('rgba(100% 0% 0% / 50%)');
*
* // Arrays (normalized 0-1)
* new Color([1, 0, 0]); // RGB
* new Color([1, 0, 0, 0.5]); // RGBA
* new Color(new Float32Array([1, 0, 0, 0.5]));
*
* // Arrays (0-255)
* new Color(new Uint8Array([255, 0, 0]));
* new Color(new Uint8ClampedArray([255, 0, 0, 128]));
*
* // HSL/HSLA
* new Color({ h: 0, s: 100, l: 50 });
* new Color({ h: 0, s: 100, l: 50, a: 0.5 });
* new Color('hsl(0, 100%, 50%)');
* new Color('hsla(0deg 100% 50% / 50%)');
*
* // HSV/HSVA
* new Color({ h: 0, s: 100, v: 100 });
* new Color({ h: 0, s: 100, v: 100, a: 0.5 });
* ```
* @remarks
* - All color values are normalized internally to 0-1 range
* - Alpha is always between 0-1
* - Invalid colors will throw an error
* - Original format is preserved when possible
* @see {@link Color} For the main color utility class
* @see {@link https://www.w3.org/TR/css-color-4} CSS Color Level 4 Specification
* @since 7.2.0
* @category color
* @standard
*/
export type ColorSource = string | number | number[] | Float32Array | Uint8Array | Uint8ClampedArray | HslColor | HslaColor | HsvColor | HsvaColor | RgbColor | RgbaColor | Color | number;
/**
* Color utility class for managing colors in various formats. Provides a unified way to work
* with colors across your PixiJS application.
*
* Features:
* - Accepts multiple color formats (hex, RGB, HSL, etc.)
* - Automatic format conversion
* - Color manipulation methods
* - Component access (r,g,b,a)
* - Chainable operations
* @example
* ```js
* import { Color } from 'pixi.js';
*
* new Color('red').toArray(); // [1, 0, 0, 1]
* new Color(0xff0000).toArray(); // [1, 0, 0, 1]
* new Color('ff0000').toArray(); // [1, 0, 0, 1]
* new Color('#f00').toArray(); // [1, 0, 0, 1]
* new Color('0xff0000ff').toArray(); // [1, 0, 0, 1]
* new Color('#f00f').toArray(); // [1, 0, 0, 1]
* new Color({ r: 255, g: 0, b: 0, a: 0.5 }).toArray(); // [1, 0, 0, 0.5]
* new Color('rgb(255, 0, 0, 0.5)').toArray(); // [1, 0, 0, 0.5]
* new Color([1, 1, 1]).toArray(); // [1, 1, 1, 1]
* new Color([1, 0, 0, 0.5]).toArray(); // [1, 0, 0, 0.5]
* new Color(new Float32Array([1, 0, 0, 0.5])).toArray(); // [1, 0, 0, 0.5]
* new Color(new Uint8Array([255, 0, 0, 255])).toArray(); // [1, 0, 0, 1]
* new Color(new Uint8ClampedArray([255, 0, 0, 255])).toArray(); // [1, 0, 0, 1]
* new Color({ h: 0, s: 100, l: 50, a: 0.5 }).toArray(); // [1, 0, 0, 0.5]
* new Color('hsl(0, 100%, 50%, 50%)').toArray(); // [1, 0, 0, 0.5]
* new Color({ h: 0, s: 100, v: 100, a: 0.5 }).toArray(); // [1, 0, 0, 0.5]
*
* // Convert between formats
* const color = new Color('red');
* color.toHex(); // "#ff0000"
* color.toRgbString(); // "rgb(255,0,0,1)"
* color.toNumber(); // 0xff0000
*
* // Access components
* color.red; // 1
* color.green; // 0
* color.blue; // 0
* color.alpha; // 1
*
* // Chain operations
* color
* .setAlpha(0.5)
* .multiply([0.5, 0.5, 0.5])
* .premultiply(0.8);
* ```
* @remarks
* The Color class automatically normalizes all color values internally:
* - RGB components are stored as floats between 0-1
* - Alpha is always between 0-1
* - Color operations clamp values to valid ranges
* - Original input format is preserved when possible
* @since 7.2.0
* @category color
* @standard
*/
export declare class Color {
/**
* Static shared Color instance used for utility operations. This is a singleton color object
* that can be reused to avoid creating unnecessary Color instances.
* > [!IMPORTANT] You should be careful when using this shared instance, as it is mutable and can be
* > changed by any code that uses it.
* >
* > It is best used for one-off color operations or temporary transformations.
* > For persistent colors, create your own Color instance instead.
* @example
* ```ts
* import { Color } from 'pixi.js';
*
* // Use shared instance for one-off color operations
* Color.shared.setValue(0xff0000);
* const redHex = Color.shared.toHex(); // "#ff0000"
* const redRgb = Color.shared.toRgbArray(); // [1, 0, 0]
*
* // Temporary color transformations
* const colorNumber = Color.shared
* .setValue('#ff0000') // Set to red
* .setAlpha(0.5) // Make semi-transparent
* .premultiply(0.8) // Apply premultiplication
* .toNumber(); // Convert to number
*
* // Chain multiple operations
* const result = Color.shared
* .setValue(someColor)
* .multiply(tintColor)
* .toPremultiplied(alpha);
* ```
* @remarks
* - This is a shared instance - be careful about multiple code paths using it simultaneously
* - Use for temporary color operations to avoid allocating new Color instances
* - The value is preserved between operations, so reset if needed
* - For persistent colors, create your own Color instance instead
*/
static readonly shared: Color;
/**
* Temporary Color object for static uses internally.
* As to not conflict with Color.shared.
* @ignore
*/
private static readonly _temp;
/** Pattern for hex strings */
private static readonly HEX_PATTERN;
/** Internal color source, from constructor or set value */
private _value;
/** Normalized rgba component, floats from 0-1 */
private _components;
/** Cache color as number */
private _int;
/** An array of the current Color. Only populated when `toArray` functions are called */
private _arrayRgba;
private _arrayRgb;
/**
* @param {ColorSource} value - Optional value to use, if not provided, white is used.
*/
constructor(value?: ColorSource);
/**
* Get the red component of the color, normalized between 0 and 1.
* @example
* ```ts
* const color = new Color('red');
* console.log(color.red); // 1
*
* const green = new Color('#00ff00');
* console.log(green.red); // 0
* ```
*/
get red(): number;
/**
* Get the green component of the color, normalized between 0 and 1.
* @example
* ```ts
* const color = new Color('lime');
* console.log(color.green); // 1
*
* const red = new Color('#ff0000');
* console.log(red.green); // 0
* ```
*/
get green(): number;
/**
* Get the blue component of the color, normalized between 0 and 1.
* @example
* ```ts
* const color = new Color('blue');
* console.log(color.blue); // 1
*
* const yellow = new Color('#ffff00');
* console.log(yellow.blue); // 0
* ```
*/
get blue(): number;
/**
* Get the alpha component of the color, normalized between 0 and 1.
* @example
* ```ts
* const color = new Color('red');
* console.log(color.alpha); // 1 (fully opaque)
*
* const transparent = new Color('rgba(255, 0, 0, 0.5)');
* console.log(transparent.alpha); // 0.5 (semi-transparent)
* ```
*/
get alpha(): number;
/**
* Sets the color value and returns the instance for chaining.
*
* This is a chainable version of setting the `value` property.
* @param value - The color to set. Accepts various formats:
* - Hex strings/numbers (e.g., '#ff0000', 0xff0000)
* - RGB/RGBA values (arrays, objects)
* - CSS color names
* - HSL/HSLA values
* - HSV/HSVA values
* @returns The Color instance for chaining
* @example
* ```ts
* // Basic usage
* const color = new Color();
* color.setValue('#ff0000')
* .setAlpha(0.5)
* .premultiply(0.8);
*
* // Different formats
* color.setValue(0xff0000); // Hex number
* color.setValue('#ff0000'); // Hex string
* color.setValue([1, 0, 0]); // RGB array
* color.setValue([1, 0, 0, 0.5]); // RGBA array
* color.setValue({ r: 1, g: 0, b: 0 }); // RGB object
*
* // Copy from another color
* const red = new Color('red');
* color.setValue(red);
* ```
* @throws {Error} If the color value is invalid or null
* @see {@link Color.value} For the underlying value property
*/
setValue(value: ColorSource): this;
/**
* The current color source. This property allows getting and setting the color value
* while preserving the original format where possible.
* @remarks
* When setting:
* - Setting to a `Color` instance copies its source and components
* - Setting to other valid sources normalizes and stores the value
* - Setting to `null` throws an Error
* - The color remains unchanged if normalization fails
*
* When getting:
* - Returns `null` if color was modified by {@link Color.multiply} or {@link Color.premultiply}
* - Otherwise returns the original color source
* @example
* ```ts
* // Setting different color formats
* const color = new Color();
*
* color.value = 0xff0000; // Hex number
* color.value = '#ff0000'; // Hex string
* color.value = [1, 0, 0]; // RGB array
* color.value = [1, 0, 0, 0.5]; // RGBA array
* color.value = { r: 1, g: 0, b: 0 }; // RGB object
*
* // Copying from another color
* const red = new Color('red');
* color.value = red; // Copies red's components
*
* // Getting the value
* console.log(color.value); // Returns original format
*
* // After modifications
* color.multiply([0.5, 0.5, 0.5]);
* console.log(color.value); // Returns null
* ```
* @throws {Error} When attempting to set `null`
*/
set value(value: ColorSource | null);
get value(): Exclude<ColorSource, Color> | null;
/**
* Copy a color source internally.
* @param value - Color source
*/
private _cloneSource;
/**
* Equality check for color sources.
* @param value1 - First color source
* @param value2 - Second color source
* @returns `true` if the color sources are equal, `false` otherwise.
*/
private _isSourceEqual;
/**
* Convert to a RGBA color object with normalized components (0-1).
* @example
* ```ts
* import { Color } from 'pixi.js';
*
* // Convert colors to RGBA objects
* new Color('white').toRgba(); // returns { r: 1, g: 1, b: 1, a: 1 }
* new Color('#ff0000').toRgba(); // returns { r: 1, g: 0, b: 0, a: 1 }
*
* // With transparency
* new Color('rgba(255,0,0,0.5)').toRgba(); // returns { r: 1, g: 0, b: 0, a: 0.5 }
* ```
* @returns An RGBA object with normalized components
*/
toRgba(): RgbaColor;
/**
* Convert to a RGB color object with normalized components (0-1).
*
* Alpha component is omitted in the output.
* @example
* ```ts
* import { Color } from 'pixi.js';
*
* // Convert colors to RGB objects
* new Color('white').toRgb(); // returns { r: 1, g: 1, b: 1 }
* new Color('#ff0000').toRgb(); // returns { r: 1, g: 0, b: 0 }
*
* // Alpha is ignored
* new Color('rgba(255,0,0,0.5)').toRgb(); // returns { r: 1, g: 0, b: 0 }
* ```
* @returns An RGB object with normalized components
*/
toRgb(): RgbColor;
/**
* Convert to a CSS-style rgba string representation.
*
* RGB components are scaled to 0-255 range, alpha remains 0-1.
* @example
* ```ts
* import { Color } from 'pixi.js';
*
* // Convert colors to RGBA strings
* new Color('white').toRgbaString(); // returns "rgba(255,255,255,1)"
* new Color('#ff0000').toRgbaString(); // returns "rgba(255,0,0,1)"
*
* // With transparency
* new Color([1, 0, 0, 0.5]).toRgbaString(); // returns "rgba(255,0,0,0.5)"
* ```
* @returns A CSS-compatible rgba string
*/
toRgbaString(): string;
/**
* Convert to an [R, G, B] array of clamped uint8 values (0 to 255).
* @param {number[]|Uint8Array|Uint8ClampedArray} [out] - Optional output array. If not provided,
* a cached array will be used and returned.
* @returns Array containing RGB components as integers between 0-255
* @example
* ```ts
* // Basic usage
* new Color('white').toUint8RgbArray(); // returns [255, 255, 255]
* new Color('#ff0000').toUint8RgbArray(); // returns [255, 0, 0]
*
* // Using custom output array
* const rgb = new Uint8Array(3);
* new Color('blue').toUint8RgbArray(rgb); // rgb is now [0, 0, 255]
*
* // Using different array types
* new Color('red').toUint8RgbArray(new Uint8ClampedArray(3)); // [255, 0, 0]
* new Color('red').toUint8RgbArray([]); // [255, 0, 0]
* ```
* @remarks
* - Output values are always clamped between 0-255
* - Alpha component is not included in output
* - Reuses internal cache array if no output array provided
*/
toUint8RgbArray<T extends number[] | Uint8Array | Uint8ClampedArray = number[]>(out?: T): T;
/**
* Convert to an [R, G, B, A] array of normalized floats (numbers from 0.0 to 1.0).
* @param {number[]|Float32Array} [out] - Optional output array. If not provided,
* a cached array will be used and returned.
* @returns Array containing RGBA components as floats between 0-1
* @example
* ```ts
* // Basic usage
* new Color('white').toArray(); // returns [1, 1, 1, 1]
* new Color('red').toArray(); // returns [1, 0, 0, 1]
*
* // With alpha
* new Color('rgba(255,0,0,0.5)').toArray(); // returns [1, 0, 0, 0.5]
*
* // Using custom output array
* const rgba = new Float32Array(4);
* new Color('blue').toArray(rgba); // rgba is now [0, 0, 1, 1]
* ```
* @remarks
* - Output values are normalized between 0-1
* - Includes alpha component as the fourth value
* - Reuses internal cache array if no output array provided
*/
toArray<T extends number[] | Float32Array = number[]>(out?: T): T;
/**
* Convert to an [R, G, B] array of normalized floats (numbers from 0.0 to 1.0).
* @param {number[]|Float32Array} [out] - Optional output array. If not provided,
* a cached array will be used and returned.
* @returns Array containing RGB components as floats between 0-1
* @example
* ```ts
* // Basic usage
* new Color('white').toRgbArray(); // returns [1, 1, 1]
* new Color('red').toRgbArray(); // returns [1, 0, 0]
*
* // Using custom output array
* const rgb = new Float32Array(3);
* new Color('blue').toRgbArray(rgb); // rgb is now [0, 0, 1]
* ```
* @remarks
* - Output values are normalized between 0-1
* - Alpha component is omitted from output
* - Reuses internal cache array if no output array provided
*/
toRgbArray<T extends number[] | Float32Array = number[]>(out?: T): T;
/**
* Convert to a hexadecimal number.
* @returns The color as a 24-bit RGB integer
* @example
* ```ts
* // Basic usage
* new Color('white').toNumber(); // returns 0xffffff
* new Color('red').toNumber(); // returns 0xff0000
*
* // Store as hex
* const color = new Color('blue');
* const hex = color.toNumber(); // 0x0000ff
* ```
*/
toNumber(): number;
/**
* Convert to a BGR number.
*
* Useful for platforms that expect colors in BGR format.
* @returns The color as a 24-bit BGR integer
* @example
* ```ts
* // Convert RGB to BGR
* new Color(0xffcc99).toBgrNumber(); // returns 0x99ccff
*
* // Common use case: platform-specific color format
* const color = new Color('orange');
* const bgrColor = color.toBgrNumber(); // Color with swapped R/B channels
* ```
* @remarks
* This swaps the red and blue channels compared to the normal RGB format:
* - RGB 0xRRGGBB becomes BGR 0xBBGGRR
*/
toBgrNumber(): number;
/**
* Convert to a hexadecimal number in little endian format (e.g., BBGGRR).
*
* Useful for platforms that expect colors in little endian byte order.
* @example
* ```ts
* import { Color } from 'pixi.js';
*
* // Convert RGB color to little endian format
* new Color(0xffcc99).toLittleEndianNumber(); // returns 0x99ccff
*
* // Common use cases:
* const color = new Color('orange');
* const leColor = color.toLittleEndianNumber(); // Swaps byte order for LE systems
*
* // Multiple conversions
* const colors = {
* normal: 0xffcc99,
* littleEndian: new Color(0xffcc99).toLittleEndianNumber(), // 0x99ccff
* backToNormal: new Color(0x99ccff).toLittleEndianNumber() // 0xffcc99
* };
* ```
* @remarks
* - Swaps R and B channels in the color value
* - RGB 0xRRGGBB becomes 0xBBGGRR
* - Useful for systems that use little endian byte order
* - Can be used to convert back and forth between formats
* @returns The color as a number in little endian format (BBGGRR)
* @see {@link Color.toBgrNumber} For BGR format without byte swapping
*/
toLittleEndianNumber(): number;
/**
* Multiply with another color.
*
* This action is destructive and modifies the original color.
* @param {ColorSource} value - The color to multiply by. Accepts any valid color format:
* - Hex strings/numbers (e.g., '#ff0000', 0xff0000)
* - RGB/RGBA arrays ([1, 0, 0], [1, 0, 0, 1])
* - Color objects ({ r: 1, g: 0, b: 0 })
* - CSS color names ('red', 'blue')
* @returns this - The Color instance for chaining
* @example
* ```ts
* // Basic multiplication
* const color = new Color('#ff0000');
* color.multiply(0x808080); // 50% darker red
*
* // With transparency
* color.multiply([1, 1, 1, 0.5]); // 50% transparent
*
* // Chain operations
* color
* .multiply('#808080')
* .multiply({ r: 1, g: 1, b: 1, a: 0.5 });
* ```
* @remarks
* - Multiplies each RGB component and alpha separately
* - Values are clamped between 0-1
* - Original color format is lost (value becomes null)
* - Operation cannot be undone
*/
multiply(value: ColorSource): this;
/**
* Converts color to a premultiplied alpha format.
*
* This action is destructive and modifies the original color.
* @param alpha - The alpha value to multiply by (0-1)
* @param {boolean} [applyToRGB=true] - Whether to premultiply RGB channels
* @returns {Color} The Color instance for chaining
* @example
* ```ts
* // Basic premultiplication
* const color = new Color('red');
* color.premultiply(0.5); // 50% transparent red with premultiplied RGB
*
* // Alpha only (RGB unchanged)
* color.premultiply(0.5, false); // 50% transparent, original RGB
*
* // Chain with other operations
* color
* .multiply(0x808080)
* .premultiply(0.5)
* .toNumber();
* ```
* @remarks
* - RGB channels are multiplied by alpha when applyToRGB is true
* - Alpha is always set to the provided value
* - Values are clamped between 0-1
* - Original color format is lost (value becomes null)
* - Operation cannot be undone
*/
premultiply(alpha: number, applyToRGB?: boolean): this;
/**
* Returns the color as a 32-bit premultiplied alpha integer.
*
* Format: 0xAARRGGBB
* @param {number} alpha - The alpha value to multiply by (0-1)
* @param {boolean} [applyToRGB=true] - Whether to premultiply RGB channels
* @returns {number} The premultiplied color as a 32-bit integer
* @example
* ```ts
* // Convert to premultiplied format
* const color = new Color('red');
*
* // Full opacity (0xFFRRGGBB)
* color.toPremultiplied(1.0); // 0xFFFF0000
*
* // 50% transparency with premultiplied RGB
* color.toPremultiplied(0.5); // 0x7F7F0000
*
* // 50% transparency without RGB premultiplication
* color.toPremultiplied(0.5, false); // 0x7FFF0000
* ```
* @remarks
* - Returns full opacity (0xFF000000) when alpha is 1.0
* - Returns 0 when alpha is 0.0 and applyToRGB is true
* - RGB values are rounded during premultiplication
*/
toPremultiplied(alpha: number, applyToRGB?: boolean): number;
/**
* Convert to a hexadecimal string (6 characters).
* @returns A CSS-compatible hex color string (e.g., "#ff0000")
* @example
* ```ts
* import { Color } from 'pixi.js';
*
* // Basic colors
* new Color('red').toHex(); // returns "#ff0000"
* new Color('white').toHex(); // returns "#ffffff"
* new Color('black').toHex(); // returns "#000000"
*
* // From different formats
* new Color(0xff0000).toHex(); // returns "#ff0000"
* new Color([1, 0, 0]).toHex(); // returns "#ff0000"
* new Color({ r: 1, g: 0, b: 0 }).toHex(); // returns "#ff0000"
* ```
* @remarks
* - Always returns a 6-character hex string
* - Includes leading "#" character
* - Alpha channel is ignored
* - Values are rounded to nearest hex value
*/
toHex(): string;
/**
* Convert to a hexadecimal string with alpha (8 characters).
* @returns A CSS-compatible hex color string with alpha (e.g., "#ff0000ff")
* @example
* ```ts
* import { Color } from 'pixi.js';
*
* // Fully opaque colors
* new Color('red').toHexa(); // returns "#ff0000ff"
* new Color('white').toHexa(); // returns "#ffffffff"
*
* // With transparency
* new Color('rgba(255, 0, 0, 0.5)').toHexa(); // returns "#ff00007f"
* new Color([1, 0, 0, 0]).toHexa(); // returns "#ff000000"
* ```
* @remarks
* - Returns an 8-character hex string
* - Includes leading "#" character
* - Alpha is encoded in last two characters
* - Values are rounded to nearest hex value
*/
toHexa(): string;
/**
* Set alpha (transparency) value while preserving color components.
*
* Provides a chainable interface for setting alpha.
* @param alpha - Alpha value between 0 (fully transparent) and 1 (fully opaque)
* @returns The Color instance for chaining
* @example
* ```ts
* // Basic alpha setting
* const color = new Color('red');
* color.setAlpha(0.5); // 50% transparent red
*
* // Chain with other operations
* color
* .setValue('#ff0000')
* .setAlpha(0.8) // 80% opaque
* .premultiply(0.5); // Further modify alpha
*
* // Reset to fully opaque
* color.setAlpha(1);
* ```
* @remarks
* - Alpha value is clamped between 0-1
* - Can be chained with other color operations
*/
setAlpha(alpha: number): this;
/**
* Normalize the input value into rgba
* @param value - Input value
*/
private _normalize;
/** Refresh the internal color rgb number */
private _refreshInt;
/**
* Clamps values to a range. Will override original values
* @param value - Value(s) to clamp
* @param min - Minimum value
* @param max - Maximum value
*/
private _clamp;
/**
* Check if a value can be interpreted as a valid color format.
* Supports all color formats that can be used with the Color class.
* @param value - Value to check
* @returns True if the value can be used as a color
* @example
* ```ts
* import { Color } from 'pixi.js';
*
* // CSS colors and hex values
* Color.isColorLike('red'); // true
* Color.isColorLike('#ff0000'); // true
* Color.isColorLike(0xff0000); // true
*
* // Arrays (RGB/RGBA)
* Color.isColorLike([1, 0, 0]); // true
* Color.isColorLike([1, 0, 0, 0.5]); // true
*
* // TypedArrays
* Color.isColorLike(new Float32Array([1, 0, 0])); // true
* Color.isColorLike(new Uint8Array([255, 0, 0])); // true
* Color.isColorLike(new Uint8ClampedArray([255, 0, 0])); // true
*
* // Object formats
* Color.isColorLike({ r: 1, g: 0, b: 0 }); // true (RGB)
* Color.isColorLike({ r: 1, g: 0, b: 0, a: 0.5 }); // true (RGBA)
* Color.isColorLike({ h: 0, s: 100, l: 50 }); // true (HSL)
* Color.isColorLike({ h: 0, s: 100, l: 50, a: 0.5 }); // true (HSLA)
* Color.isColorLike({ h: 0, s: 100, v: 100 }); // true (HSV)
* Color.isColorLike({ h: 0, s: 100, v: 100, a: 0.5 });// true (HSVA)
*
* // Color instances
* Color.isColorLike(new Color('red')); // true
*
* // Invalid values
* Color.isColorLike(null); // false
* Color.isColorLike(undefined); // false
* Color.isColorLike({}); // false
* Color.isColorLike([]); // false
* Color.isColorLike('not-a-color'); // false
* ```
* @remarks
* Checks for the following formats:
* - Numbers (0x000000 to 0xffffff)
* - CSS color strings
* - RGB/RGBA arrays and objects
* - HSL/HSLA objects
* - HSV/HSVA objects
* - TypedArrays (Float32Array, Uint8Array, Uint8ClampedArray)
* - Color instances
* @see {@link ColorSource} For supported color format types
* @see {@link Color.setValue} For setting color values
* @category utility
*/
static isColorLike(value: unknown): value is ColorSource;
}
/**
* Common interface for points. Both Point and ObservablePoint implement it.
* Provides a standard way to represent 2D coordinates.
*
* Many PixiJS methods accept PointData for transformations,
* making it easy to work with different point types interchangeably.
* @example
* ```ts
* // Create an object implementing PointData
* const point: PointData = { x: 100, y: 200 };
*
* // Use with matrix transformations
* const matrix = new Matrix();
* matrix.translate(50, 50).apply(point);
*
* // Mix with other point types
* const observablePoint = new ObservablePoint(() => {}, null, 0, 0);
* const regularPoint = new Point(0, 0);
* // All are PointData compatible
* ```
* @remarks
* - Basic x,y coordinate interface
* - Used by Point and ObservablePoint
* @see {@link Point} For standard point implementation
* @see {@link ObservablePoint} For observable point implementation
* @category maths
* @standard
*/
export interface PointData {
/** X coordinate */
x: number;
/** Y coordinate */
y: number;
}
/**
* Common interface for points with manipulation methods.
*
* Extends PointData to add operations for copying, comparison and setting values.
* @example
* ```ts
* // Basic point manipulation
* const point: PointLike = new Point(10, 20);
* point.set(30, 40);
*
* // Copy between points
* const other = new Point();
* point.copyTo(other);
*
* // Compare points
* const same = point.equals(other); // true
* ```
* @see {@link PointData} For basic x,y interface
* @see {@link Point} For standard implementation
* @see {@link ObservablePoint} For observable implementation
* @category maths
* @standard
*/
export interface PointLike extends PointData {
/**
* Copies x and y from the given point
* @param {PointData} p - The point to copy from
* @returns {this} Returns itself.
* @example
* ```ts
* const point1: PointLike = new Point(10, 20);
* const point2: PointLike = new Point(30, 40);
* point1.copyFrom(point2);
* console.log(point1.x, point1.y); // 30, 40
* ```
*/
copyFrom: (p: PointData) => this;
/**
* Copies x and y into the given point
* @param {PointLike} p - The point to copy.
* @returns {PointLike} Given point with values updated
* @example
* ```ts
* const point1: PointLike = new Point(10, 20);
* const point2: PointLike = new Point(0, 0);
* point1.copyTo(point2);
* console.log(point2.x, point2.y); // 10, 20
* ```
*/
copyTo: <T extends PointLike>(p: T) => T;
/**
* Returns true if the given point is equal to this point
* @param {PointData} p - The point to check
* @returns {boolean} Whether the given point equal to this point
* @example
* ```ts
* const point1: PointLike = new Point(10, 20);
* const point2: PointLike = new Point(10, 20);
* const point3: PointLike = new Point(30, 40);
* console.log(point1.equals(point2)); // true
* console.log(point1.equals(point3)); // false
* ```
*/
equals: (p: PointData) => boolean;
/**
* Sets the point to a new x and y position.
* If y is omitted, both x and y will be set to x.
* @param {number} [x=0] - position of the point on the x axis
* @param {number} [y=x] - position of the point on the y axis
* @example
* ```ts
* const point: PointLike = new Point(10, 20);
* point.set(30, 40);
* console.log(point.x, point.y); // 30, 40
* point.set(50); // Sets both x and y to 50
* console.log(point.x, point.y); // 50, 50
* ```
*/
set: (x?: number, y?: number) => void;
}
export interface Point extends PixiMixins.Point {
}
/**
* The Point object represents a location in a two-dimensional coordinate system, where `x` represents
* the position on the horizontal axis and `y` represents the position on the vertical axis.
*
* Many Pixi functions accept the `PointData` type as an alternative to `Point`,
* which only requires `x` and `y` properties.
* @example
* ```ts
* // Basic point creation
* const point = new Point(100, 200);
*
* // Using with transformations
* const matrix = new Matrix();
* matrix.translate(50, 50).apply(point);
*
* // Point arithmetic
* const start = new Point(0, 0);
* const end = new Point(100, 100);
* const middle = new Point(
* (start.x + end.x) / 2,
* (start.y + end.y) / 2
* );
* ```
* @see {@link PointData} For basic x,y interface
* @see {@link PointLike} For point manipulation interface
* @see {@link ObservablePoint} For observable version
* @category maths
* @standard
*/
export declare class Point implements PointLike {
/**
* Position of the point on the x axis
* @example
* ```ts
* // Set x position
* const point = new Point();
* point.x = 100;
*
* // Use in calculations
* const width = rightPoint.x - leftPoint.x;
* ```
*/
x: number;
/**
* Position of the point on the y axis
* @example
* ```ts
* // Set y position
* const point = new Point();
* point.y = 200;
*
* // Use in calculations
* const height = bottomPoint.y - topPoint.y;
* ```
*/
y: number;
/**
* Creates a new `Point`
* @param {number} [x=0] - position of the point on the x axis
* @param {number} [y=0] - position of the point on the y axis
*/
constructor(x?: number, y?: number);
/**
* Creates a clone of this point, which is a new instance with the same `x` and `y` values.
* @example
* ```ts
* // Basic point cloning
* const original = new Point(100, 200);
* const copy = original.clone();
*
* // Clone and modify
* const modified = original.clone();
* modified.set(300, 400);
*
* // Verify independence
* console.log(original); // Point(100, 200)
* console.log(modified); // Point(300, 400)
* ```
* @remarks
* - Creates new Point instance
* - Deep copies x and y values
* - Independent from original
* - Useful for preserving values
* @returns A clone of this point
* @see {@link Point.copyFrom} For copying into existing point
* @see {@link Point.copyTo} For copying to existing point
*/
clone(): Point;
/**
* Copies x and y from the given point into this point.
* @example
* ```ts
* // Basic copying
* const source = new Point(100, 200);
* const target = new Point();
* target.copyFrom(source);
*
* // Copy and chain operations
* const point = new Point()
* .copyFrom(source)
* .set(x + 50, y + 50);
*
* // Copy from any PointData
* const data = { x: 10, y: 20 };
* point.copyFrom(data);
* ```
* @param p - The point to copy from
* @returns The point instance itself
* @see {@link Point.copyTo} For copying to another point
* @see {@link Point.clone} For creating new point copy
*/
copyFrom(p: PointData): this;
/**
* Copies this point's x and y into the given point.
* @example
* ```ts
* // Basic copying
* const source = new Point(100, 200);
* const target = new Point();
* source.copyTo(target);
* ```
* @param p - The point to copy to. Can be any type that is or extends `PointLike`
* @returns The point (`p`) with values updated
* @see {@link Point.copyFrom} For copying from another point
* @see {@link Point.clone} For creating new point copy
*/
copyTo<T extends PointLike>(p: T): T;
/**
* Checks if another point is equal to this point.
*
* Compares x and y values using strict equality.
* @example
* ```ts
* // Basic equality check
* const p1 = new Point(100, 200);
* const p2 = new Point(100, 200);
* console.log(p1.equals(p2)); // true
*
* // Compare with PointData
* const data = { x: 100, y: 200 };
* console.log(p1.equals(data)); // true
*
* // Check different points
* const p3 = new Point(200, 300);
* console.log(p1.equals(p3)); // false
* ```
* @param p - The point to check
* @returns `true` if both `x` and `y` are equal
* @see {@link Point.copyFrom} For making points equal
* @see {@link PointData} For point data interface
*/
equals(p: PointData): boolean;
/**
* Sets the point to a new x and y position.
*
* If y is omitted, both x and y will be set to x.
* @example
* ```ts
* // Basic position setting
* const point = new Point();
* point.set(100, 200);
*
* // Set both x and y to same value
* point.set(50); // x=50, y=50
*
* // Chain with other operations
* point
* .set(10, 20)
* .copyTo(otherPoint);
* ```
* @param x - Position on the x axis
* @param y - Position on the y axis, defaults to x
* @returns The point instance itself
* @see {@link Point.copyFrom} For copying from another point
* @see {@link Point.equals} For comparing positions
*/
set(x?: number, y?: number): this;
toString(): string;
/**
* A static Point object with `x` and `y` values of `0`.
*
* This shared instance is reset to zero values when accessed.
*
* > [!IMPORTANT] This point is shared and temporary. Do not store references to it.
* @example
* ```ts
* // Use for temporary calculations
* const tempPoint = Point.shared;
* tempPoint.set(100, 200);
* matrix.apply(tempPoint);
*
* // Will be reset to (0,0) on next access
* const fresh = Point.shared; // x=0, y=0
* ```
* @readonly
* @returns A fresh zeroed point for temporary use
* @see {@link Point.constructor} For creating new points
* @see {@link PointData} For basic point interface
*/
static get shared(): Point;
}
/**
* The data structure that contains the position, scale, pivot, skew and rotation of an object.
* This is used by the {@link Matrix} class to decompose the matrix into its components.
* @category maths
* @advanced
*/
export interface TransformableObject {
/** The position of the object */
position: PointData;
/** The scale of the object */
scale: PointData;
/** The pivot of the object */
pivot: PointData;
/** The skew of the object */
skew: PointData;
/** The rotation of the object */
rotation: number;
}
/**
* A fast matrix for 2D transformations.
* Represents a 3x3 transformation matrix:
*
* ```js
* | a c tx |
* | b d ty |
* | 0 0 1 |
* ```
* @example
* ```ts
* // Create identity matrix
* const matrix = new Matrix();
*
* // Create matrix with custom values
* const transform = new Matrix(2, 0, 0, 2, 100, 100); // Scale 2x, translate 100,100
*
* // Transform a point
* const point = { x: 10, y: 20 };
* const transformed = transform.apply(point);
*
* // Chain transformations
* matrix
* .translate(100, 50)
* .rotate(Math.PI / 4)
* .scale(2, 2);
* ```
* @remarks
* - Used for transform hierarchies
* - Supports scale, rotation, position
* - Can be concatenated with append/prepend
* - Efficient for batched transformations
* @category maths
* @standard
*/
export declare class Matrix {
/**
* Scale on the x axis.
* @default 1
*/
a: number;
/**
* Shear on the y axis.
* @default 0
*/
b: number;
/**
* Shear on the x axis.
* @default 0
*/
c: number;
/**
* Scale on the y axis.
* @default 1
*/
d: number;
/**
* Translation on the x axis.
* @default 0
*/
tx: number;
/**
* Translation on the y axis.
* @default 0
*/
ty: number;
/**
* Array representation of the matrix.
* Only populated when `toArray()` is called.
* @default null
* @see {@link Matrix.toArray} For filling this array
*/
array: Float32Array | null;
/**
* @param a - x scale
* @param b - y skew
* @param c - x skew
* @param d - y scale
* @param tx - x translation
* @param ty - y translation
*/
constructor(a?: number, b?: number, c?: number, d?: number, tx?: number, ty?: number);
/**
* Creates a Matrix object based on the given array.
* Populates matrix components from a flat array in column-major order.
*
* > [!NOTE] Array mapping order:
* > ```
* > array[0] = a (x scale)
* > array[1] = b (y skew)
* > array[2] = tx (x translation)
* > array[3] = c (x skew)
* > array[4] = d (y scale)
* > array[5] = ty (y translation)
* > ```
* @example
* ```ts
* // Create matrix from array
* const matrix = new Matrix();
* matrix.fromArray([
* 2, 0, 100, // a, b, tx
* 0, 2, 100 // c, d, ty
* ]);
*
* // Create matrix from typed array
* const float32Array = new Float32Array([
* 1, 0, 0, // Scale x1, no skew
* 0, 1, 0 // No skew, scale x1
* ]);
* matrix.fromArray(float32Array);
* ```
* @param array - The array to populate the matrix from
* @see {@link Matrix.toArray} For converting matrix to array
* @see {@link Matrix.set} For setting values directly
*/
fromArray(array: number[]): void;
/**
* Sets the matrix properties directly.
* All matrix components can be set in one call.
* @example
* ```ts
* // Set to identity matrix
* matrix.set(1, 0, 0, 1, 0, 0);
*
* // Set to scale matrix
* matrix.set(2, 0, 0, 2, 0, 0); // Scale 2x
*
* // Set to translation matrix
* matrix.set(1, 0, 0, 1, 100, 50); // Move 100,50
* ```
* @param a - Scale on x axis
* @param b - Shear on y axis
* @param c - Shear on x axis
* @param d - Scale on y axis
* @param tx - Translation on x axis
* @param ty - Translation on y axis
* @returns This matrix. Good for chaining method calls.
* @see {@link Matrix.identity} For resetting to identity
* @see {@link Matrix.fromArray} For setting from array
*/
set(a: number, b: number, c: number, d: number, tx: number, ty: number): this;
/**
* Creates an array from the current Matrix object.
*
* > [!NOTE] The array format is:
* > ```
* > Non-transposed:
* > [a, c, tx,
* > b, d, ty,
* > 0, 0, 1]
* >
* > Transposed:
* > [a, b, 0,
* > c, d, 0,
* > tx,ty,1]
* > ```
* @example
* ```ts
* // Basic array conversion
* const matrix = new Matrix(2, 0, 0, 2, 100, 100);
* const array = matrix.toArray();
*
* // Using existing array
* const float32Array = new Float32Array(9);
* matrix.toArray(false, float32Array);
*
* // Get transposed array
* const transposed = matrix.toArray(true);
* ```
* @param transpose - Whether to transpose the matrix
* @param out - Optional Float32Array to store the result
* @returns The array containing the matrix values
* @see {@link Matrix.fromArray} For creating matrix from array
* @see {@link Matrix.array} For cached array storage
*/
toArray(transpose?: boolean, out?: Float32Array): Float32Array;
/**
* Get a new position with the current transformation applied.
*
* Can be used to go from a child's coordinate space to the world coordinate space. (e.g. rendering)
* @example
* ```ts
* // Basic point transformation
* const matrix = new Matrix().translate(100, 50).rotate(Math.PI / 4);
* const point = new Point(10, 20);
* const transformed = matrix.apply(point);
*
* // Reuse existing point
* const output = new Point();
* matrix.apply(point, output);
* ```
* @param pos - The origin point to transform
* @param newPos - Optional point to store the result
* @returns The transformed point
* @see {@link Matrix.applyInverse} For inverse transformation
* @see {@link Point} For point operations
*/
apply<P extends PointData = Point>(pos: PointData, newPos?: P): P;
/**
* Get a new position with the inverse of the current transformation applied.
*
* Can be used to go from the world coordinate space to a child's coordinate space. (e.g. input)
* @example
* ```ts
* // Basic inverse transformation
* const matrix = new Matrix().translate(100, 50).rotate(Math.PI / 4);
* const worldPoint = new Point(150, 100);
* const localPoint = matrix.applyInverse(worldPoint);
*
* // Reuse existing point
* const output = new Point();
* matrix.applyInverse(worldPoint, output);
*
* // Convert mouse position to local space
* const mousePoint = new Point(mouseX, mouseY);
* const localMouse = matrix.applyInverse(mousePoint);
* ```
* @param pos - The origin point to inverse-transform
* @param newPos - Optional point to store the result
* @returns The inverse-transformed point
* @see {@link Matrix.apply} For forward transformation
* @see {@link Matrix.invert} For getting inverse matrix
*/
applyInverse<P extends PointData = Point>(pos: PointData, newPos?: P): P;
/**
* Translates the matrix on the x and y axes.
* Adds to the position values while preserving scale, rotation and skew.
* @example
* ```ts
* // Basic translation
* const matrix = new Matrix();
* matrix.translate(100, 50); // Move right 100, down 50
*
* // Chain with other transformations
* matrix
* .scale(2, 2)
* .translate(100, 0)
* .rotate(Math.PI / 4);
* ```
* @param x - How much to translate on the x axis
* @param y - How much to translate on the y axis
* @returns This matrix. Good for chaining method calls.
* @see {@link Matrix.set} For setting position directly
* @see {@link Matrix.setTransform} For complete transform setup
*/
translate(x: number, y: number): this;
/**
* Applies a scale transformation to the matrix.
* Multiplies the scale values with existing matrix components.
* @example
* ```ts
* // Basic scaling
* const matrix = new Matrix();
* matrix.scale(2, 3); // Scale 2x horizontally, 3x vertically
*
* // Chain with other transformations
* matrix
* .translate(100, 100)
* .scale(2, 2) // Scales after translation
* .rotate(Math.PI / 4);
* ```
* @param x - The amount to scale horizontally
* @param y - The amount to scale vertically
* @returns This matrix. Good for chaining method calls.
* @see {@link Matrix.setTransform} For setting scale directly
* @see {@link Matrix.append} For combining transformations
*/
scale(x: number, y: number): this;
/**
* Applies a rotation transformation to the matrix.
*
* Rotates around the origin (0,0) by the given angle in radians.
* @example
* ```ts
* // Basic rotation
* const matrix = new Matrix();
* matrix.rotate(Math.PI / 4); // Rotate 45 degrees
*
* // Chain with other transformations
* matrix
* .translate(100, 100) // Move to rotation center
* .rotate(Math.PI) // Rotate 180 degrees
* .scale(2, 2); // Scale after rotation
*
* // Common angles
* matrix.rotate(Math.PI / 2); // 90 degrees
* matrix.rotate(Math.PI); // 180 degrees
* matrix.rotate(Math.PI * 2); // 360 degrees
* ```
* @remarks
* - Rotates around origin point (0,0)
* - Affects position if translation was set
* - Uses counter-clockwise rotation
* - Order of operations matters when chaining
* @param angle - The angle in radians
* @returns This matrix. Good for chaining method calls.
* @see {@link Matrix.setTransform} For setting rotation directly
* @see {@link Matrix.append} For combining transformations
*/
rotate(angle: number): this;
/**
* Appends the given Matrix to this Matrix.
* Combines two matrices by multiplying them together: this = this * matrix
* @example
* ```ts
* // Basic matrix combination
* const matrix = new Matrix();
* const other = new Matrix().translate(100, 0).rotate(Math.PI / 4);
* matrix.append(other);
* ```
* @remarks
* - Order matters: A.append(B) !== B.append(A)
* - Modifies current matrix
* - Preserves transformation order
* - Commonly used for combining transforms
* @param matrix - The matrix to append
* @returns This matrix. Good for chaining method calls.
* @see {@link Matrix.prepend} For prepending transformations
* @see {@link Matrix.appendFrom} For appending two external matrices
*/
append(matrix: Matrix): this;
/**
* Appends two matrices and sets the result to this matrix.
* Performs matrix multiplication: this = A * B
* @example
* ```ts
* // Basic matrix multiplication
* const result = new Matrix();
* const matrixA = new Matrix().scale(2, 2);
* const matrixB = new Matrix().rotate(Math.PI / 4);
* result.appendFrom(matrixA, matrixB);
* ```
* @remarks
* - Order matters: A * B !== B * A
* - Creates a new transformation from two others
* - More efficient than append() for multiple operations
* - Does not modify input matrices
* @param a - The first matrix to multiply
* @param b - The second matrix to multiply
* @returns This matrix. Good for chaining method calls.
* @see {@link Matrix.append} For single matrix combination
* @see {@link Matrix.prepend} For reverse order multiplication
*/
appendFrom(a: Matrix, b: Matrix): this;
/**
* Sets the matrix based on all the available properties.
* Combines position, scale, rotation, skew and pivot in a single operation.
* @example
* ```ts
* // Basic transform setup
* const matrix = new Matrix();
* matrix.setTransform(
* 100, 100, // position
* 0, 0, // pivot
* 2, 2, // scale
* Math.PI / 4, // rotation (45 degrees)
* 0, 0 // skew
* );
* ```
* @remarks
* - Updates all matrix components at once
* - More efficient than separate transform calls
* - Uses radians for rotation and skew
* - Pivot affects rotation center
* @param x - Position on the x axis
* @param y -