Guide

Apps and views

A game's UI is an app: a folder with a root component and a global style sheet. A view is the Unity component that shows it, on the screen or in the world.

The app's files

Assets/DevCoreUIEngine/App/
    App.dcue        the root component, class GameUI.App: imports and places the app's components
    App.css         the global style sheet of the app: fonts, colors, resets, utility classes
    Components/     GameUI.Components.Hud ...   (import Hud from "./Components/Hud.dcue";)
    Locales/        en.yml, tr.yml ...

Assets/Resources/DevCoreUIEngine/
    Fonts/  Icons/  files loaded by URL: url(Fonts/Title.ttf), <img src="Icons/coin.png">

Every folder directly under Assets/DevCoreUIEngine is a component root. App has the namespace GameUI; a folder X has GameUI.X. A devcore-ui.json in a folder overrides the namespace, and folders elsewhere need one.
Global styles live only in App.css. A <style> in any .dcue file is always scoped to its component.
Components never write <html>, <head> or <body>: the app view makes the page and mounts the root component in its body.
Nothing is read at runtime. Components, App.css and the locale files are compiled to C#. A build needs no .dcue, .css or .yml file.
Fonts and images loaded by URL must be in Resources/DevCoreUIEngine, because Unity does not ship loose files from Assets/.

Assets → Create → DevCore UI → App writes these files for a new app.

The views

Component	Use
`DevCoreApp`	The 2D screen UI: HUD, menus, inventory. Render mode Screen Overlay or Camera. Reached with `DevCoreApp.Current`
`DevCore3DView`	An app on a panel in the world or in a render texture. Any app folder: drag its `App.dcue` onto the App field
`UIView`	The base of both. On its own it shows a page of HTML loaded at runtime, or components you mount from code

GameObject → DevCore UI → App (2D) and 3D View add them to a scene. Render modes, scale modes and world panels are covered in World UI and Unity content.

From game code

using DevCore.UiEngine.Unity.Hosting;

var app = DevCoreApp.Current;
var root = (GameUI.App)app.Root;                        // the mounted root component
root.inventoryOpen = true;                              // a public [State] field

var hud = app.Q<GameUI.Components.Hud>("hud");          // by its query:api name
app.AppLoaded += view => { /* the app is on screen */ };

A view's App property holds the class name ("GameUI.App" by default); setting it shows that app. The members are listed in Views and UiSystem.

Shared resources

There is one resource manager for every view and app. Fonts, images, files and locales are loaded once and shared; a request made while a URL is loading joins that load. The glyph atlas and the image atlas are shared too.

var resources = UiSystem.Resources;     // the shared loader cache, font faces, images, atlases
UiSystem.InvalidateResources();         // forget everything (a URL as argument forgets one file)

In the editor, changing a style sheet, an image or a font invalidates it for you.

One view or several?

For the screen UI itself, prefer one view. It draws in one call, and each further view costs memory (about 18 MB) and start-up time (about 20 ms) while ordinary frames cost the same.

Open and close screens with display: none.
Keep what appears often (tooltips, toasts, drag ghosts) in the page; show it with visibility and move it with translate.
Inserting or removing an element, or switching display, rebuilds the layout of the whole view. A second view only for the HUD is worth it when such spikes matter during gameplay.

The measurements are in Performance.