PIXI | PIXI-Extended

Index

Namespaces

utils

Classes

Interfaces

Functions

Type aliases

CompressedTextureExtensionRef

CompressedTextureExtensionRef: keyof CompressedTextureExtensions

CompressedTextureExtensions

CompressedTextureExtensions: { astc: WEBGL_compressed_texture_astc; atc: any; etc: any; etc1: any; pvrtc: any; s3tc?: WEBGL_compressed_texture_s3tc; s3tc_sRGB: WEBGL_compressed_texture_s3tc_srgb }

Compressed texture extensions

Type declaration

astc: WEBGL_compressed_texture_astc
atc: any
etc: any
etc1: any
pvrtc: any
Optional s3tc?: WEBGL_compressed_texture_s3tc
s3tc_sRGB: WEBGL_compressed_texture_s3tc_srgb

Cursor

IAutoDetectOptions

IResourcePluginOptions

IResourcePluginOptions: {}

Type declaration

[key: string]: any

IShape

IShape: Circle | Ellipse | Polygon | Rectangle | RoundedRectangle

ImageSource

ImageSource: HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | ImageBitmap

InteractionCallback

InteractionCallback: (interactionEvent: InteractionEvent, displayObject: DisplayObject, hit?: boolean) => void

Type declaration

- (interactionEvent: InteractionEvent, displayObject: DisplayObject, hit?: boolean): void
- Parameters
  - interactionEvent: InteractionEvent
  - displayObject: DisplayObject
  - Optional hit: boolean
  Returns void

InteractivePointerEvent

InteractivePointerEvent: PointerEvent | TouchEvent | MouseEvent

PointerEvents

SpriteSource

SpriteSource: TextureSource | Texture

TLoaderResource

TLoaderResource: {} & typeof Resource

TextStyleAlign

TextStyleAlign: "left" | "center" | "right" | "justify"

TextStyleFill

TextStyleFontStyle

TextStyleFontStyle: "normal" | "italic" | "oblique"

TextStyleFontVariant

TextStyleFontVariant: "normal" | "small-caps"

TextStyleFontWeight

TextStyleFontWeight: "normal" | "bold" | "bolder" | "lighter" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900"

TextStyleLineJoin

TextStyleLineJoin: "miter" | "round" | "bevel"

TextStyleTextBaseline

TextStyleWhiteSpace

TextStyleWhiteSpace: "normal" | "pre" | "pre-line"

TextureSource

TextureSource: string | BaseTexture | ImageSource

TickerCallback

TickerCallback<T>: (this: T, dt: number) => any

Type parameters

Type declaration

- (this: T, dt: number): any
- Parameters
  - this: T
  - dt: number
  Returns any

Variables

Const BatchRenderer

BatchRenderer: typeof AbstractBatchRenderer

Const DEG_TO_RAD

DEG_TO_RAD: number

Conversion factor for converting degrees to radians.

static
member: {number}
memberof: PIXI

Const GRAPHICS_CURVES

GRAPHICS_CURVES: IGraphicsCurvesSettings

Graphics curves resolution settings. If adaptive flag is set to true, the resolution is calculated based on the curve's length to ensure better visual quality. Adaptive draw works with bezierCurveTo and quadraticCurveTo.

static
constant
memberof: PIXI
name: GRAPHICS_CURVES
property: {boolean} adaptive=true - flag indicating if the resolution should be adaptive
property: {number} maxLength=10 - maximal length of a single segment of the curve (if adaptive = false, ignored)
property: {number} minSegments=8 - minimal number of segments in the curve (if adaptive = false, ignored)
property: {number} maxSegments=2048 - maximal number of segments in the curve (if adaptive = false, ignored)

Const INSTALLED

INSTALLED: IResourcePlugin<any, any>[]

Collection of installed resource types, class must extend PIXI.Resource.

example: class CustomResource extends PIXI.Resource { // MUST have source, options constructor signature // for auto-detected resources to be created. constructor(source, options) { super(); } upload(renderer, baseTexture, glTexture) { // upload with GL return true; } // used to auto-detect resource static test(source, extension) { return extension === 'xyz'|| source instanceof SomeClass; } } // Install the new resource type PIXI.INSTALLED.push(CustomResource);
memberof: PIXI
static
readonly

Const LoaderResource

LoaderResource: TLoaderResource

Reference to https://github.com/englercj/resource-loader's Resource class.

see: https://englercj.github.io/resource-loader/classes/resource.html
memberof: PIXI

Const PI_2

PI_2: number

Two Pi.

static
member: {number}
memberof: PIXI

Const RAD_TO_DEG

RAD_TO_DEG: number

Conversion factor for converting radians to degrees.

static
member: {number} RAD_TO_DEG
memberof: PIXI

Const VERSION

VERSION: "$_VERSION" = "$_VERSION"

String of the current PIXI version.

static
constant
memberof: PIXI
name: VERSION

Const Private accessibleTarget

accessibleTarget: IAccessibleTarget

Default property values of accessible objects used by PIXI.AccessibilityManager.

function

accessibleTarget

memberof

PIXI

example

 function MyObject() {}

 Object.assign(
     MyObject.prototype,
     PIXI.accessibleTarget
 );

Const defaultFilterVertex

defaultFilterVertex: string

Const defaultVertex

defaultVertex: string

Default filter vertex shader

memberof: PIXI
member: {string} defaultFilterVertex

Const filters

filters: { AlphaFilter: typeof AlphaFilter; BlurFilter: typeof BlurFilter; BlurFilterPass: typeof BlurFilterPass; ColorMatrixFilter: typeof ColorMatrixFilter; DisplacementFilter: typeof DisplacementFilter; FXAAFilter: typeof FXAAFilter; NoiseFilter: typeof NoiseFilter }

This namespace contains WebGL-only display filters that can be applied to DisplayObjects using the {@link PIXI.DisplayObject#filters filters} property.

Since PixiJS only had a handful of built-in filters, additional filters can be downloaded here from the PixiJS Filters repository.

All filters must extend PIXI.Filter.

example

// Create a new application const app = new PIXI.Application();

// Draw a green rectangle const rect = new PIXI.Graphics() .beginFill(0x00ff00) .drawRect(40, 40, 200, 200);

// Add a blur filter rect.filters = [new PIXI.filters.BlurFilter()];

// Display rectangle app.stage.addChild(rect); document.body.appendChild(app.view);

namespace

PIXI.filters

Type declaration

AlphaFilter: typeof AlphaFilter
BlurFilter: typeof BlurFilter
BlurFilterPass: typeof BlurFilterPass
ColorMatrixFilter: typeof ColorMatrixFilter
DisplacementFilter: typeof DisplacementFilter
FXAAFilter: typeof FXAAFilter
NoiseFilter: typeof NoiseFilter

Const graphicsUtils

graphicsUtils: { ArcUtils: typeof ArcUtils; BATCH_POOL: BatchPart[]; BatchPart: typeof BatchPart; BezierUtils: typeof BezierUtils; DRAW_CALL_POOL: BatchDrawCall[]; FILL_COMMANDS: Record<SHAPES, IShapeBuildCommand>; QuadraticUtils: typeof QuadraticUtils; buildCircle: IShapeBuildCommand; buildLine: typeof buildLine; buildPoly: IShapeBuildCommand; buildRectangle: IShapeBuildCommand; buildRoundedRectangle: IShapeBuildCommand }

Type declaration

ArcUtils: typeof ArcUtils
BATCH_POOL: BatchPart[]
BatchPart: typeof BatchPart
BezierUtils: typeof BezierUtils
DRAW_CALL_POOL: BatchDrawCall[]
FILL_COMMANDS: Record<SHAPES, IShapeBuildCommand>
QuadraticUtils: typeof QuadraticUtils
buildCircle: IShapeBuildCommand
buildLine: typeof buildLine
buildPoly: IShapeBuildCommand
buildRectangle: IShapeBuildCommand
buildRoundedRectangle: IShapeBuildCommand

Const groupD8

groupD8: { E: number; MAIN_DIAGONAL: number; MIRROR_HORIZONTAL: number; MIRROR_VERTICAL: number; N: number; NE: number; NW: number; REVERSE_DIAGONAL: number; S: number; SE: number; SW: number; W: number; add: (rotationSecond: GD8Symmetry, rotationFirst: GD8Symmetry) => GD8Symmetry; byDirection: (dx: number, dy: number) => GD8Symmetry; inv: (rotation: GD8Symmetry) => GD8Symmetry; isVertical: (rotation: GD8Symmetry) => boolean; matrixAppendRotationInv: (matrix: Matrix, rotation: GD8Symmetry, tx?: number, ty?: number) => void; rotate180: (rotation: number) => number; sub: (rotationSecond: GD8Symmetry, rotationFirst: GD8Symmetry) => GD8Symmetry; uX: (ind: GD8Symmetry) => GD8Symmetry; uY: (ind: GD8Symmetry) => GD8Symmetry; vX: (ind: GD8Symmetry) => GD8Symmetry; vY: (ind: GD8Symmetry) => GD8Symmetry }

Implements the dihedral group D8, which is similar to group D4; D8 is the same but with diagonals, and it is used for texture rotations.

The directions the U- and V- axes after rotation of an angle of a: GD8Constant are the vectors (uX(a), uY(a)) and (vX(a), vY(a)). These aren't necessarily unit vectors.

Origin:
This is the small part of gameofbombs.com portal system. It works.

see: PIXI.groupD8.E
see: PIXI.groupD8.SE
see: PIXI.groupD8.S
see: PIXI.groupD8.SW
see: PIXI.groupD8.W
see: PIXI.groupD8.NW
see: PIXI.groupD8.N
see: PIXI.groupD8.NE
author: Ivan @ivanpopelyshev
namespace: PIXI.groupD8
memberof: PIXI

Type declaration

E: number

Rotation Direction

0° East

memberof

PIXI.groupD8

constant

{PIXI.GD8Symmetry}
MAIN_DIAGONAL: number

Reflection about the main diagonal.

memberof

PIXI.groupD8

constant

{PIXI.GD8Symmetry}
MIRROR_HORIZONTAL: number

Reflection about X-axis.

memberof

PIXI.groupD8

constant

{PIXI.GD8Symmetry}
MIRROR_VERTICAL: number

Reflection about Y-axis.

memberof

PIXI.groupD8

constant

{PIXI.GD8Symmetry}
N: number

Rotation Direction

-90°/270°↻ North

memberof

PIXI.groupD8

constant

{PIXI.GD8Symmetry}
NE: number

Rotation Direction

-45°/315°↻ Northeast

memberof

PIXI.groupD8

constant

{PIXI.GD8Symmetry}
NW: number

Rotation Direction

-135°/225°↻ Northwest

memberof

PIXI.groupD8

constant

{PIXI.GD8Symmetry}
REVERSE_DIAGONAL: number

Reflection about reverse diagonal.

memberof

PIXI.groupD8

constant

{PIXI.GD8Symmetry}
S: number

Rotation Direction

90°↻ South

memberof

PIXI.groupD8

constant

{PIXI.GD8Symmetry}
SE: number

Rotation Direction

45°↻ Southeast

memberof

PIXI.groupD8

constant

{PIXI.GD8Symmetry}
SW: number

Rotation Direction

135°↻ Southwest

memberof

PIXI.groupD8

constant

{PIXI.GD8Symmetry}
W: number

Rotation Direction

180° West

memberof

PIXI.groupD8

constant

{PIXI.GD8Symmetry}

Rotation	Direction
0°	East

Rotation	Direction
-90°/270°↻	North

Rotation	Direction
-45°/315°↻	Northeast

Rotation	Direction
-135°/225°↻	Northwest

Rotation	Direction
90°↻	South

Rotation	Direction
45°↻	Southeast

Rotation	Direction
135°↻	Southwest

Rotation	Direction
180°	West

add: (rotationSecond: GD8Symmetry, rotationFirst: GD8Symmetry) => GD8Symmetry

(rotationSecond: GD8Symmetry, rotationFirst: GD8Symmetry): GD8Symmetry

Composes the two D8 operations.

Taking ^ as reflection:

	E=0	S=2	W=4	N=6	E^=8	S^=10	W^=12	N^=14
E=0	E	S	W	N	E^	S^	W^	N^
S=2	S	W	N	E	S^	W^	N^	E^
W=4	W	N	E	S	W^	N^	E^	S^
N=6	N	E	S	W	N^	E^	S^	W^
E^=8	E^	N^	W^	S^	E	N	W	S
S^=10	S^	E^	N^	W^	S	E	N	W
W^=12	W^	S^	E^	N^	W	S	E	N
N^=14	N^	W^	S^	E^	N	W	S	E

This is a Cayley table

Parameters

rotationSecond: GD8Symmetry

Second operation, which is the row in the above cayley table.
rotationFirst: GD8Symmetry

First operation, which is the column in the above cayley table.

Returns GD8Symmetry

Composed operation

byDirection: (dx: number, dy: number) => GD8Symmetry
- - (dx: number, dy: number): GD8Symmetry
  - Approximates the vector V(dx,dy) into one of the eight directions provided by groupD8.
    
    Parameters
    - dx: number
      
      X-component of the vector
    - dy: number
      
      Y-component of the vector
    Returns GD8Symmetry
    
    Approximation of the vector into one of the eight symmetries.
inv: (rotation: GD8Symmetry) => GD8Symmetry
- - (rotation: GD8Symmetry): GD8Symmetry
  - Parameters
    - rotation: GD8Symmetry
      
      symmetry whose opposite is needed. Only rotations have opposite symmetries while reflections don't.
    Returns GD8Symmetry
    
    The opposite symmetry of rotation
isVertical: (rotation: GD8Symmetry) => boolean
- - (rotation: GD8Symmetry): boolean
  - Checks if the rotation angle is vertical, i.e. south or north. It doesn't work for reflections.
    
    Parameters
    - rotation: GD8Symmetry
      
      The number to check.
    Returns boolean
    
    Whether or not the direction is vertical
matrixAppendRotationInv: (matrix: Matrix, rotation: GD8Symmetry, tx?: number, ty?: number) => void
- - (matrix: Matrix, rotation: GD8Symmetry, tx?: number, ty?: number): void
  - Helps sprite to compensate texture packer rotation.
    
    Parameters
    - matrix: Matrix
      
      sprite world matrix
    - rotation: GD8Symmetry
      
      The rotation factor to use.
    - Optional tx: number
      
      sprite anchoring
    - Optional ty: number
      
      sprite anchoring
    Returns void
rotate180: (rotation: number) => number
- - (rotation: number): number
  - Adds 180 degrees to rotation, which is a commutative operation.
    
    Parameters
    - rotation: number
      
      The number to rotate.
    Returns number
    
    Rotated number
sub: (rotationSecond: GD8Symmetry, rotationFirst: GD8Symmetry) => GD8Symmetry
- - (rotationSecond: GD8Symmetry, rotationFirst: GD8Symmetry): GD8Symmetry
  - Reverse of add.
    
    Parameters
    - rotationSecond: GD8Symmetry
      
      Second operation
    - rotationFirst: GD8Symmetry
      
      First operation
    Returns GD8Symmetry
    
    Result
uX: (ind: GD8Symmetry) => GD8Symmetry
- - (ind: GD8Symmetry): GD8Symmetry
  - Parameters
    - ind: GD8Symmetry
      
      sprite rotation angle.
    Returns GD8Symmetry
    
    The X-component of the U-axis after rotating the axes.
uY: (ind: GD8Symmetry) => GD8Symmetry
- - (ind: GD8Symmetry): GD8Symmetry
  - Parameters
    - ind: GD8Symmetry
      
      sprite rotation angle.
    Returns GD8Symmetry
    
    The Y-component of the U-axis after rotating the axes.
vX: (ind: GD8Symmetry) => GD8Symmetry
- - (ind: GD8Symmetry): GD8Symmetry
  - Parameters
    - ind: GD8Symmetry
      
      sprite rotation angle.
    Returns GD8Symmetry
    
    The X-component of the V-axis after rotating the axes.
vY: (ind: GD8Symmetry) => GD8Symmetry
- - (ind: GD8Symmetry): GD8Symmetry
  - Parameters
    - ind: GD8Symmetry
      
      sprite rotation angle.
    Returns GD8Symmetry
    
    The Y-component of the V-axis after rotating the axes.

Const Private interactiveTarget

interactiveTarget: InteractiveTarget

Default property values of interactive objects Used by PIXI.InteractionManager to automatically give all DisplayObjects these properties

name

interactiveTarget

memberof

PIXI

example

 function MyObject() {}

 Object.assign(
     DisplayObject.prototype,
     PIXI.interactiveTarget
 );

Const isMobile

isMobile: isMobileResult

Const resources

resources: {}

memberof: PIXI
namespace: resources
see: PIXI
deprecated: since 6.0.0

Type declaration

Const settings

settings: ISettings

User's customizable globals for overriding the default PIXI settings, such as a renderer's default resolution, framerate, float precision, etc.

example

// Use the native window resolution as the default resolution // will support high-density displays when rendering PIXI.settings.RESOLUTION = window.devicePixelRatio;

// Disable interpolation when scaling, will make texture be pixelated PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST;

namespace

PIXI.settings

Const systems

systems: {}

memberof: PIXI
namespace: systems
see: PIXI
deprecated: since 6.0.0

Type declaration

Const uniformParsers

uniformParsers: IUniformParser[]

Functions

autoDetectRenderer

autoDetectRenderer(options?: IRendererOptionsAuto): AbstractRenderer

- Defined in source/node_modules/@pixi/core/index.d.ts:528
This helper function will automatically detect which renderer you should be using. WebGL is the preferred renderer as it is a lot faster. If WebGL is not supported by the browser then this function will return a canvas renderer

memberof

PIXI

function

autoDetectRenderer

Parameters
- Optional options: IRendererOptionsAuto
Returns AbstractRenderer

Returns WebGL renderer if available, otherwise CanvasRenderer

autoDetectResource

autoDetectResource<R, RO>(source: unknown, options?: RO): R

- Defined in source/node_modules/@pixi/core/index.d.ts:560
Create a resource element from a single source element. This auto-detects which type of resource to create. All resources that are auto-detectable must have a static test method and a constructor with the arguments (source, options?). Currently, the supported resources for auto-detection include:
static

memberof

PIXI

function

autoDetectResource
Type parameters
- R: Resource<R>
- RO
Parameters
- source: unknown
  
  Resource source, this can be the URL to the resource, a typed-array (for BufferResource), HTMLVideoElement, SVG data-uri or any other resource that can be auto-detected. If not resource is detected, it's assumed to be an ImageResource.
- Optional options: RO
Returns R

The created resource.

checkMaxIfStatementsInShader

checkMaxIfStatementsInShader(maxIfs: number, gl: IRenderingContext): number

- Defined in source/node_modules/@pixi/core/index.d.ts:1174
Parameters
- maxIfs: number
- gl: IRenderingContext
Returns number

Index

Namespaces

Enumerations

Classes

Interfaces

Type aliases

Variables

Functions

Type aliases

CompressedTextureExtensionRef

CompressedTextureExtensions

Type declaration

astc: WEBGL_compressed_texture_astc

atc: any

etc: any

etc1: any

pvrtc: any

Optional s3tc?: WEBGL_compressed_texture_s3tc

s3tc_sRGB: WEBGL_compressed_texture_s3tc_srgb

Cursor

IAutoDetectOptions

IResourcePluginOptions

Type declaration

[key: string]: any

IShape

ImageSource

InteractionCallback

Type declaration

Parameters

interactionEvent: InteractionEvent

displayObject: DisplayObject

Optional hit: boolean

Returns void

InteractivePointerEvent

PointerEvents

SpriteSource

TLoaderResource

TextStyleAlign

TextStyleFill

TextStyleFontStyle

TextStyleFontVariant

TextStyleFontWeight

TextStyleLineJoin

TextStyleTextBaseline

TextStyleWhiteSpace

TextureSource

TickerCallback

Type parameters

T

Type declaration

Parameters

this: T

dt: number

Returns any

Variables

Const BatchRenderer

Const DEG_TO_RAD

Const GRAPHICS_CURVES

Const INSTALLED

Const LoaderResource

Const PI_2

Const RAD_TO_DEG

Const VERSION

Const Private accessibleTarget

Const defaultFilterVertex

Const defaultVertex

Const filters

Type declaration

AlphaFilter: typeof AlphaFilter

BlurFilter: typeof BlurFilter

BlurFilterPass: typeof BlurFilterPass

ColorMatrixFilter: typeof ColorMatrixFilter

DisplacementFilter: typeof DisplacementFilter

FXAAFilter: typeof FXAAFilter

NoiseFilter: typeof NoiseFilter

Const graphicsUtils

Type declaration

ArcUtils: typeof ArcUtils

BATCH_POOL: BatchPart[]

BatchPart: typeof BatchPart