Skip to main content

Easing Functions

linear

easeInOutSine

easeInOutQuint

easeInBack

easeInOutBack

easeInOutElastic

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

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

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

  await createEasingRows(world, renderContext, renderLayers.foreground);

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

  return game;
};

Each lane sweeps a ball back and forth using one of the easing functions from the animations module, so their curves can be compared side by side. Watch how easeInBack, easeInOutBack and easeInOutElastic momentarily overshoot the lane before settling.