pixi.js
    Preparing search index...

    Interface FillPatternOptions

    Options for creating a FillPattern. A fill pattern tiles a Texture to fill shapes or text. Patterns are commonly used for repeating backgrounds, decorative fills, and shape-fitted textures.

    // Tiled background — repeats continuously across world space, so adjacent
    // shapes share the same tiling grid.
    const bricks = new FillPattern({
        texture: await Assets.load('bricks.png'),
        repetition: 'repeat',
    });

    // One tile fitted to each shape — useful for shape-fitted decoration.
    const fitted = new FillPattern({
        texture: await Assets.load('bunny.png'),
        repetition: 'repeat',
        textureSpace: 'local',
    });

    // Tile only along the x-axis; clamp vertically.
    const stripes = new FillPattern({
        texture: await Assets.load('stripe.png'),
        repetition: 'repeat-x',
    });

    // Single image, no tiling — clamp on both axes.
    const logo = new FillPattern({
        texture: await Assets.load('logo.png'),
        repetition: 'no-repeat',
    });
    interface FillPatternOptions {
        repetition?: PatternRepetition;
        texture: Texture;
        textureSpace?: TextureSpace;
    }
    Index

    Properties

    repetition? texture textureSpace?

    Properties

    repetition?: PatternRepetition

    How the pattern repeats across the filled area. If omitted, the texture's existing wrap mode is used.

    • 'repeat': tile in both X and Y.
    • 'repeat-x': tile horizontally; clamp vertically.
    • 'repeat-y': tile vertically; clamp horizontally.
    • 'no-repeat': do not tile; clamp on both axes.
    texture: Texture

    The texture to use as the pattern source. The texture is tiled across the filled area according to FillPatternOptions.repetition and mapped to shapes according to FillPatternOptions.textureSpace.

    textureSpace?: TextureSpace

    Whether pattern coordinates are evaluated in local or global space.

    • 'global' (default): the pattern tiles continuously across world space, so adjacent shapes share the same tiling grid. Best for backgrounds and seamless textures.
    • 'local': the pattern is mapped to each shape's bounds, so one tile fits the shape. Combine with FillPattern.setTransform to subdivide a shape into a tile grid.
    'global'

    Settings

    Member Visibility

    On This Page

    Properties