Gameable Engine

Ease a value with a tween ​

Goal ​

A HUD meter eases from zero to one over one simulated second.

Files you will edit ​

  • src/game.ts

Steps ​

  1. Use this isolated definition in the existing template shell. Register a custom lane by name so a snapshot can restore both animation and value.

    ts
    import { createTweens, defineGame, type GameContext } from 'gameable';

const fill = new Float32Array(1);
const model = { bars: { fill: { value: 0, max: 1 } }, message: 'Filling' };
const tweens = createTweens({
  capacity: 1,
  lanes: { fill },
  onDone() {
    model.message = 'Full';
  },
});
function animate(ctx: GameContext): void {
  tweens.step(ctx);
  model.bars.fill.value = fill[0];
  ctx.hud.set(model);
}
export default defineGame({
  init(ctx) {
    tweens.reset();
    fill[0] = 0;
    model.message = 'Filling';
    tweens.start(ctx, fill, 0, 1, 1, 'quadOut');
  },
  systems: [{ run: animate, on: 'both' }],
  snapshot: () => tweens.snapshot(),
  restore: (state) => {
    tweens.restore(state);
    model.message = fill[0] === 1 ? 'Full' : 'Filling';
  },
});

  2. Change the easing name to linear to compare the midpoint. Starting the same lane/index again replaces its tween without a completion callback. For a moving entity, pass Transform.x and its entity id instead: stepping inside a game system automatically marks Transform movement. Reset and stop leave values intact, so explicitly reset custom lanes as above.

Verify ​

sh
npm run dev

At 60 Hz the fill meter is 0.75 after 30 steps and exactly 1 after 60; the message becomes Full. With linear, the midpoint is 0.5. Reload starts at zero. This is presentation and may run on both room sides.

See also ​