Skip to main content

component-Tiles

Tiles​

type Tiles = {
  id?: string;
  children?: Component[];
  width?: f32;
  height?: f32;
  background_color_rgba?: string;
  tile_aspect_ratio?: string;
  margin?: f32;
  padding?: f32;
  horizontal_align?: "left" | "right" | "justified" | "center";
  vertical_align?: "top" | "center" | "bottom" | "justified";
  transition?: Transition;
}

Properties​

  • id - Id of a component.
  • children - List of component's children.
  • width - Width of a component in pixels. Exact behavior might be different based on the parent component:
    • If the parent component is a layout, check sections "Absolute positioning" and "Static positioning" of that component.
    • If the parent component is not a layout, then this field is required.
  • height - Height of a component in pixels. Exact behavior might be different based on the parent component:
    • If the parent component is a layout, check sections "Absolute positioning" and "Static positioning" of that component.
    • If the parent component is not a layout, then this field is required.
  • background_color_rgba - (default="#00000000") Background color in a "#RRGGBBAA" format.
  • tile_aspect_ratio - (default="16:9") Aspect ratio of a tile in "W:H" format, where W and H are integers.
  • margin - (default=0) Margin of each tile in pixels.
  • padding - (default=0) Padding on each tile in pixels.
  • horizontal_align - (default="center") Horizontal alignment of tiles.
  • vertical_align - (default="center") Vertical alignment of tiles.
  • transition - Defines how this component will behave during a scene update. This will only have an effect if the previous scene already contained a Tiles component with the same id.

Transition​

type Transition = {
  duration_ms: f64;
  easing_function?: EasingFunction;
}

Properties​

  • duration_ms - Duration of a transition in milliseconds.
  • easing_function - (default="linear") Easing function to be used for the transition.

EasingFunction​

type EasingFunction = 
  | { function_name: "linear"; }
  | { function_name: "bounce"; }
  | {
      function_name: "cubic_bezier";
      points: [f64, f64, f64, f64];
    }

Easing functions are used to interpolate between two values over time.

Custom easing functions can be implemented with cubic Bézier. The control points are defined with points field by providing four numerical values: x1, y1, x2 and y2. The x1 and x2 values have to be in the range [0; 1]. The cubic Bézier result is clamped to the range [0; 1]. You can find example control point configurations here.