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 | Array> <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.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.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:

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

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

IFontMetrics

A number, or a string containing a number.

Properties:
Name Type Description
ascent number

Font ascent

descent number

Font descent

fontSize number

Font size

Methods

autoDetectResource (source, options) PIXI.Resource

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.

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

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