or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

2d-controls.md2d-layout.md3d-controls.md3d-materials.mdindex.mdinput-controls.mdutilities.md
tile.json

2d-controls.mddocs/

2D Controls

Core 2D interface functionality including buttons, text, images, input fields, and basic controls for overlay-style GUIs.

Capabilities

Button Controls

Interactive button controls with text, styling, and event handling.

class Button extends Rectangle {
  static CreateSimpleButton(name?: string, text?: string): Button;
  static CreateImageButton(name: string, text: string, imageUrl: string): Button;
  static CreateImageOnlyButton(name: string, imageUrl: string): Button;
  
  textBlock: Nullable<TextBlock>;
  image: Nullable<Image>;
  pointerEnterAnimation: Nullable<() => void>;
  pointerOutAnimation: Nullable<() => void>;
  pointerDownAnimation: Nullable<() => void>;
  pointerUpAnimation: Nullable<() => void>;
  
  onPointerClickObservable: Observable<Vector2WithInfo>;
  onPointerEnterObservable: Observable<Button>;
  onPointerOutObservable: Observable<Button>;
  onPointerDownObservable: Observable<Vector2WithInfo>;
  onPointerUpObservable: Observable<Vector2WithInfo>;
}

class ToggleButton extends Button {
  isChecked: boolean;
  group: string;
}

class FocusableButton extends Button {
  onFocusObservable: Observable<FocusableButton>;
  onBlurObservable: Observable<FocusableButton>;
  focus(): void;
  blur(): void;
}

Usage Examples:

import { AdvancedDynamicTexture, Button } from "@babylonjs/gui";

// Create simple button
const button = Button.CreateSimpleButton("myButton", "Click Me");
button.widthInPixels = 200;
button.heightInPixels = 50;
button.color = "white";
button.cornerRadius = 10;
button.background = "#4CAF50";

// Handle click events
button.onPointerClickObservable.add(() => {
    console.log("Button clicked!");
});

// Create image button
const imageButton = Button.CreateImageButton("imgBtn", "Save", "./save-icon.png");
imageButton.background = "#2196F3";

Text Controls

Text display and formatting controls for labels, content, and styled text.

class TextBlock extends Control {
  text: string;
  fontSize: string | number;
  fontFamily: string;
  fontStyle: string;
  fontWeight: string;
  color: string;
  textHorizontalAlignment: number;
  textVerticalAlignment: number;
  textWrapping: boolean;
  lineSpacing: string | number;
  shadowOffsetX: number;
  shadowOffsetY: number;
  shadowColor: string;
  shadowBlur: number;
  
  computeExpectedHeight(): number;
}

class TextWrapper {
  constructor(text: string, textBlock: TextBlock);
  text: string;
  lines: string[];
  isWrapped: boolean;
}

Usage Examples:

import { TextBlock } from "@babylonjs/gui";

// Create text block
const textBlock = new TextBlock("text", "Hello World");
textBlock.fontSize = 24;
textBlock.color = "white";
textBlock.fontFamily = "Arial";
textBlock.textHorizontalAlignment = Control.HORIZONTAL_ALIGNMENT_CENTER;

// Text with wrapping
const wrappedText = new TextBlock("wrapped", "This is a long text that will wrap");
wrappedText.textWrapping = true;
wrappedText.widthInPixels = 200;

Image Controls

Image display controls with scaling, animation, and various rendering modes.

class Image extends Control {
  source: string;
  sourceLeft: number;
  sourceTop: number;
  sourceWidth: number;
  sourceHeight: number;
  stretch: number;
  autoScale: boolean;
  cellId: number;
  cellWidth: number;
  cellHeight: number;
  
  // Stretch constants
  static readonly STRETCH_NONE: number;
  static readonly STRETCH_FILL: number;
  static readonly STRETCH_UNIFORM: number;
  static readonly STRETCH_UNIFORM_TO_FILL: number;
  static readonly STRETCH_NINE_PATCH: number;
  
  onImageLoadedObservable: Observable<Image>;
  onSVGAttributesComputedObservable: Observable<{[key: string]: string}>;
}

Usage Examples:

import { Image } from "@babylonjs/gui";

// Create image control
const image = new Image("logo", "./company-logo.png");
image.widthInPixels = 100;
image.heightInPixels = 100;
image.stretch = Image.STRETCH_UNIFORM;

// Sprite animation
const animatedImage = new Image("sprite", "./sprite-sheet.png");
animatedImage.cellWidth = 64;
animatedImage.cellHeight = 64;
animatedImage.cellId = 0; // First frame

// Auto-scaling image
const autoImage = new Image("auto", "./responsive-image.png");
autoImage.autoScale = true;

Shape Controls

Basic shape controls for rectangles, ellipses, and lines.

class Rectangle extends Control {
  thickness: number;
  cornerRadius: number;
  background: string;
}

class Ellipse extends Control {
  thickness: number;
  background: string;
}

class Line extends Control {
  x1: string | number;
  y1: string | number;
  x2: string | number;
  y2: string | number;
  lineWidth: number;
  dash: number[];
  
  // Line cap constants
  static readonly LineCapRound: number;
  static readonly LineCapSquare: number;
  static readonly LineCapButt: number;
}

Usage Examples:

import { Rectangle, Ellipse, Line } from "@babylonjs/gui";

// Create rectangle
const rect = new Rectangle("rect");
rect.widthInPixels = 200;
rect.heightInPixels = 100;
rect.cornerRadius = 10;
rect.color = "white";
rect.thickness = 2;
rect.background = "#FF5722";

// Create circle
const circle = new Ellipse("circle");
circle.widthInPixels = 100;
circle.heightInPixels = 100;
circle.color = "blue";
circle.thickness = 3;

// Create line
const line = new Line("line");
line.x1 = 10;
line.y1 = 10;
line.x2 = 100;
line.y2 = 100;
line.lineWidth = 3;
line.color = "red";

Selection Controls

Radio buttons and checkboxes for user selection and boolean input.

class RadioButton extends Control {
  isChecked: boolean;
  group: string;
  checkSizeRatio: number;
  thickness: number;
  background: string;
  
  onIsCheckedChangedObservable: Observable<boolean>;
}

class Checkbox extends Control {
  isChecked: boolean;
  checkSizeRatio: number;
  thickness: number;
  background: string;
  
  onIsCheckedChangedObservable: Observable<boolean>;
}

Usage Examples:

import { RadioButton, Checkbox } from "@babylonjs/gui";

// Create radio button group
const radio1 = new RadioButton("option1");
radio1.group = "choices";
radio1.isChecked = true;

const radio2 = new RadioButton("option2");
radio2.group = "choices";

// Handle radio button changes
radio1.onIsCheckedChangedObservable.add((value) => {
    if (value) console.log("Option 1 selected");
});

// Create checkbox
const checkbox = new Checkbox("agree");
checkbox.isChecked = false;
checkbox.onIsCheckedChangedObservable.add((checked) => {
    console.log("Checkbox is:", checked ? "checked" : "unchecked");
});

Color Picker

Color selection control for choosing colors interactively.

class ColorPicker extends Control {
  value: Color3;
  size: string | number;
  
  onValueChangedObservable: Observable<Color3>;
}

Usage Examples:

import { ColorPicker, Color3 } from "@babylonjs/gui";

// Create color picker
const colorPicker = new ColorPicker("colorPicker");
colorPicker.value = Color3.Red();
colorPicker.size = "200px";

// Handle color changes
colorPicker.onValueChangedObservable.add((color) => {
    console.log("Selected color:", color.toHexString());
});

Display Grid

Grid overlay for alignment and debugging purposes.

class DisplayGrid extends Control {
  cellWidth: string | number;
  cellHeight: string | number;
  minorLineTickness: number;
  minorLineColor: string;
  majorLineTickness: number;
  majorLineColor: string;
  majorLineFrequency: number;
  background: string;
}

Selector Groups

Group controls for organizing and managing collections of related selection controls.

class SelectorGroup {
  constructor(name: string);
  
  name: string;
  header: string;
  groupPanel: StackPanel;
  selectors: StackPanel[];
}

class CheckboxGroup extends SelectorGroup {
  addCheckbox(text: string, func?: (state: boolean) => void, checked?: boolean): void;
}

class RadioGroup extends SelectorGroup {
  addRadio(text: string, func?: (n: number) => void, checked?: boolean): void;
}

class SliderGroup extends SelectorGroup {
  addSlider(text: string, func?: (value: number) => void, unit?: string, min?: number, max?: number, value?: number, step?: number): void;
}

class SelectionPanel extends Rectangle {
  groups: SelectorGroup[];
  barColor: string;
  barHeight: string;
  spacerHeight: string;
  labelColor: string;
  buttonColor: string;
  buttonBackground: string;
  
  addGroup(group: SelectorGroup): void;
  removeGroup(group: SelectorGroup): void;
  setHeaderColor(color: string): void;
  setLabelColor(color: string): void;
  relinkToPanel(): void;
}

Usage Examples:

import { CheckboxGroup, RadioGroup, SelectionPanel } from "@babylonjs/gui";

// Create a selection panel
const panel = new SelectionPanel("panel");
panel.widthInPixels = 300;
panel.heightInPixels = 400;

// Create checkbox group
const checkboxGroup = new CheckboxGroup("Features");
checkboxGroup.addCheckbox("Enable Sound", (checked) => {
    console.log("Sound:", checked);
}, true);
checkboxGroup.addCheckbox("Show Tutorial");

// Create radio group  
const radioGroup = new RadioGroup("Difficulty");
radioGroup.addRadio("Easy", (index) => {
    console.log("Selected difficulty:", index);
});
radioGroup.addRadio("Hard");

// Add groups to panel
panel.addGroup(checkboxGroup);
panel.addGroup(radioGroup);

Advanced Slider Controls

Extended slider controls with image-based styling and enhanced functionality.

class BaseSlider extends Control {
  minimum: number;
  maximum: number;
  value: number;
  step: number;
  isVertical: boolean;
  isThumbClamped: boolean;
  displayThumb: boolean;
  thumbWidth: string | number;
  barOffset: string | number;
  
  onValueChangedObservable: Observable<number>;
}

class ImageBasedSlider extends BaseSlider {
  backgroundImage: Image;
  thumbImage: Image;  
  valueBarImage: Image;
  displayValueBar: boolean;
}

class ImageScrollBar extends BaseSlider {
  backgroundImage: Image;
  thumbImage: Image;
  thumbLength: string | number;
  barImageHeight: string | number;
}

Usage Examples:

import { ImageBasedSlider, Image } from "@babylonjs/gui";

// Create image-based slider
const slider = new ImageBasedSlider("volumeSlider");
slider.minimum = 0;
slider.maximum = 100;
slider.value = 50;
slider.widthInPixels = 200;
slider.heightInPixels = 20;

// Set custom images
slider.backgroundImage = new Image("bg", "./slider-bg.png");
slider.thumbImage = new Image("thumb", "./slider-thumb.png");
slider.valueBarImage = new Image("bar", "./slider-bar.png");

// Handle value changes
slider.onValueChangedObservable.add((value) => {
    console.log("Volume:", value);
});

Types and Interfaces

interface Vector2WithInfo extends Vector2 {
  buttonIndex: number;
}

interface IFocusableControl {
  onFocusObservable: Observable<IFocusableControl>;
  onBlurObservable: Observable<IFocusableControl>;
  focus(): void;
  blur(): void;
}

enum TextWrapping {
  Ellipsis = 0,
  Clip = 1,
  WordWrap = 2
}

// Alignment constants
const Control: {
  HORIZONTAL_ALIGNMENT_LEFT: number;
  HORIZONTAL_ALIGNMENT_CENTER: number; 
  HORIZONTAL_ALIGNMENT_RIGHT: number;
  VERTICAL_ALIGNMENT_TOP: number;
  VERTICAL_ALIGNMENT_CENTER: number;
  VERTICAL_ALIGNMENT_BOTTOM: number;
};