Text

Represents a text component in the scene, used to display strings of text.

Type	Name	Interface Description
Variables	bold: boolean	• Function: Gets the current bold state based on font style.
Variables	color: Color	• Function: Gets or sets the fill color used for the text glyphs. This affects the primary letter fill layer only and does not create, remove, or recolor outline or shadow layers.
Variables	fontSize: number	• Function: Gets the font size in points (pt).
Variables	horizontalAlignment: HorizontalAlignment	• Function: Gets the local horizontal alignment, which refers to the horizontal alignment relative to the writing direction. The actual alignment value depends on the typesetting kind (horizontal or vertical).
Variables	italic: boolean	• Function: Gets the current italic state based on font style.
Variables	letterSpacing: number	• Function: Gets the spacing between letters, with the unit being the single line height.
Variables	lineSpacing: number	• Function: Gets the spacing between lines, with the unit being the single line height.
Variables	opacity: number	• Function: Gets the global opacity of the text, its styles, and the background.
Variables	text: string	• Function: Gets the plain text content of the text component.
Variables	verticalAlignment: VerticalAlignment	• Function: Gets the local vertical alignment, which refers to the vertical alignment relative to the writing direction.
Functions	constructor()
Functions	getOutlineColorAtIndex(index: number): Color | undefined	• Function: Gets the color of an existing outline layer. Outline layers must already exist in editor-authored text data. Script can read or recolor them, but cannot create or remove them. Parameters • index: - The outline layer index (0-based); returns undefined if out of range. Returns The outline color, or undefined if the index is out of range.
Functions	getOutlineCount(): number	• Function: Returns the number of outline layers currently defined on this text. Returns The outline layer count.
Functions	getShadowColorAtIndex(index: number): Color | undefined	• Function: Gets the color of an existing shadow layer. Shadow layers must already exist in editor-authored text data. Script can read or recolor them, but cannot create or remove them. Parameters • index: - The shadow layer index (0-based); returns undefined if out of range. Returns The shadow color, or undefined if the index is out of range.
Functions	getShadowCount(): number	• Function: Returns the number of shadow layers currently defined on this text. Returns The shadow layer count.
Functions	setOutlineColorAtIndex(index: number, color: Color): void	• Function: Sets the color of an existing outline layer. Outline layers must already exist in editor-authored text data. Script can recolor them, but cannot create or remove them. Parameters • index: - The outline layer index (0-based); silently ignored if out of range. • color: - The new outline color.
Functions	setShadowColorAtIndex(index: number, color: Color): void	• Function: Sets the color of an existing shadow layer. Shadow layers must already exist in editor-authored text data. Script can recolor them, but cannot create or remove them. Parameters • index: - The shadow layer index (0-based); silently ignored if out of range. • color: - The new shadow color.

Examples

constructor()

let obj = new APJS.Text();

getOutlineColorAtIndex(index: number): Color | undefined

// Gets the color of the first outline
const color = text.getOutlineColorAtIndex(0);

getShadowColorAtIndex(index: number): Color | undefined

// Gets the color of the first shadow
const color = text.getShadowColorAtIndex(0);

setOutlineColorAtIndex(index: number, color: Color): void

// Sets the color of the first outline
const color = new Color(1, 1, 1, 1);
text.setOutlineColorAtIndex(0, color);

setShadowColorAtIndex(index: number, color: Color): void

// Sets the color of the first shadow
const color = new Color(1, 1, 1, 1);
text.setShadowColorAtIndex(0, color);

Use Case

Example 1 — Rock-Paper-Scissors game using hand gesture recognition — Fist=Rock, HandOpen=Paper, BigV=Scissors. Computer picks randomly, compare to determine winner.

@component()
export class RockPaperScissors extends APJS.BasicScriptComponent {
  @serializeProperty
  resultText!: APJS.SceneObject;
  @serializeProperty
  scoreText!: APJS.SceneObject;
  @serializeProperty
  gestureText!: APJS.SceneObject;

  private wins = 0;
  private losses = 0;
  private lastGesture = -1;
  private holdTime = 0;
  private holdThreshold = 1.0;
  private cooldown = 0;
  private choices = ["Rock", "Paper", "Scissors"];

  // RecordStart: reset wins/losses + gesture state. Hand tracking auto-managed.
  // See GameState §"RecordStart / RecordEnd Lifecycle".
  private onRecordStart = (_event: APJS.IEvent) => {
    this.wins = 0;
    this.losses = 0;
    this.lastGesture = -1;
    this.holdTime = 0;
    this.cooldown = 0;
    if (this.resultText) {
      const rt = this.resultText.getComponent("Text") as APJS.Text;
      if (rt) rt.text = "Show your hand!";
    }
    if (this.scoreText) {
      const st = this.scoreText.getComponent("Text") as APJS.Text;
      if (st) st.text = "W:0 L:0";
    }
    if (this.gestureText) {
      const gt = this.gestureText.getComponent("Text") as APJS.Text;
      if (gt) gt.text = "";
    }
  };

  onStart(): void {
    const rt = this.resultText.getComponent("Text") as APJS.Text;
    rt.text = "Show your hand!";
    const st = this.scoreText.getComponent("Text") as APJS.Text;
    st.text = "W:0 L:0";
    APJS.EventManager.getGlobalEmitter().on(APJS.EventType.RecordStart, this.onRecordStart);
  }

  onDestroy(): void {
    APJS.EventManager.getGlobalEmitter().off(APJS.EventType.RecordStart, this.onRecordStart);
  }

  private gestureToChoice(action: APJS.HandAction): number {
    if (action === APJS.HandAction.Fist) return 0; // Rock
    if (action === APJS.HandAction.HandOpen || action === APJS.HandAction.PlamUp) return 1; // Paper
    if (action === APJS.HandAction.BigV || action === APJS.HandAction.DoubleFingerUp) return 2; // Scissors
    return -1;
  }

  onUpdate(dt: number): void {
    if (this.cooldown > 0) {
      this.cooldown -= dt;
      return;
    }

    const result = APJS.AlgorithmManager.getResult();
    if (result.getHandCount() === 0) {
      this.holdTime = 0;
      this.lastGesture = -1;
      return;
    }

    const hand = result.getHandInfo(0);
    const choice = this.gestureToChoice(hand.action);
    const gt = this.gestureText.getComponent("Text") as APJS.Text;

    if (choice < 0) {
      gt.text = "Show: Rock/Paper/Scissors";
      this.holdTime = 0;
      return;
    }

    gt.text = "You: " + this.choices[choice];

    if (choice === this.lastGesture) {
      this.holdTime += dt;
    } else {
      this.lastGesture = choice;
      this.holdTime = 0;
    }

    if (this.holdTime >= this.holdThreshold) {
      // Play round
      const computer = Math.floor(Math.random() * 3);
      const rt = this.resultText.getComponent("Text") as APJS.Text;
      const st = this.scoreText.getComponent("Text") as APJS.Text;

      if (choice === computer) {
        rt.text = "Draw! Both " + this.choices[choice];
      } else if ((choice + 1) % 3 === computer) {
        this.losses++;
        rt.text = "Lose! " + this.choices[computer] + " beats " + this.choices[choice];
      } else {
        this.wins++;
        rt.text = "Win! " + this.choices[choice] + " beats " + this.choices[computer];
      }
      st.text = "W:" + this.wins + " L:" + this.losses;

      this.holdTime = 0;
      this.cooldown = 2.0; // wait before next round
    }
  }
}

Example 2 — Dynamically update Text content and Image texture at runtime using @serializeProperty bindings

@component()
export class DynamicTextUpdate extends APJS.BasicScriptComponent {
  @serializeProperty
  private labelObject: APJS.SceneObject;

  @serializeProperty
  private counterObject: APJS.SceneObject;

  @serializeProperty
  private iconObject: APJS.SceneObject;

  @serializeProperty
  private textures: APJS.Texture[] = [];

  private labelText: APJS.Text;
  private counterText: APJS.Text;
  private iconImage: APJS.Image;
  private count: number = 0;
  private currentTextureIndex: number = 0;

  private onTouchEvent = (event: APJS.IEvent) => {
    const touchInfo = event.args[0] as APJS.TouchData;
    if (touchInfo.phase === APJS.TouchPhase.Began) {
      this.count++;
      if (this.counterText) {
        this.counterText.text = this.count.toString();
      }

      // Cycle through textures on tap
      if (this.iconImage && this.textures.length > 0) {
        this.currentTextureIndex = (this.currentTextureIndex + 1) % this.textures.length;
        this.iconImage.texture = this.textures[this.currentTextureIndex];
      }
    }
  };

  onStart(): void {
    this.labelText = this.labelObject.getComponent("Text") as APJS.Text;
    this.counterText = this.counterObject.getComponent("Text") as APJS.Text;
    this.iconImage = this.iconObject.getComponent("Image") as APJS.Image;

    if (this.labelText) {
      this.labelText.text = "Tap to count";
    }
    if (this.counterText) {
      this.counterText.text = "0";
    }

    APJS.EventManager.getGlobalEmitter().on(APJS.EventType.Touch, this.onTouchEvent);
  }

  onDestroy(): void {
    APJS.EventManager.getGlobalEmitter().off(APJS.EventType.Touch, this.onTouchEvent);
  }
}