raea/time

Time in raea is frames. useCurrentFrame() is the frame being drawn, counted from the start of the nearest <Sequence>; it's Bevy's Time<Virtual> stepped at the composition's frame rate, so a render and a live play of the same input draw the same frames. useVideoConfig() gives the composition's size, frame rate and length. <Clock> is what steps them; the renderer and the app put one around every composition.

import { useCurrentFrame, useVideoConfig } from "raea/time";

function Progress() {
  const frame = useCurrentFrame();
  const { durationInFrames, width } = useVideoConfig();
  return <div style={{ width: (frame / durationInFrames) * width, height: 8, background: "#fff" }} />;
}

import { Clock, useCurrentFrame, useLocalTime, useVideoConfig } from "raea/time"

raea/time exports 1 component, 3 hooks, 7 types. Bevy's counterpart: bevy_time. Source: sdk/raea/src/time.ts.

#Components

#Clock

What time a composition is at: the frame, frame rate, size and length its hooks read, and its words, perception and input. The renderer, the live view and tests put one around every composition; a composition never needs its own.

#Hooks

#useCurrentFrame

The frame being rendered, counted from the start of the nearest enclosing Sequence.

function useCurrentFrame(): number

#useLocalTime

The time where it's called: the nearest Sequence's (its local frame, where it starts, and the size it gives its children), or the Clock's outside any. caller names the hook in errors. The hook under useCurrentFrame, for components of your own that need more than the frame.

function useLocalTime(caller: string): LocalTime

#useVideoConfig

The settings of the composition being rendered (a Sequence's width and height win inside it).

function useVideoConfig(): VideoConfig

#Types

#ClockProps

The props of Clock, tabled there.

#FrameInput

One frame's input for a game.

#InputTimeline

Recorded input by composition frame; frames without an entry had no input.

type InputTimeline = Record<number, Partial<FrameInput> | undefined>

#LocalTime

The local time a subtree sees: its own frame, and the composition frame its frame 0 falls on.

#Perception

What perception saw at this frame: the largest face, and the platform's safe area (composition px).

#TimelineWord

#VideoConfig