Note: While we are only creating a single world with a single persistent variable, it is a good practice to store them in a variable group, which allows for greater flexibility down the line. If you have built and stored your users’ data in variables inside a variable group, then that group can be added to any new worlds that you build in the future. If you did not add your persistent variable to a group, then the data in your PVAR is “trapped” in your first world. Creating them in a variable group is a safety measure here.

• Station07a-SeeCandy: This read-only UI shows the player’s current total, along with an editorial message depending on the amount of that total.
• Station07b-GetCandy: This UI allows the player to increase or decrease the total candy.

Tip: Two separate UIs are created here so that you can see how values set in one can be applied in another, using the persistent variable construct.

• between visits to the station, and
• between visits to the world.

Note: Data is stored per-player, so that whenever the player’s persistent variables are referenced in TypeScript, the appropriate values are retrieved for that specific player.

• The persistent variable and variable group are referenced by name in the code, so you need to create them using the exact names that appear in the code.
• It’s possible to move variable groups between worlds.
  • You can import variable groups between worlds through the Creator Portal: https://horizon.meta.com/creator/. This method requires that you import them from another world.
  • You can import variable groups into a world when you own the variable group and the world. This method allows for complete ownership of the content.

1. In the desktop editor menu bar, select Systems menu > Variable Groups.
2. In the Variable Groups panel, click the + icon:

1. In the Create Variable Group dialog, enter the following name: vgStation07.

   Important: This value must match the references to it in TypeScript. You should write it down for later use.

2. Add a meaningful description. Example: Variable Group for holding PVARs for Station 07.
3. When done, click Create.

1. Click the Create Variable button.
2. In the Create Persistent Variable dialog, enter the following information:
   1. Name: intCandy. This value must match what is used in the code.
   2. Type: Select Number. Object type persistent variables are basically JSON arrays. In this case, we only need a simple numeric variable.
3. If all looks fine, click Create.

Note: After you create your variable, you should shut down and restart your world for it to take effect.

• Variable group name:vgStation07
• Persistent variable name:intCandy

vgStation07:intCandy

export const VarGroupName = "vgStation07"
export const PVARName = "intCandy"

strPlayerCandyPVar = VarGroupName + ":" + PVARName as string; // Name of world PVar holding player's candy total. Define this PVar in your world as a simple Number type

import { CandyUpdated, VarGroupName, PVARName } from 'Station07a-SeeCandy';

• Station07a-SeeCandy-UI
• Station07a-SeeCandy-Trigger
• Station07a-SeeCandy (script)

• Station07b-GetCandy-UI
• Station07b-GetCandy-Trigger
• Station07b-GetCandy (script)

1. CustomUI object
2. Script associated with customUI object
3. Trigger Zone object surrounding the customUI object

Note: It’s possible (and simpler) to gather variable values through code when the player enters the world, using the onPlayerEntersWorld CodeBlock event. However, this approach means that the variables are modifiable one and only one time in the world. In this case, the customUI object would have to be destroyed or made unavailable after the player interacted with it the first time--which is weird. A safer approach is to trigger the reading of the variables on approach to the customUI, every time.

• In the desktop editor, this means that point at which the user is presented with the E icon to engage.
• In the headset, this means that length of the raycasts from your avatar’s hands.
• These distances may be different.
• Keep in mind that it’s possible to approach a customUI from any direction to activate it. If you place it up against a wall, the Trigger Zone can be downsized in one axis.

Note: Because of a delay in saving and reading persistent variables, the Station07b.ts script sends an event to the station 07a script when the player’s candy variable is saved. This variable includes the player and the value of the candy variable, which is then used to set the Binding in the custom UI. In this manner, station 07a gets updated faster than only reading the value from the persistent variable.

// Imported components from the APIs.
import * as hz from "horizon/core";

// Imported components from the UI module.
import {
  UIComponent,
  View,
  Text,
  ViewStyle,
  Callback,
  Pressable,
  Binding,
  UINode,
} from "horizon/ui";

class UIComponentSeeCandy extends UIComponent<typeof UIComponentSeeCandy> {
  static propsDefinition = {
    triggerZone: { type: hz.PropTypes.Entity }
  };

  panelHeight = 500; // default value is 500.
  panelWidth = 350; // default value is 500

  strPlayerCandyPVar = "intCandy" as string; // Name of world PVar holding player's candy total. Define this PVar in your world as a simple Number type
  strPlayerCandyTotal = new Binding<string>('0'); // Init and set default for string variable bound to custom UI for candy total;
  strMessage = new Binding<string>('Test Message'); // Init and set default for string variable bound to custom UI for the message associated with the total;
  strColor = new Binding<string>('red'); // Init and set default for string variable bound to custom UI for the message color associated with the total;

• In the properties for the class, we declare a property called TriggerZone, which is of type hz.Entity. When this script is attached to the customUI object, a new property labeled TriggerZone appears in the Properties panel for it. From this drop-down, a designer can select the trigger zone that is already in the world (an Entity), which the script can use as its trigger to read the persistent variable.
• The height and width in pixels of the panel is defined.
• You can see a number of variables declared, too.
  • The variable strPlayerCandyPVar is set to the value intCandy, which is the name of the persistent variable that stores each player’s total candy.
    • Note: If you are recreating this example, you must create the persistent variable in the Systems menu when the desktop editor is opened to your own world.
  • There are several String variables created with a Binding definition, like:

strPlayerCandyTotal = new Binding<string>('0');

• These variables are bound to the customUI and assigned a default value. In the above case, the default is set to 0.

Note: Any variable that you wish to store values that appear in your customUI must be captured to a Binding.

Note: All of these values should be set to String values. The above example represents the player’s candy total as a String. The values that are read from the persistent variable are Number values, which are cast to String values when refreshing the UI.

Note: The initializeUI() method is executed first, before the start() method, so no user is looking at what is displayed when it is executed. The code relies on this order of execution, but it also means that we assign preliminary, default values before we can actually read in the player data.

• ViewCandyHeader - shows Text() view of a Candy! message at the top of the UI
• ViewCandyTotal - displays Text view a “Total Candy” message, including the player’s current total.
  • Please note the reference to the Binding variable as part of this Text() definition:
  text: this.strPlayerCandyTotal,
  • Since the variable strPlayerCandyTotal is scoped within the class definition, the this keyword provides a clear reference to it.
• ViewCandyTotalMessage - displays Text() view of a message, which is changed based on the value of the candy total variable.
  • In this case, the message is captured to the strMessage Binding:
  text: this.strMessage,
  • It is color-coded by referencing the strColor Binding:
  color: this.strColor,

start() {
    // Initialize the UI for this player, when the attached trigger zone is entered.
    this.connectCodeBlockEvent(this.props.triggerZone, hz.CodeBlockEvents.OnPlayerEnterTrigger, (enteredBy: hz.Player) => {
    let sct = this.world.persistentStorage.getPlayerVariable(enteredBy, this.strPlayerCandyPVar);
    if ((sct == undefined) || (sct == null)) {
      console.log("Candy value is undefined for this player.")
      sct = 0;
    } else {
      console.log(enteredBy.name.get() + " player has " + sct.toString() + " points.")
    };
  this.refresh([enteredBy], sct);
  })
};

• Sets a local variable (sct) to be the value for the player of the persistent variable named in the strPlayerCandyVar variable.
• After a quick validation check, the enteredBy player and the sct variable are passed to the refresh code.

let scr: string = intPlayerCurrentScore.toString()

this.strPlayerCandyTotal.set(scr);
this.strMessage.set(msg);
this.strColor.set(clr);

• Property in the code allows a designer to select a trigger zone to use as the trigger for an update to the custom UI.
• initializeUI() method sets of the elements of the custom UI.
• start() method:
  • Defines onPlayerEnterTrigger listener:
    • Retrieves persistent variable value for the player.
  • Executes refresh() code:
    • Based on value of the persistent variable, assigns message and color-coding.
    • When these values are assigned to the Binding variables, the UI is updated for the specific player who entered the trigger.

• Changing the value of the variable within the UI
• Writing the value back to the persistent variable when the player exits the trigger

// Station07b: Local value is used to store the value in the Custom UI as it is being changed.
// On exit, this value is posted back as the new value to the PVAR.
let intLocalCandyCount: number = 0;

MyButton({
  label: "-",
  baseColor: "red",
  onClick: () => {
    // console.log("Pressed Less button.");
    if (intLocalCandyCount <= 0) {
      intlocalcandycount = 0
    } else {
      intlocalcandycount = intlocalcandycount -1
    }
    this.strplayercandytotal.set(intlocalcandycount.tostring());
  },
  style: {
    marginRight = 12,
  },
}),

this.strplayercandytotal.set(intlocalcandycount.tostring());

this.connectCodeBlockEvent(this.props.triggerZone, hz.CodeBlockEvents.OnPlayerExitTrigger, (enteredBy: hz.Player) => {
  this.refresh([enteredBy], intLocalCandyCount);
  this.world.persistentStorage.setPlayerVariable(enteredBy, this.strPlayerCandyPVar,intLocalCandyCount);
  this.sendNetworkBroadcastEvent(CandyUpdated, {player: enteredBy, intCandy: intLocalCandyCount});
});

Note: When the player exits the interface, the CandyUpdated broadcast event is sent back to the Station07a script, which then updates its own custom UI with the new value. This saves the lag time of saving the persistent variable to storage and then reading the persistent variable back from storage if/when the player re-enters the other custom UI.

• Use of the Trigger Zone gizmo to capture trigger events
• Getting and setting persistent variables based on triggers
• Assigning and updating variables as Bindings to values in the user interface
  • Any variable that you wish to store values that appear in your customUI must be captured to a Binding.

• set() method for Binding variables