PixiJS

Class: Renderer

PIXI.Renderer

The Renderer draws the scene and all its content onto a WebGL enabled canvas.

This renderer should be used for browsers that support WebGL.

This renderer works by automatically managing WebGLBatchesm, so no need for Sprite Batches or Sprite Clouds. Don't forget to add the view to your DOM or you will not see anything!

Renderer is composed of systems that manage specific tasks. The following systems are added by default whenever you create a renderer:

System Description
PIXI.BatchSystem This manages object renderers that defer rendering until a flush.
PIXI.ContextSystem This manages the WebGL context and extensions.
PIXI.FilterSystem This manages the filtering pipeline for post-processing effects.
PIXI.FramebufferSystem This manages framebuffers, which are used for offscreen rendering.
PIXI.GeometrySystem This manages geometries & buffers, which are used to draw object meshes.
PIXI.MaskSystem This manages masking operations.
PIXI.ProjectionSystem This manages the projectionMatrix, used by shaders to get NDC coordinates.
PIXI.RenderTextureSystem This manages render-textures, which are an abstraction over framebuffers.
PIXI.ScissorSystem This handles scissor masking, and is used internally by MaskSystem
PIXI.ShaderSystem This manages shaders, programs that run on the GPU to calculate 'em pixels.
PIXI.StateSystem This manages the WebGL state variables like blend mode, depth testing, etc.
PIXI.StencilSystem This handles stencil masking, and is used internally by MaskSystem
PIXI.TextureSystem This manages textures and their resources on the GPU.
PIXI.TextureGCSystem This will automatically remove textures from the GPU if they are not used.

The breadth of the API surface provided by the renderer is contained within these systems.

new PIXI.Renderer (options) overrides

Renderer.ts:111
Name Type Attributes Default Description
options IRendererOptions <optional>

The optional renderer parameters.
options.width number <optional>
 800

The width of the screen.
options.height number <optional>
 600

The height of the screen.
options.view HTMLCanvasElement <optional>

The canvas to use as a view, optional.
options.useContextAlpha boolean <optional>
 true

Pass-through value for canvas' context alpha property. If you want to set transparency, please use backgroundAlpha. This option is for cases where the canvas needs to be opaque, possibly for performance reasons on some older devices.
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. If not available natively then FXAA antialiasing is used.
options.resolution number <optional>
 1

The resolution / device pixel ratio of the renderer. The resolution of the renderer retina would be 2.
options.clearBeforeRender boolean <optional>
 true

This sets if the renderer will clear the canvas or not before the new render pass. If you wish to set this to false, you must set preserveDrawingBuffer to true.
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.powerPreference string <optional>

Parameter passed to WebGL context, set to "high-performance" for devices with dual graphics card.
options.context object <optional>

If WebGL context already exists, all parameters must be taken from it.

Extends

Members

PIXI.Renderer.plugins object staticreadonly overrides

Collection of installed plugins. These are included by default in PIXI, but can be excluded by creating a custom build. Consult the README for more information about creating custom builds and excluding plugins.

Properties:
Name Type Description
accessibility PIXI.AccessibilityManager

Support tabbing interactive elements.
batch PIXI.BatchRenderer

Batching of Sprite, Graphics and Mesh objects.
extract PIXI.Extract

Extract image data from renderer.
interaction PIXI.InteractionManager

Handles mouse, touch and pointer events.
particle PIXI.ParticleRenderer

Renderer for ParticleContainer objects.
prepare PIXI.Prepare

Pre-render display objects.
tilingSprite PIXI.TilingSpriteRenderer

Renderer for TilingSprite objects.

batch PIXI.BatchSystem readonly

Batch system instance

context PIXI.ContextSystem readonly

Context system instance

extract PIXI.Extract Deprecated : since 6.0.0 readonly

Please use plugins.extract instead.

filter PIXI.FilterSystem readonly

Filter system instance

framebuffer PIXI.FramebufferSystem readonly

Framebuffer system instance

geometry PIXI.GeometrySystem readonly

Geometry system instance

gl WebGLRenderingContext readonly

WebGL context, set by the contextSystem (this.context)

globalUniforms PIXI.UniformGroup

Global uniforms

mask PIXI.MaskSystem readonly

Mask system instance

projection PIXI.ProjectionSystem readonly

Projection system instance

renderingToScreen boolean readonly

Flag if we are rendering to the screen vs renderTexture

Default Value:
  • true

renderTexture PIXI.RenderTextureSystem readonly

RenderTexture system instance

scissor PIXI.ScissorSystem readonly

Scissor system instance

shader PIXI.ShaderSystem readonly

Shader system instance

state PIXI.StateSystem readonly

State system instance

stencil PIXI.StencilSystem readonly

Stencil system instance

texture PIXI.TextureSystem readonly

Texture system instance

textureGC PIXI.TextureGCSystem readonly

Texture garbage collector system instance

Methods

PIXI.Renderer.registerPlugin (pluginName, ctor) void static

Renderer.ts:531

Adds a plugin to the renderer.

Name Type Description
pluginName string

The name of the plugin.
ctor IRendererPluginConstructor

The constructor function or class for the plugin.

addSystem (ClassRef, name) PIXI.Renderer

Renderer.ts:323

Add a new system to the renderer.

Name Type Attributes Description
ClassRef { new (renderer: PIXI.Renderer): T }

Class reference
name string <optional>

Property name for system, if not specified will use a static name property on the class itself. This name will be assigned as s property on the Renderer so make sure it doesn't collide with properties on Renderer.
Returns:
Type Description
PIXI.Renderer Return instance of renderer

clear () void

Renderer.ts:468

Clear the frame buffer

destroy (removeView) void overrides

Renderer.ts:477

Removes everything from the renderer (event listeners, spritebatch, etc...)

Name Type Attributes Default Description
removeView boolean <optional>
 false

Removes the Canvas element from the DOM. See: https://github.com/pixijs/pixi.js/issues/2233

render (displayObject, renderTexture, clear, transform, skipUpdateTransform) void

Renderer.ts:375

Renders the object to its WebGL view

Name Type Attributes Default Description
displayObject IRenderableObject

The object to be rendered.
renderTexture PIXI.RenderTexture <optional>

The render texture to render to.
clear boolean <optional>
 true

Should the canvas be cleared before the new render.
transform PIXI.Matrix <optional>

A transform to apply to the render texture before rendering.
skipUpdateTransform boolean <optional>
 false

Should we skip the update transform pass?

reset () PIXI.Renderer

Renderer.ts:456

Resets the WebGL state so you can render things however you fancy!

Returns:
Type Description
PIXI.Renderer Returns itself.

resize (screenWidth, screenHeight) void

Renderer.ts:443

Resizes the WebGL view to the specified width and height.

Name Type Description
screenWidth number

The new width of the screen.
screenHeight number

The new height of the screen.

Events

context

Renderer.ts:365

Fired when the WebGL context is set.

Name Type Description
gl WebGLRenderingContext

WebGL context.

postrender

Renderer.ts:353

Fired after rendering finishes.

prerender

Renderer.ts:359

Fired before rendering starts.

resize overrides

AbstractRenderer.ts:284

Fired after view has been resized.

Name Type Description
screenWidth number

The new width of the screen.
screenHeight number

The new height of the screen.

Inherited Properties

From class PIXI.AbstractRenderer

autoDensity boolean inherited

Whether CSS dimensions of canvas view should be resized to screen dimensions automatically.

backgroundAlpha number inherited

The background color alpha. Setting this to 0 will make the canvas transparent.

backgroundColor number inherited

The background color to fill if not transparent

clearBeforeRender boolean inherited

This sets if the CanvasRenderer will clear the canvas or not before the new render pass. If the scene is NOT transparent PixiJS will use a canvas sized fillRect operation every frame to set the canvas background color. If the scene is transparent PixiJS will use clearRect to clear the canvas every frame. Disable this by setting this to false. For example, if your game has a canvas filling background image you often don't need this set.

height number readonly inherited

Same as view.height, actual number of pixels in the canvas by vertical.

Default Value:
  • 600

options Object readonly inherited

The supplied constructor options.

preserveDrawingBuffer boolean inherited

The value of the preserveDrawingBuffer flag affects whether or not the contents of the stencil buffer is retained after rendering.

resolution number inherited

The resolution / device pixel ratio of the renderer.

Default Value:
  • 1

screen PIXI.Rectangle inherited

Measurements of the screen. (0, 0, screenWidth, screenHeight).

Its safe to use as filterArea or hitArea for the whole stage.

type number inherited

The type of the renderer.

Default Value:
  • PIXI.RENDERER_TYPE.UNKNOWN
See:

useContextAlpha boolean inherited

Pass-thru setting for the the canvas' context alpha property. This is typically not something you need to fiddle with. If you want transparency, use backgroundAlpha.

view HTMLCanvasElement inherited

The canvas element that everything is drawn to.

width number readonly inherited

Same as view.width, actual number of pixels in the canvas by horizontal.

Default Value:
  • 800

_backgroundColor number protected inherited

The background color as a number.

_backgroundColorRgba Array<number> protected inherited

The background color as an [R, G, B, A] array.

_backgroundColorString string protected inherited

The background color as a string.

_lastObjectRendered PIXI.DisplayObject protected inherited

The last root object that the renderer tried to render.

Inherited Methods

From class PIXI.AbstractRenderer

generateTexture (displayObject, scaleMode, resolution, region) PIXI.RenderTexture inherited

AbstractRenderer.ts:294

Useful function that returns a texture of the display object that can then be used to create sprites This can be quite useful if your displayObject is complicated and needs to be reused multiple times.

Name Type Attributes Description
displayObject IRenderableObject

The displayObject the object will be generated from.
scaleMode PIXI.SCALE_MODES <optional>

The scale mode of the texture.
resolution number <optional>

The resolution / device pixel ratio of the texture being generated.
region PIXI.Rectangle <optional>

The region of the displayObject, that shall be rendered, if no region is specified, defaults to the local bounds of the displayObject.
Returns:
Type Description
PIXI.RenderTexture A texture of the graphics object.

initPlugins (staticMap) void protected inherited

AbstractRenderer.ts:225

Initialize the plugins.

Name Type Description
staticMap object

The dictionary of statically saved plugins.