Gradient Repeat Mode: Triangular

Demonstrates the triangular repeat mode for gradients, which creates a mirrored back-and-forth pattern as the gradient repeats across the Game Object.

800 × 600

GitHub

class Example extends Phaser.Scene
{
    create ()
    {
        this.add.gradient({
            repeatMode: 3, // TRIANGULAR
            start: { x: 0.25, y: 0.5 },
            shape: { x: 0.25, y: 0 }
        }, 400, 300, 800, 400);

        // Highlight central gradient unit.
        this.add.rectangle(300, 300, 200, 400).setStrokeStyle(1, 0xff0000, 0.5);
    }
}

const config = {
    scale: { mode: Phaser.Scale.FIT },
    type: Phaser.WEBGL,
    width: 800,
    height: 600,
    backgroundColor: '#2d2d2d',
    parent: 'game-container',
    scene: Example
};

const game = new Phaser.Game(config);

More in Gradient14 examples

Linear Gradient ShapeDemonstrates creating and animating a linear gradient Game Object, including adjusting its position and rotation.

Radial Gradient Shape ModeDemonstrates how to create and animate a radial gradient using shapeMode, including color band configuration and center point positioning.

Advanced Gradient Offsets and ShapesDemonstrates how different gradient shape modes, such as bilinear and symmetric conic, create unique visual effects like mirroring and kaleidoscopic patterns when their offsets and shapes are manipulated over time.

Animate Gradient OffsetDemonstrates animating the offset property of a radial gradient and using captureFrame to apply it as a dynamic displacement map for an image.