pixijs

SKILL.md

PixiJS Usage Guide for Copilot

When working with PixiJS tasks, follow these guidelines:

How to Use This Skill

  1. Understand the task context - Determine what type of PixiJS work is needed
  2. Locate relevant documentation - Use the sections below to find appropriate references
  3. Apply the documentation - Read the linked files for detailed information
  4. Implement solutions - Use the patterns and examples from the documentation

Common Task Scenarios

Creating a PixiJS Application

  • Start with: app.md for application setup
  • Reference: app.Application.html.md for API details
  • Plugins: app-1.md (Ticker), app-2.md (Resize), app-3.md (Culler)

Working with Display Objects

  • Sprites: scene-3.md and scene.Sprite.html.md
  • Containers: scene-1.md and scene.Container.html.md
  • Graphics: scene-6.md and scene.Graphics.html.md
  • Text: scene-9.md through scene-13.md

Handling User Input

  • Event system: events.md
  • Event types: events.FederatedPointerEvent.html.md, events.FederatedMouseEvent.html.md

Loading Assets

  • Asset management: assets.md
  • Loading: assets.Assets.html.md
  • Spritesheets: assets.Spritesheet.html.md

Performance Optimization

  • General tips: core-concepts-7.md
  • Render groups: core-concepts-3.md
  • Culling: core-concepts-2.md
  • Cache as texture: scene-2.md

Applying Filters

  • Overview: filters.md
  • Common filters: filters.BlurFilter.html.md, filters.ColorMatrixFilter.html.md

Documentation Sections

The following sections are automatically generated from PixiJS documentation. Each link points to detailed information about specific topics.

PixiJS

PixiJS is the fastest, most lightweight 2D library available for the web, working across all devices and allowing you to create rich, interactive graphics and cross-platform applications using WebGL, WebGPU, and Canvas as a fallback.

core-concepts

  • Architecture: A comprehensive guide to the architecture of PixiJS, including its major components and extension system.
  • Scene Graph: Understanding the PixiJS scene graph, its structure, and how to manage parent-child relationships, render order, and culling for optimal performance.
  • Render Loop: Understanding the PixiJS render loop, including how it updates the scene graph and renders frames efficiently.
  • Render Groups: Learn how to use Render Groups in PixiJS to optimize rendering performance by grouping scene elements for efficient GPU processing.
  • Render Layers: Understanding PixiJS Render Layers for controlling rendering order independently of logical hierarchy.
  • Environments: Learn how PixiJS adapts to different environments like browsers, Web Workers, and custom execution contexts, and how to configure it for your needs.
  • Garbage Collection: Managing GPU resources and garbage collection in PixiJS for optimal performance.
  • Performance Tips: Performance tips for optimizing PixiJS applications, covering general practices and specific techniques for maximizing rendering efficiency.

accessibility

  • Overview: Use PixiJS's built-in accessibility features to make your applications inclusive for users with disabilities.
  • AccessibilitySystem: The Accessibility system provides screen reader and keyboard navigation support for PixiJS content.

app

  • Overview: Create and configure a PixiJS Application with WebGL, WebGPU, or Canvas rendering, built-in plugins, and custom application plugins.
  • Ticker Plugin: Use the TickerPlugin in PixiJS for rendering and frame updates.
  • Resize Plugin: Use the ResizePlugin in PixiJS to make your application responsive to window or element size changes.
  • Culler Plugin: Use the CullerPlugin in PixiJS to skip rendering for offscreen objects.
  • Application: Convenience class to create a new PixiJS application.
  • CullerPlugin: An {@link Application} plugin that automatically culls (hides) display objects that are outside the visible screen area.
  • ResizePlugin: Middleware for Application's resize functionality.
  • TickerPlugin: Middleware for Application's {@link Ticker} functionality.

assets

  • Overview: Learn how to load, cache, and manage assets in PixiJS using the Assets API, including textures, fonts, spritesheets, and bundles with format detection and background loading.
  • Resolver: Learn how to use PixiJS's asset resolver for dynamic, multi-format asset loading with platform-aware optimizations.
  • Manifests and Bundles: Learn how to manage assets in PixiJS using manifests and bundles, and how to automate this with AssetPack.
  • Background Loader: Learn how to use the PixiJS background loader to load assets in the background, improving application responsiveness and reducing load times.
  • Compressed Textures: Learn how to use compressed textures in PixiJS for lower memory usage and faster GPU uploads.
  • SVGs: Learn how to render SVGs in PixiJS, including using them as textures or graphics, and understand their advantages and limitations.
  • Assets: The global Assets class is a singleton that manages loading, caching, and unloading of all resources in your PixiJS application.
  • Spritesheet: Utility class for maintaining reference to a collection of Textures on a single Spritesheet.

color

  • Overview: Learn how to use the Color class in PixiJS for creating, converting, and manipulating colors across multiple formats including hex, RGB, HSL, and CSS color names.
  • Color: Color utility class for managing colors in various formats.

environment

  • Overview: Learn how to configure PixiJS for different environments including browsers, Web Workers, and custom platforms using the DOMAdapter system.

events

  • Overview: Learn how to handle mouse, touch, and pointer input in PixiJS using the federated event system with bubbling, capturing, and delegation.
  • EventSystem: The system for handling UI events in PixiJS applications.
  • FederatedEvent: A DOM-compatible synthetic event implementation for PixiJS's event system.
  • FederatedMouseEvent: A specialized event class for mouse interactions in PixiJS applications.
  • FederatedPointerEvent: A specialized event class for pointer interactions in PixiJS applications.
  • FederatedWheelEvent: A specialized event class for wheel/scroll interactions in PixiJS applications.

extensions

  • Overview: Learn how to use the PixiJS extension system to register, remove, and create modular plugins for rendering, asset loading, and more.
  • extensions: Global registration system for all PixiJS extensions.

filters

  • Overview: Learn how to apply post-processing effects like blur, color adjustments, noise, displacement, and custom shaders to display objects in PixiJS.
  • AlphaFilter: Simplest filter - applies alpha.
  • BlurFilter: The BlurFilter applies a Gaussian blur to an object.
  • ColorBlend: The final color has the hue and saturation of the top color, while using the luminosity of the bottom color.
  • ColorBurnBlend: The final color is the result of inverting the bottom color, dividing the value by the top color, and inverting that value.
  • ColorDodgeBlend: The final color is the result of dividing the bottom color by the inverse of the top color.
  • ColorMatrixFilter: The ColorMatrixFilter class lets you apply color transformations to display objects using a 5x4 matrix.
  • DarkenBlend: The final color is composed of the darkest values of each color channel.
  • DifferenceBlend: The final color is the result of subtracting the darker of the two colors from the lighter one.
  • DisplacementFilter: A filter that applies a displacement map effect using a sprite's texture.
  • DivideBlend: The Divide blend mode divides the RGB channel values of the bottom layer by those of the top layer.
  • ExclusionBlend: The final color is similar to difference, but with less contrast.
  • HardLightBlend: The final color is the result of multiply if the top color is darker, or screen if the top color is lighter.
  • HardMixBlend: Hard defines each of the color channel values of the blend color to the RGB values of the base color.
  • LightenBlend: The final color is composed of the lightest values of each color channel.
  • LinearBurnBlend: Looks at the color information in each channel and darkens the base color to reflect the blend color by increasing the contrast between the two.
  • LinearDodgeBlend: Looks at the color information in each channel and brightens the base color to reflect the blend color by decreasing contrast between the two.
  • LinearLightBlend: Increase or decrease brightness by burning or dodging color values, based on the blend color Available as container.blendMode = 'linear-light' after importing pixi.js/advanced-blend-modes.
  • LuminosityBlend: The final color has the luminosity of the top color, while using the hue and saturation of the bottom color.
  • NegationBlend: Implements the Negation blend mode which creates an inverted effect based on the brightness values.
  • NoiseFilter: A filter that adds configurable random noise to rendered content.
  • OverlayBlend: The final color is the result of multiply if the bottom color is darker, or screen if the bottom color is lighter.
  • PinLightBlend: Replaces colors based on the blend color.
  • SaturationBlend: The final color has the saturation of the top color, while using the hue and luminosity of the bottom color.
  • SoftLightBlend: The final color is similar to hard-light, but softer.
  • SubtractBlend: Subtracts the blend from the base color using each color channel Available as container.blendMode = 'subtract' after importing pixi.js/advanced-blend-modes.
  • VividLightBlend: Darkens values darker than 50% gray and lightens those brighter than 50% gray, creating a dramatic effect.

maths

  • Overview: Learn how to use PixiJS math utilities for 2D transformations, geometry, shapes, and hit testing.
  • Circle: The Circle object represents a circle shape in a two-dimensional coordinate system.
  • Ellipse: The Ellipse object is used to help draw graphics and can also be used to specify a hit area for containers.
  • Matrix: A fast matrix for 2D transformations.
  • ObservablePoint: The ObservablePoint object represents a location in a two-dimensional coordinate system.
  • Point: The Point object represents a location in a two-dimensional coordinate system, where x represents the position on the horizontal axis and y represents the position on the vertical axis.
  • Polygon: A class to define a shape via user defined coordinates.
  • Rectangle: The Rectangle object represents a rectangular area defined by its position and dimensions.
  • RoundedRectangle: The RoundedRectangle object represents a rectangle with rounded corners.
  • Triangle: A class to define a shape of a triangle via user defined coordinates.
  • DEG_TO_RAD: Conversion factor for converting degrees to radians.
  • PI_2: Two Pi.
  • RAD_TO_DEG: Conversion factor for converting radians to degrees.

rendering

  • Overview: Learn how PixiJS renderers draw scenes using WebGL, WebGPU, and Canvas 2D, including renderer selection, systems, and render targets.
  • Textures: Learn how PixiJS handles textures, their lifecycle, creation, and types, and how to manage GPU resources.
  • Bounds: A representation of an axis-aligned bounding box (AABB) used for efficient collision detection and culling.
  • CanvasRenderer: The Canvas PixiJS Renderer.
  • ExtractSystem: System for exporting content from a renderer.
  • GenerateTextureSystem: System that manages the generation of textures from display objects in the renderer.
  • Texture: A texture stores the information that represents an image or part of an image.
  • WebGLRenderer: The WebGL PixiJS Renderer.
  • WebGPURenderer: The WebGPU PixiJS Renderer.
  • autoDetectRenderer: Automatically determines the most appropriate renderer for the current environment.

scene

  • Overview: Learn how to use scene objects in PixiJS, including containers, sprites, transforms, and more. This guide covers the basics of building your scene graph.
  • Container: Learn how to create and manage Containers in PixiJS, including adding/removing children, sorting, and caching as textures.
  • Cache as Texture: Learn how to use cacheAsTexture in PixiJS to optimize rendering performance by caching containers as textures. Understand its benefits, usage, and guidelines.
  • Sprite: Learn how to create and manipulate Sprites in PixiJS, including texture updates, scaling, and transformations.
  • NineSlice Sprite: Learn how to use the NineSliceSprite class in PixiJS for creating scalable UI elements with preserved corners and edges.
  • Tiling Sprite: Learn how to use the TilingSprite class in PixiJS for rendering repeating textures efficiently across a defined area.
  • Graphics: Learn how to use PixiJS Graphics to create shapes, manage graphics contexts, and optimize performance in your projects.
  • Graphics Fill: Learn how to use the fill method in PixiJS to fill shapes with colors, textures, and gradients, enhancing your graphics and text rendering.
  • Graphics Pixel Line: Learn how to use the pixelLine property in PixiJS Graphics API to create crisp, pixel-perfect lines that remain consistent under scaling and transformations.
  • Text: Learn how to use PixiJS's text rendering classes Text, BitmapText, and HTMLText.
  • Text (Canvas): Learn how to use the Text class in PixiJS to render styled text as display objects, including dynamic updates and font loading.
  • Bitmap Text: Learn how to use BitmapText in PixiJS for high-performance text rendering with pre-generated texture atlases.
  • HTML Text: Learn how to use HTMLText in PixiJS to render styled HTML strings within your WebGL canvas, enabling complex typography and inline formatting.
  • Text Style: Learn how to use the TextStyle class in PixiJS to style text objects, including fills, strokes, shadows, and more.
  • SplitText & SplitBitmapText
  • Mesh: Learn how to create and manipulate meshes in PixiJS v8, including custom geometry, shaders, and built-in mesh types like MeshSimple, MeshRope, and PerspectiveMesh.
  • Particle Container: Learn how to use the ParticleContainer and Particle classes in PixiJS for high-performance particle systems.
  • AnimatedSprite: An AnimatedSprite is a simple way to display an animation depicted by a list of textures.
  • Container: Container is a general-purpose display object that holds children.
  • Culler: The Culler class is responsible for managing and culling containers.
  • DOMContainer: The DOMContainer object is used to render DOM elements within the PixiJS scene graph.
  • FillGradient: Class representing a gradient fill that can be used to fill shapes and text.
  • FillPattern: A class that represents a fill pattern for use in Text and Graphics fills.
  • Graphics: The Graphics class is primarily used to render primitive shapes such as lines, circles and rectangles to the display, and to color and fill them.
  • GraphicsContext: The GraphicsContext class allows for the creation of lightweight objects that contain instructions for drawing shapes and paths.
  • MeshPlane: A mesh that renders a texture mapped to a plane with configurable vertex density.
  • MeshRope: A specialized mesh that renders a texture along a path defined by points.
  • NineSlicePlane: Please use the {@link NineSliceSprite} class instead.
  • NineSliceSprite: The NineSliceSprite allows you to stretch a texture using 9-slice scaling.
  • Particle: Represents a single particle within a particle container.
  • ParticleContainer: The ParticleContainer class is a highly optimized container that can render 1000s or particles at great speed.
  • PerspectiveMesh: A perspective mesh that allows you to draw a 2d plane with perspective.
  • RenderLayer: The RenderLayer API provides a way to control the rendering order of objects independently of their logical parent-child relationships in the scene graph.
  • Sprite: The Sprite object is one of the most important objects in PixiJS.
  • TilingSprite: A TilingSprite is a fast and efficient way to render a repeating texture across a given area.

text

  • AbstractSplitText: A container that splits text into individually manipulatable segments (lines, words, and characters) for advanced text effects and animations.
  • BitmapFont: A BitmapFont object represents a particular font face, size, and style.
  • BitmapText: A BitmapText object creates text using pre-rendered bitmap fonts.
  • HTMLText: A HTMLText object creates text using HTML/CSS rendering with SVG foreignObject.
  • HTMLTextStyle: A TextStyle object rendered by the HTMLTextSystem.
  • SplitBitmapText: A container that splits text into individually manipulatable segments (lines, words, and characters) for advanced text effects and animations.
  • SplitText: A container that splits text into individually manipulatable segments (lines, words, and characters) for advanced text effects and animations.
  • Text: A powerful text rendering class that creates one or multiple lines of text using the Canvas API.
  • TextStyle: A TextStyle Object contains information to decorate Text objects.

gif

  • Overview: Learn how to load, display, and control animated GIFs in PixiJS using GifSource and GifSprite.
  • GifSprite: Runtime object for playing animated GIFs with advanced playback control.

ticker

  • Overview: Use the Ticker class in PixiJS to run game loops, animations, and time-based updates with priority control and FPS limiting.
  • Ticker: A Ticker class that runs an update loop that other objects listen to.

utils

  • Overview: Learn about PixiJS utility functions for browser detection, device capabilities, data manipulation, and canvas operations.
  • Transform: The Transform class facilitates the manipulation of a 2D transformation matrix through user-friendly properties: position, scale, rotation, skew, and pivot.
  • isMobile: Detects whether the device is mobile and what type of mobile device it is.
  • path: Path utilities for working with URLs and file paths in a cross-platform way.
  • isWebGLSupported: Helper for checking for WebGL support in the current environment.
  • isWebGPUSupported: Helper for checking for WebGPU support in the current environment.

migrations

Optional

  • BackgroundLoader: The BackgroundLoader handles loading assets passively in the background to prepare them for future use.
  • Cache: A global cache for all assets in your PixiJS application.
  • Loader: The Loader is responsible for loading all assets, such as images, spritesheets, audio files, etc.
  • Resolver: A class that is responsible for resolving mapping asset URLs to keys.
  • basisTranscoderUrls: The urls for the Basis transcoder files.
  • ktxTranscoderUrls: The urls for the KTX transcoder library.
  • loadBasis: Loads Basis textures using a web worker.
  • loadBitmapFont: Loader plugin for loading bitmap fonts.
  • loadDDS: Loads DDS textures.
  • loadJson: A simple loader plugin for loading json data
  • loadKTX: Loads KTX textures.
  • loadKTX2: Loader parser for KTX2 textures.
  • loadSvg: A loader plugin for loading SVG data as textures or graphics contexts.
  • loadTextures: A simple plugin to load our textures! This makes use of imageBitmaps where available.
  • loadTxt: A simple loader plugin for loading text data
  • loadVideoTextures: A simple plugin to load video textures.
  • loadWebFont: A loader plugin for handling web fonts
  • spritesheetAsset: Asset extension for loading spritesheets
  • WorkerManager: Manages a pool of web workers for loading ImageBitmap objects asynchronously.
  • crossOrigin: Set cross origin based detecting the url and the crossorigin
  • setBasisTranscoderPath: Sets the Basis transcoder paths.
  • setKTXTranscoderPath: Sets the paths for the KTX transcoder library.
  • BrowserAdapter: This is an implementation of the {@link Adapter} interface.
  • DOMAdapter: The DOMAdapter is a singleton that allows PixiJS to perform DOM operations, such as creating a canvas.
  • WebWorkerAdapter: This is an implementation of the {@link Adapter} interface.
  • autoDetectEnvironment
  • loadEnvironmentExtensions: Automatically detects the environment and loads the appropriate extensions.
  • EventBoundary: Event boundaries are "barriers" where events coming from an upstream scene are modified before downstream propagation.
  • EventsTicker: This class handles automatic firing of PointerEvents in the case where the pointer is stationary for too long.
  • BlurFilterPass: The BlurFilterPass applies a horizontal or vertical Gaussian blur to an object.
  • Filter: The Filter class is the base for all filter effects used in Pixi.js As it extends a shader, it requires that a glProgram is parsed in to work with WebGL and a gpuProgram for WebGPU.
  • groupD8: Implements the dihedral group D8, which is similar to [group D4]{@link http://mathworld.wolfram.com/DihedralGroupD4.html}; D8 is the same but with diagonals, and it is used for texture rotations.
  • floatEqual: 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.
  • isPow2: Checks if a number is a power of two.
  • lineIntersection: Computes the point where non-coincident and non-parallel Lines intersect.
  • log2: Computes ceil of log base 2 log2
  • nextPow2: Rounds to next power of two.
  • segmentIntersection: Computes the point where non-coincident and non-parallel segments intersect.
  • AbstractRenderer: The base class for a PixiJS Renderer.
  • AbstractTextSystem: Base system plugin to the renderer to manage canvas text.
  • AlphaMask: AlphaMask is an effect that applies a mask to a container using the alpha channel of a sprite.
  • BackgroundSystem: The background system manages the background color and alpha of the main view.
  • Batch: A batch pool is used to store batches when they are not currently in use.
  • Batcher: A batcher is used to batch together objects with the same texture.
  • BatcherPipe: A pipe that batches elements into batches and sends them to the renderer.
  • BatchGeometry: This class represents a geometry used for batching in the rendering system.
  • BatchTextureArray: Used by the batcher to build texture batches.
  • BindGroup: A bind group is a collection of resources that are bound together for use by a shader.
  • BindGroupSystem: This manages the WebGPU bind groups.
  • Buffer: A wrapper for a WebGPU/WebGL Buffer.
  • BufferImageSource: A texture source that uses a TypedArray or ArrayBuffer as its resource.
  • BufferResource: A resource that can be bound to a bind group and used in a shader.
  • CanvasContextSystem: Canvas 2D context system for the CanvasRenderer.
  • CanvasFilterSystem: Canvas2D filter system that applies compatible filters using CSS filter strings.
  • CanvasGraphicsContextSystem: A system that manages the rendering of GraphicsContexts for Canvas2D.
  • CanvasLimitsSystem: Basic limits for CanvasRenderer.
  • CanvasRendererTextSystem: System plugin to the renderer to manage canvas text for Canvas2D.
  • CanvasRenderTargetAdaptor: Canvas adaptor for render targets.
  • CanvasRenderTargetSystem: The Canvas adaptor for the render target system.
  • CanvasSource: A texture source that uses a canvas as its resource.
  • CanvasTextSystem: System plugin to the renderer to manage canvas text for GPU renderers.
  • CanvasTextureSystem: Texture helper system for CanvasRenderer.
  • ColorMask: The ColorMask effect allows you to apply a color mask to the rendering process.
  • CompressedSource: A texture source that uses a compressed resource, such as an array of Uint8Arrays.
  • CubeTexture: A cube texture that can be bound to shaders (samplerCube / texture_cube).
  • CubeTextureSource: A {@link TextureSource} that represents a cube texture (6 faces).
  • DefaultBatcher: The default batcher is used to batch quads and meshes.
  • DefaultShader: DefaultShader is a specialized shader class designed for batch rendering.
  • ExternalSource: A texture source that uses a GPU texture from an external library (e.g., Three.js).
  • FilterSystem: System that manages the filter pipeline
  • GCSystem: A unified garbage collection system for managing GPU resources.
  • Geometry: A Geometry is a low-level object that represents the structure of 2D shapes in terms of vertices and attributes.
  • GlBackBufferSystem: For blend modes you need to know what pixels you are actually drawing to.
  • GlBufferSystem: System plugin to the renderer to manage buffers.
  • GlColorMaskSystem: The system that handles color masking for the WebGL.
  • GlContextSystem: System plugin to the renderer to manage the context
  • GlEncoderSystem: The system that handles encoding commands for the WebGL.
  • GlGeometrySystem: System plugin to the renderer to manage geometry.
  • GlLimitsSystem: The GpuLimitsSystem provides information about the capabilities and limitations of the underlying GPU.
  • GlobalUniformSystem: System plugin to the renderer to manage global uniforms for the renderer.
  • GlProgram: A wrapper for a WebGL Program.
  • GlRenderTargetSystem: The WebGL adaptor for the render target system.
  • GlShaderSystem: System plugin to the renderer to manage the shaders for WebGL.
  • GlStateSystem: System plugin to the renderer to manage WebGL state machines
  • GlStencilSystem: This manages the stencil buffer.
  • GlTextureSystem: The system for managing textures in WebGL.
  • GlUboSystem: System plugin to the renderer to manage uniform buffers.
  • GlUniformGroupSystem: System plugin to the renderer to manage shaders.
  • GpuBufferSystem: System plugin to the renderer to manage buffers.
  • GpuColorMaskSystem: The system that handles color masking for the GPU.
  • GpuDeviceSystem: System plugin to the renderer to manage the context.
  • GpuEncoderSystem: The system that handles encoding commands for the GPU.
  • GpuLimitsSystem: The GpuLimitsSystem provides information about the capabilities and limitations of the underlying GPU.
  • GpuProgram: A wrapper for a WebGPU Program, specifically designed for the WebGPU renderer.
  • GpuRenderTargetSystem: The WebGL adaptor for the render target system.
  • GpuShaderSystem: A system that manages the rendering of GpuPrograms.
  • GpuStateSystem: System plugin to the renderer to manage WebGL state machines.
  • GpuStencilSystem: This manages the stencil buffer.
  • GpuTextureSystem: The system that handles textures for the GPU.
  • GpuUboSystem: System plugin to the renderer to manage uniform buffers.
  • GraphicsContextSystem: A system that manages the rendering of GraphicsContexts.
  • HelloSystem: A simple system responsible for initiating the renderer.
  • HTMLTextSystem: System plugin to the renderer to manage HTMLText
  • ImageSource: A texture source that uses an image-like resource as its resource.
  • InstructionSet: A set of instructions that can be executed by the renderer.
  • MaskEffectManager: A class that manages the conversion of masks to mask effects.
  • PipelineSystem: A system that creates and manages the GPU pipelines.
  • PrepareBase: Part of the prepare system.
  • PrepareQueue: Part of the prepare system.
  • PrepareSystem: The prepare system provides renderer-specific plugins for pre-rendering DisplayObjects.
  • PrepareUpload: Part of the prepare system.
  • RenderableGCSystem: The RenderableGCSystem is responsible for cleaning up GPU resources that are no longer being used.
  • RenderGroup: A RenderGroup is a class that is responsible for I generating a set of instructions that are used to render the root container and its children.
  • RenderTarget: A class that describes what the renderers are rendering to.
  • RenderTargetSystem: A system that manages render targets.
  • RenderTexture: A render texture, extends Texture.
  • SchedulerSystem: The SchedulerSystem manages scheduled tasks with specific intervals.
  • ScissorMask: ScissorMask is an effect that applies a scissor mask to a container.
  • Shader: The Shader class is an integral part of the PixiJS graphics pipeline.
  • State: This is a WebGL state, and is is passed to {@link GlStateSystem}.
  • StencilMask: A mask that uses the stencil buffer to clip the rendering of a container.
  • TextureGCSystem: System plugin to the renderer to manage texture garbage collection on the GPU, ensuring that it does not get clogged up with textures that are no longer being used.
  • TextureMatrix: Class controls uv mapping from Texture normal space to BaseTexture normal space.
  • TexturePoolClass: Texture pool, used by FilterSystem and plugins.
  • TextureSource: A TextureSource stores the information that represents an image.
  • TextureStyle: A texture style describes how a texture should be sampled by a shader.
  • UboSystem: System plugin to the renderer to manage uniform buffers.
  • UniformGroup: Uniform group holds uniform map and some ID's for work UniformGroup has two modes: 1: Normal mode Normal mode will upload the uniforms with individual function calls as required.
  • VideoSource: A texture source that uses a video as its resource.
  • ViewSystem: The view system manages the main canvas that is attached to the DOM.
  • BLEND_TO_NPM: The map of blend modes supported by Pixi
  • DRAW_MODES
  • SCALE_MODES: The scale modes that are supported by pixi.
  • TexturePool: The default texture pool instance.
  • WRAP_MODES: The wrap modes that are supported by pixi.
  • fastCopy: Copies from one ArrayBuffer to another.
  • GraphicsPath: The GraphicsPath class is designed to represent a graphical path consisting of multiple drawing instructions.
  • Mesh: Base mesh class.
  • MeshGeometry: A geometry used to batch multiple meshes with the same texture.
  • MeshSimple: A simplified mesh class that provides an easy way to create and manipulate textured meshes with direct vertex control.
  • NineSliceGeometry: The NineSliceGeometry class allows you to create a NineSlicePlane object.
  • PerspectivePlaneGeometry: A PerspectivePlaneGeometry allows you to draw a 2d plane with perspective.
  • PlaneGeometry: The PlaneGeometry allows you to draw a 2d plane
  • RenderContainer: A container that allows for custom rendering logic.
  • RopeGeometry: RopeGeometry allows you to draw a geometry across several points and then manipulate these points.
  • ShapePath: The ShapePath class acts as a bridge between high-level drawing commands and the lower-level GraphicsContext rendering engine.
  • ViewContainer: A ViewContainer is a type of container that represents a view.
  • shapeBuilders: A record of shape builders, keyed by shape type.
  • styleAttributes: A map of SVG style attributes and their default values.
  • buildGeometryFromPath: When building a mesh, it helps to leverage the simple API we have in GraphicsPath as it can often be easier to define the geometry in a more human-readable way.
  • AbstractBitmapFont: An abstract representation of a bitmap font.
  • AbstractText: An abstract Text class, used by all text type in Pixi.
  • BitmapFontManager: The BitmapFontManager is a helper that exists to install and uninstall fonts into the cache for BitmapText objects.
  • CanvasTextMetrics: The TextMetrics object represents the measurement of a block of text with a specified style.
  • GifSource: Resource provided to GifSprite instances.
  • GifAsset: Handle the loading of GIF images.
  • Pool: A generic class for managing a pool of items.
  • PoolGroupClass: A group of pools that can be used to store objects of different types.
  • ViewableBuffer: Flexible wrapper around ArrayBuffer that also provides typed array views on demand.
  • DATA_URI: Regexp for data URI.
  • earcut: A polygon triangulation library
  • formatShader: formats a shader so its more pleasant to read
  • sayHello: Prints out the version and renderer information for this running instance of PixiJS.
Weekly Installs
8
Repository
teages/skills
First Seen
Mar 1, 2026
Installed on
claude-code8
opencode7
github-copilot7
codex7
amp7
cline7