/** * @import {Color} from "../math/color.ts"; * @import {Vector2d} from "../math/vector2d.ts"; */ /** * A Trail renderable that draws a fading, tapering ribbon behind a moving object. * Points are sampled from a target or added manually, and rendered as connected * quads with interpolated width and color. * @category Game Objects * @example * // simple single-color trail following a sprite * const trail = new Trail({ target: player, color: "#44aaff", width: 20 }); * app.world.addChild(trail); * @example * // gradient trail following a sprite (fire effect) * const trail = new Trail({ * target: player, * width: 30, * gradient: ["#ffff00", "#ff4400", "#ff000000"], * }); * app.world.addChild(trail); * @example * // rainbow trail with custom width curve * const trail = new Trail({ * target: player, * width: 40, * widthCurve: [1, 1, 0.8, 0.4, 0], * gradient: ["#ff0000", "#ff8800", "#ffff00", "#00ff00", "#0088ff", "#8800ff00"], * }); * app.world.addChild(trail); * @example * // manual mode (e.g. sword slash) * const slash = new Trail({ width: 24, lifetime: 200, color: "#ffffff" }); * app.world.addChild(slash); * // call each frame during the attack animation * slash.addPoint(swordTip.x, swordTip.y); * @see {@link Renderable} */ export default class Trail extends Renderable { /** * @param {object} [options] - trail options * @param {Renderable|Vector2d} [options.target] - auto-follow target * @param {number} [options.length=20] - max number of points * @param {number} [options.lifetime=500] - point lifetime in ms * @param {number} [options.minDistance=4] - min distance between samples in px * @param {number} [options.width=10] - max trail width in px * @param {number[]} [options.widthCurve=[1, 0]] - width multiplier curve (0=head, 1=tail) * @param {Color|string} [options.color="#ffffff"] - single trail color. Ignored if `gradient` is set. * @param {(Color|string|{pos: number, color: Color|string})[]} [options.gradient] - color gradient. Overrides `color`. * @param {number} [options.opacity=1.0] - trail opacity (0.0–1.0) * @param {string} [options.blendMode="normal"] - blend mode */ constructor(options?: { target?: Vector2d | Renderable | undefined; length?: number | undefined; lifetime?: number | undefined; minDistance?: number | undefined; width?: number | undefined; widthCurve?: number[] | undefined; color?: string | Color | undefined; gradient?: (string | Color | { pos: number; color: Color | string; })[] | undefined; opacity?: number | undefined; blendMode?: string | undefined; }); /** @type {Renderable|Vector2d|null} */ target: Renderable | Vector2d | null; /** @type {number} */ maxPoints: number; /** @type {number} */ lifetime: number; /** @type {number} */ minDistance: number; /** @type {number[]} */ widthCurve: number[]; /** @ignore */ _gradient: Gradient; /** @ignore */ _points: any[]; /** @ignore */ _segmentColor: Color; /** @ignore */ _n0: { x: number; y: number; }; /** @ignore */ _n1: { x: number; y: number; }; /** * add a point to the trail * @param {number} x - x position * @param {number} y - y position */ addPoint(x: number, y: number): void; /** @ignore */ update(dt: any): boolean; /** @ignore */ draw(renderer: any): void; /** clear all trail points */ clear(): void; /** * Build a Gradient from trail constructor options. * @param {object} options - trail constructor options * @returns {Gradient} * @ignore */ _buildGradient(options: object): Gradient; /** @ignore */ destroy(): void; } import Renderable from "./renderable.js"; import type { Vector2d } from "../math/vector2d.ts"; import { Gradient } from "../video/gradient.js"; import type { Color } from "../math/color.ts"; //# sourceMappingURL=trail.d.ts.map