pixi.js
Version:
PixiJS — The HTML5 Creation Engine =============
1,478 lines (1,477 loc) • 842 kB
TypeScript
// Generated by dts-bundle-generator v9.3.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>;
/**
* Pixi supports multiple color formats, including CSS color strings, hex, numbers, and arrays.
*
* When providing values for any of the color properties, you can use any of the {@link color.ColorSource} formats.
* ```typescript
* import { Color } from 'pixi.js';
*
* // All of these are valid:
* sprite.tint = 'red';
* sprite.tint = 0xff0000;
* sprite.tint = '#ff0000';
* sprite.tint = new Color('red');
*
* // Same for graphics fill/stroke colors and other color values:
* graphics.fill({ color: 'red' });
* graphics.fill({ color: 0xff0000 });
* graphics.stroke({ color: '#ff0000' });
* graphics.stroke({ color: new Color('red')};
* ```
* @namespace color
*/
/**
* RGBA color array.
*
* `[number, number, number, number]`
* @memberof color
*/
export type RgbaArray = [
number,
number,
number,
number
];
/**
* Valid formats to use when defining any color properties, also valid for the {@link color.Color} constructor.
*
* These types are extended from [colord](https://www.npmjs.com/package/colord) with some PixiJS-specific extensions.
*
* Possible value types are:
* - [Color names](https://www.w3.org/TR/css-color-4/#named-colors):
* `'red'`, `'green'`, `'blue'`, `'white'`, etc.
* - RGB hex integers (`0xRRGGBB`):
* `0xff0000`, `0x00ff00`, `0x0000ff`, etc.
* - [RGB(A) hex strings](https://www.w3.org/TR/css-color-4/#hex-notation):
* - 6 digits (`RRGGBB`): `'ff0000'`, `'#00ff00'`, `'0x0000ff'`, etc.
* - 3 digits (`RGB`): `'f00'`, `'#0f0'`, `'0x00f'`, etc.
* - 8 digits (`RRGGBBAA`): `'ff000080'`, `'#00ff0080'`, `'0x0000ff80'`, etc.
* - 4 digits (`RGBA`): `'f008'`, `'#0f08'`, `'0x00f8'`, etc.
* - RGB(A) objects:
* `{ r: 255, g: 0, b: 0 }`, `{ r: 255, g: 0, b: 0, a: 0.5 }`, etc.
* - [RGB(A) strings](https://www.w3.org/TR/css-color-4/#rgb-functions):
* `'rgb(255, 0, 0)'`, `'rgb(100% 0% 0%)'`, `'rgba(255, 0, 0, 0.5)'`, `'rgba(100% 0% 0% / 50%)'`, etc.
* - RGB(A) arrays:
* `[1, 0, 0]`, `[1, 0, 0, 0.5]`, etc.
* - RGB(A) Float32Array:
* `new Float32Array([1, 0, 0])`, `new Float32Array([1, 0, 0, 0.5])`, etc.
* - RGB(A) Uint8Array:
* `new Uint8Array([255, 0, 0])`, `new Uint8Array([255, 0, 0, 128])`, etc.
* - RGB(A) Uint8ClampedArray:
* `new Uint8ClampedArray([255, 0, 0])`, `new Uint8ClampedArray([255, 0, 0, 128])`, etc.
* - HSL(A) objects:
* `{ h: 0, s: 100, l: 50 }`, `{ h: 0, s: 100, l: 50, a: 0.5 }`, etc.
* - [HSL(A) strings](https://www.w3.org/TR/css-color-4/#the-hsl-notation):
* `'hsl(0, 100%, 50%)'`, `'hsl(0deg 100% 50%)'`, `'hsla(0, 100%, 50%, 0.5)'`, `'hsla(0deg 100% 50% / 50%)'`, etc.
* - HSV(A) objects:
* `{ h: 0, s: 100, v: 100 }`, `{ h: 0, s: 100, v: 100, a: 0.5 }`, etc.
* - {@link color.Color} objects.
* @since 7.2.0
* @memberof color
*/
export type ColorSource = string | number | number[] | Float32Array | Uint8Array | Uint8ClampedArray | HslColor | HslaColor | HsvColor | HsvaColor | RgbColor | RgbaColor | Color | Number;
/**
* Color utility class. Can accept any {@link color.ColorSource} format in its constructor.
* ```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]
* ```
* @since 7.2.0
* @memberof color
*/
export declare class Color {
/**
* Default Color object for static uses
* @example
* import { Color } from 'pixi.js';
* Color.shared.setValue(0xffffff).toHex(); // '#ffffff'
*/
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 red component (0 - 1) */
get red(): number;
/** Get green component (0 - 1) */
get green(): number;
/** Get blue component (0 - 1) */
get blue(): number;
/** Get alpha component (0 - 1) */
get alpha(): number;
/**
* Set the value, suitable for chaining
* @param value
* @see Color.value
*/
setValue(value: ColorSource): this;
/**
* The current color source.
*
* When setting:
* - Setting to an instance of `Color` will copy its color source and components.
* - Otherwise, `Color` will try to normalize the color source and set the components.
* If the color source is invalid, an `Error` will be thrown and the `Color` will left unchanged.
*
* Note: The `null` in the setter's parameter type is added to match the TypeScript rule: return type of getter
* must be assignable to its setter's parameter type. Setting `value` to `null` will throw an `Error`.
*
* When getting:
* - A return value of `null` means the previous value was overridden (e.g., {@link Color.multiply multiply},
* {@link Color.premultiply premultiply} or {@link Color.round round}).
* - Otherwise, the color source used when setting is returned.
*/
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.
* @example
* import { Color } from 'pixi.js';
* new Color('white').toRgb(); // returns { r: 1, g: 1, b: 1, a: 1 }
*/
toRgba(): RgbaColor;
/**
* Convert to a RGB color object.
* @example
* import { Color } from 'pixi.js';
* new Color('white').toRgb(); // returns { r: 1, g: 1, b: 1 }
*/
toRgb(): RgbColor;
/** Convert to a CSS-style rgba string: `rgba(255,255,255,1.0)`. */
toRgbaString(): string;
/**
* Convert to an [R, G, B] array of clamped uint8 values (0 to 255).
* @example
* import { Color } from 'pixi.js';
* new Color('white').toUint8RgbArray(); // returns [255, 255, 255]
* @param {number[]|Uint8Array|Uint8ClampedArray} [out] - Output array
*/
toUint8RgbArray(): number[];
toUint8RgbArray<T extends number[] | Uint8Array | Uint8ClampedArray>(out: T): T;
/**
* Convert to an [R, G, B, A] array of normalized floats (numbers from 0.0 to 1.0).
* @example
* import { Color } from 'pixi.js';
* new Color('white').toArray(); // returns [1, 1, 1, 1]
* @param {number[]|Float32Array} [out] - Output array
*/
toArray(): number[];
toArray<T extends number[] | Float32Array>(out: T): T;
/**
* Convert to an [R, G, B] array of normalized floats (numbers from 0.0 to 1.0).
* @example
* import { Color } from 'pixi.js';
* new Color('white').toRgbArray(); // returns [1, 1, 1]
* @param {number[]|Float32Array} [out] - Output array
*/
toRgbArray(): number[];
toRgbArray<T extends number[] | Float32Array>(out: T): T;
/**
* Convert to a hexadecimal number.
* @example
* import { Color } from 'pixi.js';
* new Color('white').toNumber(); // returns 16777215
*/
toNumber(): number;
/**
* Convert to a BGR number
* @example
* import { Color } from 'pixi.js';
* new Color(0xffcc99).toBgrNumber(); // returns 0x99ccff
*/
toBgrNumber(): number;
/**
* Convert to a hexadecimal number in little endian format (e.g., BBGGRR).
* @example
* import { Color } from 'pixi.js';
* new Color(0xffcc99).toLittleEndianNumber(); // returns 0x99ccff
* @returns {number} - The color as a number in little endian format.
*/
toLittleEndianNumber(): number;
/**
* Multiply with another color. This action is destructive, and will
* override the previous `value` property to be `null`.
* @param {ColorSource} value - The color to multiply by.
*/
multiply(value: ColorSource): this;
/**
* Converts color to a premultiplied alpha format. This action is destructive, and will
* override the previous `value` property to be `null`.
* @param alpha - The alpha to multiply by.
* @param {boolean} [applyToRGB=true] - Whether to premultiply RGB channels.
* @returns {Color} - Itself.
*/
premultiply(alpha: number, applyToRGB?: boolean): this;
/**
* Premultiplies alpha with current color.
* @param {number} alpha - The alpha to multiply by.
* @param {boolean} [applyToRGB=true] - Whether to premultiply RGB channels.
* @returns {number} tint multiplied by alpha
*/
toPremultiplied(alpha: number, applyToRGB?: boolean): number;
/**
* Convert to a hexadecimal string.
* @example
* import { Color } from 'pixi.js';
* new Color('white').toHex(); // returns "#ffffff"
*/
toHex(): string;
/**
* Convert to a hexadecimal string with alpha.
* @example
* import { Color } from 'pixi.js';
* new Color('white').toHexa(); // returns "#ffffffff"
*/
toHexa(): string;
/**
* Set alpha, suitable for chaining.
* @param alpha
*/
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 the value is a color-like object
* @param value - Value to check
* @returns True if the value is a color-like object
* @static
* @example
* import { Color } from 'pixi.js';
* Color.isColorLike('white'); // returns true
* Color.isColorLike(0xffffff); // returns true
* Color.isColorLike([1, 1, 1]); // returns true
*/
static isColorLike(value: unknown): value is ColorSource;
}
/**
* Common interface for points. Both Point and ObservablePoint implement it
* @memberof maths
*/
export interface PointData {
/** X coord */
x: number;
/** Y coord */
y: number;
}
/**
* Common interface for points. Both Point and ObservablePoint implement it
* @memberof maths
*/
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.
*/
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
*/
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
*/
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
*/
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.
* <br/>
* Many Pixi functions accept the `PointData` type as an alternative to `Point`,
* which only requires `x` and `y` properties.
* @class
* @implements {PointLike}
* @memberof maths
*/
export declare class Point implements PointLike {
/** Position of the point on the x axis */
x: number;
/** Position of the point on the y axis */
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
* @returns A clone of this point
*/
clone(): Point;
/**
* Copies `x` and `y` from the given point into this point
* @param p - The point to copy from
* @returns The point instance itself
*/
copyFrom(p: PointData): this;
/**
* Copies this point's x and y into the given point (`p`).
* @param p - The point to copy to. Can be any of type that is or extends `PointData`
* @returns The point (`p`) with values updated
*/
copyTo<T extends PointLike>(p: T): T;
/**
* Accepts another point (`p`) and returns `true` if the given point is equal to this point
* @param p - The point to check
* @returns Returns `true` if both `x` and `y` are equal
*/
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
* @returns The point instance itself
*/
set(x?: number, y?: number): this;
toString(): string;
/**
* A static Point object with `x` and `y` values of `0`. Can be used to avoid creating new objects multiple times.
* @readonly
*/
static get shared(): Point;
}
interface TransformableObject {
position: PointData;
scale: PointData;
pivot: PointData;
skew: PointData;
rotation: number;
}
/**
* A fast matrix for 2D transformations.
* ```js
* | a | c | tx|
* | b | d | ty|
* | 0 | 0 | 1 |
* ```
* @memberof maths
*/
export declare class Matrix {
/** @default 1 */
a: number;
/** @default 0 */
b: number;
/** @default 0 */
c: number;
/** @default 1 */
d: number;
/** @default 0 */
tx: number;
/** @default 0 */
ty: number;
/** An array of the current matrix. Only populated when `toArray` is called */
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. The Element to Matrix mapping order is as follows:
*
* a = array[0]
* b = array[1]
* c = array[3]
* d = array[4]
* tx = array[2]
* ty = array[5]
* @param array - The array that the matrix will be populated from.
*/
fromArray(array: number[]): void;
/**
* Sets the matrix properties.
* @param a - Matrix component
* @param b - Matrix component
* @param c - Matrix component
* @param d - Matrix component
* @param tx - Matrix component
* @param ty - Matrix component
* @returns This matrix. Good for chaining method calls.
*/
set(a: number, b: number, c: number, d: number, tx: number, ty: number): this;
/**
* Creates an array from the current Matrix object.
* @param transpose - Whether we need to transpose the matrix or not
* @param [out=new Float32Array(9)] - If provided the array will be assigned to out
* @returns The newly created array which contains the matrix
*/
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)
* @param pos - The origin
* @param {Point} [newPos] - The point that the new position is assigned to (allowed to be same as input)
* @returns {Point} The new point, transformed through this matrix
*/
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)
* @param pos - The origin
* @param {Point} [newPos] - The point that the new position is assigned to (allowed to be same as input)
* @returns {Point} The new point, inverse-transformed through this matrix
*/
applyInverse<P extends PointData = Point>(pos: PointData, newPos?: P): P;
/**
* Translates the matrix on the x and y.
* @param x - How much to translate x by
* @param y - How much to translate y by
* @returns This matrix. Good for chaining method calls.
*/
translate(x: number, y: number): this;
/**
* Applies a scale transformation to the matrix.
* @param x - The amount to scale horizontally
* @param y - The amount to scale vertically
* @returns This matrix. Good for chaining method calls.
*/
scale(x: number, y: number): this;
/**
* Applies a rotation transformation to the matrix.
* @param angle - The angle in radians.
* @returns This matrix. Good for chaining method calls.
*/
rotate(angle: number): this;
/**
* Appends the given Matrix to this Matrix.
* @param matrix - The matrix to append.
* @returns This matrix. Good for chaining method calls.
*/
append(matrix: Matrix): this;
/**
* Appends two matrix's and sets the result to this matrix. AB = A * B
* @param a - The matrix to append.
* @param b - The matrix to append.
* @returns This matrix. Good for chaining method calls.
*/
appendFrom(a: Matrix, b: Matrix): this;
/**
* Sets the matrix based on all the available properties
* @param x - Position on the x axis
* @param y - Position on the y axis
* @param pivotX - Pivot on the x axis
* @param pivotY - Pivot on the y axis
* @param scaleX - Scale on the x axis
* @param scaleY - Scale on the y axis
* @param rotation - Rotation in radians
* @param skewX - Skew on the x axis
* @param skewY - Skew on the y axis
* @returns This matrix. Good for chaining method calls.
*/
setTransform(x: number, y: number, pivotX: number, pivotY: number, scaleX: number, scaleY: number, rotation: number, skewX: number, skewY: number): this;
/**
* Prepends the given Matrix to this Matrix.
* @param matrix - The matrix to prepend
* @returns This matrix. Good for chaining method calls.
*/
prepend(matrix: Matrix): this;
/**
* Decomposes the matrix (x, y, scaleX, scaleY, and rotation) and sets the properties on to a transform.
* @param transform - The transform to apply the properties to.
* @returns The transform with the newly applied properties
*/
decompose(transform: TransformableObject): TransformableObject;
/**
* Inverts this matrix
* @returns This matrix. Good for chaining method calls.
*/
invert(): this;
/** Checks if this matrix is an identity matrix */
isIdentity(): boolean;
/**
* Resets this Matrix to an identity (default) matrix.
* @returns This matrix. Good for chaining method calls.
*/
identity(): this;
/**
* Creates a new Matrix object with the same values as this one.
* @returns A copy of this matrix. Good for chaining method calls.
*/
clone(): Matrix;
/**
* Changes the values of the given matrix to be the same as the ones in this matrix
* @param matrix - The matrix to copy to.
* @returns The matrix given in parameter with its values updated.
*/
copyTo(matrix: Matrix): Matrix;
/**
* Changes the values of the matrix to be the same as the ones in given matrix
* @param matrix - The matrix to copy from.
* @returns this
*/
copyFrom(matrix: Matrix): this;
/**
* check to see if two matrices are the same
* @param matrix - The matrix to compare to.
*/
equals(matrix: Matrix): boolean;
toString(): string;
/**
* A default (identity) matrix.
*
* This is a shared object, if you want to modify it consider creating a new `Matrix`
* @readonly
*/
static get IDENTITY(): Readonly<Matrix>;
/**
* A static Matrix that can be used to avoid creating new objects.
* Will always ensure the matrix is reset to identity when requested.
* Use this object for fast but temporary calculations, as it may be mutated later on.
* This is a different object to the `IDENTITY` object and so can be modified without changing `IDENTITY`.
* @readonly
*/
static get shared(): Matrix;
}
export interface ObservablePoint extends PixiMixins.ObservablePoint {
}
/**
* Observer used to listen for observable point changes.
* @memberof maths
*/
export interface Observer<T> {
/** Callback to call when the point has updated. */
_onUpdate: (point?: T) => void;
}
/**
* The ObservablePoint 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.
*
* An `ObservablePoint` is a point that triggers the `onUpdate` method on an observer when the point's position is changed.
* @memberof maths
*/
export declare class ObservablePoint implements PointLike {
/** @ignore */
_x: number;
/** @ignore */
_y: number;
/** This object used to call the `onUpdate` callback when the point changes. */
private readonly _observer;
/**
* Creates a new `ObservablePoint`
* @param observer - Observer to pass to listen for change events.
* @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(observer: Observer<ObservablePoint>, x?: number, y?: number);
/**
* Creates a clone of this point.
* @param observer - Optional observer to pass to the new observable point.
* @returns a copy of this observable point
*/
clone(observer?: Observer<ObservablePoint>): ObservablePoint;
/**
* 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
* @returns The observable point instance itself
*/
set(x?: number, y?: number): this;
/**
* Copies x and y from the given point (`p`)
* @param p - The point to copy from. Can be any of type that is or extends `PointData`
* @returns The observable point instance itself
*/
copyFrom(p: PointData): this;
/**
* Copies this point's x and y into that of the given point (`p`)
* @param p - The point to copy to. Can be any of type that is or extends `PointData`
* @returns The point (`p`) with values updated
*/
copyTo<T extends PointLike>(p: T): T;
/**
* Accepts another point (`p`) and returns `true` if the given point is equal to this point
* @param p - The point to check
* @returns Returns `true` if both `x` and `y` are equal
*/
equals(p: PointData): boolean;
toString(): string;
/** Position of the observable point on the x axis. */
get x(): number;
set x(value: number);
/** Position of the observable point on the y axis. */
get y(): number;
set y(value: number);
}
/**
* Two Pi.
* @static
* @member {number}
* @memberof maths
*/
export declare const PI_2: number;
/**
* Conversion factor for converting radians to degrees.
* @static
* @member {number} RAD_TO_DEG
* @memberof maths
*/
export declare const RAD_TO_DEG: number;
/**
* Conversion factor for converting degrees to radians.
* @static
* @member {number}
* @memberof maths
*/
export declare const DEG_TO_RAD: number;
/**
* Constants that identify shapes, mainly to prevent `instanceof` calls.
* @memberof maths
*/
export type SHAPE_PRIMITIVE = "polygon" | "rectangle" | "circle" | "ellipse" | "triangle" | "roundedRectangle";
/**
* A basic object to define a Pixi shape.
* @memberof maths
*/
export interface ShapePrimitive {
/** The type of the object, mainly used to avoid `instanceof` checks */
readonly type: SHAPE_PRIMITIVE;
/** Checks whether the x and y coordinates passed to this function are contained within this ShapePrimitive. */
contains(x: number, y: number): boolean;
/** Checks whether the x and y coordinates passed to this function are contained within the stroke of this shape */
strokeContains(x: number, y: number, strokeWidth: number): boolean;
/** Creates a clone of this ShapePrimitive instance. */
clone(): ShapePrimitive;
/** Copies the properties from another ShapePrimitive to this ShapePrimitive. */
copyFrom(source: ShapePrimitive): void;
/** Copies the properties from this ShapePrimitive to another ShapePrimitive. */
copyTo(destination: ShapePrimitive): void;
/** Returns the framing rectangle of the ShapePrimitive as a Rectangle object. */
getBounds(out?: Rectangle): Rectangle;
/** The X coordinate of the shape */
readonly x: number;
/** The Y coordinate of the shape */
readonly y: number;
}
export interface Rectangle extends PixiMixins.Rectangle {
}
/**
* The `Rectangle` object is an area defined by its position, as indicated by its top-left corner
* point (`x`, `y`) and by its `width` and its `height`.
*
* It also provides convenience methods to get and set the position and size of the rectangle such as
* {@link maths.Rectangle#bottom|bottom}, {@link maths.Rectangle#right|right} and {@link maths.Rectangle#isEmpty|isEmpty}.
* @memberof maths
*/
export declare class Rectangle implements ShapePrimitive {
/**
* The type of the object, mainly used to avoid `instanceof` checks
* @default 'rectangle'
*/
readonly type: SHAPE_PRIMITIVE;
/**
* The X coordinate of the upper-left corner of the rectangle
* @default 0
*/
x: number;
/**
* The Y coordinate of the upper-left corner of the rectangle
* @default 0
*/
y: number;
/**
* The overall width of this rectangle
* @default 0
*/
width: number;
/**
* The overall height of this rectangle
* @default 0
*/
height: number;
/**
* @param x - The X coordinate of the upper-left corner of the rectangle
* @param y - The Y coordinate of the upper-left corner of the rectangle
* @param width - The overall width of the rectangle
* @param height - The overall height of the rectangle
*/
constructor(x?: string | number, y?: string | number, width?: string | number, height?: string | number);
/** Returns the left edge of the rectangle. */
get left(): number;
/** Returns the right edge of the rectangle. */
get right(): number;
/** Returns the top edge of the rectangle. */
get top(): number;
/** Returns the bottom edge of the rectangle. */
get bottom(): number;
/** Determines whether the Rectangle is empty. */
isEmpty(): boolean;
/** A constant empty rectangle. This is a new object every time the property is accessed */
static get EMPTY(): Rectangle;
/**
* Creates a clone of this Rectangle
* @returns a copy of the rectangle
*/
clone(): Rectangle;
/**
* Converts a Bounds object to a Rectangle object.
* @param bounds - The bounds to copy and convert to a rectangle.
* @returns Returns itself.
*/
copyFromBounds(bounds: Bounds): this;
/**
* Copies another rectangle to this one.
* @param rectangle - The rectangle to copy from.
* @returns Returns itself.
*/
copyFrom(rectangle: Rectangle): Rectangle;
/**
* Copies this rectangle to another one.
* @param rectangle - The rectangle to copy to.
* @returns Returns given parameter.
*/
copyTo(rectangle: Rectangle): Rectangle;
/**
* Checks whether the x and y coordinates given are contained within this Rectangle
* @param x - The X coordinate of the point to test
* @param y - The Y coordinate of the point to test
* @returns Whether the x/y coordinates are within this Rectangle
*/
contains(x: number, y: number): boolean;
/**
* Checks whether the x and y coordinates given are contained within this rectangle including the stroke.
* @param x - The X coordinate of the point to test
* @param y - The Y coordinate of the point to test
* @param strokeWidth - The width of the line to check
* @returns Whether the x/y coordinates are within this rectangle
*/
strokeContains(x: number, y: number, strokeWidth: number): boolean;
/**
* Determines whether the `other` Rectangle transformed by `transform` intersects with `this` Rectangle object.
* Returns true only if the area of the intersection is >0, this means that Rectangles
* sharing a side are not overlapping. Another side effect is that an arealess rectangle
* (width or height equal to zero) can't intersect any other rectangle.
* @param {Rectangle} other - The Rectangle to intersect with `this`.
* @param {Matrix} transform - The transformation matrix of `other`.
* @returns {boolean} A value of `true` if the transformed `other` Rectangle intersects with `this`; otherwise `false`.
*/
intersects(other: Rectangle, transform?: Matrix): boolean;
/**
* Pads the rectangle making it grow in all directions.
* If paddingY is omitted, both paddingX and paddingY will be set to paddingX.
* @param paddingX - The horizontal padding amount.
* @param paddingY - The vertical padding amount.
* @returns Returns itself.
*/
pad(paddingX?: number, paddingY?: number): this;
/**
* Fits this rectangle around the passed one.
* @param rectangle - The rectangle to fit.
* @returns Returns itself.
*/
fit(rectangle: Rectangle): this;
/**
* Enlarges rectangle that way its corners lie on grid
* @param resolution - resolution
* @param eps - precision
* @returns Returns itself.
*/
ceil(resolution?: number, eps?: number): this;
/**
* Enlarges this rectangle to include the passed rectangle.
* @param rectangle - The rectangle to include.
* @returns Returns itself.
*/
enlarge(rectangle: Rectangle): this;
/**
* Returns the framing rectangle of the rectangle as a Rectangle object
* @param out - optional rectangle to store the result
* @returns The framing rectangle
*/
getBounds(out?: Rectangle): Rectangle;
toString(): string;
}
/**
* Simple bounds implementation instead of more ambiguous [number, number, number, number]
* @memberof rendering
*/
export interface BoundsData {
minX: number;
minY: number;
maxX: number;
maxY: number;
}
/**
* A representation of an AABB bounding box.
* @memberof rendering
*/
export declare class Bounds {
/** @default Infinity */
minX: number;
/** @default Infinity */
minY: number;
/** @default -Infinity */
maxX: number;
/** @default -Infinity */
maxY: number;
matrix: Matrix;
private _rectangle;
constructor(minX?: number, minY?: number, maxX?: number, maxY?: number);
/**
* Checks if bounds are empty.
* @returns - True if empty.
*/
isEmpty(): boolean;
/** The bounding rectangle of the bounds. */
get rectangle(): Rectangle;
/** Clears the bounds and resets. */
clear(): this;
/**
* Sets the bounds.
* @param x0 - left X of frame
* @param y0 - top Y of frame
* @param x1 - right X of frame
* @param y1 - bottom Y of frame
*/
set(x0: number, y0: number, x1: number, y1: number): void;
/**
* Adds sprite frame
* @param x0 - left X of frame
* @param y0 - top Y of frame
* @param x1 - right X of frame
* @param y1 - bottom Y of frame
* @param matrix
*/
addFrame(x0: number, y0: number, x1: number, y1: number, matrix?: Matrix): void;
/**
* Adds a rectangle to the bounds.
* @param rect - The rectangle to be added.
* @param matrix - The matrix to apply to the bounds.
*/
addRect(rect: Rectangle, matrix?: Matrix): void;
/**
* Adds other {@link Bounds}.
* @param bounds - The Bounds to be added
* @param matrix
*/
addBounds(bounds: BoundsData, matrix?: Matrix): void;
/**
* Adds other Bounds, masked with Bounds.
* @param mask - The Bounds to be added.
*/
addBoundsMask(mask: Bounds): void;
/**
* Adds other Bounds, multiplied with matrix.
* @param matrix - The matrix to apply to the bounds.
*/
applyMatrix(matrix: Matrix): void;
/**
* Resizes the bounds object to include the given rectangle.
* @param rect - The rectangle to be included.
*/
fit(rect: Rectangle): this;
/**
* Resizes the bounds object to include the given bounds.
* @param left - The left value of the bounds.
* @param right - The right value of the bounds.
* @param top - The top value of the bounds.
* @param bottom - The bottom value of the bounds.
*/
fitBounds(left: number, right: number, top: number, bottom: number): this;
/**
* Pads bounds object, making it grow in all directions.
* If paddingY is omitted, both paddingX and paddingY will be set to paddingX.
* @param paddingX - The horizontal padding amount.
* @param paddingY - The vertical padding amount.
*/
pad(paddingX: number, paddingY?: number): this;
/** Ceils the bounds. */
ceil(): this;
/** Clones the bounds. */
clone(): Bounds;
/**
* Scales the bounds by the given values
* @param x - The X value to scale by.
* @param y - The Y value to scale by.
*/
scale(x: number, y?: number): this;
/** the x value of the bounds. */
get x(): number;
set x(value: number);
/** the y value of the bounds. */
get y(): number;
set y(value: number);
/** the width value of the bounds. */
get width(): number;
set width(value: number);
/** the height value of the bounds. */
get height(): number;
set height(value: number);
/** the left value of the bounds. */
get left(): number;
/** the right value of the bounds. */
get right(): number;
/** the top value of the bounds. */
get top(): number;
/** the bottom value of the bounds. */
get bottom(): number;
/** Is the bounds positive. */
get isPositive(): boolean;
get isValid(): boolean;
/**
* Adds screen vertices from array
* @param vertexData - calculated vertices
* @param beginOffset - begin offset
* @param endOffset - end offset, excluded
* @param matrix
*/
addVertexData(vertexData: Float32Array, beginOffset: number, endOffset: number, matrix?: Matrix): void;
/**
* Checks if the point is contained within the bounds.
* @param x - x coordinate
* @param y - y coordinate
*/
containsPoint(x: number, y: number): boolean;
toString(): string;
}
export interface ViewObserver {
onViewUpdate: () => void;
}
/**
* A view is something that is able to be rendered by the renderer.
* @memberof scene
*/
export interface View {
/** a unique id for this view */
readonly uid: number;
/** whether or not this view should be batched */
batched: boolean;
/**
* an identifier that is used to identify the type of system that will be used to render this renderable
* eg, 'sprite' will use the sprite system (based on the systems name
*/
readonly renderPipeId: string;
/** this is an int because it is packed directly into an attribute in the shader */
_roundPixels: 0 | 1;
/** @private */
_lastUsed: number;
/** @private */
_lastInstructionTick: number;
/**
* Whether or not to round the x/y position of the object.
* @type {boolean}
*/
get roundPixels(): boolean;
/** if true, the view will have its position rounded to the nearest whole number */
set roundPixels(value: boolean);
/** this is the AABB rectangle bounds of the view in local untransformed space. */
bounds: BoundsData;
/** Adds the current bounds of this view to the supplied bounds */
addBounds: (bounds: Bounds) => void;
/** Checks if the point is within the view */
containsPoint: (point: Point) => boolean;
}
export interface Renderable extends Container, View {
}
/**
* An instruction that can be executed by the renderer
* @memberof rendering
*/
export interface Instruction {
/** a the id of the render pipe that can run this instruction */
renderPipeId: string;
/** the name of the instruction */
action?: string;
/** true if this instruction can be compiled into a WebGPU bundle */
canBundle: boolean;
}
/**
* A set of instructions that can be executed by the renderer.
* Basically wraps an array, but with some extra properties that help the renderer
* to keep things nice and optimised.
*
* Note:
* InstructionSet.instructions contains all the instructions, but does not resize (for performance).
* So for the true length of the instructions you need to use InstructionSet.instructionSize
* @memberof rendering
*/
export declare class InstructionSet {
/** a unique id for this instruction set used through the renderer */
readonly uid: number;
/** the array of instructions */
readonly instructions: Instruction[];
/** the actual size of the array (any instructions passed this should be ignored) */
instructionSize: number;
/** allows for access to the render pipes of the renderer */
renderPipes: any;
renderables: Renderable[];
tick: number;
/** reset the instruction set so it can be reused set size back to 0 */
reset(): void;
/**
* Add an instruction to the set
* @param instruction - add an instruction to the set
*/
add(instruction: Instruction): void;
/**
* Log the instructions to the console (for debugging)
* @internal
* @ignore
*/
log(): void;
}
/**
* A RenderGroup is a class that is responsible for I generating a set of instructions that are used to render the
* root container and its children. It also watches for any changes in that container or its children,
* these changes are analysed and either the instruction set is rebuild or the instructions data is updated.
* @memberof rendering
*/
export declare class RenderGroup implements Instruction {
renderPipeId: string;
root: Container;
canBundle: boolean;
renderGroupParent: RenderGroup;
renderGroupChildren: RenderGroup[];
worldTransform: Matrix;
worldColorAlpha: number;
worldColor: number;
worldAlpha: number;
readonly childrenToUpdate: Record<number, {
list: Container[];
index: number;
}>;
updateTick: number;
readonly childrenRenderablesToUpdate: {
list: Container[];
index: number;
};
structureDidChange: boolean;
instructionSet: InstructionSet;
private readonly _onRenderContainers;
init(root: Container): void;
reset(): void;
get localTransform(): Matrix;
addRenderGroupChild(renderGroupChild: RenderGroup): void;
private _removeRenderGroupChild;
addChild(child: Container): void;
removeChild(child: Container): void;
removeChildren(children: Container[]): void;
onChildUpdate(child: Container): void;
updateRenderable(container: Container): void;
onChildViewUpdate(child: Container): void;
get isRenderable(): boolean;
/**
* adding a container to the onRender list will make sure the user function
* passed in to the user defined 'onRender` callBack
* @param container - the container to add to the onRender list
*/
addOnRender(container: Container): void;
removeOnRender(container: Container): void;
runOnRender(): void;
destroy(): void;
getChildren(out?: Container[]): Container[];
private _getChildren;
}
/**
* Defines a size with a width and a height.
* @memberof maths
*/
export interface Size {
/** The width. */
width: number;
/** The height. */
height: number;
}
/**
* Various blend modes supported by Pixi
* @memberof filters
*/
export type BLEND_MODES = "inherit" | "normal" | "add" | "multiply" | "screen" | "darken" | "lighten" | "erase" | "color-dodge" | "color-burn" | "linear-burn" | "linear-dodge" | "linear-light" | "hard-light" | "soft-light" | "pin-light" | "difference" | "exclusion" | "overlay" | "saturation" | "color" | "luminosity" | "normal-npm" | "add-npm" | "screen-npm" | "none" | "subtract" | "divide" | "vivid-light" | "hard-mix" | "negation" | "min" | "max";
/**
* The map of blend modes supported by Pixi
* @memberof rendering
*/
export declare const BLEND_TO_NPM: {
normal: string;
add: string;
screen: string;
};
/**
* The stencil operation to perform when using the stencil buffer
* @memberof rendering
*/
export declare enum STENCIL_MODES {
DISABLED = 0,
RENDERING_MASK_ADD = 1,
MASK_ACTIVE = 2,
RENDERING_MASK_REMOVE = 3,
NONE = 4
}
/**
* The culling mode to use. It can be either `none`, `front` or `back`.
* @memberof rendering
*/
export type CULL_MODES = "none" | "back" | "front";
export type ArrayFixed<T, L extends number> = [
T,
...Array<T>
] & {
length: L;
};
export type Dict<T> = {
[key: string]: T;
};
export type Optional<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
export interface MeasureMixinConstructor {
width?: number;
height?: number;
}
export interface MeasureMixin extends Required<MeasureMixinConstructor> {
getSize(out?: Size): Size;
setSize(width: number, height?: number): void;
setSize(value: Optional<Size, "height">): void;
getLocalBounds(bounds?: Bounds): Bounds;
getBounds(skipUpdate?: boolean, bounds?: Bounds): Bounds;
_localBoundsCacheData: LocalBoundsCacheData;
_localBoundsCacheId: number;
_setWidth(width: number, localWidth: number): void;
_setHeight(height: number, localHeight: number): void;
}
interface LocalBoundsCacheData {
data: number[];
index: number;
didChange: boolean;
localBounds: Bounds;
}
export declare const measureMixin: Partial<Container>;
/**
* Base destroy options.
* @example
* // Destroy the sprite and all its children.
* sprite.destroy({ children: true });
* @memberof scene
*/
export interface BaseDestroyOptions {
/** Destroy children recursively. */
children?: boolean;
}
/**
* Options when destroying textures. Most of these use cases are internal.
* ```js
* // destroy the graphics context and its texture
* graphicsContext.destroy({ texture: true });
* ```
* @memberof scene
*/
export interface TextureDestroyOptions {
/** Destroy the texture as well. */
texture?: boolean;
/** Destroy the texture source as well. */
textureSource?: boolean;
}
/**
* Options when destroying a graphics context.
* ```js
* // destroy the graphics context and its texture
* graphicsContext.destroy({ context: true, texture: true });
* ```
* @memberof scene
*/
export interface ContextDestroyOptions {
/** Destroy the graphics context as well. */
context?: boolean;
}
/**
* Options when destroying a text.
* ```js
* // destroy the text and its style
* text.destroy({ style: true });
* ```
* @memberof scene
*/
export interface TextDestroyOptions {
/** Destroy the text style as well. */
style?: boolean;
}
export type TypeOrBool<T> = T | boolean;
/**
* Options for destroying a container.
* @property {boolean} [children=false] - Destroy the children of the container as well.
* @property {boolean} [texture=false] - Destroy the texture of the container's children.
* @property {boolean} [textureSource=false] - Destroy the texture source of the container's children.
* @property {boolean} [context=false] - Destroy the context of the container's children.
* @property {boolean} [style=false] - Destroy the style of the container's children.
* @memberof scene
*/
export type DestroyOptions = TypeOrBool<BaseDestroyOptions & ContextDestroyOptions & TextureDestroyOptions & TextDestroyOptions>;
export type ContainerChild = Container;
export interface ContainerEvents<C extends ContainerChild> extends PixiMixins.ContainerEvents {
added: [
container: Container
];
childAdded: [
child: C,
container: Container,
index: number
];
removed: [
container: Container
];
childRemoved: [
child: C,
container: Container,
index: number
];
destroyed: [
container: Container
];
}
type AnyEvent = {
[K: ({} & string) | ({} & symbol)]: any;
};
export declare const UPDATE_COLOR = 1;
export declare const UPDATE_BLEND = 2;
export declare const UPDATE_VISIBLE = 4;
export declare const UPDATE_TRANSFORM = 8;
export interface UpdateTransformOptions {
x: number;
y: number;
scaleX: number;
scaleY: number;
rotation: number;
skewX: number;
skewY: number;
pivotX: number;
pivotY: number;
}
/**
* Constructor options used for `Container` instances.
* ```js
* const container = new Container({
* position: new Point(100, 200),
* scale: new Point(2, 2),
* rotation: Math.PI / 2,
* });
* ```
* @memberof scene
* @see scene.Container
*/
export interface ContainerOptions<C extends ContainerChild = ContainerChild> extends PixiMixins.ContainerOptions {
/** @see scene.Container#isRenderGroup */
isRenderGroup?: boolean;
/** @see scene.Container#blendMode */
blendMode?: BLEND_MODES;
/** @see scene.Container#tint */
tint?: ColorSource;
/** @see scene.Container#alpha */
alpha?: number;
/** @see scene.Container#angle */
angle?: number;
/** @see scene.Container#children */
children?: C[];
/** @see scene.Container#parent */
parent?: Container;
/** @see scene.Container#renderable */
renderable?: boolean;
/** @see scene.Container#rotation */
rotation?: number;
/** @see scene.Container#scale */
scale?: PointData | number;
/** @see scene.Container#pivot */
pivot?: PointData | number;
/** @see scene.Container#position */
position?: PointData;
/** @see scene.Container#skew */
skew?: PointData;
/** @see scene.Container#visible */
visible?: boolean;
/** @see scene.Container#x */
x?: number;
/** @see scene.Container#y */
y?: number;
/** @see scene.Container#boundArea */
boundsArea?: Rectangle;
}
export interface Container<C extends ContainerChild> extends PixiMixins.Container<C>, EventEmitter<ContainerEvents<C> & AnyEvent> {
}
/**
* Container is a general-purpose display object that holds children. It also adds built-in support for advanced
* rendering features like masking and filtering.
*
* It is the base class of all display objects that act as a container for other objects, including Graphics
* and Sprite.
*
* <details id="transforms">
*
* <summary>Transforms</summary>
*
* The [transform]{@link scene.Container#transform} of a display object describes the projection from its
* local coordinate space to its parent's local coordinate space. The following properties are derived
* from the transform:
*
* <table>
* <thead>
* <tr>
* <th>Property</th>
* <th>Description</th>
* </tr>
* </thead>
* <tbody>
* <tr>
* <td>[pivot]{@link scene.Container#pivot}</td>
* <td>
*