pixi.js
    Preparing search index...

    Class CanvasTextSystemAdvanced

    System plugin to the renderer to manage canvas text.

    Implements

    Index

    Constructors

    Methods

    • Decreases the reference count for a texture associated with a text key. When the reference count reaches zero, the texture is returned to the pool.

      Parameters

      • textKey: string

        The unique key identifying the text style configuration

      Returns void

      This method is crucial for memory management, ensuring textures are properly cleaned up when they are no longer needed by any Text instances.

    • Generic destroy methods to be overridden by the subclass

      Returns void

    • Gets or creates a managed texture for a Text object. This method handles texture reuse and reference counting.

      Parameters

      • text: Text

        The Text object that needs a texture

      Returns Texture<TextureSource<any>>

      A Texture instance that represents the rendered text

      This method performs the following:

      1. Sets the appropriate resolution based on auto-resolution settings
      2. Checks if a texture already exists for the text's style
      3. Creates a new texture if needed or returns an existing one
      4. Manages reference counting for texture reuse
    • Gets the current reference count for a texture associated with a text key.

      Parameters

      • textKey: string

        The unique key identifying the text style configuration

      Returns number

      The number of Text instances currently using this texture

    • Parameters

      • text: string
      • resolution: number
      • style: TextStyle
      • textKey: string

      Returns Texture

      since 8.0.0

    • This is a function that will create a texture from a text string, style and resolution. Useful if you want to make a texture of your text and use if for various other pixi things!

      Parameters

      • options: CanvasTextOptions

        The options of the text that will be used to generate the texture.

        Constructor options used for Text instances. These options extend TextOptions with canvas-specific features like texture styling.

        • Optionalanchor?: number | PointData

          The anchor point of the text that controls the origin point for positioning and rotation. Can be a number (same value for x/y) or a PointData object.

          • (0,0) is top-left
          • (0.5,0.5) is center
          • (1,1) is bottom-right
          // Set anchor to center
          const text = new Text({
          text: 'Hello Pixi!',
          anchor: 0.5 // Same as { x: 0.5, y: 0.5 }
          });
          // Set anchor to top-left
          const text2 = new Text({
          text: 'Hello Pixi!',
          anchor: { x: 0, y: 0 } // Top-left corner
          });
          // Set anchor to bottom-right
          const text3 = new Text({
          text: 'Hello Pixi!',
          anchor: { x: 1, y: 1 } // Bottom-right corner
          });
          { x: 0, y: 0 }
          
        • Optionalresolution?: number

          The resolution/device pixel ratio for rendering. Higher values result in sharper text at the cost of performance. Set to null for auto-resolution based on device.

          const text = new Text({
          text: 'Hello Pixi!',
          resolution: 2 // High DPI for sharper text
          });
          const autoResText = new Text({
          text: 'Auto Resolution',
          resolution: null // Use device's pixel ratio
          });
          null
          
        • OptionalroundPixels?: boolean

          Whether to round the x/y position to whole pixels. Enabling can prevent anti-aliasing of text edges but may cause slight position shifting.

          const text = new Text({
          text: 'Rounded Text',
          roundPixels: true // Rounds position to whole pixels
          });
          @default
        • Optionalstyle?: TextStyle | TextStyleOptions

          The style configuration for the text. Can be a TextStyle instance or a configuration object. Supports canvas text styles, HTML text styles, and bitmap text styles.

          const text = new Text({
          text: 'Styled Text',
          style: {
          fontSize: 24,
          fill: 0xff1010, // Red color
          fontFamily: 'Arial',
          align: 'center', // Center alignment
          stroke: { color: '#4a1850', width: 5 }, // Purple stroke
          dropShadow: {
          color: '#000000', // Black shadow
          blur: 4, // Shadow blur
          distance: 6 // Shadow distance
          }
          }
          });
          const htmlText = new HTMLText({
          text: 'HTML Styled Text',
          style: {
          fontSize: '20px',
          fill: 'blue',
          fontFamily: 'Verdana',
          }
          });
          const bitmapText = new BitmapText({
          text: 'Bitmap Styled Text',
          style: {
          fontName: 'Arial',
          fontSize: 32,
          }
        • Optionaltext?: TextString

          The text content to display. Use '\n' for line breaks. Accepts strings, numbers, or objects with toString() method.

          const text = new Text({
          text: 'Hello Pixi!',
          });
          const multilineText = new Text({
          text: 'Line 1\nLine 2\nLine 3',
          });
          const numberText = new Text({
          text: 12345, // Will be converted to '12345'
          });
          const objectText = new Text({
          text: { toString: () => 'Object Text' }, // Custom toString
          });
          ''
          
        • Optional AdvancedtextureStyle?: TextureStyleOptions | TextureStyle

          Optional texture style to use for the text texture. This allows fine control over how the text is rendered to a texture before being displayed.

          The texture style can affect:

          • Scale mode (nearest/linear)
          • Resolution
          • Format (rgb/rgba)
          • Alpha handling
          const text = new Text({
          text: 'Crisp Text',
          textureStyle: {
          scaleMode: 'nearest', // Pixel-perfect scaling
          }
          });

      Returns Texture

      the newly created texture

    • Renders text to its canvas, and updates its texture.

      Returns void

      since 8.10.0

    • Returns a texture that was created wit the above getTexture function. Handy if you are done with a texture and want to return it to the pool.

      Parameters

      • texture: Texture

        The texture to be returned.

      Returns void