Classes
- AbstractMaskSystem
- AbstractMultiResource
- AbstractRenderer
- AccessibilityManager
- AnimatedSprite
- Application
- AppLoaderPlugin
- ArrayResource
- Attribute
- BaseImageResource
- BasePrepare
- BaseRenderTexture
- BaseTexture
- BasisLoader
- BatchDrawCall
- BatchGeometry
- BatchPluginFactory
- BatchShaderGenerator
- BatchSystem
- BatchTextureArray
- BitmapFont
- BitmapFontData
- BitmapFontLoader
- BitmapText
- BlobResource
- 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
-
Any plugin that's usable for Application should contain these methods.
-
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
-
Interface for classes that represent a hit area.
It is implemented by the following classes:
-
PixiJS' base Loader resource type. This is a superset of the resource-loader's Resource class and contains any mixins for extending.
Properties:
Name Type Description spritesheet
PIXI.Spritesheet Reference to Spritesheet object created.
textures
object<string, PIXI.Texture> Dictionary of textures from Spritesheet.
metadata
PIXI.IResourceMetadata Data that can be added for loading resources.
texture
PIXI.Texture Texture reference for loading images and other textures.
-
Common interface for points. Both Point and ObservablePoint implement it
Properties:
Name Type Description x
number X coord
y
number Y coord
-
Common interface for points. Both Point and ObservablePoint implement it
Properties:
Name Type Description x
number X coord
y
number Y coord
-
Interface for Container to interface with Renderer.
-
Interface for DisplayObject to interface with Renderer. The minimum APIs needed to implement a renderable object.
Properties:
Name Type Description parent
-
Resource metadata, can be used to pass BaseTexture options.
Properties:
Name Type Description imageMetadata
PIXI.IResourceMetadata Used by BitmapFonts, Spritesheet and CompressedTextures as the options to used for metadata when loading the child image.
-
Shape of supported resource plugins
Namespaces
Members
Regexp for data URI. Based on: https://github.com/ragingwind/data-uri-regex
Example
data:image/png;base64
Conversion factor for converting degrees to radians.
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> staticreadonly
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);
Two Pi.
Conversion factor for converting radians to degrees.
String of the current PIXI version.
Default filter vertex shader
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 |
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
Configure whether filter textures are cleared after binding.
Filter textures need not be cleared if the filter does not use pixel blending. CLEAR_MODES.BLIT will detect this and skip clearing as an optimization.
Properties:
Name | Description |
---|---|
AUTO |
Alias for BLIT |
BLEND |
Do not clear the filter texture. The filter's output will blend on top of the output texture. |
BLIT |
Clear only if FilterSystem.forceClear is set or if the filter uses pixel blending. |
CLEAR |
Always clear the filter texture. |
NO |
Alias for BLEND, same as |
YES |
Alias for CLEAR, same as |
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 |
0x9276 | |
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 |
0x9278 | |
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 |
0x9279 | |
COMPRESSED_SRGB8_ETC2 |
0x9275 | |
COMPRESSED_SRGB8_PUNCHTHROUGH_ALPHA1_ETC2 |
0x9277 |
PIXI.LINE_CAPstring
Support line caps in PIXI.LineStyle
for graphics.
- See:
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 |
PIXI.LINE_JOINstring
Supported line joints in PIXI.LineStyle
for graphics.
- See:
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 |
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.
- See:
Properties:
Name | Description |
---|---|
HIGH |
Try 8 samples |
LOW |
Try 2 samples |
MEDIUM |
Try 4 samples |
NONE |
No multisampling for this renderTexture |
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
- See:
Properties:
Name | Type | Description |
---|---|---|
height |
number | |
id |
string | |
page |
number | |
width |
number | |
x |
number | |
xadvance |
number | |
xoffset |
number | |
y |
number | |
yoffset |
number |
Properties:
Name | Type | Description |
---|---|---|
lineHeight |
number |
Properties:
Name | Type | Description |
---|---|---|
face |
string | |
size |
number |
Properties:
Name | Type | Description |
---|---|---|
amount |
number | |
first |
number | |
second |
number |
Properties:
Name | Type | Description |
---|---|---|
file |
string | |
id |
number |
Types that can be passed to drawImage
A number, or a string containing a number.
Properties:
Name | Type | Description |
---|---|---|
ascent |
number |
Font ascent |
descent |
number |
Font descent |
fontSize |
number |
Font size |
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 |
use |
PIXI.Loader.loaderMiddleware |
<optional> |
Middleware function to run after load, the
arguments for this are |
Size object, contains width and height
Properties:
Name | Type | Description |
---|---|---|
height |
number |
Height component |
width |
number |
Width component |
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. |
autoDetectRenderer (options) PIXI.Renderer | PIXI.CanvasRenderer
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.useContextAlpha |
boolean |
<optional> |
true |
Pass-through value for canvas' context |
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.backgroundAlpha |
number |
<optional> |
1 |
Value from 0 (fully transparent) to 1 (fully opaque). |
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 |