PixiJS API Documentation

Namespace: PIXI

PIXI

Classes

CanvasRenderTarget
FilterManager
TransformBase
TransformStatic
WebGLRenderer
AbstractMaskSystem
AbstractMultiResource
AbstractRenderer
AccessibilityManager
AnimatedSprite
Application
AppLoaderPlugin
ArrayResource
Attribute
BaseImageResource
BasePrepare
BaseRenderTexture
BaseTexture
BasisLoader
BatchDrawCall
BatchGeometry
BatchPluginFactory
BatchShaderGenerator
BatchSystem
BatchTextureArray
BitmapFont
BitmapFontData
BitmapFontLoader
BitmapText
Bounds
Buffer
BufferResource
CanvasExtract
CanvasMaskManager
CanvasPrepare
CanvasRenderer
CanvasResource
Circle
CompressedTextureLoader
CompressedTextureResource
Container
ContextSystem
CountLimiter
CubeResource
DDSLoader
DepthResource
DisplayObject
Ellipse
Extract
FillStyle
Filter
FilterSystem
Framebuffer
FramebufferSystem
Geometry
GeometrySystem
GLFramebuffer
GLProgram
GLTexture
Graphics
GraphicsData
GraphicsGeometry
ImageBitmapResource
ImageResource
InteractionData
InteractionEvent
InteractionManager
KTXLoader
LineStyle
Loader
LoaderResource
MaskData
MaskSystem
Matrix
Mesh
MeshBatchUvs
MeshGeometry
MeshMaterial
NineSlicePlane
ObjectRenderer
ObservablePoint
ParticleContainer
ParticleRenderer
Point
Polygon
Prepare
Program
ProjectionSystem
Quad
QuadUv
Rectangle
Renderer
RenderTexture
RenderTexturePool
RenderTextureSystem
Resource
RopeGeometry
RoundedRectangle
Runner
ScissorSystem
Shader
ShaderSystem
SimpleMesh
SimplePlane
SimpleRope
Sprite
SpriteMaskFilter
Spritesheet
SpritesheetLoader
State
StateSystem
StencilSystem
SVGResource
System
Text
TextMetrics
TextStyle
Texture
TextureGCSystem
TextureLoader
TextureMatrix
TextureSystem
Ticker
TickerPlugin
TilingSprite
TilingSpriteRenderer
TimeLimiter
Transform
UniformGroup
VideoResource
ViewableBuffer
AbstractBatchRenderer
CanvasGraphicsRenderer
CanvasMeshRenderer
CanvasSpriteRenderer
TextureUvs

Interface Definitions

IBitmapFontOptions

Properties:

Name	Type	Attributes	Default	Description
`chars`	string \| Array<string> \| Array<Array<string>>	<optional>	PIXI.BitmapFont.ALPHANUMERIC	the character set to generate
`padding`	number	<optional>	4	the padding between glyphs in the atlas
`resolution`	number	<optional>	1	the resolution for rendering
`textureHeight`	number	<optional>	512	the height of the texture atlas
`textureWidth`	number	<optional>	512	the width of the texture atlas

IHitArea

Interface for classes that represent a hit area.

It is implemented by the following classes:

IPoint

Common interface for points. Both Point and ObservablePoint implement it

Properties:

Name	Type	Description
`x`	number	X coord
`y`	number	Y coord

IPointData

Common interface for points. Both Point and ObservablePoint implement it

Properties:

Name	Type	Description
`x`	number	X coord
`y`	number	Y coord

IResourcePlugin

Shape of supported resource plugins

Namespaces

accessibility
CanvasTinter
canvasUtils
extract
extras
filters
groupD8
GroupD8
interaction
loaders
mesh
particles
prepare
settings
ticker
utils
graphicsUtils
resources
systems

Members

PIXI.DATA_URI static

Regexp for data URI. Based on: https://github.com/ragingwind/data-uri-regex

Example

data:image/png;base64

PIXI.DEG_TO_RAD number static

Conversion factor for converting degrees to radians.

PIXI.GRAPHICS_CURVES object static

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.

Properties:

Name	Type	Attributes	Value	Description
`adaptive`	boolean	<constant>	true	flag indicating if the resolution should be adaptive
`maxLength`	number	<constant>	10	maximal length of a single segment of the curve (if adaptive = false, ignored)
`maxSegments`	number	<constant>	2048	maximal number of segments in the curve (if adaptive = false, ignored)
`minSegments`	number	<constant>	8	minimal number of segments in the curve (if adaptive = false, ignored)

PIXI.INSTALLED Array<PIXI.IResourcePlugin> static

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);

PIXI.loader PIXI.Loader Deprecated : since 5.0.0 static

See:

PIXI.Loader.shared

PIXI.PI_2 number static

Two Pi.

PIXI.RAD_TO_DEG number static

Conversion factor for converting radians to degrees.

PIXI.SVG_SIZE Deprecated : since 5.0.0 static

See:

PIXI.SVGResource.SVG_SIZE

PIXI.TRANSFORM_MODE number Deprecated : since 5.0.0 static

Constants that specify the transform type.

Properties:

Name	Type	Description
`DYNAMIC`	number
`STATIC`	number

PIXI.VERSION string static

String of the current PIXI version.

defaultFilterVertex string

Default filter vertex shader

defaultVertex string

Default vertex shader

Enums

PIXI.ALPHA_MODESnumber

How to treat textures with premultiplied alpha

Properties:

Name	Description
`NO_PREMULTIPLIED_ALPHA`	Source is not premultiplied, leave it like that. Option for compressed and data textures that are created from typed arrays.
`NPM`	Alias for NO_PREMULTIPLIED_ALPHA.
`PMA`	Alias for PREMULTIPLIED_ALPHA.
`PREMULTIPLIED_ALPHA`	Source is already premultiplied Example: spine atlases with `_pma` suffix.
`PREMULTIPLY_ON_UPLOAD`	Source is not premultiplied, premultiply on upload. Default option, used for all loaded images.
`UNPACK`	Default option, alias for PREMULTIPLY_ON_UPLOAD.

PIXI.BUFFER_BITSnumber

Bitwise OR of masks that indicate the buffers to be cleared.

Properties:

Name	Description
`COLOR`	Indicates the buffers currently enabled for color writing.
`DEPTH`	Indicates the depth buffer.
`STENCIL`	Indicates the stencil buffer.

PIXI.CLEAR_MODESnumber

How to clear renderTextures in filter

Properties:

Name	Description
`AUTO`	Alias for BLIT
`BLEND`	Preserve the information in the texture, blend above
`BLIT`	Clear or blit it, depends on device and level of paranoia
`CLEAR`	Must use `gl.clear` operation
`NO`	Alias for BLEND, same as `false` in earlier versions
`YES`	Alias for CLEAR, same as `true` in earlier versions

PIXI.DRAW_MODESnumber

Various webgl draw modes. These can be used to specify which GL drawMode to use under certain situations and renderers.

Properties:

Name	Description
`LINE_LOOP`
`LINE_STRIP`
`LINES`
`POINTS`
`TRIANGLE_FAN`
`TRIANGLE_STRIP`
`TRIANGLES`

PIXI.ENVnumber

Different types of environments for WebGL.

Properties:

Name	Description
`WEBGL`	Version 1 of WebGL
`WEBGL_LEGACY`	Used for older v1 WebGL devices. PixiJS will aim to ensure compatibility with older / less advanced devices. If you experience unexplained flickering prefer this environment.
`WEBGL2`	Version 2 of WebGL

PIXI.FORMATSnumber

Various GL texture/resources formats.

Properties:

Name	Value	Description
`ALPHA`	6406
`DEPTH_COMPONENT`	6402
`DEPTH_STENCIL`	34041
`LUMINANCE`	6409
`LUMINANCE_ALPHA`	6410
`RGB`	6407
`RGBA`	6408

PIXI.GC_MODESnumber

The gc modes that are supported by pixi.

The PIXI.settings.GC_MODE Garbage Collection mode for PixiJS textures is AUTO If set to GC_MODE, the renderer will occasionally check textures usage. If they are not used for a specified period of time they will be removed from the GPU. They will of course be uploaded again when they are required. This is a silent behind the scenes process that should ensure that the GPU does not get filled up.

Handy for mobile devices! This property only affects WebGL.

Properties:

Name	Description
`AUTO`	Garbage collection will happen periodically automatically
`MANUAL`	Garbage collection will need to be called manually

PIXI.INTERNAL_FORMATSnumber

WebGL internal formats, including compressed texture formats provided by extensions

Properties:

Name	Value	Description
`COMPRESSED_R11_EAC`	0x9270
`COMPRESSED_RG11_EAC`	0x9272
`COMPRESSED_RGB_ATC_WEBGL`	0x8C92
`COMPRESSED_RGB_ETC1_WEBGL`	0x8D64
`COMPRESSED_RGB_PVRTC_2BPPV1_IMG`	0x8C01
`COMPRESSED_RGB_PVRTC_4BPPV1_IMG`	0x8C00
`COMPRESSED_RGB_S3TC_DXT1_EXT`	0x83F0
`COMPRESSED_RGB8_ETC2`	0x9274
`COMPRESSED_RGB8_PUNCHTHROUGH_ALPHA1_ETC2`	0x9278
`COMPRESSED_RGBA_ATC_EXPLICIT_ALPHA_WEBGL`	0x8C92
`COMPRESSED_RGBA_ATC_INTERPOLATED_ALPHA_WEBGL`	0x87EE
`COMPRESSED_RGBA_PVRTC_2BPPV1_IMG`	0x8C03
`COMPRESSED_RGBA_PVRTC_4BPPV1_IMG`	0x8C02
`COMPRESSED_RGBA_S3TC_DXT1_EXT`	0x83F1
`COMPRESSED_RGBA_S3TC_DXT3_EXT`	0x83F2
`COMPRESSED_RGBA_S3TC_DXT5_EXT`	0x83F3
`COMPRESSED_RGBA8_ETC2_EAC`	0x9275
`COMPRESSED_SIGNED_R11_EAC`	0x9271
`COMPRESSED_SIGNED_RG11_EAC`	0x9273
`COMPRESSED_SRGB_ALPHA_S3TC_DXT1_EXT`	35917
`COMPRESSED_SRGB_ALPHA_S3TC_DXT3_EXT`	35918
`COMPRESSED_SRGB_ALPHA_S3TC_DXT5_EXT`	35919
`COMPRESSED_SRGB_S3TC_DXT1_EXT`	35916
`COMPRESSED_SRGB8_ALPHA8_ETC2_EAC`	0x9277
`COMPRESSED_SRGB8_ETC2`	0x9276
`COMPRESSED_SRGB8_PUNCHTHROUGH_ALPHA1_ETC2`	0x9279

PIXI.LINE_CAPstring

Support line caps in PIXI.LineStyle for graphics.

Properties:

Name	Description
`BUTT`	'butt': don't add any cap at line ends (leaves orthogonal edges)
`ROUND`	'round': add semicircle at ends
`SQUARE`	'square': add square at end (like `BUTT` except more length at end)

See:

PIXI.Graphics#lineStyle

PIXI.LINE_JOINstring

Supported line joints in PIXI.LineStyle for graphics.

Properties:

Name	Description
`BEVEL`	'bevel': add a square butt at each end of line segment and fill the triangle at turn
`MITER`	'miter': make a sharp corner where outer part of lines meet
`ROUND`	'round': add an arc at the joint

See:

PIXI.MASK_TYPESnumber

Constants for mask implementations. We use type suffix because it leads to very different behaviours

Properties:

Name	Description
`NONE`	Mask is ignored
`SCISSOR`	Scissor mask, rectangle on screen, cheap
`SPRITE`	Mask that uses SpriteMaskFilter, uses temporary RenderTexture
`STENCIL`	Stencil mask, 1-bit, medium, works only if renderer supports stencil

PIXI.MIPMAP_MODESnumber

Mipmap filtering modes that are supported by pixi.

The PIXI.settings.MIPMAP_TEXTURES affects default texture filtering. Mipmaps are generated for a baseTexture if its mipmap field is ON, or its POW2 and texture dimensions are powers of 2. Due to platform restriction, ON option will work like POW2 for webgl-1.

This property only affects WebGL.

Properties:

Name	Description
`OFF`	No mipmaps
`ON`	Always generate mipmaps
`ON_MANUAL`	Use mipmaps, but do not auto-generate them; this is used with a resource that supports buffering each level-of-detail.
`POW2`	Generate mipmaps if texture dimensions are pow2

PIXI.MSAA_QUALITYnumber

Constants for multi-sampling antialiasing.

Properties:

Name	Description
`HIGH`	Try 8 samples
`LOW`	Try 2 samples
`MEDIUM`	Try 4 samples
`NONE`	No multisampling for this renderTexture

See:

PIXI.Framebuffer#multisample

PIXI.PRECISIONstring

Constants that specify float precision in shaders.

Properties:

Name	Value	Description
`HIGH`	'highp'
`LOW`	'lowp'
`MEDIUM`	'mediump'

PIXI.RENDERER_TYPEnumber

Constant to identify the Renderer Type.

Properties:

Name	Description
`CANVAS`	Canvas render type.
`UNKNOWN`	Unknown render type.
`WEBGL`	WebGL render type.

PIXI.SCALE_MODESnumber

The scale modes that are supported by pixi.

The PIXI.settings.SCALE_MODE scale mode affects the default scaling mode of future operations. It can be re-assigned to either LINEAR or NEAREST, depending upon suitability.

Properties:

Name	Description
`LINEAR`	Smooth scaling
`NEAREST`	Pixelating scaling

PIXI.SHAPESnumber

Constants that identify shapes, mainly to prevent instanceof calls.

Properties:

Name	Description
`CIRC`	Circle
`ELIP`	Ellipse
`POLY`	Polygon
`RECT`	Rectangle
`RREC`	Rounded Rectangle

PIXI.TARGETSnumber

Various GL target types.

Properties:

Name	Value	Description
`TEXTURE_2D`	3553
`TEXTURE_2D_ARRAY`	35866
`TEXTURE_CUBE_MAP`	34067
`TEXTURE_CUBE_MAP_NEGATIVE_X`	34070
`TEXTURE_CUBE_MAP_NEGATIVE_Y`	34072
`TEXTURE_CUBE_MAP_NEGATIVE_Z`	34074
`TEXTURE_CUBE_MAP_POSITIVE_X`	34069
`TEXTURE_CUBE_MAP_POSITIVE_Y`	34071
`TEXTURE_CUBE_MAP_POSITIVE_Z`	34073

PIXI.TEXT_GRADIENTobject

Constants that define the type of gradient on text.

Properties:

Name	Description
`LINEAR_HORIZONTAL`	Linear gradient
`LINEAR_VERTICAL`	Vertical gradient

PIXI.TYPESnumber

Various GL data format types.

Properties:

Name	Value	Description
`FLOAT`	5126
`HALF_FLOAT`	36193
`UNSIGNED_BYTE`	5121
`UNSIGNED_SHORT`	5123
`UNSIGNED_SHORT_4_4_4_4`	32819
`UNSIGNED_SHORT_5_5_5_1`	32820
`UNSIGNED_SHORT_5_6_5`	33635

PIXI.UPDATE_PRIORITYnumber

Represents the update priorities used by internal PIXI classes when registered with the PIXI.Ticker object. Higher priority items are updated first and lower priority items, such as render, should go later.

Properties:

Name	Value	Description
`HIGH`	25	High priority updating, PIXI.VideoBaseTexture and {@link PIXI.AnimatedSprite}
`INTERACTION`	50	Highest priority, used for PIXI.InteractionManager
`LOW`	-25	Low priority used for PIXI.Application rendering.
`NORMAL`	0	Default priority for ticker events, see PIXI.Ticker#add.
`UTILITY`	-50	Lowest priority used for PIXI.BasePrepare utility.

PIXI.WRAP_MODESnumber

The wrap modes that are supported by pixi.

The PIXI.settings.WRAP_MODE wrap mode affects the default wrapping mode of future operations. It can be re-assigned to either CLAMP or REPEAT, depending upon suitability. If the texture is non power of two then clamp will be used regardless as WebGL can only use REPEAT if the texture is po2.

This property only affects WebGL.

Properties:

Name	Description
`CLAMP`	The textures uvs are clamped
`MIRRORED_REPEAT`	The texture uvs tile and repeat with mirroring
`REPEAT`	The texture uvs tile and repeat

PIXI.BLEND_MODESnumber

Various blend modes supported by PIXI.

IMPORTANT - The WebGL renderer only supports the NORMAL, ADD, MULTIPLY and SCREEN blend modes. Anything else will silently act like NORMAL.

Properties:

Name	Description
`ADD`
`ADD_NPM`
`COLOR`
`COLOR_BURN`
`COLOR_DODGE`
`DARKEN`
`DIFFERENCE`
`DST_ATOP`
`DST_IN`
`DST_OUT`
`DST_OVER`
`ERASE`
`EXCLUSION`
`HARD_LIGHT`
`HUE`
`LIGHTEN`
`LUMINOSITY`
`MULTIPLY`
`NONE`
`NORMAL`
`NORMAL_NPM`
`OVERLAY`
`SATURATION`
`SCREEN`
`SCREEN_NPM`
`SOFT_LIGHT`
`SRC_ATOP`
`SRC_IN`
`SRC_OUT`
`SRC_OVER`
`SUBTRACT`
`XOR`

Type Definitions

GD8Symmetry number

See:

PIXI.groupD8

IBitmapFontDataChar object

Properties:

Name	Type	Description
`height`	number
`id`	string
`page`	number
`width`	number
`x`	number
`xadvance`	number
`xoffset`	number
`y`	number
`yoffset`	number

IBitmapFontDataCommon object

Properties:

Name	Type	Description
`lineHeight`	number

IBitmapFontDataInfo object

Properties:

Name	Type	Description
`face`	string
`size`	number

IBitmapFontDataKerning object

Properties:

Name	Type	Description
`amount`	number
`first`	number
`second`	number

IBitmapFontDataPage object

Properties:

Name	Type	Description
`file`	string
`id`	number

ICanvasImageSource HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | ImageBitmap

Types that can be passed to drawImage

IFontMetrics object

A number, or a string containing a number.

Properties:

Name	Type	Description
`ascent`	number	Font ascent
`descent`	number	Font descent
`fontSize`	number	Font size

ILoaderPlugin object

Plugin to be installed for handling specific Loader resources.

Properties:

Name	Type	Attributes	Description
`add`	Function	<optional>	Function to call immediate after registering plugin.
`pre`	PIXI.Loader.loaderMiddleware	<optional>	Middleware function to run before load, the arguments for this are `(resource, next)`
`use`	PIXI.Loader.loaderMiddleware	<optional>	Middleware function to run after load, the arguments for this are `(resource, next)`

ISize object

Size object, contains width and height

Properties:

Name	Type	Description
`height`	number	Height component
`width`	number	Width component

Methods

autoDetectResource (source, options) PIXI.Resource

autoDetectResource.ts:63

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:

Name	Type	Attributes	Default	Description
`source`	string \| 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.
`options`	object	<optional>		Pass-through options to use for Resource
`options.width`	number	<optional>		Width of BufferResource or SVG rasterization
`options.height`	number	<optional>		Height of BufferResource or SVG rasterization
`options.autoLoad`	boolean	<optional>	true	Image, SVG and Video flag to start loading
`options.scale`	number	<optional>	1	SVG source scale. Overridden by width, height
`options.createBitmap`	boolean	<optional>	PIXI.settings.CREATE_IMAGE_BITMAP	Image option to create Bitmap object
`options.crossorigin`	boolean	<optional>	true	Image and Video option to set crossOrigin
`options.autoPlay`	boolean	<optional>	true	Video option to start playing video immediately
`options.updateFPS`	number	<optional>	0	Video option to update how many times a second the texture should be updated from the video. Leave at 0 to update at every render

Returns:

Type	Description
PIXI.Resource	The created resource.

autoDetectRenderer (options) PIXI.Renderer | PIXI.CanvasRenderer

autoDetectRenderer.ts:8

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

Name	Type	Attributes	Default	Description
`options`	object	<optional>		The optional renderer parameters
`options.width`	number	<optional>	800	the width of the renderers view
`options.height`	number	<optional>	600	the height of the renderers view
`options.view`	HTMLCanvasElement	<optional>		the canvas to use as a view, optional
`options.transparent`	boolean	<optional>	false	If the render view is transparent, default false
`options.autoDensity`	boolean	<optional>	false	Resizes renderer view in CSS pixels to allow for resolutions other than 1
`options.antialias`	boolean	<optional>	false	sets antialias
`options.preserveDrawingBuffer`	boolean	<optional>	false	enables drawing buffer preservation, enable this if you need to call toDataUrl on the webgl context
`options.backgroundColor`	number	<optional>	0x000000	The background color of the rendered area (shown if not transparent).
`options.clearBeforeRender`	boolean	<optional>	true	This sets if the renderer will clear the canvas or not before the new render pass.
`options.resolution`	number	<optional>	1	The resolution / device pixel ratio of the renderer, retina would be 2
`options.forceCanvas`	boolean	<optional>	false	prevents selection of WebGL renderer, even if such is present, this option only is available when using pixi.js-legacy or @pixi/canvas-renderer modules, otherwise it is ignored.
`options.powerPreference`	string	<optional>		Parameter passed to webgl context, set to "high-performance" for devices with dual graphics card webgl only

Returns:

Type	Description
PIXI.Renderer \| PIXI.CanvasRenderer	Returns WebGL renderer if available, otherwise CanvasRenderer

useDeprecated (this) void

useDeprecated.ts:53

Deprecations (backward compatibilities) are automatically applied for browser bundles in the UMD module format. If using Webpack or Rollup, you'll need to apply these deprecations manually by doing something like this:

Name	Type	Description
`this`	any

Properties:

Name	Type	Description
`bitmapFontParser`
`getResourcePath`
`getSvgSize`
`parseBitmapFontData`
`spritesheetParser`

Example


 import * as PIXI from 'pixi.js';
 PIXI.useDeprecated(); // MUST be bound to namespace