YUI Files

Why Use Data Files to define UI?

One of the main goals for creating YUI was to create a UI system that would be easy to develop, maintain, and iterate on. Defining UI in data files enables the Live Reload system to update the UI while the game is running, which makes iteration super fast. It also means the file can be in a data format that is easy to use to declare UIs, rather than having to build them in GML. Declaring UIs isn't what GML was designed to do, so it's not great at it!

Why YAML?

I picked YAML because I find it easier to write and read as a human being than JSON. It's a lot less picky about needing quotes and braces all over the place, which means I can write new YAML files pretty quickly. Technically YAML is a superset of JSON, so if you'd rather write your YUI files in JSON, you can do that.

That said, the library YUI uses to read YAML files, SNAP, only supports a limited subset of the full YAML spec. You can see what it does and doesn't support in the SNAP documentation, but briefly, it doesn't support:

1. Single quote ' delimited strings (you must use double quotes ")
2. Block scalars using | and > prefixes
3. Anchors, documents, directives, nodes... all the weird extra stuff.

Also one very important thing to remember about YAML is that it doesn't support tabs! You must use spaces for indentation.

Differences from Standard YAML

As of YUI version 0.2.0, there are some differences from standard YAML:

• Comments are now indicated using // (similar to JSON)
• # can be used anywhere, such as for declaring a color via hex format, e.g. #33FF33
• @ and ` characters are no longer reserved.

Syntax Highlighting in VS Code

Since YUI's version of YAML is different than the standard, there is syntax highlighting extension available for editing .yui files in Visual Studio Code:

YUI VS Code Support (at marketplace.visualstudio.com)

YUI File Types

YUI currently has four different file types you can use:

• Screens
  A Screen file defines a top-level chunk of UI that you can add to your game. You might have a Main Menu screen, and Options screen, an Inventory screen, etc.

• Themes
  A theme file lets you customize how Elements and Widgets (including your own!) are displayed, by overriding default values for colors, padding, spacing, fonts, and more.

• Resources
  A Resources file defines re-usable portions of UI such as Templates, Fragments, and other types of resources. Resources files can be imported into Screen files and other Resources files.

• Interactions
  An Interaction file defines the custom behavior of a specific YUI Interaction such as Drag and Drop or Element Drag. See the Interactions page for more information.