Skip to main content

Erosion Burn

game.ts
const renderLayers = {
  foreground: 1 << 0,
};

const displaySize = 480;

export const createErosionBurnGame = async (): Promise<Game> => {
  const { game, world, renderContext, time } = createGame('demo-game');

  createCamera(world, {
    isStatic: true,
    cullingMask: renderLayers.foreground,
    verticalWorldUnits: DEMO_VERTICAL_WORLD_UNITS,
  });

  const sprite = await createErosionSprite(
    renderContext,
    renderLayers.foreground,
  );

  const scale = displaySize / sprite.width;

  const entity = world.createEntity();

  addPositionComponent(world, entity);

  addRotationComponent(world, entity);

  addScaleComponent(world, entity, {
    local: new Vector2(scale, scale),
    world: new Vector2(scale, scale),
  });

  addSpriteComponent(world, entity, sprite);

  world.addTag(entity, erosionId);

  world.addSystem(createCameraEcsSystem(time));
  world.addSystem(createRenderEcsSystem(renderContext));
  world.addSystem(createErosionEcsSystem(time));

  return game;
};

This demo shows a custom fragment shader that erodes a sprite's alpha using a Perlin noise texture, while a gradient texture colors the leading edge bright yellow, orange and white to sell the look of it smouldering away. The shader reuses the engine's default sprite vertex shader and just swaps in a custom fragment shader with extra textures and uniforms, the same pattern used for the bricks in the Brick Breaker demo, here extended to take multiple textures on one material.