Classes
- AbstractMaskSystem
- AbstractMultiResource
- AccessibilityManager
- AlphaFilter
- AnimatedSprite
- Application
- ArrayResource
- AssetLoader
- Attribute
- BackgroundLoader
- BackgroundSystem
- BaseImageResource
- BasePrepare
- BaseRenderTexture
- BaseTexture
- BasisParser
- BatchDrawCall
- BatchGeometry
- BatchRenderer
- BatchShaderGenerator
- BatchSystem
- BatchTextureArray
- BitmapFont
- BitmapFontData
- BitmapText
- BlobResource
- BlurFilter
- BlurFilterPass
- Bounds
- Buffer
- BufferResource
- BufferSystem
- Cache
- CanvasContextSystem
- CanvasExtract
- CanvasMaskSystem
- CanvasObjectRendererSystem
- CanvasPrepare
- CanvasRenderer
- CanvasResource
- Circle
- Color
- ColorMatrixFilter
- CompressedTextureResource
- Container
- ContextSystem
- CountLimiter
- CubeResource
- DisplacementFilter
- DisplayObject
- Ellipse
- EventBoundary
- EventsTickerClass
- EventSystem
- Extract
- FederatedEvent
- FederatedMouseEvent
- FederatedPointerEvent
- FederatedWheelEvent
- FillStyle
- Filter
- FilterSystem
- Framebuffer
- FramebufferSystem
- FXAAFilter
- GenerateTextureSystem
- Geometry
- GeometrySystem
- GLFramebuffer
- GLProgram
- GLTexture
- Graphics
- GraphicsData
- GraphicsGeometry
- HTMLText
- HTMLTextStyle
- ImageBitmapResource
- ImageResource
- LineStyle
- MaskData
- MaskSystem
- Matrix
- Mesh
- MeshBatchUvs
- MeshGeometry
- MeshMaterial
- MultisampleSystem
- NineSlicePlane
- NoiseFilter
- ObjectRenderer
- ObjectRendererSystem
- ObservablePoint
- ParticleContainer
- ParticleRenderer
- PlaneGeometry
- PluginSystem
- Point
- Polygon
- Prepare
- Program
- ProjectionSystem
- Quad
- QuadUv
- Rectangle
- Renderer
- RenderTexture
- RenderTexturePool
- RenderTextureSystem
- Resolver
- Resource
- RopeGeometry
- RoundedRectangle
- Runner
- ScissorSystem
- Shader
- ShaderSystem
- SimpleMesh
- SimplePlane
- SimpleRope
- Sprite
- SpriteMaskFilter
- Spritesheet
- StartupSystem
- State
- StateSystem
- StencilSystem
- SVGResource
- SystemManager
- Text
- TextMetrics
- TextStyle
- Texture
- TextureGCSystem
- TextureMatrix
- TextureSystem
- Ticker
- TickerPlugin
- TilingSprite
- TilingSpriteRenderer
- TimeLimiter
- Transform
- TransformFeedback
- TransformFeedbackSystem
- UniformGroup
- VideoFrameResource
- VideoResource
- ViewableBuffer
- ViewSystem
- CanvasGraphicsRenderer
- CanvasMeshRenderer
- CanvasSpriteRenderer
- TextureUvs
Interface Definitions
-
This developer convenience object allows developers to group together the various asset parsers into a single object.
-
Initialization options object for Asset Class.
Properties:
Name Type Description basePath
string a base path for any assets loaded
bundleIdentifier
BundleIdentifierOptions advanced - override how bundlesIds are generated
defaultSearchParams
string | Record<string, any> a default URL parameter string to append to all assets loaded
manifest
string | PIXI.AssetsManifest a manifest to tell the asset loader upfront what all your assets are this can be the manifest object itself, or a URL to the manifest.
preferences
Partial<PIXI.AssetsPreferences> Optional loader preferences
skipDetections
boolean If true, don't attempt to detect whether browser has preferred formats available. May result in increased performance as it skips detection step.
texturePreference
{ resolution? : number | number[], format? : ArrayOr<string> } optional preferences for which textures preferences you have when resolving assets for example you might set the resolution to 0.5 if the user is on a rubbish old phone or you might set the resolution to 2 if the user is on a retina display
-
Structure of a bundle found in a manifest file
-
The expected format of a manifest. This would normally be auto generated or made by the developer
-
Extensible preferences that can be used, for instance, when configuring loaders.
- Since:
- 7.2.0
-
Options for the background system.
-
For every asset that is cached, it will call the parsers test function the flow is as follows:
cacheParser.test()
: Test the asset.cacheParser.getCacheableAssets()
: If the test passes call the getCacheableAssets function with the asset
Useful if you want to add more than just a raw asset to the cache (for example a spritesheet will want to make all its sub textures easily accessible in the cache)
Properties:
Name Type Description config
Record<string, any> A config to adjust the parser
getCacheableAssets
(keys: string[], asset: T) => Record<string, any> If the test passes, this function is called to get the cacheable assets an example may be that a spritesheet object will return all the sub textures it has so they can be cached.
test
(asset: T) => boolean Gets called by the cache when a dev caches an asset
-
Options for the context system.
-
The event features that are enabled by the EventSystem This option only is available when using @pixi/events package (included in the pixi.js and pixi.js-legacy bundle), otherwise it will be ignored.
pointerup
/mouseup
/touchend
/ 'rightup'pointerupoutside
/mouseupoutside
/touchendoutside
/ 'rightupoutside'pointerdown
/ 'mousedown' /touchstart
/ 'rightdown'click
/tap
globalpointermove
globalmousemove
globaltouchemove
pointermove
/mousemove
/touchmove
pointerout
/mouseout
pointerover
/mouseover
- Enables wheel events.
- Since:
- 7.2.0
Properties:
Name Type Description click
boolean Enables pointer events associated with clicking:
globalMove
boolean Enables global pointer move events:
move
boolean Enables pointer events associated with pointer movement:
wheel
boolean -
Strict extension format that is used internally for registrations.
Properties:
Name Type Description type
PIXI.ExtensionType[] The extension type, always expressed as multiple, even if a single
-
Format when registering an extension. Generally, the extension should have these values as
extension
static property, but you can override name or type by providing an object.Properties:
Name Type Description name
string Optional. Some plugins provide an API name/property, such as Renderer plugins
priority
number Optional, used for sorting the plugins in a particular order
ref
any Reference to the plugin object/class
type
PIXI.ExtensionType | PIXI.ExtensionType[] The extension type, can be multiple types
-
Describes the shape for a PIXI.FederatedEvent's'
eventTarget
.Properties:
Name Type Description children
ReadonlyArray<PIXI.FederatedEventTarget> The children of this event target.
cursor
Cursor | string The cursor preferred when the mouse pointer is hovering over.
eventMode
PIXI.EventMode The mode of interaction for this object
hitArea
IHitArea | null The hit-area specifies the area for which pointer events should be captured by this event target.
interactive
boolean Whether this event target should fire UI events.
interactiveChildren
boolean Whether this event target has any children that need UI events. This can be used optimize event propagation.
isInteractive
() => boolean Returns true if the DisplayObject has interactive 'static' or 'dynamic'
onclick
PIXI.FederatedEventHandler | null Handler for 'click' event
onglobalmousemove
PIXI.FederatedEventHandler | null Handler for 'globalmousemove' event
onglobalpointermove
PIXI.FederatedEventHandler | null Handler for 'globalpointermove' event
onglobaltouchmove
PIXI.FederatedEventHandler | null Handler for 'globaltouchmove' event
onmousedown
PIXI.FederatedEventHandler | null Handler for 'mousedown' event
onmouseenter
PIXI.FederatedEventHandler | null Handler for 'mouseenter' event
onmouseleave
PIXI.FederatedEventHandler | null Handler for 'mouseleave' event
onmousemove
PIXI.FederatedEventHandler | null Handler for 'mousemove' event
onmouseout
PIXI.FederatedEventHandler | null Handler for 'mouseout' event
onmouseover
PIXI.FederatedEventHandler | null Handler for 'mouseover' event
onmouseup
PIXI.FederatedEventHandler | null Handler for 'mouseup' event
onmouseupoutside
PIXI.FederatedEventHandler | null Handler for 'mouseupoutside' event
onpointercancel
PIXI.FederatedEventHandler | null Handler for 'pointercancel' event
onpointerdown
PIXI.FederatedEventHandler | null Handler for 'pointerdown' event
onpointerenter
PIXI.FederatedEventHandler | null Handler for 'pointerenter' event
onpointerleave
PIXI.FederatedEventHandler | null Handler for 'pointerleave' event
onpointermove
PIXI.FederatedEventHandler | null Handler for 'pointermove' event
onpointerout
PIXI.FederatedEventHandler | null Handler for 'pointerout' event
onpointerover
PIXI.FederatedEventHandler | null Handler for 'pointerover' event
onpointertap
PIXI.FederatedEventHandler | null Handler for 'pointertap' event
onpointerup
PIXI.FederatedEventHandler | null Handler for 'pointerup' event
onpointerupoutside
PIXI.FederatedEventHandler | null Handler for 'pointerupoutside' event
onrightclick
PIXI.FederatedEventHandler | null Handler for 'rightclick' event
onrightdown
PIXI.FederatedEventHandler | null Handler for 'rightdown' event
onrightup
PIXI.FederatedEventHandler | null Handler for 'rightup' event
onrightupoutside
PIXI.FederatedEventHandler | null Handler for 'rightupoutside' event
ontap
PIXI.FederatedEventHandler | null Handler for 'tap' event
ontouchcancel
PIXI.FederatedEventHandler | null Handler for 'touchcancel' event
ontouchend
PIXI.FederatedEventHandler | null Handler for 'touchend' event
ontouchendoutside
PIXI.FederatedEventHandler | null Handler for 'touchendoutside' event
ontouchmove
PIXI.FederatedEventHandler | null Handler for 'touchmove' event
ontouchstart
PIXI.FederatedEventHandler | null Handler for 'touchstart' event
onwheel
PIXI.FederatedEventHandler<PIXI.FederatedWheelEvent> | null Handler for 'wheel' event
parent
PIXI.FederatedEventTarget The parent of this event target.
-
Format detection is useful for detecting feature support on the current platform.
Properties:
Name Type Description add
(formats: string[]) => Promise<string[]> Add formats (file extensions) to the existing list of formats. Return an new array with added formats, do not mutate the formats argument.
extension
ExtensionMetadata Should be ExtensionType.DetectionParser
remove
(formats: string[]) => Promise<string[]> Remove formats (file extensions) from the list of supported formats. This is used when uninstalling this DetectionParser. Return an new array with filtered formats, do not mutate the formats argument.
test
() => Promise<boolean> Browser/platform feature detection supported if return true
-
This interface describes all the DOM dependent calls that Pixi makes throughout its codebase. Implementations of this interface can be used to make sure Pixi will work in any environment, such as browser, Web Workers, and Node.js.
Properties:
Name Type Description createCanvas
(width: number, height: number) => ICanvas Returns a canvas object that can be used to create a webgl context.
getBaseUrl
() => string Returns the current base URL For browser environments this is either the document.baseURI or window.location.href
getCanvasRenderingContext2D
() => { prototype : ICanvasRenderingContext2D } Returns a 2D rendering context.
getNavigator
() => { userAgent : string } Returns a partial implementation of the browsers window.navigator
getWebGLRenderingContext
() => typeof WebGLRenderingContext Returns a WebGL rendering context.
-
Application options supplied to constructor.
Properties:
Name Type Default Description autoStart
boolean true Automatically starts the rendering after the construction. Note: Setting this parameter to
false
does NOT stop the shared ticker even if you setoptions.sharedTicker
totrue
in case that it is already started. Stop it by your own.resizeTo
Window | HTMLElement Element to automatically resize stage to.
sharedTicker
boolean false Set
true
to useTicker.shared
,false
to create new ticker. If set tofalse
, you cannot register a handler to occur before anything that runs on the shared ticker. The system ticker will always run before both the shared ticker and the app ticker. -
Any plugin that's usable for Application should contain these methods.
-
Marks places in PixiJS where you can pass Float32Array, UInt32Array, any typed arrays, and ArrayBuffer.
Same as ArrayBuffer in typescript lib, defined here just for documentation.
-
Interface for elements like Sprite, Mesh etc. for batching.
-
Properties:
Name Type Description height
number Height of character in page.
id
number Unique id of character
page
number width
number Width of character in page.
x
number x-position of character in page.
xadvance
number Advancement to apply to next character.
xoffset
number x-offset to apply when rendering character
y
number y-position of character in page.
yoffset
number y-offset to apply when rendering character.
-
Properties:
Name Type Description lineHeight
number Line height, in pixels.
-
Properties:
Name Type Description distanceRange
number Range of distance
fieldType
string Type of distance field
-
Properties:
Name Type Description face
string Font face
size
number Font size
-
Properties:
Name Type Description amount
number x-offset to apply between first & second characters when they are next to each other.
first
number First character of pair
second
number Second character of pair
-
Properties:
Name Type Description file
string File name
id
number Unique id for bitmap texture
-
Properties:
Name Type Default Description alphaMode
PIXI.ALPHA_MODES PIXI.BaseTexture.defaultOptions.alphaMode Pre multiply the image alpha. Note: for MSDF/SDF fonts, alphaMode is not supported.
anisotropicLevel
number PIXI.BaseTexture.defaultOptions.anisotropicLevel Anisotropic filtering level of texture.
chars
string | (string | string[])[] PIXI.BitmapFont.ALPHANUMERIC Characters included in the font set. You can also use ranges. For example,
[['a', 'z'], ['A', 'Z'], "!@#$%^&*()~{}[] "]
. Don't forget to include spaces ' ' in your character set!mipmap
PIXI.MIPMAP_MODES PIXI.BaseTexture.defaultOptions.mipmap If mipmapping is enabled for texture. For instance, by default PixiJS only enables mipmapping on Power-of-Two textures. If your textureWidth or textureHeight are not power-of-two, you may consider enabling mipmapping to get better quality with lower font sizes. Note: for MSDF/SDF fonts, mipmapping is not supported.
padding
number 4 Padding between glyphs on texture atlas. Lower values could mean more visual artifacts and bleeding from other glyphs, larger values increase the space required on the texture.
resolution
number 1 Render resolution for glyphs.
scaleMode
PIXI.SCALE_MODES PIXI.BaseTexture.defaultOptions.scaleMode Default scale mode, linear, nearest. Nearest can be helpful for bitmap-style fonts.
skipKerning
boolean false Skip generation of kerning information for the BitmapFont. If true, this could potentially increase the performance, but may impact the rendered text appearance.
textureHeight
number 512 Optional height of atlas, smaller values to reduce memory.
textureWidth
number 512 Optional width of atlas, smaller values to reduce memory.
-
Constructor options for BlobResource.
-
Constructor options for BufferResource.
-
Common interface for HTMLCanvasElement, OffscreenCanvas, and other custom canvas classes.
Properties:
Name Type Description height
number Height of the canvas.
parentNode
ICanvasParentNode | null Parent node of the canvas.
style
ICanvasStyle Style of the canvas.
width
number Width of the canvas.
-
Common interface for CanvasRenderingContext2D, OffscreenCanvasRenderingContext2D, and other custom canvas 2D context.
-
Constructor options for CubeResource.
Properties:
Name Type Description autoLoad
boolean Whether to auto-load resources
linkBaseTexture
boolean In case BaseTextures are supplied, whether to copy them or use.
-
Batch element computed from Graphics geometry.
-
-
Font information for HTMLText
- Since:
- 7.2.0
Properties:
Name Type Description dataSrc
string Base64 string for font
display
PIXI.FontDisplay Display property of the font
family
string Family name of font
fontFace
FontFace | null FontFace installed in the document
originalUrl
string User-supplied URL request
refs
number Reference counter
src
string Blob-based URL for font
style
TextStyleFontStyle Style of the font
weight
TextStyleFontWeight Weight of the font
-
Modifed versions from ITextStyle.
- Since:
- 7.2.0
Properties:
Name Type Description whiteSpace
PIXI.HTMLTextStyleWhiteSpace White-space with expanded options.
-
Options for ImageBitmapResource.
- When
source
isImageBitmap
, the underlying ImageBitmap is not owned by default. - When
source
isstring
(a URL), the underlying ImageBitmap is owned by default.
Properties:
Name Type Description alphaMode
PIXI.ALPHA_MODES Alpha mode used when creating the ImageBitmap.
autoLoad
boolean Start loading process automatically when constructed.
crossOrigin
boolean Load image using cross origin.
ownsImageBitmap
boolean Whether the underlying ImageBitmap is owned by the PIXI.ImageBitmapResource. When set to
true
, the underlying ImageBitmap will be disposed automatically when disposing PIXI.ImageBitmapResource. If this option is not set, whether it owns the underlying ImageBitmap is determained by the type ofsource
used when constructing PIXI.ImageBitmapResource: - When
-
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
PIXI.IRenderableContainer Object must have a parent container
transform
PIXI.Transform Object must have a transform
-
Standard Interface for a Pixi renderer.
Properties:
Name Type Description runners
{ [key: string]: PIXI.Runner } a collection of runners defined by the user
autoDensity
boolean Whether CSS dimensions of canvas view should be resized to screen dimensions automatically.
background
PIXI.BackgroundSystem Background color, alpha and clear behavior
height
number the height of the screen
lastObjectRendered
PIXI.IRenderableObject the last object rendered by the renderer. Useful for other plugins like interaction managers
multisample
PIXI.MSAA_QUALITY The number of MSAA samples of the renderer.
options
PIXI.IRendererOptions The options passed in to create a new instance of the renderer.
plugins
IRendererPlugins Collection of plugins
rendererLogId
string When logging Pixi to the console, this is the name we will show
renderingToScreen
boolean Flag if we are rendering to the screen vs renderTexture
resolution
number The resolution / device pixel ratio of the renderer.
screen
PIXI.Rectangle Measurements of the screen. (0, 0, screenWidth, screenHeight). Its safe to use as filterArea or hitArea for the whole stage.
type
PIXI.RENDERER_TYPE The type of the renderer.
view
VIEW The canvas element that everything is drawn to.
width
number the width of the screen
-
Renderer options supplied to constructor.
- See:
Properties:
Name Type Description antialias
boolean WebGL Only. Whether to enable anti-aliasing. This may affect performance.
autoDensity
boolean Whether the CSS dimensions of the renderer's view should be resized automatically.
background
PIXI.ColorSource Alias for PIXI.IRendererOptions.backgroundColor
backgroundAlpha
number Transparency of the background color, value from
0
(fully transparent) to1
(fully opaque).backgroundColor
PIXI.ColorSource The background color used to clear the canvas. See PIXI.ColorSource for accepted color values.
clearBeforeRender
boolean Whether to clear the canvas before new render passes.
context
PIXI.IRenderingContext | null WebGL Only. User-provided WebGL rendering context object.
eventFeatures
Partial<PIXI.EventSystemFeatures> The event features that are enabled by the EventSystem This option only is available when using @pixi/events package (included in the pixi.js and pixi.js-legacy bundle), otherwise it will be ignored.
eventMode
PIXI.EventMode The default event mode mode for all display objects. This option only is available when using @pixi/events package (included in the pixi.js and pixi.js-legacy bundle), otherwise it will be ignored.
height
number The height of the renderer's view.
hello
boolean Whether to log the version and type information of renderer to console.
powerPreference
WebGLPowerPreference WebGL Only. A hint indicating what configuration of GPU is suitable for the WebGL context, can be
'default'
,'high-performance'
or'low-power'
. Setting to'high-performance'
will prioritize rendering performance over power consumption, while setting to'low-power'
will prioritize power saving over rendering performance.premultipliedAlpha
boolean WebGL Only. Whether the compositor will assume the drawing buffer contains colors with premultiplied alpha.
preserveDrawingBuffer
boolean WebGL Only. Whether to enable drawing buffer preservation. If enabled, the drawing buffer will preserve its value until cleared or overwritten. Enable this if you need to call
toDataUrl
on the WebGL context.resolution
number The resolution / device pixel ratio of the renderer.
useContextAlpha
boolean | "notMultiplied" Deprecated since 7.0.0, use
premultipliedAlpha
andbackgroundAlpha
instead.Pass-through value for canvas' context attribute
alpha
. This option is for cases where the canvas needs to be opaque, possibly for performance reasons on some older devices. If you want to set transparency, please usebackgroundAlpha
.WebGL Only: When set to
'notMultiplied'
, the canvas' context attributealpha
will be set totrue
andpremultipliedAlpha
will be tofalse
.view
PIXI.ICanvas The canvas to use as the view. If omitted, a new canvas will be created.
width
number The width of the renderer's view.
-
Renderer options supplied to
autoDetectRenderer
.Properties:
Name Type Default Description forceCanvas
boolean false Force CanvasRenderer even if WebGL is supported. Only available with pixi.js-legacy.
-
Mixed WebGL1 / WebGL2 rendering context. Either it's WebGL2, either it's WebGL1 with PixiJS polyfills on it.
-
Shape of supported resource plugins
-
-
Atlas format.
-
Represents the JSON data for a spritesheet atlas.
-
Interface for systems used by the PIXI.Renderer.
-
Generic interface for TextStyle options.
Properties:
Name Type Description align
'left' | 'center' | 'right' | 'justify' Alignment for multiline text, does not affect single line text
breakWords
boolean Indicates if lines can be wrapped within words, it needs wordWrap to be set to true
dropShadow
boolean Set a drop shadow for the text
dropShadowAlpha
number Set alpha for the drop shadow
dropShadowAngle
number Set a angle of the drop shadow
dropShadowBlur
number Set a shadow blur radius
dropShadowColor
string | number A fill style to be used on the dropshadow e.g., 'red', '#00FF00'
dropShadowDistance
number Set a distance of the drop shadow
fill
string | Array<string> | number | Array<number> | CanvasGradient | CanvasPattern A canvas fillstyle that will be used on the text e.g., 'red', '#00FF00'. Can be an array to create a gradient, e.g.,
['#000000','#FFFFFF']
MDNfillGradientStops
number[] If fill is an array of colours to create a gradient, this array can set the stop points (numbers between 0 and 1) for the color, overriding the default behaviour of evenly spacing them.
fillGradientType
PIXI.TEXT_GRADIENT If fill is an array of colours to create a gradient, this can change the type/direction of the gradient. See PIXI.TEXT_GRADIENT
fontFamily
string | string[] The font family, can be a single font name, or a list of names where the first is the preferred font.
fontSize
number | string The font size (as a number it converts to px, but as a string, equivalents are '26px','20pt','160%' or '1.6em')
fontStyle
'normal' | 'italic' | 'oblique' The font style.
fontVariant
'normal' | 'small-caps' The font variant.
fontWeight
'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900' The font weight.
leading
number The height of the line, a number that represents the vertical space that a letter uses.
letterSpacing
number The amount of spacing between letters, default is 0
lineHeight
number The line height, a number that represents the vertical space that a letter uses
lineJoin
'miter' | 'round' | 'bevel' The lineJoin property sets the type of corner created, it can resolve spiked text issues. Possible values "miter" (creates a sharp corner), "round" (creates a round corner) or "bevel" (creates a squared corner).
miterLimit
number The miter limit to use when using the 'miter' lineJoin mode. This can reduce or increase the spikiness of rendered text.
padding
number Occasionally some fonts are cropped. Adding some padding will prevent this from happening by adding padding to all sides of the text.
stroke
string | number A canvas fillstyle that will be used on the text stroke, e.g., 'blue', '#FCFF00'
strokeThickness
number A number that represents the thickness of the stroke. A value of 0 will disable stroke.
textBaseline
'alphabetic' | 'top' | 'hanging' | 'middle' | 'ideographic' | 'bottom' The baseline of the text that is rendered.
trim
boolean Trim transparent borders
whiteSpace
'normal' | 'pre' | 'pre-line' Determines whether newlines & spaces are collapsed or preserved "normal" (collapse, collapse), "pre" (preserve, preserve) | "pre-line" (preserve, collapse). It needs wordWrap to be set to true.
wordWrap
boolean Indicates if word wrap should be used
wordWrapWidth
number The width at which text will wrap, it needs wordWrap to be set to true
-
Stores the width of the non-scalable borders, for example when used with PIXI.NineSlicePlane texture.
- Since:
- 7.2.0
Properties:
Name Type Description bottom
number bottom border in pixels
left
number left border in pixels
right
number right border in pixels
top
number top border in pixels
-
PixiJS classes use this type instead of ArrayBuffer and typed arrays to support expressions like
geometry.buffers[0].data[0] = position.x
.Gives access to indexing and
length
field.- @popelyshev: If data is actually ArrayBuffer and throws Exception on indexing - its user problem :)
-
All functions are optional here. The flow:
for every asset,
parser.test()
: Test the asset url.parser.load()
: If test passes call the load function with the urlparser.testParse()
: Test to see if the asset should be parsed by the pluginparse.parse()
: If test is parsed, then run the parse function on the asset.
some plugins may only be used for parsing, some only for loading and some for both!
Properties:
Name Type Description config
CONFIG A config to adjust the parser
load
(url: string, resolvedAsset: PIXI.ResolvedAsset<META_DATA>, loader: PIXI.AssetLoader) => Promise<T> This is the promise that loads the URL provided resolves with a loaded asset if returned by the parser.
name
string The name of the parser (this can be used when specifying loadParser in a ResolvedAsset)
parse
(asset: ASSET, resolvedAsset: META_DATA<PIXI.ResolvedAsset>, loader: PIXI.AssetLoader) => Promise<T> Gets called on the asset it testParse passes. Useful to convert a raw asset into something more useful than
test
(url: string, resolvedAsset: PIXI.ResolvedAsset<META_DATA>, loader: PIXI.AssetLoader) => boolean each URL to load will be tested here, if the test is passed the assets are loaded using the load function below. Good place to test for things like file extensions!
testParse
(asset: ASSET, resolvedAsset: META_DATA<PIXI.ResolvedAsset>, loader: PIXI.AssetLoader) => Promise<boolean> This function is used to test if the parse function should be run on the asset If this returns true then parse is called with the asset
unload
(asset: ASSET, resolvedAsset: META_DATA<PIXI.ResolvedAsset>, loader: PIXI.AssetLoader) => void If an asset is parsed using this parser, the unload function will be called when the user requests an asset to be unloaded. This is useful for things like sounds or textures that can be unloaded from memory
-
Configuration for the
loadTextures
loader plugin.- See:
Properties:
Name Type Default Description crossOrigin
HTMLImageElement["crossOrigin"] 'anonymous' The crossOrigin value to use for images when
preferCreateImageBitmap
isfalse
.preferCreateImageBitmap
boolean true When set to
true
, loading and decoding images will happen withcreateImageBitmap
, otherwise it will usenew Image()
.preferWorkers
boolean true When set to
true
, loading and decoding images will happen with Worker thread, if available on the browser. This is much more performant as network requests and decoding can be expensive on the CPU. However, not all environments support Workers, in some cases it can be helpful to disable by setting tofalse
. -
Configuration for the
loadVideo
loader parser.- See:
Properties:
Name Type Default Description defaultAutoPlay
boolean true When set to
true
, the video will start playing automatically after being loaded, otherwise it will not start playing automatically.defaultLoop
boolean false When set to
true
, the loaded video will loop by default.defaultMuted
boolean false When set to
true
, the loaded video will be muted.defaultPlaysinline
boolean true When set to
true
, opening the video on mobile devices is prevented.defaultUpdateFPS
number 0 How many times a second to update the texture of the loaded video by default. If 0,
requestVideoFrameCallback
is used to update the texture. IfrequestVideoFrameCallback
is not available, the texture is updated every render. -
A prefer order lets the resolver know which assets to prefer depending on the various parameters passed to it.
Properties:
Name Type Description priority
string[] the importance order of the params
-
A fully resolved asset, with all the information needed to load it.
Properties:
Name Type Description alias
string[] Aliases associated with asset
data
T Optional data
format
string Format, usually the file extension
loadParser
PIXI.LoadParserName An override that will ensure that the asset is loaded with a specific parser
name
string[] Please use
alias
instead.src
string The URL or relative path to the asset
srcs
string Please use
src
instead. -
Format for url parser, will test a string and if it pass will then parse it, turning it into an ResolvedAsset
Properties:
Name Type Description config
Record<string, any> A config to adjust the parser
parse
(value: string) => ResolvedAsset the function that will convert the url into an object
test
(url: string) => boolean the test to perform on the url to determine if it should be parsed
-
Options for loading a spritesheet from an atlas.
Properties:
Name Type Description cachePrefix
string Prefix to add to texture names when adding to global TextureCache, using this option can be helpful if you have multiple texture atlases that share texture names and you need to disambiguate them.
data
S JSON data for the atlas.
resolutionFilename
string The filename to consider when determining the resolution of the spritesheet.
texture
PIXI.BaseTexture | PIXI.Texture Reference to Texture
-
Options for the startup system.
-
An asset that has not been resolved yet.
Properties:
Name Type Description alias
ArrayOr<string> Aliases associated with asset
name
ArrayOr<string> Please use
alias
instead.src
AssetSrc The URL or relative path to the asset
srcs
AssetSrc Please use
src
instead. -
Options for the view system.
Namespaces
Members
Regexp for data URI. Based on: https://github.com/ragingwind/data-uri-regex
- Default Value:
- undefined
Example
import { DATA_URI } from 'pixi.js';
DATA_URI.test('data:image/png;base64,foobar'); // => true
Conversion factor for converting degrees to radians.
- See:
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.
Default filter vertex shader
Default vertex shader
EventsTicker PIXI.EventsTickerClass readonly
This class handles automatic firing of PointerEvents in the case where the pointer is stationary for too long. This is to ensure that hit-tests are still run on moving objects.
- Since:
- 7.2.0
Loads SVG's into Textures.
Loads our textures! this makes use of imageBitmaps where available. We load the ImageBitmap on a different thread using the WorkerManager We can then use the ImageBitmap as a source for a Pixi Texture
You can customize the behavior of this loader by setting the config
property.
// Set the config
import { loadTextures } from '@pixi/assets';
loadTextures.config = {
// If true we will use a worker to load the ImageBitmap
preferWorkers: true,
// If false we will use new Image() instead of createImageBitmap
// If false then this will also disable the use of workers as it requires createImageBitmap
preferCreateImageBitmap: true,
crossOrigin: 'anonymous',
};
Loads videos into Textures.
spritesheetAsset PIXI.AssetExtension readonly
Asset extension for loading spritesheets.
String of the current PIXI version.
Enums
PIXI.ALPHA_MODESnumber
How to treat textures with premultiplied alpha
Properties:
Name | Default | Description |
---|---|---|
NO_PREMULTIPLIED_ALPHA |
0 |
Source is not premultiplied, leave it like that. Option for compressed and data textures that are created from typed arrays. |
NPM |
0 |
Alias for NO_PREMULTIPLIED_ALPHA. |
PMA |
2 |
Alias for PREMULTIPLIED_ALPHA. |
PREMULTIPLIED_ALPHA |
2 |
Source is already premultiplied. Example: spine atlases with |
PREMULTIPLY_ON_UPLOAD |
1 |
Source is not premultiplied, premultiply on upload. Default option, used for all loaded images. |
UNPACK |
1 |
Default option, alias for PREMULTIPLY_ON_UPLOAD. |
PIXI.BUFFER_BITSnumber
Bitwise OR of masks that indicate the buffers to be cleared.
Properties:
Name | Default | Description |
---|---|---|
COLOR |
0x00004000 |
Indicates the buffers currently enabled for color writing. |
DEPTH |
0x00000100 |
Indicates the depth buffer. |
STENCIL |
0x00000400 |
Indicates the stencil buffer. |
PIXI.BUFFER_TYPEnumber
Constants for various buffer types in Pixi
- See:
Properties:
Name | Default | Description |
---|---|---|
ARRAY_BUFFER |
34962 |
buffer type for using attribute data |
ELEMENT_ARRAY_BUFFER |
34963 |
buffer type for using as an index buffer |
UNIFORM_BUFFER |
35345 |
the buffer type is for uniform buffer objects |
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. PIXI.CLEAR_MODES.BLIT will detect this and skip clearing as an optimization.
Properties:
Name | Default | Description |
---|---|---|
AUTO |
2 |
Alias for BLIT |
BLEND |
0 |
Do not clear the filter texture. The filter's output will blend on top of the output texture. |
BLIT |
2 |
Clear only if PIXI.FilterSystem.forceClear is set or if the filter uses pixel blending. |
CLEAR |
1 |
Always clear the filter texture. |
NO |
0 |
Alias for BLEND, same as |
YES |
1 |
Alias for CLEAR, same as |
PIXI.COLOR_MASK_BITSnumber
Bitwise OR of masks that indicate the color channels that are rendered to.
Properties:
Name | Default | Description |
---|---|---|
ALPHA |
0x |
Alpha channel. |
BLUE |
0x4 |
Blue channel. |
GREEN |
0x2 |
Green channel |
RED |
0x1 |
Red channel. |
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 | Default | Description |
---|---|---|
LINE_LOOP |
2 |
To draw a series of connected line segments. It also joins the first and last vertices to form a loop. |
LINE_STRIP |
3 |
To draw a series of connected line segments. |
LINES |
1 |
To draw a series of unconnected line segments (individual lines). |
POINTS |
0 |
To draw a series of points. |
TRIANGLE_FAN |
6 |
To draw a series of connected triangles sharing the first vertex in a fan-like fashion. |
TRIANGLE_STRIP |
5 |
To draw a series of connected triangles in strip fashion. |
TRIANGLES |
4 |
To draw a series of separate triangles. |
PIXI.ENVnumber
Different types of environments for WebGL.
Properties:
Name | Default | Description |
---|---|---|
WEBGL |
1 |
Version 1 of WebGL |
WEBGL_LEGACY |
0 |
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 |
2 |
Version 2 of WebGL |
PIXI.FORMATSnumber
Various GL texture/resources formats.
Properties:
Name | Default | Description |
---|---|---|
ALPHA |
6406 | |
DEPTH_COMPONENT |
6402 | |
DEPTH_STENCIL |
34041 | |
LUMINANCE |
6409 | |
LUMINANCE_ALPHA |
6410 | |
RED |
6403 | |
RED_INTEGER |
36244 | |
RG |
33319 | |
RG_INTEGER |
33320 | |
RGB |
6407 | |
RGB_INTEGER |
36248 | |
RGBA |
6408 | |
RGBA_INTEGER |
36249 |
PIXI.GC_MODESnumber
The gc modes that are supported by pixi.
The PIXI.TextureGCSystem.defaultMode 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 | Default | Description |
---|---|---|
AUTO |
0 |
Garbage collection will happen periodically automatically |
MANUAL |
1 |
Garbage collection will need to be called manually |
PIXI.INTERNAL_FORMATSnumber
WebGL internal formats, including compressed texture formats provided by extensions
Properties:
Name | Default | Description |
---|---|---|
COMPRESSED_R11_EAC |
0x9270 | |
COMPRESSED_RG11_EAC |
0x9272 | |
COMPRESSED_RGB_ATC_WEBGL |
0x8C92 | |
COMPRESSED_RGB_BPTC_SIGNED_FLOAT_EXT |
0x8E8E | |
COMPRESSED_RGB_BPTC_UNSIGNED_FLOAT_EXT |
0x8E8F | |
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_ASTC_4x4_KHR |
0x93B0 | |
COMPRESSED_RGBA_ATC_EXPLICIT_ALPHA_WEBGL |
0x8C93 | |
COMPRESSED_RGBA_ATC_INTERPOLATED_ALPHA_WEBGL |
0x87EE | |
COMPRESSED_RGBA_BPTC_UNORM_EXT |
0x8E8C | |
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_BPTC_UNORM_EXT |
0x8E8D | |
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 | Default | Description |
---|---|---|
BUTT |
butt |
'butt': don't add any cap at line ends (leaves orthogonal edges) |
ROUND |
round |
'round': add semicircle at ends |
SQUARE |
square |
'square': add square at end (like |
PIXI.LINE_JOINstring
Supported line joints in PIXI.LineStyle
for graphics.
- See:
Properties:
Name | Default | Description |
---|---|---|
BEVEL |
bevel |
'bevel': add a square butt at each end of line segment and fill the triangle at turn |
MITER |
miter |
'miter': make a sharp corner where outer part of lines meet |
ROUND |
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 | Default | Description |
---|---|---|
COLOR |
4 |
Color mask (RGBA) |
NONE |
0 |
Mask is ignored |
SCISSOR |
1 |
Scissor mask, rectangle on screen, cheap |
SPRITE |
3 |
Mask that uses SpriteMaskFilter, uses temporary RenderTexture |
STENCIL |
2 |
Stencil mask, 1-bit, medium, works only if renderer supports stencil |
PIXI.MIPMAP_MODESnumber
Mipmap filtering modes that are supported by pixi.
The PIXI.BaseTexture.defaultOptions.mipmap 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.
Since WebGL 1 don't support mipmap for non-power-of-two textures,
ON
option will work like POW2
for WebGL 1.
This property only affects WebGL.
Properties:
Name | Default | Description |
---|---|---|
OFF |
0 |
No mipmaps. |
ON |
2 |
Always generate mipmaps. |
ON_MANUAL |
3 |
Use mipmaps, but do not auto-generate them. this is used with a resource that supports buffering each level-of-detail. |
POW2 |
1 |
Generate mipmaps if texture dimensions are powers of 2. |
PIXI.MSAA_QUALITYnumber
Constants for multi-sampling antialiasing.
- See:
Properties:
Name | Default | Description |
---|---|---|
HIGH |
8 |
Try 8 samples |
LOW |
2 |
Try 2 samples |
MEDIUM |
4 |
Try 4 samples |
NONE |
0 |
No multisampling for this renderTexture |
PIXI.PRECISIONstring
Constants that specify float precision in shaders.
Properties:
Name | Default | Description |
---|---|---|
HIGH |
highp |
highp is at least a 32 bit value. For floating point values they can range from: -2^62 to +2^62, for integer values they are similar to Uint32Array or Int32Array |
LOW |
lowp |
lowp is at least an 9 bit value. For floating point values they can range from: -2 to +2, for integer values they are similar to Uint8Array or Int8Array |
MEDIUM |
mediump |
mediump is at least a 16 bit value. For floating point values they can range from: -2^14 to +2^14, for integer values they are similar to Uint16Array or Int16Array |
PIXI.RENDERER_TYPEnumber
Constant to identify the Renderer Type.
Properties:
Name | Default | Description |
---|---|---|
CANVAS |
2 |
Canvas render type. |
UNKNOWN |
0 |
Unknown render type. |
WEBGL |
1 |
WebGL render type. |
PIXI.SAMPLER_TYPESnumber
Various sampler types. Correspond to sampler
, isampler
, usampler
GLSL types respectively.
WebGL1 works only with FLOAT.
Properties:
Name | Default | Description |
---|---|---|
FLOAT |
0 | |
INT |
1 | |
UINT |
2 |
PIXI.SCALE_MODESnumber
The scale modes that are supported by pixi.
The PIXI.BaseTexture.defaultOptions.scaleMode 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 | Default | Description |
---|---|---|
LINEAR |
1 |
Smooth scaling |
NEAREST |
0 |
Pixelating scaling |
PIXI.SHAPESnumber
Constants that identify shapes, mainly to prevent instanceof
calls.
Properties:
Name | Default | Description | ||||||
---|---|---|---|---|---|---|---|---|
CIRC |
2 |
Properties
|
||||||
ELIP |
3 |
Properties
|
||||||
POLY |
0 |
Properties
|
||||||
RECT |
1 |
Properties
|
||||||
RREC |
4 |
Properties
|
PIXI.TARGETSnumber
Various GL target types.
- gl.TEXTURE_3D: A three-dimensional texture.
- gl.TEXTURE_2D_ARRAY: A two-dimensional array texture.
Properties:
Name | Default | Description |
---|---|---|
TEXTURE_2D |
3553 |
A two-dimensional texture |
TEXTURE_2D_ARRAY |
35866 |
A two-dimensional array texture. |
TEXTURE_CUBE_MAP |
34067 |
A cube-mapped texture. When using a WebGL 2 context, the following values are available additionally: |
TEXTURE_CUBE_MAP_NEGATIVE_X |
34070 |
Negative X face for a cube-mapped texture. |
TEXTURE_CUBE_MAP_NEGATIVE_Y |
34072 |
Negative Y face for a cube-mapped texture. |
TEXTURE_CUBE_MAP_NEGATIVE_Z |
34074 |
Negative Z face for a cube-mapped texture. |
TEXTURE_CUBE_MAP_POSITIVE_X |
34069 |
Positive X face for a cube-mapped texture. |
TEXTURE_CUBE_MAP_POSITIVE_Y |
34071 |
Positive Y face for a cube-mapped texture. |
TEXTURE_CUBE_MAP_POSITIVE_Z |
34073 |
Positive Z face for a cube-mapped texture. |
PIXI.TEXT_GRADIENTobject
Constants that define the type of gradient on text.
Properties:
Name | Default | Description |
---|---|---|
LINEAR_HORIZONTAL |
1 |
Linear gradient |
LINEAR_VERTICAL |
0 |
Vertical gradient |
PIXI.TYPESnumber
Various GL data format types.
Properties:
Name | Default | Description |
---|---|---|
BYTE |
5120 | |
FLOAT |
5126 | |
FLOAT_32_UNSIGNED_INT_24_8_REV |
36269 | |
HALF_FLOAT |
36193 | |
INT |
5124 | |
SHORT |
5122 | |
UNSIGNED_BYTE |
5121 |
8 bits per channel for gl.RGBA |
UNSIGNED_INT |
5125 | |
UNSIGNED_INT_10F_11F_11F_REV |
35899 | |
UNSIGNED_INT_2_10_10_10_REV |
33640 | |
UNSIGNED_INT_24_8 |
34042 | |
UNSIGNED_INT_5_9_9_9_REV |
35902 | |
UNSIGNED_SHORT |
5123 | |
UNSIGNED_SHORT_4_4_4_4 |
32819 |
4 red bits, 4 green bits, 4 blue bits, 4 alpha bits. |
UNSIGNED_SHORT_5_5_5_1 |
32820 |
5 red bits, 5 green bits, 5 blue bits, 1 alpha bit. |
UNSIGNED_SHORT_5_6_5 |
33635 |
5 red bits, 6 green bits, 5 blue bits. |
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 | Default | Description |
---|---|---|
HIGH |
25 |
High priority updating, used by PIXI.AnimatedSprite |
INTERACTION |
50 |
Highest priority used for interaction events in PIXI.EventSystem |
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 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 | Default | Description |
---|---|---|
CLAMP |
33071 |
The textures uvs are clamped |
MIRRORED_REPEAT |
33648 |
The texture uvs tile and repeat with mirroring |
REPEAT |
10497 |
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 | Default | Description |
---|---|---|
ADD |
1 | |
ADD_NPM |
18 | |
COLOR |
15 |
Preserves the luma of the bottom layer, while adopting the hue and chroma of the top layer. Canvas Renderer only. |
COLOR_BURN |
8 |
Divides the inverted bottom layer by the top layer, and then inverts the result. Canvas Renderer only. |
COLOR_DODGE |
7 |
Divides the bottom layer by the inverted top layer. Canvas Renderer only. |
DARKEN |
5 |
Retains the darkest pixels of both layers. Canvas Renderer only. |
DIFFERENCE |
11 |
Subtracts the bottom layer from the top layer or the other way round to always get a positive value. Canvas Renderer only. |
DST_ATOP |
27 |
The existing canvas is only kept where it overlaps the new shape. The new shape is drawn behind the canvas content. |
DST_IN |
25 |
The existing canvas content is kept where both the new shape and existing canvas content overlap. Everything else is made transparent. |
DST_OUT |
26 |
The existing content is kept where it doesn't overlap the new shape. |
DST_OVER |
24 |
New shapes are drawn behind the existing canvas content. |
ERASE |
26 | |
EXCLUSION |
12 |
Like difference, but with lower contrast. Canvas Renderer only. |
HARD_LIGHT |
9 |
A combination of multiply and screen like overlay, but with top and bottom layer swapped. Canvas Renderer only. |
HUE |
13 |
Preserves the luma and chroma of the bottom layer, while adopting the hue of the top layer. Canvas Renderer only. |
LIGHTEN |
6 |
Retains the lightest pixels of both layers. Canvas Renderer only. |
LUMINOSITY |
16 |
Preserves the hue and chroma of the bottom layer, while adopting the luma of the top layer. Canvas Renderer only. |
MULTIPLY |
2 |
The pixels of the top layer are multiplied with the corresponding pixel of the bottom layer. A darker picture is the result. |
NONE |
20 | |
NORMAL |
0 | |
NORMAL_NPM |
17 | |
OVERLAY |
4 |
A combination of multiply and screen. Dark parts on the base layer become darker, and light parts become lighter. Canvas Renderer only. |
SATURATION |
14 |
Preserves the luma and hue of the bottom layer, while adopting the chroma of the top layer. Canvas Renderer only. |
SCREEN |
3 |
The pixels are inverted, multiplied, and inverted again. A lighter picture is the result (opposite of multiply) |
SCREEN_NPM |
19 | |
SOFT_LIGHT |
10 |
A softer version of hard-light. Pure black or white does not result in pure black or white. Canvas Renderer only. |
SRC_ATOP |
23 |
The new shape is only drawn where it overlaps the existing canvas content. |
SRC_IN |
21 |
The new shape is drawn only where both the new shape and the destination canvas overlap. Everything else is made transparent. |
SRC_OUT |
22 |
The new shape is drawn where it doesn't overlap the existing canvas content. |
SRC_OVER |
0 |
Draws new shapes on top of the existing canvas content. |
SUBTRACT |
28 | |
XOR |
29 |
Shapes are made transparent where both overlap and drawn normal everywhere else. |
PIXI.ExtensionType
Collection of valid extension types.
Properties:
Name | Description |
---|---|
Application |
Application plugins |
CacheParser |
Parsers for Assets cache. |
CanvasRendererPlugin |
Plugins for CanvasRenderer |
Loader |
Plugins to use with Loader |
LoadParser |
Parsers for Assets loader. |
RendererPlugin |
Plugins for Renderer |
ResolveParser |
Parsers for Assets resolvers. |
PIXI.LoaderParserPrioritynumber
The extension priority for loader parsers. Helpful when managing multiple parsers that share the same extension test. The higher priority parsers will be checked first.
Properties:
Name | Description |
---|---|
High |
Specific texture types: svg, png, ktx, dds, basis |
Low |
Generic parsers: txt, json, webfonts |
Normal |
PixiJS assets with generic extensions: spritesheets, bitmapfonts |
Type Definitions
Options for the background system.
Value types for the constructor of PIXI.Color. These types are extended from colord with some PixiJS-specific extensions.
Possible value types are:
- Color names:
'red'
,'green'
,'blue'
,'white'
, etc. - RGB hex integers (
0xRRGGBB
):0xff0000
,0x00ff00
,0x0000ff
, etc. - RGB(A) hex strings:
- 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.
- 6 digits (
- RGB(A) objects:
{ r: 255, g: 0, b: 0 }
,{ r: 255, g: 0, b: 0, a: 0.5 }
, etc. - RGB(A) strings:
'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:
'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. - PIXI.Color objects.
- Since:
- 7.2.0
The type of interaction a DisplayObject can be. For more information on values and their meaning, see DisplayObject's eventMode property.
- Since:
- 7.2.0
Function type for handlers, e.g., onclick
FontFace display options.
- Since:
- 7.3.0
- See:
HTMLText support more white-space options.
- Since:
- 7.2.0
- See:
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 |
Value types for the constructor of PIXI.BaseTexture, including:
HTMLImageElement
HTMLVideoElement
ImageBitmap
- PIXI.ICanvas
VideoFrame
Complex shape type
Size object, contains width and height
Properties:
Name | Type | Description |
---|---|---|
height |
number |
Height component |
width |
number |
Width component |
Please use ResolvedAsset
instead.
Loader plugin for handling web fonts
Names of the parsers that are built into PIXI.
Please use ResolvedAsset
instead.
A fully resolved src, Glob patterns will not work here, and the src will be resolved to a single file.
Please use UnresolvedAsset[]
instead.
Please use UnresolvedAssetObject
instead.
Please use AssetsBundle
instead.
Please use AssetsManifest
instead.
The tracking data for each pointer held in the state of an PIXI.EventBoundary.
pressTargetsByButton: {
[id: number]: FederatedEventTarget[];
};
clicksByButton: {
[id: number]: {
clickCount: number;
target: FederatedEventTarget;
timeStamp: number;
};
};
overTargets: FederatedEventTarget[];
Properties:
Name | Type | Description |
---|---|---|
clicksByButton |
Record<number, object> |
Holds clicking data for each button of the pointer. |
overTargets |
Array<PIXI.DisplayObject> |
The DisplayObject propagation path over which the pointer is hovering. |
pressTargetsByButton |
Record<PIXI.FederatedEventTarget, number> |
The pressed display objects' propagation paths by each button of the pointer. |
The object version of an unresolved asset
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.IRenderer<VIEW>
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 | Description |
---|---|---|---|
options |
Partial<PIXI.IRendererOptionsAuto> |
<optional> |
Options to use. |
Returns:
Type | Description |
---|---|
PIXI.IRenderer<VIEW> |
The idea of a relative epsilon comparison is to find the difference between the two numbers,
and see if it is less than a given epsilon.
A good epsilon would be the N% of the largest of the two values or Math.EPSILON
.
Note: Only available with @pixi/math-extras.
Name | Type | Description |
---|---|---|
a |
number |
First floating number to compare. |
b |
number |
Second floating number to compare. |
epsilon |
number |
The epsilon to compare to. The larger the epsilon, the easier for the numbers to be considered equals. |
Returns:
Type | Description |
---|---|
boolean | Returns true if the difference between the values is less than the given epsilon;
otherwise false . |
Computes the point where non-coincident and non-parallel Lines intersect.
Coincident or parallel lines return a NaN
point {x: NaN, y: NaN}
.
The intersection point may land outside the extents of the lines.
Note: Only available with @pixi/math-extras.
Name | Type | Description |
---|---|---|
aStart |
IPointData |
First point of the first line. |
aEnd |
IPointData |
Second point of the first line. |
bStart |
IPointData |
First point of the second line. |
bEnd |
IPointData |
Second point of the second line. |
outPoint |
IPointData |
A Point-like object in which to store the value, optional (otherwise will create a new Point). |
Returns:
Type | Description |
---|---|
IPointData | The point where the lines intersect or a NaN Point. |
parseDDS (arrayBuffer) PIXI.CompressedTextureResource[]
Parses the DDS file header, generates base-textures, and puts them into the texture cache.
Name | Type | Description |
---|---|---|
arrayBuffer |
ArrayBuffer |
Returns:
Type | Description |
---|---|
PIXI.CompressedTextureResource[] |
Computes the point where non-coincident and non-parallel segments intersect.
Coincident, parallel or non-intersecting segments return a NaN
point {x: NaN, y: NaN}
.
The intersection point must land inside the extents of the segments or return a NaN
Point.
Note: Only available with @pixi/math-extras.
Name | Type | Description |
---|---|---|
aStart |
IPointData |
Starting point of the first segment. |
aEnd |
IPointData |
Ending point of the first segment. |
bStart |
IPointData |
Starting point of the second segment. |
bEnd |
IPointData |
Ending point of the second segment. |
outPoint |
IPointData |
A Point-like object in which to store the value, optional (otherwise will create a new Point). |
Returns:
Type | Description |
---|---|
IPointData | The point where the segments intersect or a NaN Point. |