Search Unity

  1. Click here to see what's on sale for the "Best of Super Sale" on the Asset Store
    Dismiss Notice
  2. Good news ✨ We have more Unite Now videos available for you to watch on-demand! Come check them out and ask our experts any questions!
    Dismiss Notice

Delight - component-oriented UI framework for Unity

Discussion in 'Assets and Asset Store' started by patrik-org, May 5, 2020.

  1. patrik-org

    patrik-org

    Joined:
    Sep 10, 2012
    Posts:
    97
    Asset Store: https://assetstore.unity.com/packages/slug/150494
    GitHub: https://delight-dev.github.io/

    Demo:


    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/

    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.
     
    Last edited: May 26, 2020
  2. patrik-org

    patrik-org

    Joined:
    Sep 10, 2012
    Posts:
    97
    Website updated with new tutorials and API docs.
     
  3. patrik-org

    patrik-org

    Joined:
    Sep 10, 2012
    Posts:
    97
    List tutorial added showing how to work with dynamic lists, flow lists, virtualized lists and using multiple templates.

     
    Freznosis likes this.
  4. patrik-org

    patrik-org

    Joined:
    Sep 10, 2012
    Posts:
    97
    (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.
     
    Last edited: May 8, 2020
  5. patrik-org

    patrik-org

    Joined:
    Sep 10, 2012
    Posts:
    97
    Designer auto-complete taking shape.
     
  6. patrik-org

    patrik-org

    Joined:
    Sep 10, 2012
    Posts:
    97
    Designer now features preview thumbnails for assets, and tooltips.




     
  7. EstudioVR

    EstudioVR

    Joined:
    Jul 26, 2013
    Posts:
    123
    Very cool
     
    patrik-org likes this.
  8. patrik-org

    patrik-org

    Joined:
    Sep 10, 2012
    Posts:
    97
    Added new view: Expander

     
  9. patrik-org

    patrik-org

    Joined:
    Sep 10, 2012
    Posts:
    97
    Using the designer to design the designer that designs the designer.

     
  10. patrik-org

    patrik-org

    Joined:
    Sep 10, 2012
    Posts:
    97
    New feature added: Paged lists

     
  11. patrik-org

    patrik-org

    Joined:
    Sep 10, 2012
    Posts:
    97
    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
     
  12. EternalMerodach

    EternalMerodach

    Joined:
    Jan 27, 2014
    Posts:
    20
    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).
     
  13. patrik-org

    patrik-org

    Joined:
    Sep 10, 2012
    Posts:
    97
    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.
     
    Last edited: May 29, 2020
    EternalMerodach likes this.
  14. EternalMerodach

    EternalMerodach

    Joined:
    Jan 27, 2014
    Posts:
    20
    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.
     
    Last edited: May 29, 2020
  15. patrik-org

    patrik-org

    Joined:
    Sep 10, 2012
    Posts:
    97
    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.
     
    EternalMerodach likes this.
  16. patrik-org

    patrik-org

    Joined:
    Sep 10, 2012
    Posts:
    97
    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()" />
     
    Last edited: Aug 9, 2020
    EternalMerodach likes this.
  17. patrik-org

    patrik-org

    Joined:
    Sep 10, 2012
    Posts:
    97
    Delight 2020.2.0 is released. Available on GitHub. Main highlights:

    • Embedded code



    • Updated designer - selection logic, binding highlighting, etc.

    • Various bugfixes
     
  18. patrik-org

    patrik-org

    Joined:
    Sep 10, 2012
    Posts:
    97
    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.  
     
  19. patrik-org

    patrik-org

    Joined:
    Sep 10, 2012
    Posts:
    97
    Navigator view now supports custom transition animations:

     
    Pattrigue likes this.
  20. patrik-org

    patrik-org

    Joined:
    Sep 10, 2012
    Posts:
    97
  21. ViniciusRubio

    ViniciusRubio

    Joined:
    Oct 28, 2020
    Posts:
    7
    How production-ready is the framework? Can I do all kinds of UI with it or not yet?
     
  22. patrik-org

    patrik-org

    Joined:
    Sep 10, 2012
    Posts:
    97
    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 :).
     
    Last edited: Nov 27, 2020
    ViniciusRubio likes this.
  23. ViniciusRubio

    ViniciusRubio

    Joined:
    Oct 28, 2020
    Posts:
    7
    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.
     
  24. patrik-org

    patrik-org

    Joined:
    Sep 10, 2012
    Posts:
    97
    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).
     
    ViniciusRubio likes this.
unityunity