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

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

  1. quitebuttery

    quitebuttery

    Member

    Joined:
    Mar 12, 2011
    Messages:
    204
    Cool--I played with the BoxCollider and matched the offset. The volume the camera can scroll inside is defined in the Window object's TiledSprite children: TopLeft, and BottomRight, correct? Makes sense.
  2. ArenMook

    ArenMook

    Member

    Joined:
    Oct 20, 2010
    Messages:
    1,901
    The scrollable area is defined by the sum of all collider bounds parented to the transform pointed by "root for bounds". TopLeft and BottomRight just specify the corners of the viewable area for the scroll view camera.
  3. ranilian

    ranilian

    New Member

    Joined:
    Dec 24, 2011
    Messages:
    45
    Hey Aren,

    Does NGUI support Multi-touch events? I can't seem to make it work.

    Thanks.
  4. ArenMook

    ArenMook

    Member

    Joined:
    Oct 20, 2010
    Messages:
    1,901
    It supports multiple touches at the same time, but I haven't coded any logic to recognize multi-finger gestures, seeing as there is already a popular kit for that (FingerGestures).
  5. ArenMook

    ArenMook

    Member

    Joined:
    Oct 20, 2010
    Messages:
    1,901
    Version 1.26 is up for download via the PayPal link and Asset Store:
    • NEW: Added support for trimmed sprites (and fonts) exported via TexturePacker.
    • NEW: UISlider now has horizontal and vertical styles.
    • NEW: Selected widgets now have their gizmos colored green.
    • FIX: UISlider now uses the collider's bounds instead of the target's bounds.
    • FIX: Sliced sprite will now behave better when scaled with all pivot points, not just top-left.
    Last edited: Jan 6, 2012
  6. holyjewsus

    holyjewsus

    Member

    Joined:
    Mar 7, 2011
    Messages:
    587
    you are a machine!
  7. ctsteve123

    ctsteve123

    New Member

    Joined:
    Sep 13, 2007
    Messages:
    51
    On the earlier discussions on seeing refractions on a Mac with a Nividia card. Looking at the examples 5 and 6 you provided in the download, I believe that I had earlier misspoken when I said I could not see refraction when looking at the example on your website. I was looking at the window and was not able to see through, but right in front of me should of noticed that being able to see through the buttons to see the honeycomed window was indeed refraction. On the downloaded example, I then changed the window to the be a button then could see through the window to the background. Looking at your website example 5 if I use "crtl -" twice I do see the refracive honeycomed button when hovering. Example 6 on your website I am still not able to see the GUI.

    Sorry to lead you astray on this issue.
    Last edited: Jan 7, 2012
  8. hjupter

    hjupter

    Member

    Joined:
    Dec 23, 2011
    Messages:
    515
    Hey aren anyway to fix this on flash after loading a level?

    TypeError: Error #1009: Cannot access a property or method of a null object reference.
    at global::UILabel/UIWidget_OnFill_List$1_List$1_List$1()[-----\Temp\StagingArea\Data\ConvertedDotNetCode\global\UILabel.as:218]
  9. holyjewsus

    holyjewsus

    Member

    Joined:
    Mar 7, 2011
    Messages:
    587
    Hey guys, I wanted to use UIstatecolors on some game objects as part of my gui, but since they are not widgets I could not, is there anything wrong with doing something like this, am I missing something?
    Code (csharp):
    1. using UnityEngine;
    2.  
    3. /// <summary>
    4. /// Changes the color of the widget based on the currently active state.
    5. /// Tip: Use UISendState to change the state of a remote widget that has UIStateColors attached.
    6. /// </summary>
    7.  
    8. [AddComponentMenu("NGUI/Interaction/State Colors GameObjects")]
    9. public class UIStateColorsGameObjects : MonoBehaviour
    10. {
    11.     public int currentState = 0;
    12.     public float animationSpeed = 8f;
    13.     public Color[] colors;
    14.  
    15.     MeshRenderer renderer;
    16.  
    17.     void OnState (int state)
    18.     {
    19.         currentState = state;
    20.     }
    21.  
    22.     void Start ()
    23.     {
    24.         renderer = this.GetComponent<MeshRenderer>();
    25.     }
    26.  
    27.     void Update ()
    28.     {
    29.         if (colors == null || colors.Length == 0) return;
    30.         int index = Mathf.Clamp(currentState, 0, colors.Length - 1);
    31.         renderer.material.color = Color.Lerp(renderer.material.color, colors[index], Mathf.Clamp01(Time.deltaTime * animationSpeed));
    32.     }
    33. }
    and another question: my goal is to have tooltips appear when hovering certain game objects in my scene, there are going to be a bunch of these with unique text, any tips?
    Last edited: Jan 7, 2012
  10. mydingefnysen

    mydingefnysen

    New Member

    Joined:
    Dec 15, 2011
    Messages:
    50
    @redmacmanz: It looks correct. Did you remember to put UISendState on the object as well, and adding two colors to the array? Otherwise, check your colliders and layers. About tooltip, check the Character example that uses UITooltip.cs.
  11. ArenMook

    ArenMook

    Member

    Joined:
    Oct 20, 2010
    Messages:
    1,901
    @ctsteve123: The button doesn't have refraction on it, it's just see-through. The problem is in your OSX video driver. The videocard supports this feature, but either Unity thinks it doesn't and doesn't correctly disable the shader right off the bat, or the driver is bugged and says it supports something even though it doesn't work as Unity expects. Either way, since there is no way to check what videocard you have at run-time, the only way to fix it would be for Apple to fix the driver (fat chance), or for Unity guys to create a work-around. (Example 6 hasn't been built with the Ctrl+Plus feature btw).

    Flash bug, Unity needs to fix it. I've thought of a work-around that I will test in a minute though.

    @redmacmanz: What mydingefnysen said (thanks!). :)
    Last edited: Jan 7, 2012
  12. ArenMook

    ArenMook

    Member

    Joined:
    Oct 20, 2010
    Messages:
    1,901
    Well, the work-around works, but I noticed that there seems to be some issue with sliced sprite coordinate calculations in Flash that I have to create another work-around for. *sigh*
  13. mydingefnysen

    mydingefnysen

    New Member

    Joined:
    Dec 15, 2011
    Messages:
    50
    With the flash contest being over maybe its better to wait for a more stable version of unityflash before making too many workarounds? Just a thought :)
  14. ArenMook

    ArenMook

    Member

    Joined:
    Oct 20, 2010
    Messages:
    1,901
    S'alright. I'll remove the work-arounds when the bugs are fixed. :)

    Turns out flash doesn't like code like this:

    Code (csharp):
    1.  
    2. v[0] = Vector2.zero;
    3. v[1] = v[0];
    4.  
    5. v[1].x += 1f;
    6.  
    If you try to read the value of v[1].x it will be '0' on Flash.

    Works fine if you set v[1] = Vector2.zero; instead of =v[0].
  15. ArenMook

    ArenMook

    Member

    Joined:
    Oct 20, 2010
    Messages:
    1,901
    Version 1.27 has the Flash export fixes.
  16. quitebuttery

    quitebuttery

    Member

    Joined:
    Mar 12, 2011
    Messages:
    204
    Hey can we get a UIGrowOnTouch script? Basically a Grow on Hover for touch? I think it's useful for a button to grow when the finger is on it, and shrink when it slides off letting the user know that when he lifts his finger it won't count as a click. I can see a use for it in some interfaces.
  17. mydingefnysen

    mydingefnysen

    New Member

    Joined:
    Dec 15, 2011
    Messages:
    50
    Its pretty trivial to modify UIGrowOnHover to do just that, give it a try ;)
    (Ill have a need for it soon so if you still need it then Ill be happy to share with you)
  18. ArenMook

    ArenMook

    Member

    Joined:
    Oct 20, 2010
    Messages:
    1,901
    Just copy the script and replace all instances of the word Hover with Press. I am out of town right now so I can't just paste you the result but if you still need it after I get home I can surely do that.
  19. quitebuttery

    quitebuttery

    Member

    Joined:
    Mar 12, 2011
    Messages:
    204
    Yeah I figure it's simple--might as well toss it in the next release.
  20. mydingefnysen

    mydingefnysen

    New Member

    Joined:
    Dec 15, 2011
    Messages:
    50
    @arenmook: well, if it is to be de-pressed when the touch or cursor is not over it any more (but button/touch still down), there needs to be some raycasts as well. If no change to UICamera is planned that is.
  21. quitebuttery

    quitebuttery

    Member

    Joined:
    Mar 12, 2011
    Messages:
    204
    Also, I think the buttons should not be activated/clicked if the touch starts outside of the button and then slides into the button. That's what happens with the current button, but most apps don't behave like that. If your touch starts outside of the button, and then you slide your finger into the button and lift, the button shouldn't be clicked.
  22. ArenMook

    ArenMook

    Member

    Joined:
    Oct 20, 2010
    Messages:
    1,901
    Where are you seeing that? Currently if you start the touch/click event outside of the button then move onto it, it won't receive anything but OnHover after you release the button.
  23. ArenMook

    ArenMook

    Member

    Joined:
    Oct 20, 2010
    Messages:
    1,901
    As promised, no raycasts needed:
    Code (csharp):
    1. [AddComponentMenu("NGUI/Interaction/Grow On Press")]
    2. public class UIGrowOnPress : MonoBehaviour
    3. {
    4.     public Vector3 amount = new Vector3(1.1f, 1.1f, 1.1f);
    5.     public float animationSpeed = 8f;
    6.  
    7.     Transform mTrans;
    8.     Vector3 mBaseScale;
    9.     bool mPressed = false;
    10.  
    11.     void OnPress (bool isOver)
    12.     {
    13.         mPressed = isOver;
    14.     }
    15.  
    16.     void OnDrag (Vector2 delta)
    17.     {
    18.         mPressed = (UICamera.lastHit.collider == collider);
    19.     }
    20.  
    21.     void Start ()
    22.     {
    23.         mTrans = transform;
    24.         mBaseScale = mTrans.localScale;
    25.     }
    26.  
    27.     void Update ()
    28.     {
    29.         Vector3 target = mBaseScale;
    30.  
    31.         if (mPressed)
    32.         {
    33.             target.x *= amount.x;
    34.             target.y *= amount.y;
    35.             target.z *= amount.z;
    36.         }
    37.  
    38.         mTrans.localScale = Vector3.Lerp(mTrans.localScale, target, Time.deltaTime * animationSpeed);
    39.     }
    40. }
    Although I should probably mention that I am currently working on a completely new animation logic that will make the code above shorter. As DTreble rightly pointed out, there are some drawbacks to the current approach.
    Last edited: Jan 8, 2012
  24. DanTreble

    DanTreble

    Member

    Joined:
    Aug 31, 2010
    Messages:
    515
    That HOTween looks promising http://www.holoville.com/hotween/. If I had a chance, I'd use that to do some state transition components.
  25. markhula

    markhula

    New Member

    Joined:
    Sep 3, 2011
    Messages:
    630
    Hey Aren,

    I'm still struggling with resolution independence.
    The solution I have gone for (and I'm talking about position on screen not stretching of textures or different resolution atlases) is to have all UI components render by an ortho camera.
    This works great! - but if say I position an icon at a screen location for 960x640 screen it's location on 1024x768 is obviously different.
    Now I could compensate for this by simply moving that particular camera in z to effectively 'scale' the UI - I assume this is a good approach?
    My question is is there an exact method to work out where the camera should be in 'z' or do I simply get the screen width/height and manually eyeball a value for z on the camera that suits each resolution?
    Thanks for your help!

    Cheers
  26. ArenMook

    ArenMook

    Member

    Joined:
    Oct 20, 2010
    Messages:
    1,901
    "Z" won't change anything if you are using an ortho camera. If you position an icon at, say, quarter of screen height from the bottom of the screen, its position will still be quarter of screen height from the bottom of the screen if the resolution changes.

    If you wanted to attach your icon to a side of the screen, say always be glued to the right side, switch the widget's pivot to be on the right and attach UIAnchor to it setting it to use the right side.

    If you wanted your widget to always be offset by say, 50 pixels at your target resolution, UIAnchor a game object instead of the widget, and make that widget be a child of UIAnchor, offset by 50 in its transform.
  27. markhula

    markhula

    New Member

    Joined:
    Sep 3, 2011
    Messages:
    630
    Oops,! , sorry I meant to say perspective camera!!!! (of course!!)

    Cheers
  28. ArenMook

    ArenMook

    Member

    Joined:
    Oct 20, 2010
    Messages:
    1,901
    Well, moving things along the Z using a perspective camera will scale them, sure... but I am not quite sure why you would want that? Your UI should appear exactly the same as the resolution changes, in the same position relative to the resolution's height. UIAnchor should also work with the perspective cameras if you want to glue something to the side of the screen instead.
  29. markhula

    markhula

    New Member

    Joined:
    Sep 3, 2011
    Messages:
    630
    Well, if (for example); I have 10 icons along the bottom off the screen (with perspective camera); they occupy the total width of the screen at 960. I *guessed* that at a resolution of 1024 they should still occupy the total width of the screen. I know they will be slightly scaled but is this not better than the icons being the same size and a gap to the left right? (or is it simply a matter of preference?).
    After-all what do I do on a width of 2048? (assuming such device exists!); my icons will be tiny in comparison...

    Cheers
  30. ArenMook

    ArenMook

    Member

    Joined:
    Oct 20, 2010
    Messages:
    1,901
    Generally games don't scale UI components like that and prefer to leave the gaps instead. Think of World of Warcraft for example -- remember the dragons on the side of the main bar? If playing on a 4:3 screen you would only see the head of the dragons, but if you play on a 16:10 or 16:9 screen, you will see the entire body.
  31. ArenMook

    ArenMook

    Member

    Joined:
    Oct 20, 2010
    Messages:
    1,901
    But, if you still want to scale them, you can play around with UIAnchor's "fill" option. It's used to scretch the background sprite across the entire screen in Example 0.
  32. markhula

    markhula

    New Member

    Joined:
    Sep 3, 2011
    Messages:
    630
    Hmmmmm, I'm sure you are right!.
    Just wondered what on earth I do on significantly higher resolution devices....

    Cheers
  33. ArenMook

    ArenMook

    Member

    Joined:
    Oct 20, 2010
    Messages:
    1,901
    Well, generally the resolution itself doesn't matter as much as the width:height ratio (16:9, 4:3, etc), and they don't vary as much.

    If you wanted to choose a different texture atlas for low-res devices such as iPhone 3gs and hi-res atlas for an iPhone 4, I posted how to do that at run-time earlier.
  34. markhula

    markhula

    New Member

    Joined:
    Sep 3, 2011
    Messages:
    630
    Hey Aren,

    Sure. The textures aren't an issue it was more the positioning and scale.
    I'll leave it as resolution fixed (as it were) and worry about the effect of resolutions later :)

    Cheers
  35. Kalagaraz

    Kalagaraz

    New Member

    Joined:
    Aug 26, 2009
    Messages:
    46
    so I've been walking through the tutorials and I made my own atlas from a some UI sprites and a font, I have some tileable sprites use to make a RPG looking UI. However, when i start creating UISprite objects to position them, there seems to be a kind of dark border around the tile, and when I put them side by side there is a dark line where they join?

    Did I do something wrong?

    EDIT: Looking in close at them it seems there is a kind of half transparent dark gray border on all 4 sides of tile.
    Last edited: Jan 8, 2012
  36. ArenMook

    ArenMook

    Member

    Joined:
    Oct 20, 2010
    Messages:
    1,901
    You need to make sure that there is some padding in between of sprites in your atlas. 1 pixel is usually enough. Also set the texture 's wrap mode to be clamped instead of repeat and change its format to "truecolor".
  37. Kalagaraz

    Kalagaraz

    New Member

    Joined:
    Aug 26, 2009
    Messages:
    46
    I think it seems to be the bilinear filtering
  38. ArenMook

    ArenMook

    Member

    Joined:
    Oct 20, 2010
    Messages:
    1,901
    That's what causes it, yes -- and leaving some space in between of sprites in your atlas is the common way of fixing this. :)
  39. Kalagaraz

    Kalagaraz

    New Member

    Joined:
    Aug 26, 2009
    Messages:
    46
    The atlas has 2 pixel border padding, and 2 pixel shape padding. It works in point, but not in bilinear, and if I position them accurately in scene view, in the camera few there is still a noticeable crack between the 2 sprites.
  40. ArenMook

    ArenMook

    Member

    Joined:
    Oct 20, 2010
    Messages:
    1,901
    2 pixels should be more than enough. Other things to check -- make sure unity imports the texture at its resolution (ie 2048x2048 instead of 1024x1024), make sure the atlas texture isn't marked as "compressed", make sure you're using whole numbers in your UI (make pixel-perfect button does that for the widgets, but ensure that parent game objects use whole numbers as well). If you can't figure it out you can send me the package and I'll have a look.
  41. parkerdc

    parkerdc

    New Member

    Joined:
    Aug 2, 2011
    Messages:
    10
    Can you explain the difference between the 2D UI and 3D UI objects? Can they be used together, etc.
  42. ArenMook

    ArenMook

    Member

    Joined:
    Oct 20, 2010
    Messages:
    1,901
    The only difference is in the camera used to draw them. Ortho camera is used for the 2D UI and a perspective camera is used for the 3D UI. They can be used together safely. In example 3 (the orc) the UI itself is 3D, but tooltips are 2D.
  43. parkerdc

    parkerdc

    New Member

    Joined:
    Aug 2, 2011
    Messages:
    10
    @ArenMook, thanks, I have been using Example 1 - Interaction, and haven't gotten to the Orc yet. I did not know if more was involved.

    Do you recommend any animation package that can work with NGUI? That can move objects around after state has been sent?

    I have written a bunch of animation classes that work with NGUI and is working, just wondering if I should use another package.
    Last edited: Jan 8, 2012
  44. ArenMook

    ArenMook

    Member

    Joined:
    Oct 20, 2010
    Messages:
    1,901
    I'm currently working on a simple built-in tweening system that will go live in the next update. If you need more advanced animations, you can just create them using Unity itself (Right click in project view -> Create -> Animation).
  45. parkerdc

    parkerdc

    New Member

    Joined:
    Aug 2, 2011
    Messages:
    10
    ArenMook, you are awesome, a simple tween system is exactly what I need!
  46. mydingefnysen

    mydingefnysen

    New Member

    Joined:
    Dec 15, 2011
    Messages:
    50
    Ah of course, nice and clean! Im good at making things overly complicated:)

    Today I was wondering over how to deactivate gui elements the most efficient way. Lets say I have a lot of UI elements with fairly complex compositions (Lots of game objects and UIWidgets), and I want these to stop being rendered. Is the best way to iterate through the hierarchy and go gameObject.active = false, or is there some shortcut through the UIPanel so that the gameobjects themselves can stay active while the UIWidget is not rendered by the panel? Similar to just turning off a gameobjects renderer (I usually do that instead of turning off gameobjects completely).
  47. ArenMook

    ArenMook

    Member

    Joined:
    Oct 20, 2010
    Messages:
    1,901
    I suggest organizing your UI to have several sub-roots that you can activate/deactivate using SetActiveRecursively:
    Code (csharp):
    1. gameObject.SetActiveRecursively(false);
    If you want to disable all widgets but keep game objects active:
    Code (csharp):
    1. UIWidget[] widgets = gameObject.GetComponentsInChildren<UIWidget>();
    2. foreach (UIWidget w in widgets) w.enabled = false;
    ... but the colliders will still be active, so I suggest you go with my original suggestion.
  48. mindlube

    mindlube

    Member

    Joined:
    Oct 3, 2008
    Messages:
    993
    Hi Aren, is the trimmed texturepacker atlas feature compatible with using UIFonts as sprite within UIAtlas? Entering the PixelRect for the font could get kinda crazy with trimming enabled... It's already hard to get the correct PixelRect just without trimmed sprites. Can you give any guidelines for reading the texturepacker .txt file and interpreting what needs to be entered in PixelRect? Thanks
  49. ArenMook

    ArenMook

    Member

    Joined:
    Oct 20, 2010
    Messages:
    1,901
    Yup, fully supported. :)

    No need to manually enter anything anymore. Select the atlas on UIFont and choose the font's sprite.
  50. mindlube

    mindlube

    Member

    Joined:
    Oct 3, 2008
    Messages:
    993
    @Aren, wow- I just did that and the UIFont inspector updated automagically. That's some pretty impressive coding :) Thanks much