Home › Overview › 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

Default responsive configuration shared by derived nodes. Mutate once at startup before building UI.

Open Documentation

platform Read Only

Responsive.platform: Graph.Node<Platform>

Active device class ("vr", "console", "pc", or "mobile"), updated live on the client ("pc" off-client).

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>

UI scale factor derived from viewport (1.0 at config.reference).

Open Documentation

breakpoint Read Only

Responsive.breakpoint: Graph.Node<Breakpoint>

Size class ("phone" | "tablet" | "desktop") derived from viewport width.

Open Documentation

displaySize Read Only

Responsive.displaySize: Graph.Node<DisplaySize>

Physical screen size class ("Small", "Medium", or "Large") mirroring GuiService.ViewportDisplaySize.

Open Documentation

input Read Only

Responsive.input: Graph.Node<Input>

Active input mode ("keyboard", "touch", or "gamepad") tracking UserInputService.PreferredInput on the client.

Open Documentation

textSize Read Only

Responsive.textSize: Graph.Node<TextSize>

Player's preferred text size ("Medium", "Large", "Larger", or "Largest") from GuiService.PreferredTextSize. Roblox scales rendered text automatically, so use this to adjust surrounding container spacing rather than multiplying TextSize.

Open Documentation

reducedMotion Read Only

Responsive.reducedMotion: Graph.Node<boolean>

Tracks GuiService.ReducedMotionEnabled (true when the player prefers reduced motion).

Open Documentation

preferredTransparency Read Only

Responsive.preferredTransparency: Graph.Node<number>

Tracks GuiService.PreferredTransparency from 0 (opaque backgrounds) to 1 (default).

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