PIXI
namespace PIXI
Summary
Properties from PIXI
|
|
number |
|
object |
|
Array<PIXI.IResourcePlugin> |
|
number |
|
number |
|
string |
|
string |
|
string |
|
Public Properties
static DATA_URI = undefined
Regexp for data URI. Based on: https://github.com/ragingwind/data-uri-regex
data:image/png;base64
static DEG_TO_RAD: number
Conversion factor for converting degrees to radians.
static GRAPHICS_CURVES: object
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
.
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
adaptive | boolean |
<optional> |
true | flag indicating if the resolution should be adaptive |
maxLength | number |
<optional> |
10 | maximal length of a single segment of the curve (if adaptive = false, ignored) |
maxSegments | number |
<optional> |
2048 | maximal number of segments in the curve (if adaptive = false, ignored) |
minSegments | number |
<optional> |
8 | minimal number of segments in the curve (if adaptive = false, ignored) |
static INSTALLED: Array<PIXI.IResourcePlugin>
Collection of installed resource types, class must extend PIXI.Resource.
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);
static RAD_TO_DEG: number
Conversion factor for converting radians to degrees.
Public Methods
autoDetectResource(source: string | unknown, options: object) → {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 |
Type | Description |
---|---|
PIXI.Resource |
The created resource. |
autoDetectRenderer(options: object) → {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> |
PIXI.settings.RESOLUTION |
The resolution / device pixel ratio of the renderer. |
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 |
Type | Description |
---|---|
PIXI.Renderer | PIXI.CanvasRenderer |
Returns WebGL renderer if available, otherwise CanvasRenderer |
floatEqual(a: number, b: number, epsilon: number) → {boolean}
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. |
Type | Description |
---|---|
boolean |
Returns |
lineIntersection(aStart: IPointData, aEnd: IPointData, bStart: IPointData, bEnd: IPointData, outPoint: IPointData) → {IPointData}
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). |
Type | Description |
---|---|
IPointData |
The point where the lines intersect or a |
segmentIntersection(aStart: IPointData, aEnd: IPointData, bStart: IPointData, bEnd: IPointData, outPoint: IPointData) → {IPointData}
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). |
Type | Description |
---|---|
IPointData |
The point where the segments intersect or a |