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:113
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.transparent boolean <optional>
 false

If the render view is transparent.
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.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 static 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.

PIXI.Renderer.textureManager PIXI.TextureSystem Deprecated : since 5.0.0 static

See:

batch PIXI.BatchSystem

Batch system instance

context PIXI.ContextSystem

Context system instance

extract PIXI.Extract

Collection of methods for extracting data (image, pixels, etc.) from a display object or render texture

See:

filter PIXI.FilterSystem

Filter system instance

framebuffer PIXI.FramebufferSystem

Framebuffer system instance

geometry PIXI.GeometrySystem

Geometry system instance

gl WebGLRenderingContext

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

globalUniforms PIXI.UniformGroup

Global uniforms

mask PIXI.MaskSystem

Mask system instance

projection PIXI.ProjectionSystem

Projection system instance

renderingToScreen boolean

Flag if we are rendering to the screen vs renderTexture

Default Value:
  • true

renderTexture PIXI.RenderTextureSystem

RenderTexture system instance

scissor PIXI.ScissorSystem

Scissor system instance

shader PIXI.ShaderSystem

Shader system instance

state PIXI.StateSystem

State system instance

stencil PIXI.StencilSystem

Stencil system instance

texture PIXI.TextureSystem

Texture system instance

textureGC PIXI.TextureGCSystem

Texture garbage collector system instance

Methods

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

Renderer.ts:517

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:324

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:469

Clear the frame buffer

destroy (removeView) void overrides

Renderer.ts:478

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:376

Renders the object to its WebGL view

Name Type Attributes Default Description
displayObject PIXI.DisplayObject

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:457

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:444

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:366

Fired when the WebGL context is set.

Name Type Description
gl WebGLRenderingContext

WebGL context.

postrender

Renderer.ts:354

Fired after rendering finishes.

prerender

Renderer.ts:360

Fired before rendering starts.

resize overrides

AbstractRenderer.ts:280

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.

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 inherited

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

Default Value:
  • 600

options Object 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.

transparent boolean inherited

Whether the render view is transparent.

type number inherited

The type of the renderer.

Default Value:
  • PIXI.RENDERER_TYPE.UNKNOWN
See:

view HTMLCanvasElement inherited

The canvas element that everything is drawn to.

width number 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] 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:290

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 PIXI.DisplayObject

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:221

Initialize the plugins.

Name Type Description
staticMap object

The dictionary of statically saved plugins.