Search Unity

  1. Megacity Metro Demo now available. Download now.
    Dismiss Notice
  2. Unity support for visionOS is now available. Learn more in our blog post.
    Dismiss Notice

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

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

  1. Waz

    Waz

    Joined:
    May 1, 2010
    Posts:
    287
    I agree it is easiest to understand. My only question is whether it breaks draw call optimization: are all button backgrounds drawn with one call, then all button texts? That would fall out naturally from a Depth based approach, but in this hierarchical approach you'd have to use a lot more logic to know when it can be optimized that way and when overlapping buttons preclude it.

    Edit: I thought it was a bit odd that you explicitly talked about Photoshop layers but then the order worked backwards (bottom is on top) to how Photoshop does it (top is on top). Seems needlessly contrary.
     
    Last edited: May 29, 2014
  2. Eyeofgod

    Eyeofgod

    Joined:
    Jun 25, 2010
    Posts:
    126
    I haven't seen in the videos if its possible to modify the touch zone (collider ?) without changing the visual size of a button. It's kind of usual to have a small button with a bigger collider in mobile to help the player touch the button without the need of making everything to big. Is it possible to do this?
     
  3. Per

    Per

    Joined:
    Jun 25, 2009
    Posts:
    460
    That's a good point, can you have a shaped hotspot / invisible button with this system?

    Can it even handle shaped buttons? Or is it only rectangles?
     
  4. TrickyHandz

    TrickyHandz

    Joined:
    Jul 23, 2010
    Posts:
    196
    @Eyeofgod @Per, I'm no expert on this having not touched the UI system, but here is my guess.
    1. Colliders/Touch Hot Spots larger than the displayed interface element should be completely possible. The UI system appears to be using the exact same style colliders as you see in the existing 2D sprites that are available now. Seeing as you can easily make a collider larger than the sprite for a 2D game there shouldn't be a limitation when dealing with UI elements
    2. Invisible buttons/widgets. This should be easily achieved as well. Right now in the 2D system you can drop a spite with collider and then simple disable the sprite renderer...similar to having an invisible wall in 3D by disabling the mesh renderer.
    3. Shaped buttons. This is totally based on the sprite you import. Just remember that you need to use an appropriate collider for the shape if you don't want collisions to overlap the edges.
     
  5. franktinsley

    franktinsley

    Joined:
    Jul 1, 2010
    Posts:
    130
    3-4 months!? SAY IT AINT SO!
     
  6. franktinsley

    franktinsley

    Joined:
    Jul 1, 2010
    Posts:
    130
    Oh one thing I would like to request if it's not planned already: iOS style collider behavior for touches.

    iOS button behavior really helps touch based applications feel better, especially if the buttons are many, small, and close together. Users constantly start touches inside small buttons just fine but have a hard time releasing their finger in just the right way as to keep the touch point inside the collider.

    Said behavior in detail: when a user begins touching over a button, the button's collider grows a given amount (generally adding about a half of a finger tip's width around the whole button). If the user drags off the collider it returns to normal size. If they drag back on to the (now normal size) collider it again grows until they drag back off of it or lift their finger anywhere. Lifting inside the collider of course fires the click event.

    Thanks!!!
     
  7. Tim-C

    Tim-C

    Unity Technologies

    Joined:
    Feb 6, 2010
    Posts:
    2,221
    Hi, we provide the ability to ask the event system if the cursor is over an object that is being 'handled' by the event system. So you can check if you should do your game logic :)
     
  8. Tim-C

    Tim-C

    Unity Technologies

    Joined:
    Feb 6, 2010
    Posts:
    2,221
    You import sprites or images like you do with normal textures ect then construct your UI elements from these.

    We use the same workflow as 2D team for sprites. We will autopack compatable sprites into a sheet at build time for you.

    That would just be another UI element that you would probably need to write some scrip to control
     
  9. Tim-C

    Tim-C

    Unity Technologies

    Joined:
    Feb 6, 2010
    Posts:
    2,221
    I think we are removing them from the menus as we can't remove them juuuust yet :(
     
  10. Tim-C

    Tim-C

    Unity Technologies

    Joined:
    Feb 6, 2010
    Posts:
    2,221
    We'll be talking about API stuff in a bit :)
     
  11. Tim-C

    Tim-C

    Unity Technologies

    Joined:
    Feb 6, 2010
    Posts:
    2,221
    The events we provide out of the box are:

    Code (csharp):
    1.  
    2. namespace UnityEngine.EventSystems
    3. {
    4.     public interface IEventSystemHandler
    5.     {}
    6.  
    7.     public interface IPointerEnterHandler : IEventSystemHandler
    8.     {
    9.         void OnPointerEnter(PointerEventData eventData);
    10.     }
    11.  
    12.     public interface IPointerExitHandler : IEventSystemHandler
    13.     {
    14.         void OnPointerExit(PointerEventData eventData);
    15.     }
    16.  
    17.     public interface IPointerDownHandler : IEventSystemHandler
    18.     {
    19.         void OnPointerDown(PointerEventData eventData);
    20.     }
    21.  
    22.     public interface IPointerUpHandler : IEventSystemHandler
    23.     {
    24.         void OnPointerUp(PointerEventData eventData);
    25.     }
    26.  
    27.     public interface IPointerClickHandler : IEventSystemHandler
    28.     {
    29.         void OnPointerClick(PointerEventData eventData);
    30.     }
    31.  
    32.     public interface IBeginDragHandler : IEventSystemHandler
    33.     {
    34.         void OnBeginDrag(PointerEventData eventData);
    35.     }
    36.  
    37.     public interface IDragHandler : IEventSystemHandler
    38.     {
    39.         void OnDrag(PointerEventData eventData);
    40.     }
    41.  
    42.     public interface IEndDragHandler : IEventSystemHandler
    43.     {
    44.         void OnEndDrag(PointerEventData eventData);
    45.     }
    46.  
    47.     public interface IDropHandler : IEventSystemHandler
    48.     {
    49.         void OnDrop(PointerEventData eventData);
    50.     }
    51.  
    52.     public interface IScrollHandler : IEventSystemHandler
    53.     {
    54.         void OnScroll(PointerEventData eventData);
    55.     }
    56.  
    57.     public interface IKeyDownHandler : IEventSystemHandler
    58.     {
    59.         void OnKeyDown(InputEventData eventData);
    60.     }
    61.  
    62.     public interface IKeyUpHandler : IEventSystemHandler
    63.     {
    64.         void OnKeyUp(InputEventData eventData);
    65.     }
    66.  
    67.     public interface ISelectHandler : IEventSystemHandler
    68.     {
    69.         void OnSelect(BaseEventData eventData);
    70.     }
    71.  
    72.     public interface IDeselectHandler : IEventSystemHandler
    73.     {
    74.         void OnDeselect(BaseEventData eventData);
    75.     }
    76.  
    77.     public interface IMoveHandler : IEventSystemHandler
    78.     {
    79.         void OnMove(AxisEventData eventData);
    80.     }
    81.  
    82.     public interface ISubmitHandler : IEventSystemHandler
    83.     {
    84.         void OnSubmit(BaseEventData eventData);
    85.     }
    86.  
    87.     public interface ICancelHandler : IEventSystemHandler
    88.     {
    89.         void OnCancel(BaseEventData eventData);
    90.     }
    91. }
    92.  
    You can add your own events by Inheriting from IEventSystemHandler, you will need to write and InputModule that actually generates and sends your custom events to your UI elements though.
     
  12. AlkisFortuneFish

    AlkisFortuneFish

    Joined:
    Apr 26, 2013
    Posts:
    970
    Since we are talking GUIs and text, are there any plans to add native support for signed distance field dynamic fonts, or at least the ability to add padding to the dynamic fonts for the texture to be SDFed seperately? We use SDFs to get nice and crisp text at any distance and resolution, but the workflow so far has required making custom fonts and scripting a custom importer that puts the kerning in. That would probably be quite painful to do for something as dynamic as an actively edited GUI with different font styles, it'd be awesome to have it natively put in, or at least have some hooks that allow some modification of the atlasing.
     
  13. Tim-C

    Tim-C

    Unity Technologies

    Joined:
    Feb 6, 2010
    Posts:
    2,221
    You can have invisible buttons quite easily.

    As for shaped buttons: Not out of the box, but a callback exists on the UI elements where you can do custom raycast processing. So what would happen is that you would get a 'I clicked on your rect, is this really a hit' and then your element can go 'no it is not really a hit' with some custom logic.
     
  14. Tim-C

    Tim-C

    Unity Technologies

    Joined:
    Feb 6, 2010
    Posts:
    2,221
    We have on our roadmap some improvements to font rendering, but they will not be in the first release. Currently we are just leveraging the existing unity text rendering.
     
  15. Stephan-B

    Stephan-B

    Joined:
    Feb 23, 2011
    Posts:
    2,269
    I have just released TextMesh Pro which is a Signed Distance Field base tool designed to replace the current 3D Text / Text Mesh as well as GUI Text.

    TextMesh Pro features a built-in Font Asset Creator which makes creating new SDF atlases a breeze compared to having to use external tools and renaming files and all. So that should greatly improve your workflow here.

    Having said all of that, I am also working on the TextMesh Pro UGUI Component which is designed to work with all the new goodies that we will get in Unity 4.6 :)

    Here is a link to a video showing TextMesh Pro working with UGUI. In my signature you can also find links to TextMesh Pro as well as Web Demo of our Surface Shader.


    Anyway back to the awesome new UGUI stuff and Unity 4.6 :)
     
    Last edited: May 30, 2014
    jashan likes this.
  16. superpig

    superpig

    Drink more water! Unity Technologies

    Joined:
    Jan 16, 2011
    Posts:
    4,649
    To be clear, there's a difference between "Events that the input system will send to controls" and "Events that controls expose for you to wire up in the Inspector," correct?

    i.e. while those interfaces are all present in the codebase and e.g. a button will implement several of them, that doesn't mean it has a UnityEvent variable for each one, and users will have to subclass controls in order to add said UnityEvents+invoke them. Correct?
     
  17. runevision

    runevision

    Joined:
    Nov 28, 2007
    Posts:
    1,892
    You got the principle correct, yes!

    We have an EventTrigger component though you can add which you can use to get a UnityEvent in the Inspector for any of the supported event types. So you can add extra hooks in the Inspector without scripting by having e.g. your normal Button or other control as well as an EventTrigger component.
     
  18. Moonjump

    Moonjump

    Joined:
    Apr 15, 2010
    Posts:
    2,572
    I hope GUI Text and Texture remain available for use if they are still in the engine. I have old apps that use them. They are worth updating if it is minimal effort. I wouldn't mind so much if they were removed from the engine and we got slightly smaller builds as a result.
     
  19. SememeS

    SememeS

    Joined:
    Nov 27, 2012
    Posts:
    127
    This is really awesome my mind was blown from the video!

    I can already think of so many possibilities of how to use this, mouahahaha! This will bridge the gap between environment and interface ahhh the beauty!
     
    Last edited: May 30, 2014
  20. snowconesolid

    snowconesolid

    Joined:
    Dec 9, 2011
    Posts:
    868
    Ever since I heard about a new GUI system coming in 4.6 I put off on buying NGUI from the asset store until the unity devs showed more about the new GUI system. Now I know NGUI will not be necessary anymore. This is so amazing! Its everything I wanted in a GUI system. I always had issues with unity's old gui, especially with various screen resolutions and my gui getting messed up. But this is such big update. It adjust itself no matter what the resolution plus creating buttons and text in the new system looks fantastic and easy. Everything shown for the new GUI is just amazing and I am legitimately excited for this upcoming unity release. Once again I am blown away, I can't wait. Thanks unity devs, you guys are my heroes :)
    Best engine ever!
     
  21. Gigiwoo

    Gigiwoo

    Joined:
    Mar 16, 2011
    Posts:
    2,981
    Resolved.
    Gigi
     
    Last edited: Jun 6, 2014
  22. ZJP

    ZJP

    Joined:
    Jan 22, 2010
    Posts:
    2,649
    What the difference between 'IPointerDownHandler' and 'IPointerClickHandler'?
     
  23. StarManta

    StarManta

    Joined:
    Oct 23, 2006
    Posts:
    8,773
    Typically a "Click" is a "down and then up". e.g., if you press down on a button, then drag your pointer elsewhere and release, "IPointerClickHandler" won't be triggered.
     
  24. ZJP

    ZJP

    Joined:
    Jan 22, 2010
    Posts:
    2,649
    oh, of course. Thanks.
     
  25. Breyer

    Breyer

    Joined:
    Nov 10, 2012
    Posts:
    412
    there is event for repeat click? i have mean behaviour like GUI.RepeatButton()
     
  26. makeshiftwings

    makeshiftwings

    Joined:
    May 28, 2011
    Posts:
    3,350
    One thing that might be nice are built in handlers for double-click and long-press. Those are both used a lot so a standardized way to raise those events and hide the event they override would be useful.
     
  27. Per

    Per

    Joined:
    Jun 25, 2009
    Posts:
    460
    Also touch events like pinch/zoom, double finger touch, drag and so on for scroll fields.

    Anyhow, thanks for the rest of the info, it looks well thought out, can't wait to give it a spin.
     
  28. AnomalusUndrdog

    AnomalusUndrdog

    Joined:
    Jul 3, 2009
    Posts:
    1,551
    That's equivalent to an OnMouseDown. It seems IPointerDownHandleris for that.
     
  29. Jasper-Flick

    Jasper-Flick

    Joined:
    Jan 17, 2011
    Posts:
    957
    Thanks for showing the API, Tim. That's really helpful for my own Text Box plugin development. I like it to be as future-compatible as possible.
     
  30. mtalbott

    mtalbott

    Joined:
    Dec 21, 2011
    Posts:
    125
    Ok, I think this hasn't been asked yet...

    Scenario: we would like to display textures/images downloaded at run-time in the new GUI. e.g. display downloaded screenshots in a grid.

    Question: Since the new system seems to get it's powers from the sprite system, will creating sprites from textures at run-time negate the optimization benefits that the new system boasts?

    Very excited for this! Good work.
     
  31. shaderbytes

    shaderbytes

    Joined:
    Nov 11, 2010
    Posts:
    900
    cant really give feedback without personally giving it a spin but it looks great well done
     
  32. Tim-C

    Tim-C

    Unity Technologies

    Joined:
    Feb 6, 2010
    Posts:
    2,221
    For things that you know in advance we recommend using sprites, but you can use normal textures also :)
     
  33. Gigiwoo

    Gigiwoo

    Joined:
    Mar 16, 2011
    Posts:
    2,981
    What other UI elements are in the works? I love the video and the look of what's to come - particularly the auto adjusting text elements!

    I'd be interested to learn more about complex UI controls like checkboxes, slider controls, scrolling lists (with complex sub elements), dynamically creating UI controls from prefabs (ex inserting Upgrade menu choices into a scrolling list at runtime).

    Gigi
     
  34. ippdev

    ippdev

    Joined:
    Feb 7, 2010
    Posts:
    3,850
    Give us a double-click with a timeout after which it will not register. Right now you have to poll time and check for the second click which then has to have it's time compared to the start time of the original click in question.
     
  35. Per

    Per

    Joined:
    Jun 25, 2009
    Posts:
    460
    Will it support any touch events? Pinch, multi-touch drag etc?
     
  36. ShaZe88

    ShaZe88

    Joined:
    May 29, 2013
    Posts:
    12
    I have not heard much about the performances, to me it feel like it will be a lot heavier due to all these extra floating point numbers, inherited classes and bound components. Is it possible that in some case, it would be preferable to stick with the current GUI system? If the new GUI system only reprint when needed, that will surely help though.

    Also, as some already said, the inspector workflow can be very great when designing, however when you have to change a lots of similar parameters such as different methods to call, different images to use, this advantage quickly become some sort of hindrance. I assume the GUI elements will also fully work with the current prefab system to quickly handle fast changes over a great list of elements?

    Other than that, it really look powerful and I am fully looking forward to it.
     
  37. angrypenguin

    angrypenguin

    Joined:
    Dec 29, 2011
    Posts:
    15,614
    Typically, similarly implemented GUI systems perform far better than the built in stuff. It's pretty darn heavy for plenty of its own reasons.

    Yes, but I wouldn't do it for performance reasons.
     
  38. bali33

    bali33

    Joined:
    Aug 14, 2011
    Posts:
    232
    Will it be possible for the new UI system and maybe for 2d games to manage different set of assets ?
    I'm a Flash developer and it is a usual way to use Spritesheet for different resolutions and load the right one at runtime. Sub-texture have the same name in all resolution Spritesheet, that way you do not have to do any special manipulation or configuration - wherever you need to use a texture you set the texture name and that's all.

    It would be great to have something similar in order to avoid tricks like that one : http://answers.unity3d.com/question...or-iphone-iphone-retina-ipad.html?sort=oldest
     
  39. Kaji-Atsushi

    Kaji-Atsushi

    Joined:
    Oct 6, 2012
    Posts:
    234
    I finally got around to watching the new UI System video, so far it looks fantastic and pretty well thought out.

    Thank you Unity team, and keep up the good work!
     
  40. Jacksendary

    Jacksendary

    Joined:
    Jan 31, 2012
    Posts:
    408
    Wow, look so great, looking very forward to try this out my self, but I'd like to ask a few things (sorry if they've already been answered)

    1: Can I define a percentage, say I want a element to alway be in the center of the screen and then define X and Y to be 50%, or I always want it to fill 50% of the screen, by defining height/width to 50%? and will it that way be DPI/PPI/Resolution independent?
    2: Can I dynamically from code or events add more controls? eg. a new button.
    3: Will the new GUI system be accessible in cases where you would access it from a coroutine?
    4: Do you yet have an rough estimate on when this will be available to the public?
    5: Will everything be availble in unity3D Free or will some be pro only?


    Thanks a bunch in regard :)
     
    Last edited: Jun 9, 2014
  41. guanqun

    guanqun

    Joined:
    Jan 23, 2013
    Posts:
    8
    Wow, finally, I think I can't abandon NGUI then ;)
     
  42. mindlube

    mindlube

    Joined:
    Oct 3, 2008
    Posts:
    993
    There is a 3rd party product that does exactly that . See http://coherent-labs.com/
    There are drawbacks-- it's a native code plugin, it works differently across desktop and mobile, it takes a second for the UI to "boot", no scene view preview in the editor, etc. In general I agree with you that html5+css3 has a staggering amount of layout and design potential these days. But there are tradeoffs.
     
  43. mindlube

    mindlube

    Joined:
    Oct 3, 2008
    Posts:
    993
    Just sharing my experiences beta testing the new uGUI:
    • Favorite thing: new anchoring system. Is very nice, and maybe even innovative- I have never seen anything like it. Canvas and it's render modes. Sweet.
    • Least favorite things: UI prefabs aren't first class citizens, yet. Complex layouts with flows and fit-to-contents, things like this, are difficult to build. Hopefully more layouts and prefabs will come soon. Is more important than big collection of widgets.
     
  44. mog-mog-mog

    mog-mog-mog

    Joined:
    Feb 12, 2014
    Posts:
    266
    Does Anchor allows you to specify relative position as well - in percent?
    Say I want to attach a button on left top (5% from left and 5% from top). I do not want to specify offset in pixels before they change with DPI. My button size will change with screen size, what about the relative anchor offset - does it also auto change with resolution ?
     
  45. Enzign

    Enzign

    Joined:
    Aug 20, 2010
    Posts:
    169
    Certainly very excited about the new GUI.
    I was wondering if there will be any databinding functionality? Like mvvm?
     
  46. jeldrez

    jeldrez

    Joined:
    Dec 3, 2012
    Posts:
    14
    I read all the post to checkout if someone talk about the atlases system.

    In the examples all the sprites are directly called, that means a lot of DrawCalls. It will be support for Atlas? and also using a Atlas reference system like NGUI, so I can change the current atlas to LD/SD/HD atlas without problem.

    Anyways, looks great, this is the only thing is missing IMHO.

    Thanks a lot!
     
  47. StarManta

    StarManta

    Joined:
    Oct 23, 2006
    Posts:
    8,773
    I think you might be misunderstanding the Sprite system. Sprite packing into atlases is automatic & in the background when you're using the 2D Sprite system (as long as you assign packing tags to the sprites in their import settings). So, yes, using the sprite system means that atlasing is automatically supported.

    There's no current support for multiple resolution atlases, though I think I recall hearing somewhere that that is planned in the future.
     
  48. Khyrid

    Khyrid

    Joined:
    Oct 8, 2010
    Posts:
    1,790
    Too late Unity! You made me wait too long, now I don't want it anymore.
     
  49. Ziboo

    Ziboo

    Joined:
    Aug 30, 2011
    Posts:
    356
    Any chance to have a simple property binding like NGUI added recently ?
     
  50. Ayrik

    Ayrik

    Joined:
    Aug 31, 2008
    Posts:
    430
    Go to Project Settings > Editor and set Sprite Packer Mode to 'Always Enabled' to test in the editor. Otherwise it is recommended in the docs (somewhere) to make a debug build and use the remote profiler to get more accurate profiling..