UIElements roadmap update

Awesome! Was a bit sad at first about the delay but seeing a runtime version was released along with the demo project definitely made up for it. And I'm glad UI elements will be moved into a package with more frequent updates. Looking forward to where the runtime system is going in the next few months - keeping my fingers crossed for news on data binding!

 

Totally understand the decision. The demo you guys gave at Unite looked solid. So I know it should be on the right track and is certainly what people want. One thing I want to ask though: how do you envision the DOTS compatibility is gonna work out? What are you looking to leverage from DOTS?

 

Great news with the package! Will it depend on Unity 2020.1 or will it run on 2019.3 as well when it's released?

 

Welp, there goes my planning for next week.

The interaction between package versions and editor versions is still a bit unclear to me, but if I understand correctly:
- The first version of the package will be built against 2020.1 and released when that comes out of beta.
- Because it's a package, it'll then be able to get updates between Editor versions.
- With the eventual verified one being verified against a specific versions of the Editor again.

Is that correct?

 

Nice! The example contains everything in package layout. So one could easily build an npm package or just import from disk... Just did, and now started prototyping with UI Elements and Runtime

 

Nice, I did get it then. Considering the roadmap for UIElements rolling out the new features as part of preview packages makes much sense and should make the process easier all round. So I'm happy to see a package for UIElements.

I'll just have to change it to evaluating the demo project and doing preliminary design work based on that. It was just a bit of an emotional rollercoaster this morning: Yay release candidate 1 for 2019.3! Noooo, UIElements is delayed.

 

Does it mean you guys started considering using UI Elements in Tiny too?

 

that'd be awesome

 

I'm disappointed. It made things much worse for me. I think you shouldn't do this.

 

I don't find your comment funny. My work and my roadmap depends on your work and your roadmap. And I do take my work seriously. just wanna say you souldn't announce this delay at the last moment.

 

If your roadmap depends on what they showed at Unite, then good news! Everything they showed during the talk is available on github: https://github.com/Unity-Technologies/UIElementsUniteCPH2019RuntimeDemo

If your roadmap depends on the less concrete details and rough timeline items mentioned during the talk, then I'm afraid you're gonna need to wait a bit longer.

Now, this post is intended to be funny, uDamian's was not.

But in all seriousness, last minute delay happens. We vent our frustration when it's happening in an unreasonable manner. But in this case, they a) released the runtime code (also in a nice package-friendly setup), and b) gave reasonable points for their decision (desire to go the package route, etc).

 

True, its better to wait for the right tech in stable form than using something which agains get replaced.

 

Since Unity has been buzzing about DOTS for a long time now it makes sense that Unity would want UIElements to be DOTS compatible. Saying it's currently impossible to provide a version of UIElements compatible with DOTS is a little unsettling. How much investigation has been made to see how feasible it is to support DOTS by 2020.1?

 

Wait what, minimum version now 2020.1?

 

Hi! A bit sad as I thought it was already meant to be a package from start, but nice that the demo was released with runtime part! I'm wondering if I can already now create my UI in the builder and it will be supported in the future package version, as in the layout etc? Or do you think this will break/not be upgradable as you continue forward? I don't mind setting up the logic behind it again, but don't want to redo the layout.

 

Is that possible to make it happens at 2020.2 or 2020.3 cycle?

 

Will this affect the roadmap published in August in the Roadmap thread? Previously it appeared that feature parity with UGUI was going to be achieved around 2020.3. Is this still true, or has that been pushed back one release as well?

 

No worries. I think we'll have to stick to uGUI for our next title in 2021 then. It's a pity but it is what it is.

 

It is difficult to replace UGUI before UIElements support adding GameObject to the panel. Game UI contains VFX and models are common requirements.

 

does the 2020.1a currently have runtime support?

 

Just because i cannot wait to use it i'm starting to add some hacks to get it to work on Android. Add this script in the UIRuntime/Runtime folder, and attach it to the panelrenderer to get the ScrollView to work with touch input!

Code (csharp):

1.  
2. using Unity.UIElements.Runtime;
3. using UnityEngine.UIElements;
4. using UnityEngine;
5. using System.Collections.Generic;
6. using System.Collections;
7. using System.Linq;
8.  
9. public class MobileHacks : MonoBehaviour
10. {
11.     [SerializeField] private PanelRenderer panelRenderer;
12.  
13.     private Vector2 uiToScreen(Vector2 uiPos) => new Vector2(uiPos.x, Screen.height - uiPos.y);
14.     private Vector2 uiToPanel(Vector2 uiPos) => panelRenderer.ScreenToPanel(uiToScreen(uiPos), out var panelpos) ? panelpos : Vector2.zero;
15.  
16.     Vector2 mousePosDown;
17.     List<ScrollView> scrollViews;
18.     List<float> initialValues;
19.     void Update()
20.     {
21. #if UNITY_ANDROID && !UNITY_EDITOR
22.         for (int i = 0; i < Input.touchCount; i++)
23.         {
24.             var touch = Input.GetTouch(i);
25.  
26.             switch (touch.phase)
27.             {
28.                 case TouchPhase.Began:
29.                     mousePosDown = uiToPanel(touch.position);
30.  
31.                     scrollViews = panelRenderer.visualTree.Query<ScrollView>().Where(s => s.worldBound.Contains(mousePosDown) && !s.verticalScroller.worldBound.Contains(mousePosDown)).Build().ToList();
32.                     initialValues = scrollViews.Select(s => s.verticalScroller.value).ToList();
33.  
34.                     break;
35.                 case TouchPhase.Moved:
36.  
37.                     Vector2 mousePos = uiToPanel(touch.position);
38.  
39.                     for (int j = 0; j < scrollViews.Count; j++)
40.                         scrollViews[j].verticalScroller.value = initialValues[j] - (mousePos.y - mousePosDown.y);
41.                     break;
42.             }
43.  
44.         }
45. #else
46.  
47.         if (Input.GetMouseButtonDown(0))
48.         {
49.             mousePosDown = uiToPanel(Input.mousePosition);
50.  
51.             //over but not on the scroller
52.             scrollViews = panelRenderer.visualTree.Query<ScrollView>().Where(s => s.worldBound.Contains(mousePosDown) && !s.verticalScroller.worldBound.Contains(mousePosDown)).Build().ToList();
53.             initialValues = scrollViews.Select(s => s.verticalScroller.value).ToList();
54.  
55.         }
56.         else if (Input.GetMouseButton(0))
57.         {
58.             Vector2 mousePos = uiToPanel(Input.mousePosition);
59.  
60.             for (int i = 0; i < scrollViews.Count; i++)
61.                 scrollViews[i].verticalScroller.value = initialValues[i] - (mousePos.y - mousePosDown.y);
62.         }
63. #endif
64.     }
65. }
66.  
67.  

Currently if you set the rendering mode to Gamma the UI is rendered twice, so you have to keep it to Linear. This means you have to select OpenGLES3 as Graphics API.

 

Could you perhaps also add this to your roadmap, to avoid that it gets forgotten:
https://forum.unity.com/threads/built-in-support-for-vfxgraph-effects.778868/

Thank you!

 

Yo! I've been playing with UIElements for the past couple of weeks and very happy so far with the approach and workflow in general.

I've managed to build a section of our web platform using UIElements and it works pretty well in an Editor window so it's something we'll definitely include as part of our Unity SDK in the future. It's actually much faster to build and iterate compared to typical frontend/javascript development.

So now I'm curious about the possibility of actually replacing our frontend and what it would take. Ideally a Tiny build with UIElements sounds like the best option but since that's going to take a while before it's available would a WebGL build using UIRuntime work?

I don't think making a web authoring tool was part of the objectives you had when creating UIElements, but since it's definitely inspired from web UI authoring it would definitely be a nice fit.

Happy Holidays!

 

One more hack. In the talk Damian says its probably not possibe to render something on top of UI, but with an ugly hack it currently is. I tried a few different things, like unregistering the panel but that would also make it not respond to events.I also tried setting a custom render texture and blitting this to the screen, but alpha blending seems to be bugged with rendertextures at the moment. I ended up with this:

Code (csharp):

1.  
2. using Unity.UIElements.Runtime;
3. using UnityEngine;
4.  
5. class RenderBeforeCamera : MonoBehaviour
6. {
7.     [SerializeField] private PanelRenderer panelRenderer;
8.  
9.     private Event repaintEvent => new Event() { type = EventType.Repaint };
10.     private RenderTexture rt;
11.     void Start()
12.     {
13.         rt = new RenderTexture(2, 2, 2);
14.     }
15.  
16.     void OnPreCull()
17.     {
18.         InternalBridge.SetTargetTexture(panelRenderer.panel, null);
19.         InternalBridge.RepaintPanel(panelRenderer.panel, repaintEvent);
20.         InternalBridge.SetTargetTexture(panelRenderer.panel, rt); //with rendertexture assigned they dont draw, yay!
21.     }
22. }
23.  

I observed that you need to manually call Repaint when a rendertexture is assigned, so by assigning one we can effectively stop drawing. The rendertexture we assign is never used, the UI is really only rendered once.

Drag this script on a camera and the UI will be rendered just before it. My setup has two camera's, one only set to clear and then the maincamera with this script that only clears depth.

Now i just have to figure out how to draw multiline text, since the new texthandler doesnt seems to handle that properly.

 

I'd love to hear some of the reasons behind not going with Unity for web frontend work with UIElements, might give some insight on the differences.

 

Played with it tonight, got it working ..ish? Do you have a dedicated runtime feedback thread?

Regardless... oh my god it's so much nicer.

 

Maybe I didn't catch it in the talks or I just don't remember that part well, but does this new UI Builder / UI Elements support the new CSS "grid" setup? -- I really think it should. This part of CSS should have been there from the start, and would make Unity layouts MUCH easier in most cases -- especially where screen resizing might be concerned (for automatic adjustment for various platforms and devices).

 

https://docs.unity3d.com/Manual/UIE-LayoutEngine.html

 

I've been playing around with the flex layout system and I really do like it how it handles resizing, but sometimes I just want to layout things in a grid and it's a fight to do that with flexbox. So I really want the grid to supplement the flexbox layouting.

 

@uDamian I've been using the UI Builder a lot as well as custom controls, and one thing I noticed is that I can't reliably get custom fields on my custom contorls to show up in the UI Builder.
What are the requirements for making new fields show up there?