mwg API
    Preparing search index...

    Class ScreenEffects

    A full-screen colour wash over everything else: fade out to black between floors, flash white on a critical hit, hold a red tint while poisoned.

    Driven by update(dt) against a plain elapsed timer rather than a promise-returning tween, matching Toast and FloatingText: a single frame boundary per phase keeps the whole sequence reproducible one update call at a time, which a test (or a recorded replay) can drive without waiting on a microtask to settle. update returns true on the exact frame an effect finishes, the same way Projectile.update reports arrival, so a caller sequences "fade out, swap the level, fade in" without needing await.

    Add the container last, or to a layer above the world: this draws over whatever is beneath it in the display list and nothing else about draw order is its business.

    import { ScreenEffects } from '@datamoc/mw_games/two-d/render';

    const effects = new ScreenEffects({ width: 640, height: 360 });
    // add effects last: game.stage.addChild(effects);

    effects.flash(0.2, 0xffffff); // a critical hit
    const done = effects.update(1 / 60);
    console.log(done); // false - still mid-flash
    console.log(effects.isBusy); // true

    effects.setTint(0x336633, 0.3); // held green cast while poisoned

    sequence chains steps end to end, driven by the same update(dt) - isBusy stays true and update keeps returning false across every step boundary, only returning true once the whole sequence finishes, so a caller still needs no await for the genre-standard hold-then-fade-back transition fadeOut/fadeIn/flash alone cannot express:

    effects.sequence([
    	{ kind: 'fadeOut', duration: 0.3 },
    	{ kind: 'hold', duration: 0.5 }, // the new area loads while the screen is covered
    	{ kind: 'fadeIn', duration: 0.3 },
    ]);
    while (!effects.update(1 / 60)) continue; // drives every step, one frame at a time

    Hierarchy

    • Container
      • ScreenEffects
    Index
    constructor
    isBusy washAlpha
    clear fadeIn fadeOut flash sequence setTint setViewport update
    • get washAlpha(): number

      The wash's own opacity, 0 (clear) to 1 (fully covering).

      Distinct from this container's inherited alpha, which scales the whole effect layer including the wash - a game that fades the effect layer itself still reads the wash here.

      Returns number

    • clears back to fully transparent - the second half, once the new scene is built

      Parameters

      • duration: number
      • Optionalcolor: number

      Returns void

    • darkens to fully cover the screen - the first half of a transition between scenes

      Parameters

      • duration: number
      • Optionalcolor: number

      Returns void

    • A quick wash in and straight back out again, peaking at peak partway through.

      One phase rather than a fade-out chained into a fade-in, because a flash is a single gesture: interrupting it halfway should cancel the whole thing, not leave the screen stuck at full white waiting for a second phase that no longer runs.

      Parameters

      • duration: number
      • Optionalcolor: number
      • peak: number = 1

      Returns void

    • Runs steps end to end - fade, hold, flash, in any order and count - driven by the same update(dt) as a single call: isBusy stays true and update keeps returning false at every step boundary, only returning true once the last step finishes. See this class's own doc comment for the hold-then-fade-back example this exists for. Replaces anything currently running or queued, the same as any other call here.

      Parameters

      • steps: readonly ScreenEffectStep[]

      Returns void

    • Holds a colour at a fixed opacity until changed - a poisoned green cast, an underwater blue. Cancels any running fade, flash or sequence, since those drive the same one overlay.

      Parameters

      • color: number
      • alpha: number

      Returns void

    • call from a scene's own resize, so the wash keeps covering the whole canvas

      Parameters

      • width: number
      • height: number

      Returns void

    • Parameters

      • dt: number

      Returns boolean

      true on the single frame the running effect (or the whole sequence) completes

    Settings
    Member Visibility

    On This Page
    Constructors
    Accessors
    Methods