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

NGUI (Next-Gen UI) -- demo final feedback request

Discussion in 'Assets and Asset Store' started by ArenMook, Dec 8, 2011.

Thread Status:
Not open for further replies.
  1. nsxdavid

    nsxdavid

    Joined:
    Apr 6, 2009
    Posts:
    476
    Yay for clipping! Also yay I don't have to do the code. I was involved in some of it for UIToolkit and it was a mess. Though mostly because UIToolkit just wasn't designed to have that sort of thing easily done.

    David
     
  2. helioxfilm

    helioxfilm

    Joined:
    Apr 23, 2008
    Posts:
    259
    Just a question: right now I'm making my texture atlases with Texturepacker (licensed version). At the very bottom of the page I can set the DPI, as I see the default value is 72 DPI. However, as far as I know, iPad has 132 DPI res. Should I set it to 132 DPI or leave it at 72 dpi? Does it make a difference in NGUI?
     
    Last edited: Jan 9, 2012
  3. ArenMook

    ArenMook

    Joined:
    Oct 20, 2010
    Posts:
    1,902
    Just leave it at 72. I'm not sure if it even does anything in this case, but that's not something you want anyhow.
     
  4. nsxdavid

    nsxdavid

    Joined:
    Apr 6, 2009
    Posts:
    476
    Meaningless parameter.
     
  5. helioxfilm

    helioxfilm

    Joined:
    Apr 23, 2008
    Posts:
    259
    OK, guys. For me with DTP background it is a bit frustrating, but that's how life is here :)
     
  6. nsxdavid

    nsxdavid

    Joined:
    Apr 6, 2009
    Posts:
    476
    DPI is meaningless because you don't even know what the physical size of a screen the user is viewing your stuff on. In any case, it's not used by anything in any UI toolkit.
     
  7. playemgames

    playemgames

    Joined:
    Apr 30, 2009
    Posts:
    438
    Hi ArenMook, just bought your NGUI package today and it is amazing! I have a question about text, is there a way to set text alignment outside of the pivot?
     
  8. ArenMook

    ArenMook

    Joined:
    Oct 20, 2010
    Posts:
    1,902
    I assume you mean the individual lines of a paragraph? Right now no, but it's one of the features that's on the list right now.
     
  9. playemgames

    playemgames

    Joined:
    Apr 30, 2009
    Posts:
    438
    Also I noticed that in the pivot there is no CenterLeft or CenterRight, or MiddleLeft or MiddleRight, whatever you wish to call it. Will these be added as well?
     
  10. ArenMook

    ArenMook

    Joined:
    Oct 20, 2010
    Posts:
    1,902
    Those are just "Left", "Right", Top", and "Bottom".
     
  11. playemgames

    playemgames

    Joined:
    Apr 30, 2009
    Posts:
    438
    Nevermind I got it, it's centered already thanks. Coding all day will do that to your brain I guess.
     
    Last edited: Jan 10, 2012
  12. ArenMook

    ArenMook

    Joined:
    Oct 20, 2010
    Posts:
    1,902
    Edit: too many "centers" let me rephrase: "Left" means centered along the Y, and left-most side along the X. "Top" means top side along the Y, and centered along the X, etc.
     
  13. DanTreble

    DanTreble

    Joined:
    Aug 31, 2010
    Posts:
    590
    Does 'clipping' make my health bar work?

    $HealthFull.png $HealthEmpty.png

    Or can I do some slicing on that?

    I could also use the zbuffer to drag one through the other
     
  14. playemgames

    playemgames

    Joined:
    Apr 30, 2009
    Posts:
    438
    Thanks again, ArenMook, ok one last question before I dive back into recoding my GUI stuff. Is there a way to adjust the line space in between lines?
     
  15. ArenMook

    ArenMook

    Joined:
    Oct 20, 2010
    Posts:
    1,902
    @DTreble: You could 9-slice it, and the next version will have a cut sprite (you can specify a 0-1 value and it only draws a part of the sprite -- thanks to nsxdavid!). Clipping is currently specified on panels and is handled efficiently via a shader. This avoids the extensive overhead of manually cropping triangles in code. Edit: Just to clarify, the clipping is not yet live, and will be a part of the next release.

    @playemgames: Yup, adjust the "Spacing" parameter on your font. "Y" part of it controls spacing in between of lines, "X" in between of characters.
     
    Last edited: Jan 10, 2012
  16. playemgames

    playemgames

    Joined:
    Apr 30, 2009
    Posts:
    438
    @playemgames: Yup, adjust the "Spacing" parameter on your font. "Y" part of it controls spacing in between of lines, "X" in between of characters.[/QUOTE]

    Awesome! Thanks so much!
     
  17. DanTreble

    DanTreble

    Joined:
    Aug 31, 2010
    Posts:
    590
    Excellent, sounds like exactly what I want. I split UISlider out into a passive UIProgressBar class as well.

    Bare in mind that the 'clip' shader instruction doesn't work on some android phones :-/. It is probably better to multiply by a mask with a separate texture and texture coordinates, that has potentially more functionality.
     
  18. DanTreble

    DanTreble

    Joined:
    Aug 31, 2010
    Posts:
    590
    Is there a planned way of picking up unhandled input?

    I'd like to pipe any unhandled input through to our game code for raycasting against the world and detecting gestures etc...
     
  19. Cargh

    Cargh

    Joined:
    May 17, 2011
    Posts:
    36
    Is it easily possible to use multiple fonts in your UI. For example a font for title bars and then a font for story dialog?
     
  20. nsxdavid

    nsxdavid

    Joined:
    Apr 6, 2009
    Posts:
    476
    You are going to be doing clipping in the shader? I'd be concerned over compatibility with mobile? Especially since my primary target at the moment is Android. (fret)

    I use custom shaders as it is, because of the need for premult alpha.

    David
     
    Last edited: Jan 10, 2012
  21. nsxdavid

    nsxdavid

    Joined:
    Apr 6, 2009
    Posts:
    476
    @Cargh Yes you can use multiple fonts. You create multiple font textures (using GlyphDesigner or similar) and then you TexturePacker them into one or more spritesheets (existing ones or their own new ones). You setup your UIAtlas as per the instructions for each spritesheet. And then setup UIFont for each font. Then with every UILabel you have, you specify which font it uses.
     
  22. DanTreble

    DanTreble

    Joined:
    Aug 31, 2010
    Posts:
    590
    Added some functions to tell if UICamera was handling touches or not.

    Code (csharp):
    1. static public bool GlobalHandlingTouch(int id)
    2.     {
    3.         foreach( UICamera uiCamera in mList)
    4.         {
    5.             if (uiCamera.HandlingTouchInternal(id))
    6.             {
    7.                 return true;
    8.             }
    9.         }
    10.  
    11.         return false;
    12.     }
    13.  
    14.     static public bool GlobalHandlingMouse()
    15.     {
    16.         foreach (UICamera uiCamera in mList)
    17.         {
    18.             if (uiCamera.mMouse.current != null)
    19.             {
    20.                 return true;
    21.             }
    22.         }
    23.  
    24.         return false;
    25.     }
    26.  
    27.     bool HandlingTouchInternal(int id)
    28.     {
    29.         MouseOrTouch touch;
    30.  
    31.         if (!mTouches.TryGetValue(id, out touch))
    32.         {
    33.             return touch.current != null;
    34.         }
    35.  
    36.         return false;
    37.     }
    38.  
    This isn't great. I did like ezgui's delegate for getting these touches and I liked the way it didn't differentiate between mouse and touch.
     
  23. yuewah

    yuewah

    Joined:
    Sep 21, 2009
    Posts:
    98
    1. In v.1.28, Added a simple tweener <- will it be paused if Time.timeScale = 0 ?
     
  24. helioxfilm

    helioxfilm

    Joined:
    Apr 23, 2008
    Posts:
    259
    Some organizational questions (target platform is iPad1 and 2):

    1. What is better: to have one scene and have all the menu screens there, including in-game panels, like pause,

    2. or create separate scenes for all menu panels?

    3. or a mixed one, when some panels are in separate scenes, some panels are in the same?

    4. Regarding atlases: is it better to have several smaller atlases, or it is better to have big atlases, containing all or almost all small sprites, or have more smaller atlases? Also, if texturepacker creates for me a 2048*1024 atlas, is it OK? Or it is better to have 2 pcs 1024*1024?
    Right now my frontend assets eats up:

    3 pcs 1024*2048
    1 pcs 2048*2048
    1 pcs 1024*1024
    atlases.

    If necessary, I can reorganize them, now they are made by logical order, like button atlas, diveshop atlas, photoalbum atlas etc.


    5. Atlases in memory: how does Unity/NGUI handles this? If I use an atlas for a certain panel, then after switching to another panel, the first panel's atlas (if not used anymore) will be removed from the memory, or as it is part of that scene, will still loaded? What are the best practices here, especially NGUI-wise.

    Sorry for the many newbie questions...

    Best and thanks,
    Gyula
     
  25. LKIM

    LKIM

    Joined:
    Feb 17, 2011
    Posts:
    40
    Quick question - how would I go about creating a sidebar slider with a knob for scrolling in a window? From what I can tell the UI Slider is more for volume/progress bars, and not really for showing position in a list.

    Is this something you're going to build into NGUI at some point?

    We are also going to need a dropdown list, which I assume I can just put together with a Label, Button, Scroll list and slider (shown conditionally). It would be a big help if things like that were built in somehow.

    Another issue that I just noticed is that if you have a very long string of text that can't be divided as a word, it can overrun the processing for multiline. In such a case, you probably want to just maximize the number of letters that will fit on the line.
    For example, if your text is "Please email me at abcdefghijklmnop@qrstuvw.xyz" and you line can manage about 15 characters, you would display something like:
    Please email me
    at abcdefghijklm
    nop@qrstuvw.xyz

    Thanks,
    Liron
     
    Last edited: Jan 10, 2012
  26. ArenMook

    ArenMook

    Joined:
    Oct 20, 2010
    Posts:
    1,902
    @DTreble and @nsxdavid: The "visible area" is passed to the shader in form of an XY center and ZW size, and its up to the shader to actually clip it. How it's done -- whether it's via clip, discard, or by simply fading out alpha (which will work everywhere) -- is up for implementation.

    Technically it's certainly possible to create a "clipped" list by adding depth-writing blocks and separating the UI like so:

    - Draw the background UI
    - Draw the depth-writing objects
    - Draw the scrolled list

    Ultimately there are several ways to do it, and its up to you to choose what works best on your device. I'll try to implement all of them as examples, but before that I need to finish one of them. ;)

    @DTreble: Mouse and touch events are handled the same, the mouse event is separate only for clarity. Why do you need to know if the camera is handling touches or not? If you need to know the camera that send out the event in your OnClick, OnPress, etc -- look at UICamera.lastCamera. The position of the touch that sent out the event is in UICamera.lastTouchPosition.

    @yuewah: Yes, pausing the time scale will pause tweening.

    @helioxfilm: This really depends on the project. Personally I've been doing my UI development in one scene that has only the UI in it, then saved the UI in a prefab that's then used elsewhere. Whenever I'd need to change or modify the UI, I'd open up this UI scene, tweak it, and update the prefab.

    2048x1024 is fine, unless you are targeting ancient devices (prior to iPhone 3gs, and even then only because it won't like the 2048 part of it). It's better to use a single atlas as opposed to multiple atlases. That said, square textures may be needed if you are using compression on mobile devices as PVRTC compression forces everything to be a square, so again -- it depends on what you're targeting.

    Atlases are not removed from memory unless you ask them to be removed -- it's the same as any other in-game object.

    @LKIM: Just create a sprite (knob) that you position using Vector3.Lerp(emptyPos, fullPos, currentValue), where currentValue is 0-1 indicating the value of the sidebar. Sure, I can add it as an example later.

    For a drop-down list you shouldn't need a scroll view -- you can do it like I did with the chat window.

    Thanks for letting me know about the long string, I'll fix it.

    I will add examples for all common components in a future release if someone doesn't create them by then.
     
    Last edited: Jan 10, 2012
  27. ArenMook

    ArenMook

    Joined:
    Oct 20, 2010
    Posts:
    1,902
    As an example of different approaches, here is the fragment shader that does clipping:

    Code (csharp):
    1. fixed4 frag (v2f IN) : COLOR
    2. {
    3.     float2 factor = abs(IN.worldPos.xy - _Range.xy) / _Range.zw;
    4.     float val = 1.0 - max(factor.x, factor.y);
    5.    
    6.     // Method 1: clip() function
    7.     //clip(val);
    8.  
    9.     fixed4 col = tex2D(_MainTex, IN.texcoord) * IN.color;
    10.  
    11.     // Method 2: 'if' statement
    12.     if (val < 0.0) col.a = 0.0;
    13.  
    14.     // Method 3: no 'if' statement
    15.     //col.a *= ceil(clamp(val, 0.0, 1.0));
    16.  
    17.     // Method 4: You can also make it fade out smoothly, like so:
    18.     //col.a *= clamp(val * 20.0, 0.0, 1.0);
    19.  
    20.     return col * _Color;
    21. }
     
  28. Rajmahal

    Rajmahal

    Joined:
    Apr 20, 2011
    Posts:
    2,101
    Just started playing with it today and I'm loving it. This is great stuff, Aren!

    Quick question, how do I change the material used by a UITexture (non Atlas) using scripts at run time?

    Also, at the moment, I'm trying to use the dragable bar to represent a health bar .... should I hold off on that and wait for the next release for an easier option?
     
  29. ArenMook

    ArenMook

    Joined:
    Oct 20, 2010
    Posts:
    1,902
    UITexture.material. :) It's on the widget.

    For the health bar, you can just use the slider as an example if the sprite can be scaled. If not, next update will have the cut sprite for you.
     
  30. Rajmahal

    Rajmahal

    Joined:
    Apr 20, 2011
    Posts:
    2,101
    Thanks .... Materials are still a mystery to me. I just used texture's when I was working with Ongui.
     
  31. LKIM

    LKIM

    Joined:
    Feb 17, 2011
    Posts:
    40
    Is anyone else reporting issues with the slider? I had a slider added and working, and was working on another component and now the slider isn't working anymore. No idea why.
     
  32. ArenMook

    ArenMook

    Joined:
    Oct 20, 2010
    Posts:
    1,902
    Tutorial 10 has a pair of sliders -- vertical and horizontal. Both should work.

    Edit: A few updates ago I changed the slider to use the collider for calculating its size rather than the scaled object. Perhaps this affected you?
     
  33. LKIM

    LKIM

    Joined:
    Feb 17, 2011
    Posts:
    40
    I'm not sure I understand what you mean here. In the chat window you just made one long string that sort of concatinates all of the text together, but that doesn't deal with the need to have different selectable items in a dropdown list.
     
  34. LKIM

    LKIM

    Joined:
    Feb 17, 2011
    Posts:
    40
    I had it working but then it stopped so I'm wondering if there is some intermittent issue that is cropping up. I'll try and remake the slider and see if that fixes it.
     
  35. ArenMook

    ArenMook

    Joined:
    Oct 20, 2010
    Posts:
    1,902
    The chat window script has a list of strings, not one long string -- which is what your drop-down list would be. It also supports scrolling. I'm just saying that you could repurpose a part of that code to create it. :)
     
  36. mindlube

    mindlube

    Joined:
    Oct 3, 2008
    Posts:
    993
    Aren, is there any way to turn off stripping of whitespace on UILabels? I looked at the code but it looks pretty well optimized for line-wrapping and stuff. Not problem if the answer is "no" :)

    Also here is an extension method I am using frequently. maybe others will find it helpful
    Code (csharp):
    1. using UnityEngine;
    2. public static class UIWidgetExtensions
    3. {
    4.     /// <summary>
    5.     /// NGUI widgets return a local size so it needs to be scaled to be
    6.     /// useful for layouting etc.
    7.     /// </summary>
    8.     /// <returns>
    9.     /// The world size.
    10.     /// </returns>
    11.     /// <param name='widget'>
    12.     /// Widget.
    13.     /// </param>
    14.     public static Vector2 VisibleWorldSize(this UIWidget widget)
    15.     {
    16.         return Vector2.Scale(widget.visibleSize, widget.finalScale);
    17.     }
    18. }
     
    Last edited: Jan 10, 2012
  37. LKIM

    LKIM

    Joined:
    Feb 17, 2011
    Posts:
    40
    Seems that when I play the UISlider script is getting removed from the slider, and added back when I press stop.
     
  38. ArenMook

    ArenMook

    Joined:
    Oct 20, 2010
    Posts:
    1,902
    @LKIM: The only way that happens is if you didn't specify what to scale. You get a warning about it in the console.

    @mindlube: Stripping of whitespace? Do you mean multiple spaces and such? If you don't word-wrap, it won't happen.
     
  39. mindlube

    mindlube

    Joined:
    Oct 3, 2008
    Posts:
    993
    @Aren, yes I mean stripping leading and trailing spaces, for example. Like this
    Code (csharp):
    1. nicLabel.text = string.Format("{0}:   ", player.Nic); // pad with a couple of spaces
    multi-line is turned off, in the inspector. As you can see in the screen grab, it's trimming the spaces. Not a big deal though.
     

    Attached Files:

  40. LKIM

    LKIM

    Joined:
    Feb 17, 2011
    Posts:
    40
    Do you have any built in way to detect an "outside" click? For example, if I have a group of buttons which slide in, and I want to hide them if the user clicks anywhere except on those buttons?
     
  41. ArenMook

    ArenMook

    Joined:
    Oct 20, 2010
    Posts:
    1,902
    Simplest way -- put a collider behind the buttons. If you make this collider be attached to your camera and set it close to the far clipping plane (and put it on the UI layer), you will get all the notifications that don't hit anything else.
     
  42. LKIM

    LKIM

    Joined:
    Feb 17, 2011
    Posts:
    40
    Sorry for asking so many questions.

    I have a button which I want to affect another scene object (lets say to change its size). The button already has a UISendState script attached to it, to modify it's own colors on hover/press.

    How do I get the button OnPress to make a modification on another item? I added a 2nd UISendState script, and pointed it at a game object which has a UIGrowOnPress script attached to it, but that doesn't seem to do anything.

    Thanks.
     
  43. mydingefnysen

    mydingefnysen

    Joined:
    Dec 15, 2011
    Posts:
    51
    @LKIM: UIGrowOnPress is the wrong one to use (It reacts on OnHover events, which is sent to the object if it has a collider and is on a layer the UICamera raycasts to). You need a UIGrowOnState, which is not included in the package. You can make one by copy and pasting code and "merge" UIStateColor and UIGrowOnPress into that kind of script. As a start try using the UIStateColors on the object you want to change and see how that works (you need to define two colors in the array in the inspector, on for off and one for on-state). The UIState* series of scripts respond to the states the UISendState sends out.
     
    Last edited: Jan 10, 2012
  44. ArenMook

    ArenMook

    Joined:
    Oct 20, 2010
    Posts:
    1,902
    It's not working because UIGrowOnPress reacts to OnPress notifications, while State series of scripts react to OnState notifications. All these scripts were essentially meant as trivial examples for developers, which is why they are scheduled to be revamped soon to make the system more straightforward for artists and creative guys.

    But for now, try this: Attach UISendStateOnPress to your button, set its target to be your object you want to grow, then use this script on your target object:

    Code (csharp):
    1. using UnityEngine;
    2.  
    3. public class UIStateScale : MonoBehaviour
    4. {
    5.     public int currentState = 0;
    6.     public float duration = 0.2f;
    7.     public Vector3[] scales;
    8.  
    9.     void OnState (int state)
    10.     {
    11.         if (currentState != state)
    12.         {
    13.             currentState = state;
    14.             if (scales == null || scales.Length == 0) return;
    15.             int index = Mathf.Clamp(currentState, 0, scales.Length - 1);
    16.             TweenScale.Begin(gameObject, duration, scales[index]);
    17.         }
    18.     }
    19. }
     
    Last edited: Jan 10, 2012
  45. ArenMook

    ArenMook

    Joined:
    Oct 20, 2010
    Posts:
    1,902
    You can also use this script to forward events from one object to another:

    Code (csharp):
    1. using UnityEngine;
    2.  
    3. public class UISendEvents : UISend
    4. {
    5.     void OnHover (bool isOver)
    6.     {
    7.         if (target != null) target.SendMessage("OnHover", isOver, SendMessageOptions.DontRequireReceiver);
    8.     }
    9.  
    10.     void OnPress (bool isPressed)
    11.     {
    12.         if (target != null) target.SendMessage("OnPress", isPressed, SendMessageOptions.DontRequireReceiver);
    13.     }
    14.  
    15.     void OnClick ()
    16.     {
    17.         if (target != null) target.SendMessage("OnClick", SendMessageOptions.DontRequireReceiver);
    18.     }
    19. }
     
  46. helioxfilm

    helioxfilm

    Joined:
    Apr 23, 2008
    Posts:
    259
    Jus to understand the philosophy:
    You create the UI in a separate scene. The you save each complet UI (like a Main menu) into a prefab. In the game, when necessary, instantiate that prefab in front of the specified UI orto camera (in case of a 2D UI). This requires two things: to have in the memory the complett UI atlases + the actual gameplay atlases. In my case this is simply to much memory, my total UI is around 44 MB, and the game is also heavy in background, fishes, and a lots of animations for the main character, about 60MB.

    But if the UI atlas is not in the memory, then there is a load time, which may make the user impatient. I think I did not understand the concept - yet :)

    For in-game menus this prefab solution hosuld be fine, since that panel will be instantiated on top of the main gameplay. But if I go back to the Main menu, then the gameplay part should be dismissed from the memory, and the Main menu (and its assets) should be load back.

    Am I right? I think I will look for a completed game with Menus in the Asset store to understand the concept behind...
     
    Last edited: Jan 10, 2012
  47. ArenMook

    ArenMook

    Joined:
    Oct 20, 2010
    Posts:
    1,902
    If you use Application.LoadLevel, all unused resources get unloaded automatically by Unity.

    Generally what you should do is have a loading screen that covers up your game while it's loading, so there is no visible stutter as your objects and UI get loaded in.
     
  48. LKIM

    LKIM

    Joined:
    Feb 17, 2011
    Posts:
    40
    That won't work, unfortunately. Let's say I'm making a dropdown, and I have a set of buttons. What I want to detect is if *anything* other than one of those buttons was clicked, and to use that to hide the dropdown. Your approach won't trigger if a different button is clicked.
     
  49. ArenMook

    ArenMook

    Joined:
    Oct 20, 2010
    Posts:
    1,902
    @LKIM: That's what OnSelect(false) notification is for. You click on your drop-down button, it gets OnSelect(true). You click somewhere else -- it gets OnSelect(false).
     
  50. profanicus

    profanicus

    Joined:
    Nov 23, 2009
    Posts:
    295
    Just fyi, this is not compatible with RageSpline (and vice versa). Both packages have a script called TransformInspector.
     
Thread Status:
Not open for further replies.