Home › Overview › MainModule › Flux

Responsive

The screen and the player as shared nodes: viewport, UI scale, breakpoint, input device and accessibility settings. Available as Flux.Responsive. For safe areas (the topbar, notches, rounded corners), set the engine's ScreenGui.ScreenInsets (CoreUISafeInsets or DeviceSafeInsets) and ScreenGui.SafeAreaCompatibility instead.

Flux.new "UIScale" { Scale = Flux.Responsive.scale }

Types

ScaleMode type

type ScaleMode = "min" | "width" | "height" | "max"

Breakpoint type

type Breakpoint = "phone" | "tablet" | "desktop"

Platform type

type Platform = "console" | "mobile" | "pc" | "vr"

DisplaySize type

type DisplaySize = "Small" | "Medium" | "Large"

Input type

type Input = "keyboard" | "touch" | "gamepad"

TextSize type

type TextSize = "Medium" | "Large" | "Larger" | "Largest"

Breakpoints type

type Breakpoints = { phone: number, tablet: number }

Config type

type Config = {
	reference: Vector2,
	mode: ScaleMode,
	min: number?,
	max: number?,
	breakpoints: Breakpoints,
}

PartialConfig type

type PartialConfig = {
	reference: Vector2?,
	mode: ScaleMode?,
	min: number?,
	max: number?,
	breakpoints: Breakpoints?,
	viewport: Graph.Reactive<Vector2>?,
}

Properties

config Read Only

Responsive.config: Config

Live defaults shared by every derived node; mutate once at startup.

Open Documentation

platform Read Only

Responsive.platform: Graph.Node<Platform>

The device class: "vr", "console" (ten-foot interface), "pc" (keyboard and mouse), or "mobile". Live on the client, so plugging in a keyboard and mouse or putting on a headset changes it; "pc" elsewhere.

Open Documentation

viewport Read Only

Responsive.viewport: Graph.Node<Vector2>

The active camera's ViewportSize as a node, live on the client.

Open Documentation

scale Read Only

Responsive.scale: Graph.Node<number>

UIScale factor derived from viewport; 1.0 at config.reference.

Open Documentation

breakpoint Read Only

Responsive.breakpoint: Graph.Node<Breakpoint>

Size class derived from viewport width.

Open Documentation

displaySize Read Only

Responsive.displaySize: Graph.Node<DisplaySize>

How large the screen is physically (GuiService.ViewportDisplaySize): "Small" (phones, tablets, handhelds), "Medium" (laptops and monitors, the default) or "Large" (TVs). Live on the client; where the engine lacks the property, a ten-foot interface counts as "Large".

Open Documentation

input Read Only

Responsive.input: Graph.Node<Input>

The input the player is using right now: "keyboard" (keyboard and mouse), "touch", or "gamepad". Follows UserInputService.PreferredInput live on the client, so picking up a controller switches it; elsewhere it holds the mode matching platform.

Open Documentation

textSize Read Only

Responsive.textSize: Graph.Node<TextSize>

The player's preferred text size (GuiService.PreferredTextSize): "Medium" (default), "Large", "Larger", or "Largest". The engine already draws text larger to match, so use it to make room around text, never to multiply TextSize again.

Open Documentation

reducedMotion Read Only

Responsive.reducedMotion: Graph.Node<boolean>

Whether the player asked for reduced motion (GuiService.ReducedMotionEnabled). When true, swap movement and scaling animations for instant changes or simple fades.

Open Documentation

preferredTransparency Read Only

Responsive.preferredTransparency: Graph.Node<number>

The player's background transparency preference (GuiService.PreferredTransparency), from 0 (opaque backgrounds) to 1 (the default). Multiply translucent BackgroundTransparency values by it.

Open Documentation

Functions

scaleOf

Responsive.scaleOf(partial: PartialConfig?): Graph.Node<number>

Factory escape hatch: a scale node with per-surface config (merged over defaults).

Open Documentation

breakpointOf

Responsive.breakpointOf(partial: PartialConfig?): Graph.Node<Breakpoint>

Factory escape hatch: a breakpoint node with per-surface thresholds.

Open Documentation