Delight - component-oriented UI framework for Unity

Asset Store: https://assetstore.unity.com/packages/slug/150494
GitHub: https://delight-dev.github.io/

Delight is a component-oriented framework for building well-structured and easily maintainable UI views in Unity and integrate them with your game model.

Think of views as pieces of your game UI, like buttons, combo-boxes, windows, data grids, that like LEGO blocks can be combined into more advanced views like main menus, highscore lists, chat windows, etc.

The framework features data binding, styling, on-demand loading, code-generation, dynamic and virtualized lists, data schemas, localization, and a LIVE view designer.

The framework is open-source and available on github. See the website for links and tutorials:
https://delight-dev.github.io/

Demo:

Features

• Declarative Design Language
  Build, share and collaborate on your views with XML.
  
  
• LIVE editing
  Edit your UI during runtime and see the changes immediately for a very fast workflow.
  
  
  
• Data Binding
  Bind your game model to your UI with a intuitive binding mechanism. The framework supports multi-binding.
  
  
• Styling
  Change the appearance and behavior of your views using styles (similar to CSS).
  
  
• Data Modeling
  Schema files allows you to automatically generate data models and data.
  
  
• On-demand Loading
  Individual views can be loaded on-demand and created during run-time with a simple setting.
  
  
• Asset Management
  Transparent handling of asset loading. Asset bundles can be generated and loaded automatically when the view containing the assets is loaded/unloaded, with no line of code needed.
  
  
• Dynamic Lists
  Easy to bind to collections in your data model and define how the items should be presented. The lists are updated automatically as the collection changes. The framework supports virtualized lists with dynamically sized list items and having multiple item templates for displaying different types of items in your collection.
  
  
  
  
• Localization
  Localize labels etc. in your views easily using the localization dictionary.
  
  
• Scalable and Performant
  On-demand loading and code-generation makes the framework perform well even as the size of the UI grows.
  
  
• Animations
  Create basic animations for view state changes like button highlight and presses.
  https://delight-dev.github.io/Images/ListAnimations2.gif

 

Website updated with new tutorials and API docs.

 

List tutorial added showing how to work with dynamic lists, flow lists, virtualized lists and using multiple templates.

 

New tutorials up:

Views
Asset Management
On-Demand Loading
Config​

(excerpt from on-demand loading guide)

On-Demand Loading

Introduction

On-demand loading is a way to optimize memory usage and the initial load time of your scenes by only loading certain views and their assets when they are displayed. On-demand loading in Delight is simple and transparent.


LoadMode=”Manual”

By setting LoadMode=”Manual” on a view in XML you tell the framework that the view isn’t to be loaded until explicitly requested. The following example shows how a view is loaded/unloaded when the user clicks on a button:

MyView.xml

MyView.cs

Code (CSharp):

1.  
2. namespace Delight
3. {
4.    public partial class MyView
5.    {
6.        public async void ToggleBigView()
7.        {
8.            if (!BigView.IsLoaded)
9.            {
10.                await BigView.LoadAsync();
11.            }
12.            else
13.            {
14.                BigView.Unload();
15.            }
16.        }
17.    }
18. }
19.  

We check IsLoaded, which is a boolean indicating if the view has been loaded, to either load the view by calling LoadAsync() (if you want to do it synchronously you can call Load() instead), or unload the view by calling Unload().

Asset Bundles

Delight greatly simplifies the use of asset bundles by making the process of loading and unloading them transparent. All assets (Sprites, Fonts, Materials, etc) that are referenced by views will automatically be loaded from their asset bundles on-demand. To create an asset bundle you simply need to make sure the assets reside in an a certain folder. See the Asset Management tutorial for more details.

 

Designer auto-complete taking shape.

 

Designer now features preview thumbnails for assets, and tooltips.

 

Very cool

 

Added new view: Expander

 

Using the designer to design the designer that designs the designer.

 

New feature added: Paged lists

 

Delight 2020.1.0 is released
Asset store link: https://assetstore.unity.com/packages/slug/150494

Change-log:
- Delight Designer for LIVE editing of XML
- State animations
- Added Expander view for expanding/collapsing content
- New content type "API Doc" files for adding XML comments to generated dependency properties
- Run-time parsing and instantiation of views (currently limited to editor)
- List paging through IsPaged, PageSize and PageIndex properties on List view
- Customizable list page navigation buttons through NavigationButton view
- Attached property "ListItem.SetListItemState" for propagating list item state to child views
- AltarnateItems property for lists for alternating item styles
- Index binding for list items through syntax, e.g. <Label Text="{item.Index}." /> or <Label Text="{item.ZeroIndex}." />
- Added scrollbar visiblity mode "MouseOver" for showing scrollbars when the mouse hovers over the scrollable region
- Added RawImage view that is similar to Image view but for presenting Texture2D assets
- Automatic parsing of extensions to the framework inside Delight/Extensions folder
- SwitchMode on TabPanel and ViewSwitcher set to Enable instead of Load by default

 

Seems to be a really nice asset. I added this in my project to check it, but there is no Designer available as shown on the video an mentioned on your previous changelog (it does not show up and there is no button on the Delight panel to open it). Am I missing something?

I am running on Unity 2019.3.13f1.

On another subject, all examples and documention works with the Delight generated scenes, will this asset work with my own scenes with live update and the designer? Is the scene overwritten when the .xml is changed? So will we be able to use to for in game UI?

I am not really keen of being forced to add my views and scenes inside a "Content" folder (your documentation mentions how to change the folder name, but not how to avoid it at all).

 

Hi the information is a bit hidden away in the docs, but you need to enable the TextMeshPro module to be able to use the designer. There is also a bug that you get an error in XmlEditor.cs (1490) unless you also import text-mesh pro examples and essentials - you can either import those or just remove the line in question (it will be removed in future versions of Delight).

You can have views in your own scenes by adding a View Presenter to a game object in your scene that will instantiate a view that you specify - and this can be any scene and doesn't have to reside in the Content folder. Another option is to instantiate your main view manually in code. The designer only edits individual views at the moment and shows them displayed individually not in the context of a custom scene. This is probably a feature I'll add in the future though.

As for the scenes generated by Delight, they are not overwritten when the xml changes, it's only generated once and it contains a view presenter that is set to present the scene view, so you can build upon that if you want.

Right now the framework needs to know where the content resides (view xml, etc.) so it can scan them, generate code for them, etc. as there might be a lot of content that is not intended to be used in Delight. If you have any suggestions for improvements I'm happy to hear.

 

Maybe add an option to configure the location for individual resources instead of a single content folder. At the moment the framework needs to know where to find Scenes, Views, Assets, etc., but the there is nothing required to be inside the "Content" folder itself, right? I mean, does the Config.txt needs to be inside this folder, can't it be on the Assets root?

If the only content I need to store inside the "Content" folder is the Delight resources, then it won't be an issue right now. My only concern was being required store my own scenes inside of it too.

 

Thanks for your suggestion. You don't need to store your own scenes inside it, but the resources used by Delight textures, sprites, views, etc. needs to be in a content folder. The config.txt configuration files needs to be in a content folder as well.

 

Showing off new feature: inline code. It's now possible to insert C# code directly into the XML in bindings and click handlers through the '$' prefix:



Inline code in click handler that increases click counter:

<Button Click="Click me" Click="$ ++ClickCount" />

Inline code in binding, calls Math.Pow() with click counter as parameter:

<Label Text="$ Math.Pow({ClickCount}, 2).ToString()" />

 

Delight 2020.2.0 is released. Available on GitHub. Main highlights:

• Embedded code
  
  
  
  
• Updated designer - selection logic, binding highlighting, etc.
  
  
• Various bugfixes
  

 

Added a simple Navigator view.

Code (CSharp):

1.  
2.   <Navigator>
3.     <!-- page '/' -->
4.     <Region Navigator.Path="/">
5.       <Label Text="/" />
6.     </Region>
7.  
8.     <!-- page '/test' -->
9.     <Region Navigator.Path="/test">
10.       <Label Text="/test" />
11.     </Region>
12.   </Navigator>
13.  
14.   <!-- buttons to open pages and navigate back -->
15.   <Group Spacing="5" Alignment="TopLeft" Orientation="Horizontal" Offset="20,0,0,0">
16.     <Button Text="Open '/'" Click="$ Navigator.Push('/')" />
17.     <Button Text="Open '/test'" Click="$ Navigator.Push('/test')" />
18.     <Button Text="Back" Click="$ Navigator.Pop()" />
19.   </Group>
20.  

 

Navigator view now supports custom transition animations:

 

Showing off dynamic lists and animations:

https://delight-dev.github.io/Images/ListAnimations.mp4

Join us on discord: https://discord.gg/9BVyVsB

 

How production-ready is the framework? Can I do all kinds of UI with it or not yet?

 

You can do all kinds of UI with it and it's production ready.

Past iteration of the framework was called MarkLight and was released 2014, and has been used in small and mid-sized projects (e.g. a mobile strategy and resource management game that was very UI heavy). The biggest issue with the framework then was noticeable performance issues as the number of views reached 4000+, and the workflow slowed down as views took time to parse. Delight is a response to these performance issues, a rebuild of the framework that introduces new features such as faster compilation, code-generation, on-demand loading & asset management, and a live editor. This has solved the performance and scalability issues. So the framework at its core is very robust at this point .

 

My problem was precisely with games that is very UI heavy. Actually, my game is basically just UI, it's a text game, so it will be practically just UI with texts and some images, but I want it to have performance and not lose it.

 

I think you'll do fine, of course if you're planning on displaying a huge amount of UI elements on the screen at once, there might be issues as the on-demand loading won't do much then. E.g. if you plan on doing something like an ASCII game where each represented by individual text labels, I can see the text-rendering and layout engine can become a performance bottle-neck. If you're worried about it becoming an issue I recommend doing some prototyping e.g. create a typical view, the amount of complexity you expect, instantiate it X many times and see if the performance remains acceptable.

Also if e.g. the text-renderer becomes an issue, worst case you have the option to write your own and plug it into Delight, the framework provides many ways to extend it in the way you want (and since it's open source you can even suggest changes to the core).

 

Delight 2021.1.0 is released. Available on GitHub and Asset Store. Main highlights:

• List animations
  https://delight-dev.github.io/Images/ListAnimations2.gif
  
  
• Navigator view:
  

 

Awesome!!