Search Unity

[Official]New UI System.... coming in Unity 4.6

Discussion in 'General Discussion' started by Tim-C, May 28, 2014.

  1. Tim-C

    Tim-C

    Unity Technologies

    Joined:
    Feb 6, 2010
    Posts:
    2,087
    $guipic.PNG
    So today we have started talking about the New UI System that will be coming in Unity 4.6. You can find the blog post here and the video here which covers a walk through of how the system works.



    The New UI System is designed from the ground up to meet the following needs:
    • Fast execution
    • Low draw call
    • Easy to use
    • Easy to extend
    • Flexible API
    • Runtime allocation free

    Over the coming weeks we will be releasing more videos and information about the new UI system where we will be revealing extra technical details, and information about how it works internally.

    Right now though lets have a talk about the walk through video and the things you have seen there, more discussion about the other areas of the UI system will coming soon :) If you are a beta user feel free to talk about your high level impressions of the system and how it's been shaping up on the beta list over the past few months (normal feedback to the beta list). We would love to see what you are working on :)

    Update:
    Will and I did a video about the new world space canvas!

     
    Last edited: Jun 30, 2014
    Ilgiz, rakkarage and luochuanyuewu like this.
  2. thedreamer

    thedreamer

    Joined:
    May 13, 2013
    Posts:
    218
    WOW See New GUI as soon as possible Time is gold. The wait is so painful
     
  3. AndrewGrayGames

    AndrewGrayGames

    Joined:
    Nov 19, 2009
    Posts:
    3,823
    Has IsTheNewGuiOutYet.com been updated in light of this?
     
  4. BTStone

    BTStone

    Joined:
    Mar 10, 2012
    Posts:
    1,055
    Looks really great.
    How does the GUI-Input work with for mobile devices? Is "OnClick" registering also Finger-Touches?
    Is it possible to add Notifications to the Button-List via Scripts in order to fire custom OnClick-Events for specific logic?
     
  5. Tim-C

    Tim-C

    Unity Technologies

    Joined:
    Feb 6, 2010
    Posts:
    2,087
    Will be talking about the EventSystem more in a few weeks, but we use a unified event architecture for events, so when you touch and release it will get a PointerEnter, PointerDown, PointerUp, PointerClick, and PointerExit.

    Yes. More on this a bit later also... But the UnityEvents can be hooked up via UI or via script.
     
  6. Acumen

    Acumen

    Joined:
    Nov 20, 2010
    Posts:
    1,041
    Just watched some parts of the video. And while I haven't been into actually creating/working on UI animation yet, these new elements seem to offer and awesome way of creating and modifying things.
    Just thanks for your hard work in coming up with this system. Supersupersupersweet. This is really awesome !

    Emphasizing since usually the positive comments tend to go under in the forum culture :)
     
  7. Tim-C

    Tim-C

    Unity Technologies

    Joined:
    Feb 6, 2010
    Posts:
    2,087
    We tried both methods, in the end we really felt like hierarchy ordering was easier to understand and works really well for a UI. It's one of those things you don't think will feel right, but then you try it and it feels really nice. That being said after you use it you may not feel the same way I do about it.
     
  8. MattMurphy

    MattMurphy

    Joined:
    Dec 24, 2013
    Posts:
    110
    As a Unity noob that's in the middle of doing GUI related stuff for my first project, I'm both excited and scared at the same time :) Excited, because these new features look great, almost Flash-esque in the way you can animate interactivity for things like buttons. Using world light and materials opens up a whole new avenue too.

    But on the other hand, I'm going to have to re do a big chunk of my game to use this system. From the looks of it, it will be worth it and I'll have a better looking and working GUI for putting some effort in.

    Nice work, looks good so far :D
     
  9. thoorne

    thoorne

    Joined:
    Jul 22, 2012
    Posts:
    64
    Looks identical to NGUI. Good. I'm using NGUI for almost 2 years so I would't have to learn new things.
     
  10. Cripplette

    Cripplette

    Joined:
    Sep 18, 2012
    Posts:
    60
    How do you manage the UI z-order when the hiearchy has a custom sorter (such as alphanumeric) ?
     
  11. Fuzzy

    Fuzzy

    Joined:
    Feb 11, 2011
    Posts:
    262
    I think UT needs a slogan and it should be "soon.." or "we're working on it" :D
    Unity Technologies - Soon..

    But glad to see that waiting for the new gui will be worth it. Hope it won't be too much longer.
     
  12. RockoDyne

    RockoDyne

    Joined:
    Apr 10, 2014
    Posts:
    2,231
    At least it shouldn't be hard to slap a one function script on it to manage that logic.

    It is how photoshop works so I can't see too many people complain that they don't get it, although from a scripting perspective having to manage order is going to suck. I can already hear all the complaining about nested prefabs coming.
     
  13. Dabeh

    Dabeh

    Joined:
    Oct 26, 2011
    Posts:
    1,603
    I'd love a lot more information on UnityEvents, hopefully you guys have a video or preferably a blog post on that in the works.
     
  14. Agostino

    Agostino

    Joined:
    Nov 18, 2013
    Posts:
    21
    Watching the video now.
    Will it allow me to use events instead of polling every frame?
    I mean Events, not sendmessage
     
  15. superpig

    superpig

    Quis aedificabit ipsos aedificatores? Unity Technologies

    Joined:
    Jan 16, 2011
    Posts:
    4,154
    All event-based systems have something polling somewhere, but yes - you can set up a button to call a particular function on one of your objects, and then sit back and wait for it to happen.
     
  16. Tim-C

    Tim-C

    Unity Technologies

    Joined:
    Feb 6, 2010
    Posts:
    2,087
    It shares similar design ideas to NGUI but it's moved a long way from that. It will have it's own ways of doing things.

    It always uses the transform sort order. If you enable alpha numeric you are just changing how the hierarchy displays things, not the underlying order.
     
  17. ortin

    ortin

    Joined:
    Jan 13, 2013
    Posts:
    220
    I see Scrollbar in UI menu but not Scrollview also nothing about scroll in video - is it planned?
     
  18. Neurological

    Neurological

    Joined:
    Jun 25, 2012
    Posts:
    350
    What about creating ui elemnts at runtime? I guess will break Runtime allocation free part, but is possible to do? If yes how we would deal the sorting order?
     
  19. Tim-C

    Tim-C

    Unity Technologies

    Joined:
    Feb 6, 2010
    Posts:
    2,087
    Yep

     
  20. Tim-C

    Tim-C

    Unity Technologies

    Joined:
    Feb 6, 2010
    Posts:
    2,087
    Well you would allocate some memory, but just when they get created, not other times. With regard to sorting order there is API on transform for that.
     
  21. randomperson42

    randomperson42

    Joined:
    Jun 29, 2013
    Posts:
    975
    Can't wait. Does the GUI need to be done entirely from the Editor, or can you still generate UI elements from scripts? I don't know much about it, and I haven't used NGUI.
     
  22. goldbug

    goldbug

    Joined:
    Oct 12, 2011
    Posts:
    677
    Tim, it looks great!

    Can't wait to get rid of a lot of code :)

    Are there going to be more high level components? like dropdowns, list boxes, tabs, resizable and movable windows, tabular layouts?
    it does not look complicated to do it ourselves, but it would be nice if we didn't have to.

    What about drag and drop support?
     
  23. Horp1

    Horp1

    Joined:
    Jul 4, 2012
    Posts:
    177
    Are there any kind of layouting?
    Like can I make multiple boxes within a canvas layout with each other; using flowlayout/boxlayout/floating?

    Can i create inline elements (inline in text)?
    Is there support for hyperlinks in text?
    Are there any kind of stylesheet system, or simliar?
    Is it possible to create custom controls that derive form the existing controls? (sorry if you mentioned this and I missed it)
    Can I have multiple styles within one text block? For example mixing different size or fonts of text.

    I'm having a hard time believing that the fancy new UI system is a pure "draw rects in unity"-based system with anchoring and event connections exposed in the inspector. I mean, 3D gui with perspective is nice I guess (not really though), but how many will actually use that? I want sometime that at least has a fraction of the UI design functionality of what was standard in browsers 20 years ago. And to me, web design is the defacto standard for UI design.
     
  24. Tim-C

    Tim-C

    Unity Technologies

    Joined:
    Feb 6, 2010
    Posts:
    2,087
    Scripting and Editor are both supported. We'll go into the API and things more later.
     
  25. WilliamBNewton

    WilliamBNewton

    Joined:
    Nov 18, 2013
    Posts:
    54
    A few questions:

    Will the new UI system eventually be rolled into an update of the EditorGUI system?

    It looks from the video that the UI uses sprites, but also allows for more advanced materials than the current sprites allow. Is this correct, could we use something like SpriteLamp with the new UI? If so, does that also follow through to the Sprite system as a whole?
     
  26. Tim-C

    Tim-C

    Unity Technologies

    Joined:
    Feb 6, 2010
    Posts:
    2,087
    There will be a component library developed using the same API that you have access to (i.e no magic internal unity stuff). We are not quite talking about what will be in there for the first release yet.

     
    androidideas likes this.
  27. runevision

    runevision

    Unity Technologies

    Joined:
    Nov 28, 2007
    Posts:
    1,558
    The first version of the new UI system will ship with only a very limited set of built-in components (the components you see in the video plus a few extra elements). Then we will gradually expand from that. The system is fully extendable though, so people with a bit of programming skills can make new components that are just as integrated as the built-in ones.

    Drag-and-drop is supported in the API we'll have an example scene with it.

    Tabs you can do without scripting. We are shipping with Toggle and ToggleGroup and you can then use a ToggleGroup with a Toggle for each tab.
     
    androidideas likes this.
  28. Uttpd

    Uttpd

    Joined:
    Feb 27, 2010
    Posts:
    114
    Looking very very useful :) Hope the free/ pro split does not ruins the tool
     
  29. Tim-C

    Tim-C

    Unity Technologies

    Joined:
    Feb 6, 2010
    Posts:
    2,087
    We'll be talking more about the layout system over the coming weeks.

    Currently the text rendering is the same Rich Text that core unity uses: http://docs.unity3d.com/Manual/StyledText.html

    Not with style sheets no. We will allow things like asset swapping that you can use in the future.

    Yes, more information will come later

    We don't feel that web UI design is really the defacto standard for UI design for games. That being said, when we talk about our low level components soon you will see that if you really want to do a 'web like style sheet' system you can develop your own on top of the new UI system.
     
  30. StarManta

    StarManta

    Joined:
    Oct 23, 2006
    Posts:
    6,178
    That...looks....amazing.
     
  31. tiggus

    tiggus

    Joined:
    Sep 2, 2010
    Posts:
    1,225
    Curious about how it handles different resolutions as this seems to be a constant thorn with the current gui systems requiring camera scripts, atlas swapping, etc.
     
  32. Horp1

    Horp1

    Joined:
    Jul 4, 2012
    Posts:
    177
    Sounds interesting. Looking forward to it.
    Thats too bad... Not useful at all for me. Anything in the roadmap here?

    Ok great.

    I dont get this. With a html/css based system you would have millions of experienced and talented unity gui scripters ready from day one. Also, the things you can do with html and css these days never stops surprising and amaze me.
    But its good that it is extendible. I hope its rigid enough that someone will make a good markup/stylesheet based layer ontop of it soon. Our programmers usually prototype UI in html, and implement in Unity after. The amount of time it takes to create a similar Ui in unity compared to html is staggering. The days of scaling rects and dragging textboxes is passed imo. With the responsive html frameworks and compiled css starting to become the standard, the gap will widen even more.
    Sorry for spelling, typing on phone.
     
  33. luispedrofonseca

    luispedrofonseca

    Joined:
    Aug 29, 2012
    Posts:
    767
    I'm also very curious on how will this handle, if at all, multiple resolutions (@2x, @3x, etc).
     
  34. Ferazel

    Ferazel

    Joined:
    Apr 18, 2010
    Posts:
    323
    For the next video, I would love to hear more about the performance and back-end technical implementation. I assume you're using a stencil buffer to create those image masks? How are the draw calls counted and tallied.

    Can the GUI camera render other meshes that are not RectTransform (such as 3D meshes and particle systems)? Can you achieve particle effects on top of/below UI elements easily with a Camera-ScreenSpace or do you have to resort to a camera world space in order to not mess with render order?

    Feedback: I personally feel that the Transform -> Render order is backwards. I think that the GameObjects that are at the top of the canvas children should render on TOP of the GameObjects that are under it.

    Looking good!
     
  35. StarManta

    StarManta

    Joined:
    Oct 23, 2006
    Posts:
    6,178
    And Web browsers have huge teams of people whose sole job it is to make these CSS things perform adequately in a browser. Not even well, just adequately (compared to the performance that Unity is capable of). It's incredibly unreasonable to expect the same thing from a game engine AND expect it to perform well.

    Besides that, the overlap between Web designers and game developers is not so large. These tools behave much more like animation tools, the kind you might see in Photoshop, After Effects, Apple Motion, anything like that. Unity isn't getting the "army of web developers", but it is getting the army of animators. And the number of people capable of doing really cool things with CSS animation is absolutely DWARFED by the number of people capable of doing similarly impressive things in After Effects. In addition, the learning curve is much lower.
     
    Last edited: May 28, 2014
    androidideas likes this.
  36. superpig

    superpig

    Quis aedificabit ipsos aedificatores? Unity Technologies

    Joined:
    Jan 16, 2011
    Posts:
    4,154
    Where do your artists/UX designers come into the process? :)
     
    androidideas likes this.
  37. BFGames

    BFGames

    Joined:
    Oct 2, 2012
    Posts:
    1,543
    Looking really good, think ill put my GUI work on hold for a while (it is not essential at the moment anyways).
     
  38. Horp1

    Horp1

    Joined:
    Jul 4, 2012
    Posts:
    177
    Thats why I think a good idea would be to implement webkit deeply witin the Unity engine. Its certainly technically possibly, dont know about possible licence issues.

    I dont follow your after effects comment. There are certainly more web developers than there are experienced after effects users out there. Not only that, but I dont even see how this is relevant. Knowing after effects doesnt help you much in the new UI as it is, but being a web developer would certainly give a huge boost in a html based UI system.
     
  39. StarManta

    StarManta

    Joined:
    Oct 23, 2006
    Posts:
    6,178
    That was my first thought as well, especially because very animation tool ever behaves that way. However, with the new BaseHierarchySort abilities of 4.6, it might be possible to implement a "reverse" hierarchy sort that behaves that way. Only question is I'm not sure if it will have drag-and-drop reordering.
     
  40. Horp1

    Horp1

    Joined:
    Jul 4, 2012
    Posts:
    177
    Out UX/UI people have web experience. We hired them with that in mind ofc.
    Our pure artist are of course extremely used with working with content usable on the web.
     
  41. StarManta

    StarManta

    Joined:
    Oct 23, 2006
    Posts:
    6,178
    There surely are, but that's a bit of a straw man of what I said. First of all, I said web developers capable of using that level of animation in CSS, which is a drastically smaller population than simply "web developers". Secondly, I also said "anything like" After Effects (though I guess I phrased it poorly later in the post), which drastically increases the number. Especially if you include Flash in that comparison, which also behaves in much this way, and from which Unity took an awful lot of developers a few years ago.

    I strongly disagree. Knowing animation tools (which all behave pretty similarly) makes it a minutes-long learning curve to use this sort of tool in Unity. Trust me, I've seen it: as a developer working in an animation studio that prior to my arrival had never seen Unity, I've seen animators sit down at my computer, take maybe 3 minutes to find the hotkeys and buttons, then use Unity's animation editor to make animations like they'd been doing it for years. Unity is built for that. uGUI is an extension of it.
     
  42. Horp1

    Horp1

    Joined:
    Jul 4, 2012
    Posts:
    177
    Since when is UI design about Animation??
    Sure a bit of cool animations here and there is nice, but when I talk about "the things you can do with HTML/CSS" these days I wasn't talking about animations. I wasn't talking about anything that you achieve in after effects, because it has nothing to do with after effects.

    Firstly, i don't agree on the time it takes to learn this.
    Secondly, since when are we talking so much about animation??
    I'm talking about UI and UX design. A fraction of which is animation.
     
  43. RockoDyne

    RockoDyne

    Joined:
    Apr 10, 2014
    Posts:
    2,231
    I see a pipeline change in the future, because I might just be seeing a future in which you prototype the UI in unity.
     
  44. Carpe-Denius

    Carpe-Denius

    Joined:
    May 17, 2013
    Posts:
    804
    Since every node in a webpage is basically a box with other boxes in it or a text-node, it should be possible to parse html into those unity rects. One sprite per border-style (can sprites be scaled?) and you have a very basic workflow. Maybe "float" has to be programmed...
     
  45. Horp1

    Horp1

    Joined:
    Jul 4, 2012
    Posts:
    177
    Not going to happen :)
    If you really believe this, I simply urge you to take a step back and take a look at what you can do with html/css, and how fast you can do it, if you do it the right way.

    If it was that simple... todays html and css3 are truly complex. But using a base like Webkit allows you to stand on the shoulders of giants in this regard.
     
  46. Carpe-Denius

    Carpe-Denius

    Joined:
    May 17, 2013
    Posts:
    804
    Additionally, if someone can extend those UI elements, there might be somebody who can put a webkit in it ;)

    Edit: you changed your answer ;)
    I said basic, not "fully css3/html5-compliant". I'm coming from a html/css/js-background, I know that there are many things possible with it.
     
    Last edited: May 28, 2014
  47. Horp1

    Horp1

    Joined:
    Jul 4, 2012
    Posts:
    177
    I haven't change my answer. You can see from there being no "Last edited by".
    (Or wait, you might mean that I added an answer to your post. Yes I added an answer, didn't change it though. I also realize that the "last edited by" might not show up on my own posts, sorry).

    Back to New Unity GUI guys. My wet deep-engine WebKit integration is not going to happen anyway.

    I like how it's extendable. I hope it's well documented and much, much more exposed than todays GUI.
     
  48. Stardog

    Stardog

    Joined:
    Jun 28, 2010
    Posts:
    1,243
    If I'm understanding the hierarchy correctly, it seems like the layering will not be useful. It's useful in Photoshop because it's for raster images that aren't seperate objects, but in Illustrator you can use Bring To Front / Send To Back, etc. Does this exist in Unity's GUI? The only downside is it might require a "Window > GUI Order Manager" to organise more complex GUI's.
     
  49. StarManta

    StarManta

    Joined:
    Oct 23, 2006
    Posts:
    6,178
    Drag and drop in the hierarchy?

    Also would be trivial to add these functions as context menu items in an editor script.
     
  50. JasonBricco

    JasonBricco

    Joined:
    Jul 15, 2013
    Posts:
    918
    This looks amazing. Very well done, and looking forward to using it.