Guide

Getting started

Import the package, press Play in the demo scene, then write a first component and change it from game code.

Requirements

• Unity 6000.3 (8f1 or later) with the Built-in Render Pipeline.
• Mono or IL2CPP. Players are verified on Windows and WebGL; see Platforms and limits.
• The Input System package. Project Settings → Player → Active Input Handling must be Input System Package or Both: the engine reads the mouse, touch, keyboard and gamepads through it.
• Burst is installed with the engine and used when present, for faster drawing of big pages.

Installing

Import the DevCore UI Engine package into your project. It brings:

Unity installs the Input System and Burst with it. When it asks to enable the Input System's backends, answer Yes.

First run

1. Open Assets/DevCoreUIEngine/Demo.unity and press Play. The app is on the screen and the panel is in the scene; both take the mouse.
2. Edit Assets/DevCoreUIEngine/App/App.dcue and save. Unity compiles it.
3. Open Tools → DevCore → Live Preview to see a file change while you edit it, without leaving Play mode.

A first app

A game's UI is an app: a root component, a global style sheet and components.

1. Assets → Create → DevCore UI → App makes the app's files:

Assets/DevCoreUIEngine/App/
    App.dcue                the root component
    App.css                 the global style sheet
    Components/Hello.dcue   a first component
    Locales/en.yml          the texts in English

2. GameObject → DevCore UI → App (2D) adds a DevCore App to the scene. Press Play: the app is drawn over the camera's image.

A component

A component is a .dcue file: a C# script, markup and a style. The editor compiles it into C# (a .dcue.cs file beside it) when you save.

<script lang="cs">
    [State] int count;
    [Derived] string label => count == 1 ? "1 click" : count + " clicks";
</script>

<button onclick={() => count++}>{label}</button>

<style>
    button { padding: 8px 16px; border: 0; border-radius: 6px; background: #2d6cdf; color: white }
    button:hover { background: #3b7bef }
</style>

Use it in App.dcue:

<script lang="cs">
    import Counter from "./Components/Counter.dcue";
</script>

<main>
    <Counter />
</main>

• No file has <html> or <body>: the app view makes the page.
• App.css is the app's global style sheet; a <style> in a .dcue file is scoped to its component.
• Generated .dcue.cs files are written again on every save: do not edit them.
• Errors show in the Console at the .dcue line and column.

From game code

using DevCore.UiEngine.Unity.Hosting;

var app = DevCoreApp.Current;
var counter = app.Q<GameUI.Components.Counter>();

More in Apps and views and in the API reference.

A page from HTML

A UI View shows an HTML page loaded at runtime instead of a compiled app. Set its Url to resources://ui/hello.dcue (a file Assets/Resources/ui/hello.dcue holding a whole HTML document), or call LoadHtml from code. resources://, streaming:// (StreamingAssets), file: and data: URLs all work.

var view = gameObject.AddComponent<UIView>();
view.LoadHtml("<p style='color: white'>Score: 0</p>");
var score = view.View.Document.QuerySelector("p");

Your code editor

• VS Code: install the DevCore UI extension that comes with the package: code --install-extension Packages/com.devcore.uiengine/Editor/VSCode/dcue-<version>.vsix (or Extensions → … → Install from VSIX). It needs .NET 8 or newer and the C# project files Unity writes. See Editor tools.
• Rider: Settings → Editor → File Types → HTML, add the pattern *.dcue.
• Visual Studio: Tools → Options → Text Editor → File Extension, extension dcue, editor HTML Editor.

The samples

Assets/Samples/DevCoreUi has a component for each part of the engine: a counter, settings with child components and two-way bindings, form controls, a shop with a keyed list, notes (text editing), icons, a gamepad menu, a leaderboard with 10,000 players in a virtual list, an inventory with drag and drop, Unity content in a page, styled controls, tables, floats, effects, and text in eleven languages.

To see one, add DevCore → Samples → Sample View to a GameObject, name the sample (Counter, Shop, Inventory…) and press Play.