Skip to content

User Interface ​

Stonescript provides a system for building complex layouts and high-performance User Interfaces — buttons, text, animations, and more — drawn directly on the game screen.

Structure ​

An invisible root Panel exists by default at the base of the system. UI elements are added to the root Panel, including additional Panels, forming a tree:

root
│
├─ Panel
│  ├─ Text
│  ├─ ASCII-art (Anim)
│  └─ Button
│
├─ Panel
│  └─ Panel
│     └─ Text
...

All elements are drawn together, in a single pass, in the order they are added.

ui namespace ​

FunctionReturnsDescription
ui.rootPanelThe base Panel at the root of the UI tree
ui.AddAnim(string)AnimAdds an Anim object to the root Panel
ui.AddButton()ButtonAdds a Button to the root Panel
ui.AddCanvas()CanvasAdds a Canvas to the root Panel
ui.AddPanel()PanelAdds a Panel to the root Panel
ui.AddStyle()intRegisters a new border style, returns its ID
ui.AddText() / ui.AddText(string)TextAdds a Text element to the root Panel
ui.Clear()—Removes all UI elements
ui.OpenInv()—Opens the inventory screen
ui.OpenMind()—Opens the Mind Stone screen
ui.ShowBanner(str) / ui.ShowBanner(str, str)—Displays the animated location banner with up to two messages

Component (base type) ​

All UI types — Panel, Text, Button, Anim — inherit these properties:

PropertyTypeDescription
component.xintX position relative to docked position
component.yintY position relative to docked position
component.wintWidth
component.hintHeight (default 5)
component.absoluteX / .absoluteYint (read-only)Position relative to the screen
component.anchorstringInternal pivot. Default "center_center"
component.dockstringExternal pivot / position inside parent. If unsure, use same value as anchor
component.ax / .aystringX/Y part of anchor: left, center, right / top, center, bottom
component.dx / .dystringX/Y part of dock
component.parentPanel (read-only)Reference to the parent Panel
component.visiblebool/stringVisibility. Default "inherit". Values: true, false, "inherit"
component.Recycle()—Removes the component; it will be repurposed in future ui.Add_() calls

Panel ​

A container for other UI elements.

Property / MethodTypeDescription
panel.childrenComponent[]Array of child components
panel.clipboolClip child components to the Panel's bounds
panel.colorstringPanel background color (hex)
panel.styleintBorder style ID, default 1, range -8 to 8
panel.Add(Component) / panel.Add(Component, int)—Adds a component to this Panel
panel.Clear()—Removes all children (recycled)
panel.Remove(Component) / panel.Remove(int)—Removes a specific child (recycled)

Text ​

PropertyTypeDescription
text.alignstringAlignment: "left" (default), "center", "right"
text.colorstringText color (hex)
text.linesstring[]Array of rendered lines (excludes color metadata)
text.textstringFull text content. Supports color tags: [color=#rrggbb]...[/color]

Button ​

Property / MethodTypeDescription
button.textstringLabel inside the button
button.tcolorstringText color (hex)
button.bcolorstringBorder color (hex)
button.hcolorstringHighlight color when pressed (hex)
button.soundstringSound when pressed, default "confirm"
button.styleintBorder style ID, default 1, range -8 to 8
button.SetPressed(f)—Function called when button is pressed; receives the button as first arg
button.SetDown(f)—Function called on first contact (press begins)
button.SetUp(f)—Function called when depress ends on top of the button

Anim ​

ASCII sprite-sheet animations.

Property / MethodTypeDescription
anim.colorstringTint color (hex)
anim.durationintAnimation length in frames
anim.flipX / .flipYboolFlip art horizontally / vertically
anim.frameintCurrent animation frame
anim.gamePauseboolIf true, auto-pauses when game is paused
anim.loopboolRestart from the beginning when finished
anim.playingbool (read-only)true if currently playing
anim.pausedbool (read-only)true if playing but paused via anim.Pause()
anim.pivotX / .pivotYintAdditional pivot offset
anim.playOnStartboolBegin playing as soon as possible
anim.AddLayer(string)AnimAdds a new ASCII sprite on top; all layers stay in sync
anim.Load(string)—Assigns a new ASCII sprite sheet
anim.Pause()—Suspends playback at current frame
anim.Play()—Begins or resumes playback
anim.Stop()—Suspends playback and resets to first frame

Canvas ​

A component optimised for drawing arbitrary glyphs and colors at specific positions.

Property / MethodTypeDescription
canvas.blendstringBlend mode: Opaque, Multiply, Divide, Add, Subtract. Default "opaque"
canvas.Get(x, y)stringReturns glyph at position x, y
canvas.Set(str)—Fills the entire canvas with the given glyph
canvas.Set(x, y, str)—Sets position x, y to the given glyph
canvas.Set(x, y, fg, str) / canvas.Set(x, y, fg, bg, str)—Sets position with foreground and optional background color
canvas.SetFG(color)—Sets foreground color for the entire canvas
canvas.SetFG(x, y, color)—Sets foreground color at position x, y
canvas.SetBG(color)—Sets background color for the entire canvas
canvas.SetBG(x, y, color)—Sets background color at position x, y

Example — Banner on a keypress ​

?time = 120
  ui.ShowBanner("Hello World!")

Example — Translated button ​

var button = ui.AddButton()
button.text = te.xt(Play)
// Change your language in settings to see the button translate

See also ​

Stonescript is part of Stone Story RPG.