Search Unity

  1. 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

UIElements for Runtime and the UI Builder Unite Copenhagen 2019 Talk

Discussion in 'UI Toolkit' started by uDamian, Oct 10, 2019.

  1. uDamian

    uDamian

    Unity Technologies

    Joined:
    Dec 11, 2017
    Posts:
    941
    Hi everyone. We recently gave a talk about UIElements for Runtime and the new UI Builder (visual authoring tool). Here's the recording for the talk:


    The example project from the talk will be available soon. We just need to first release the UIElements Runtime package first. That will be around the release of Unity 2019.3.
     
  2. jGate99

    jGate99

    Joined:
    Oct 22, 2013
    Posts:
    1,085
    According to this timeline,

    does it mean, if i'm launching my game with 2020.1 then ill be using a production version of runtime element? (knowing that; this versison may not have all the controls which ugui have)

    Reason im asking this ill b launching a game around March/April and this is the same time 2020.1 will be launched. So if i could start using runtime ui then itb really great
     
  3. uDamian

    uDamian

    Unity Technologies

    Joined:
    Dec 11, 2017
    Posts:
    941
    We're actually aiming to have UIElements production ready by the end of 2020. We just didn't want to be too specific as to the exact 2020 version, hence the "during 2020" wording. That said, runtime will be available sooner in 2019.3 as a preview.

    While I wouldn't recommend shipping something with UIElements at runtime early 2020, it all depends on your requirements for your UI and your risk tolerance. I would at least wait for 2019.3 and try out the feature before making any commitments.
     
    mandisaw and jGate99 like this.
  4. Thaina

    Thaina

    Joined:
    Jul 13, 2012
    Posts:
    423
    There is already 2019.3 and 2020 in alpha and beta respectively so does the UIElement runtime available yet? At least alpha version we could include in our project
     
  5. Huijie-Cai

    Huijie-Cai

    Joined:
    Dec 5, 2014
    Posts:
    1
    does the UIElement runtime available yet? which version ?
     
  6. Onigiri

    Onigiri

    Joined:
    Aug 10, 2014
    Posts:
    141
    Is there will be PanelRenderer component for DOTS from the start or we need to wait more for it?
     
  7. uDamian

    uDamian

    Unity Technologies

    Joined:
    Dec 11, 2017
    Posts:
    941
    As mentioned in the talk and the above post, the UIElements Runtime package (for support of UIElements at runtime) will be made public when Unity 2019.3 is fully released (so out of beta). That should be around mid-November.

    UI is difficult to implement in DOTS. For now, our aim is to be compatible with DOTS. This will not be done when we release the first version of the Panel Renderer though.
     
  8. e199

    e199

    Joined:
    Mar 24, 2015
    Posts:
    100
    Will you publish that project to show how to bind runtime data to UIElements?
     
  9. uDamian

    uDamian

    Unity Technologies

    Joined:
    Dec 11, 2017
    Posts:
    941
    As soon as the UIElements Runtime package is public, so will the Unite CPH 2019 demo project. :)
     
    Moonblade-Studios, mandisaw and e199 like this.
  10. filod

    filod

    Joined:
    Oct 3, 2015
    Posts:
    127
    I can't find PanelRenderer after i install ui builder. weird
     
  11. Stardog

    Stardog

    Joined:
    Jun 28, 2010
    Posts:
    1,550
    Very good talk. I haven't tried the UIBuilder yet, but it looks good.

    I'm wondering how it will handle targetting child elements, such as code like this: ".class .child .green". When the buttons in the talk had their icons changed, the background-image was done inline, instead of using another class that could be done like this: '.toolbar-button .explosion', '.toolbar-button .quit' or whatever.

    If it doesn't support it, maybe it could be supported by making the class list a hierachy like the UXML view below it.

    About the class list, I assume you can click-drag more than one class onto an element and it will add on after everything else?

    Also, for animations, have you looked at anime.js? It allows tweening of each CSS parameter and keyframes in code.
     
    Last edited: Oct 15, 2019
  12. Onigiri

    Onigiri

    Joined:
    Aug 10, 2014
    Posts:
    141
    It is part of the future runtime package
     
  13. uDamian

    uDamian

    Unity Technologies

    Joined:
    Dec 11, 2017
    Posts:
    941
    That is definitely supported:
    upload_2019-10-16_11-48-27.png

    Correct.

    We can't run Javascript in Unity (anymore). But we're looking at a few options for the animation solution in UIElements.
     
    one_one, Stardog and jGate99 like this.
  14. jGate99

    jGate99

    Joined:
    Oct 22, 2013
    Posts:
    1,085
    Hi @uDamian

    I built admin apps for games inside unity to reuse as much code as possible. This time i want to use UIElements (knowing thats its in preview and thats fine because admin app will be for in-house use only).

    As Runtime UI package is not available, so can i start implementing uis with UI Builder, and once Runtime available then will it automatically work OR will need a whole rewrite?

    Thanks
     
  15. uDamian

    uDamian

    Unity Technologies

    Joined:
    Dec 11, 2017
    Posts:
    941
    Yes, you can start building UI with the UI Builder and the C# UIElements API in the Editor and it should work at runtime once the package is available. You just have to be aware that some controls are Editor-only, like the ObjectField, or PropertyField. Right now you'll have to check the namespace of an element. If it's in the UnityEngine namespace, you're good.

    In general, the UI Builder just creates UXML and USS assets. These assets, along with the core and most of the UIElements API are used in the same way for both Editor and runtime. This was one of the primary goals of UIElements - to have one UI framework for both the Editor and Runtime.
     
    mandisaw and jGate99 like this.
  16. jGate99

    jGate99

    Joined:
    Oct 22, 2013
    Posts:
    1,085
    Thank you very much :)
     
  17. Stardog

    Stardog

    Joined:
    Jun 28, 2010
    Posts:
    1,550
    I meant something similar code-wise. Such as this:
    Code (csharp):
    1. _visualElement.RegisterCallback<MouseEnterEvent>(e =>
    2. {
    3.     _visualElement.Animate(duration: 1, scale: 2, backgroundColor: Color.red, easing: Easing.InOut);
    4. });
    But maybe it wouldn't scale well. Also, I'm interested in how it will handle flow. We will need a way to change the scale of things without affecting the flow of the elements. CSS uses 'transform' to allow movement on a separate layer. I feel like we will need this, otherwise changing width/height will bump nearby elements around.
     
  18. uDamian

    uDamian

    Unity Technologies

    Joined:
    Dec 11, 2017
    Posts:
    941
    Not final yet but it looks very likely that CSS Transforms are what we'll implement. If you want to animate elements outside the layout systems, you'll be able to do so via the direct transform of each element. But, this part is still evolving.
     
  19. igrir

    igrir

    Joined:
    Jan 24, 2014
    Posts:
    11
    Ah.. I see.. that's why I also can't find out more about it.
    This is really great! Those separation of logic and UI was really cool, this is something I almost build for my project. Looking forward for the next update about it
     
    juelle likes this.
  20. wang37921

    wang37921

    Joined:
    Aug 1, 2014
    Posts:
    84
    much except!
     
  21. Cripplette

    Cripplette

    Joined:
    Sep 18, 2012
    Posts:
    61
    Hi, nice work there. I hope that this time we won't be disappointed by the UI of Unity. But for now it looks good. At least you actually use UIElements in Unity Editor, so it must work :>

    Will it be possible to load uxml/uss at runtime !?
     
    ProFiLeR4100 and BeckStarDE like this.
  22. Litovets

    Litovets

    Joined:
    Sep 3, 2012
    Posts:
    24
    Hi!
    Will it possible to scale Viewport in the same way as we can do on Game tab? Because now, if I want to build UI for base resolution 2048x1536, for example, I can't work at all, just don't see most of the screen. Thanks for reply!
     
    softone likes this.
  23. uDamian

    uDamian

    Unity Technologies

    Joined:
    Dec 11, 2017
    Posts:
    941
    Yes, it will be possible.

    We have a device simulator package in the works that I think will let you zoom out to see the whole screen, even though it's a much higher resolution than your monitor. But the UI Builder will also learn to allow its canvas to be zoomed in/out, so you'll be able to build your UI in isolation in the UI Builder with full zoom/pan support.
     
  24. Nsuidara

    Nsuidara

    Joined:
    Apr 22, 2016
    Posts:
    12
    Hello, i using 2020.1 Unity3D and i install UI Builder and easy made uxml but i don't know how use for game ? where example ?
     
  25. jGate99

    jGate99

    Joined:
    Oct 22, 2013
    Posts:
    1,085
    UI Elements for Runtime is not available yet, it will be released once 2019.3 released to production
     
  26. imlikeeh

    imlikeeh

    Joined:
    Jan 14, 2013
    Posts:
    6
    @uDamian creating real ui runtime now in 2019.3 beta. i've went through all videos and docs i could find.

    could you give a gist or a link to some runtime project example? not the visual editor, uss etc., but an example on how best practices of binding/loading the uss/uxml file to my scene, and then unbinding/unloading. think of a scene in which you do not just have 1 ui screens, but multiple screeens which you switch on/off depending on what you need (different screens for main, inventory, characters, skills etc.). you probably see my point. would be great to know what you had in mind when you developed it. a simple scene will do; nothing too fancy.
     
    Last edited: Nov 21, 2019
  27. uDamian

    uDamian

    Unity Technologies

    Joined:
    Dec 11, 2017
    Posts:
    941
    The actual UIElements Runtime support itself is not yet public. Once it goes public, we will provide a sample project to get you started.
     
    satchell, jGate99 and imlikeeh like this.
  28. Murgilod

    Murgilod

    Joined:
    Nov 12, 2013
    Posts:
    7,163
    Is there an ETA for this past "some time after 2019.3 releases?" I'm mostly interested for testing for far down the line projects, as in after July 2020, so it's not like I'm in a rush.
     
  29. noomieware

    noomieware

    Joined:
    Jun 18, 2019
    Posts:
    8
    If we add manually "com.unity.ui.runtime": "0.0.3-preview" to the manifest.json. Should it yet be possible to use runtime UI? I created a uxmk and uss and assigned. Sadly it is simply not showing when adding Panel Renderer and assigning accordingly
     
  30. Deiton2

    Deiton2

    Joined:
    May 8, 2019
    Posts:
    2
    In my case it was showing, but wasn't updating in live view. Had to stop and play again to see the update. Also the UI Elements didn't seem to be interactive meaning that for example when I pressed the button it wouldn't change color as it should.
     
  31. uDamian

    uDamian

    Unity Technologies

    Joined:
    Dec 11, 2017
    Posts:
    941
    We released the _contents_ of that package as part of the Unite demo project because that package might not exist in the final form of our UIElements Runtime support implementation. See:
    https://forum.unity.com/threads/uielements-roadmap-update.784388

    So, we didn't advertise, nor do we support, direct use of that package. It's likely that Runtime support will just be part of the new UIElements package. Until then, please use the runtime implementation in the Unite demo repo (which you can of course copy and paste in your own project).
     
  32. novaVision

    novaVision

    Joined:
    Nov 9, 2014
    Posts:
    349
    I am using uGUI system intensively and just today have checked UIElements video to see it's benefits. It looks really promisingly especially because of performance improvements. But unfortunately, it's completely unusable for now in real projects without animations support.
    Buttons animation is not the biggest issue - you can put a button in view container and change scale within that container so that will not break the entire UI view, but more complex is the movement of an item, like slide down/up panel...
    Looks like we need some custom asset developed by the professional team to use such basic features.
     
  33. Reza_M

    Reza_M

    Joined:
    Aug 27, 2017
    Posts:
    1
    Hi, there I just wanted to ask if you can support RTL languages such as Arabic/Persian with UIElements.
    It would be nice if you consider it for the initial release.
     
    jGate99 likes this.
  34. Nsuidara

    Nsuidara

    Joined:
    Apr 22, 2016
    Posts:
    12
    I look forward to it, bc it's possible provide send from serwer this pseudo html to game client and open UI.
     
  35. mishakozlov74

    mishakozlov74

    Joined:
    Aug 8, 2018
    Posts:
    12
    Isn't released yet.

    That's kinda silly, I spent a lot of time building UI for my application and now I can't use it and have to wait to 2019.3 release.

    Probably you could make a note in package manager saying that there is no way to make it work yet.

    It's already 2020, my dudes.
     
    juelle likes this.
  36. jGate99

    jGate99

    Joined:
    Oct 22, 2013
    Posts:
    1,085
    UIElements was never suppose to be production ready in 2019.3. It was always meant to be ready in 2020.3+
     
  37. GuillaumeLeplang

    GuillaumeLeplang

    Joined:
    Sep 3, 2019
    Posts:
    8
  38. jGate99

    jGate99

    Joined:
    Oct 22, 2013
    Posts:
    1,085
    Yes but no one is going to launch a production app with a preview package. for learning however UI Elements for Editor is enough
     
  39. GuillaumeLeplang

    GuillaumeLeplang

    Joined:
    Sep 3, 2019
    Posts:
    8
    You're right!
     
  40. polerin

    polerin

    Joined:
    Apr 11, 2013
    Posts:
    9
    Is the runtime preview package available for 2020.01a? I know things will be highly unstable and in flux, but I would *really* love to just start my game UI with UI Elements instead of uGUI. I won't be shipping until at least 2020.3, so I don't mind that it'll be preview until that point. As a side note, I spent an hour or so tearing through documents without realizing that runtime wasn't supported yet, it might be worth a big bold note at the top of the UI Elements page for 2019.x docs.

    Thanks for your work on it regardless, it has allowed me to bring all of my webdev experience into play.
     
  41. uDamian

    uDamian

    Unity Technologies

    Joined:
    Dec 11, 2017
    Posts:
    941
    You can start playing with UIElements runtime using the Unite demo project as detailed here:
    https://forum.unity.com/threads/uielements-roadmap-update.784388/

    Do note that we make no guarantees we will be production ready by the end of 2020. That's just the intent. If you can't afford the risk, it's safer to stick to uGUI for now. The above project is just for you to get a sense of how UIElements will work at runtime. Once we release the new UIElements package (extracted from core Unity), it will include the official runtime support.
     
    Thaina likes this.
  42. Ankit_JeGames

    Ankit_JeGames

    Joined:
    May 28, 2019
    Posts:
    11
    @uDamian I just watched your video about UI Elements. I want to start getting into that but I was not able to add those components (PanelRendrer, PanelScaler, and EventSystem) that you've showed in the video. I'm adding the screenshot.
     

    Attached Files:

  43. Ankit_JeGames

    Ankit_JeGames

    Joined:
    May 28, 2019
    Posts:
    11
    @uDamian Can I start working and adding UiElements to my Game and some Gp apps?
     
  44. zoltanbigitec

    zoltanbigitec

    Joined:
    Jan 3, 2020
    Posts:
    5
    @Ankit_JeGames, did you take a look at the link Damian posted in his very last message? That forum post has pretty much everything you need to know to get started. By downloading the preview demo project linked in there, you'll be able to figure out how to use the UIElements runtime in your game.
     
    uDamian likes this.
  45. Ankit_JeGames

    Ankit_JeGames

    Joined:
    May 28, 2019
    Posts:
    11
    Thanks for that, I guess I have to be more careful while reading.
    Thanks, happy coding
     
  46. abukaff

    abukaff

    Joined:
    Jun 28, 2013
    Posts:
    2
    2019.3 is released, when are we expecting the runtime :) @uDamian
     
  47. zoltanbigitec

    zoltanbigitec

    Joined:
    Jan 3, 2020
    Posts:
    5
    uDamian likes this.
  48. abukaff

    abukaff

    Joined:
    Jun 28, 2013
    Posts:
    2
  49. Thaina

    Thaina

    Joined:
    Jul 13, 2012
    Posts:
    423
    This https://github.com/Unity-Technologi...5ddcbb86270ae2b8a/Assets/UIERuntime/README.md

    Not working

    Code (CSharp):
    1. An error occurred while resolving packages:
    2.   Project has invalid dependencies:
    3.     com.unity.inputsystem: Access to 'https://artifactory.prd.cds.internal.unity3d.com/artifactory/api/npm/upm-candidates/com.unity.inputsystem' was denied
    4.     com.unity.render-pipelines.universal: Access to 'https://artifactory.prd.cds.internal.unity3d.com/artifactory/api/npm/upm-candidates/com.unity.render-pipelines.universal' was denied
    5.     com.unity.textmeshpro: Access to 'https://artifactory.prd.cds.internal.unity3d.com/artifactory/api/npm/upm-candidates/com.unity.textmeshpro' was denied
    6.     com.unity.timeline: Access to 'https://artifactory.prd.cds.internal.unity3d.com/artifactory/api/npm/upm-candidates/com.unity.timeline' was denied
    7.     com.unity.ui.runtime: Access to 'https://artifactory.prd.cds.internal.unity3d.com/artifactory/api/npm/upm-candidates/com.unity.ui.runtime' was denied
    403 Forbidden

    I know we could copy that folder into our project directly, just want to say that this document should be disable until it really worked
     
  50. uDamian

    uDamian

    Unity Technologies

    Joined:
    Dec 11, 2017
    Posts:
    941
    Ya, that file was definitely misleading. We did make it clear in all our communication around this project that the runtime package was not going to be officially released and is not supported in any way. Runtime functionality will come as part of the new UIElements package later in the year.

    That said, I've removed that README file from the Demo repo. Thanks for pointing it out.
     
    Thaina likes this.
unityunity