Class RadialGradientEffect

Readonlydestroyed

enabled

shared

false
Copy

clone

• clone(): ShaderEffect

  Create an independent copy of this effect, compiled as its own GL program. Use it when several renderables need the same effect with different uniform values — a single instance has a single set of uniforms, shared by everything it is assigned to.

  The clone copies the recipe: the fragment source, float precision, every uniform value set so far, and any extra textures bound via setTexture (the clone uploads and owns its own GL copies). It does NOT copy ownership or lifecycle state — in particular the clone's shared flag is always reset to false, even when cloning a shared shader (such as one returned by loader.getShader()): the clone is caller-owned and will be auto-destroyed by the renderable it is assigned to, exactly like a hand-constructed effect. Set shared = true on the clone yourself if you intend to reuse it across several renderables.

  Returns ShaderEffect

  a new, caller-owned effect (shared === false)

  Example

  // the loader's shader is ONE shared program — one uniform state for all
  sprite.addPostEffect(loader.getShader("flash"));
  // the boss needs its own intensity — clone a private, caller-owned copy
  const bossFlash = loader.getShader("flash").clone();
  boss.addPostEffect(bossFlash);
  bossFlash.setUniform("uIntensity", 0.9);
  Copy

destroy

• destroy(): void

  destroy this shader effect. Idempotent — calling destroy twice is safe. Unsubscribes from the renderer's context-lost / restored events so a destroyed effect is not auto-reactivated.

  Returns void

setTexture

• setTexture(
      name: string,
      image:
          | HTMLCanvasElement
          | HTMLImageElement
          | OffscreenCanvas
          | ImageBitmap
          | Texture2d,
      repeat?: "repeat" | "no-repeat" | "repeat-x" | "repeat-y",
  ): ShaderEffect

  Bind an extra texture to a named sampler2D uniform in this shader, so a custom effect can read a second texture — a noise map, mask, gradient, flow/lookup table — besides the sprite/target it post-processes (uSampler). The engine uploads, caches, and re-binds it to a reserved texture unit each time the effect draws, and points the sampler uniform at it — no raw WebGL texture-unit juggling.

  Declare the sampler in your fragment (uniform sampler2D <name>;) and pass that name here. Any engine texture works — a Texture2d asset (NoiseTexture2d, TextureAtlas, …) can be passed directly, or a raw drawable source. No-op in Canvas mode.

  Parameters

  • name: string

    the sampler2D uniform name declared in the fragment

  • image: HTMLCanvasElement | HTMLImageElement | OffscreenCanvas | ImageBitmap | Texture2d

    the texture: an engine texture asset, or a raw drawable source

  • Optionalrepeat: "repeat" | "no-repeat" | "repeat-x" | "repeat-y" = "no-repeat"

    wrap mode; use "repeat" for a tiled/scrolled texture

  Returns ShaderEffect

  this effect for chaining

  Example

  // "water": distort the sprite by a static noise texture scrolled over time
  const noise = new me.NoiseTexture2d({ width: 256, height: 256, seamless: true });
  const water = new me.ShaderEffect(renderer, `
      uniform sampler2D uNoise;
      uniform float uTime;
      vec4 apply(vec4 color, vec2 uv) {
          vec2 flow = texture2D(uNoise, uv + uTime * 0.03).rg - 0.5;
          return texture2D(uSampler, uv + flow * 0.02);
      }`);
  water.setTexture("uNoise", noise, "repeat");
  waterSprite.addPostEffect(water);
  // each frame, in your Stage's update(dt):
  water.setTime(me.timer.getTime() / 1000);
  Copy

setTime

• setTime(seconds: number): ShaderEffect

  Set the shader's uTime uniform (elapsed time, in seconds). A convenience over setUniform("uTime", ...); call it once per frame from your update loop to animate a shader that declares uniform float uTime (e.g. scrolling a static noise texture's UVs, pulsing, waving). Drive it with whatever clock you like — real time, a paused/scaled/scrubbed one.

  No-op if the shader does not declare a uTime uniform (nothing to update), or in Canvas mode. The engine does NOT call this for you — animation is opt-in, exactly like re-baking a NoiseTexture2d with update(dt).

  Parameters

  • seconds: number

    elapsed time in seconds

  Returns ShaderEffect

  this effect for chaining

  Example

  // a shader that scrolls a static seamless noise texture over time
  const flow = new me.ShaderEffect(renderer, `
      uniform float uTime;
      vec4 apply(vec4 color, vec2 uv) {
          return texture2D(uSampler, uv + vec2(uTime * 0.05, 0.0));
      }`);
  mySprite.addPostEffect(flow);
  // then in your Stage's update(dt):
  flow.setTime(me.timer.getTime() / 1000);
  Copy

setUniform

• setUniform(
      name: string,
      value: number | boolean | object | number[] | Float32Array<ArrayBufferLike>,
  ): void

  Set the uniform to the given value

  Parameters

  • name: string

    the uniform name

  • value: number | boolean | object | number[] | Float32Array<ArrayBufferLike>

    the value to assign to that uniform. Scalars (float, int, bool) take a number or a boolean; vectors and matrices take an array, a Float32Array, or any object exposing toArray() — which is every Vector2d, Vector3d, Color and Matrix3d.

    Sprites drawn one after the other through the same effect share one draw call. A new value draws the sprites queued before it first, so each sprite draws with the values it was given; the value it already has changes nothing, and keeps the draw shared.

  Returns void

  Example

  // a scalar the body declares as `uniform float uStrength;`
  fx.setUniform("uStrength", 0.5);
  // a vec3 — an array, or anything with toArray()
  fx.setUniform("uTint", [1.0, 0.82, 0.55]);
  fx.setUniform("uOrigin", new me.Vector2d(0.5, 0.5));
  Copy

  Example

  // one outline shared by every enemy: drawn in a single call. Marked
  // shared, so the first enemy destroyed does not destroy it for the rest
  const outline = new me.OutlineEffect(renderer, { color: [1, 1, 1] });
  outline.shared = true;
  for (const enemy of enemies) {
      enemy.addPostEffect(outline);
  }
  Copy