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

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

  1. kevinseligmann

    kevinseligmann

    Member

    Joined:
    Mar 23, 2011
    Messages:
    68
    What do you mean with what ?
  2. ArenMook

    ArenMook

    Member

    Joined:
    Oct 20, 2010
    Messages:
    1,901
    Are you using NGUI's Atlas Maker tool, or an external program such as Texture Packer?

    Assuming you are using the NGUI tool, I would check the size of your sprites and make sure they are pixel-perfect. With the default UI setting of UIRoot (checkbox 'automatic' checked), and the size of your screen being even dimensions (1200x800 as opposed to 1201x801 for example), and the scales of all objects leading up to your widgets remaining at (1, 1, 1), there is absolutely no reason why your UI would not look crisp and pixel-perfect. If anything, it's the DXT-compressed texture that wouldn't look right. PNG doesn't lose quality, and neither does PSD. DDS saved using DXT compression actually does lose quality. So the problem is on your end, and you just have to figure out what it is.
  3. kevinseligmann

    kevinseligmann

    Member

    Joined:
    Mar 23, 2011
    Messages:
    68
    Yes, everything is perfect. All textures as GUI, Ancho, Panel, Sprites, everything pixel perfect and in a scale of 1. I really don't know what could this be.

    Thanks for your help though, it was really instructive.
    Thanks!
  4. ArenMook

    ArenMook

    Member

    Joined:
    Oct 20, 2010
    Messages:
    1,901
    Actually... I may have a guess here... did you try saving the textures that go into the atlas as TGA?

    Both PNG and PSD treat alpha as transparency -- everything that's transparent actually has a color of (1, 1, 1, 0), which is wrong. Basically the color gets discarded, and that's bad. DDS and TGA don't do this.

    P.S. Technically PSD also doesn't do this if you use an Alpha layer instead of transparency, but it's kind of hard to explain how to convert from one to another.
  5. kevinseligmann

    kevinseligmann

    Member

    Joined:
    Mar 23, 2011
    Messages:
    68
    Actually TGA seems better than PSD yes. It still has some sharp borders but works better. If I import the TGA from Photoshop it's exported and unity doesn't preserve the transparency. It seems that gimp does the trick and saves it with transparency. Maybe there's still some values to be touched on gimp before saving the image.

    Look at the new screenshot, it's remarkable how much it changed!

    $ScreenShot00032.png
  6. ArenMook

    ArenMook

    Member

    Joined:
    Oct 20, 2010
    Messages:
    1,901
    Yeah, but still... Instead of (1, 1, 1, 0) the transparent pixel color seems to be (0, 0, 0, 0), which is still bad. There is a way to convert from transparency to alpha in Photoshop, that would be your best bet in preserving quality, but as I said it'd take me a while to explain, and even then googling it might be the better choice anyway.
  7. ArenMook

    ArenMook

    Member

    Joined:
    Oct 20, 2010
    Messages:
    1,901
    Btw, if ever you need to convert from PNG to TGA, you can use a tool I wrote a long time ago: http://www.tasharen.com/temp/formatconverter.zip

    Drag drop the PNG texture onto the executable and it will spit out an R5D texture. Drag drop that onto the executable again, and it will spit out a TGA. This TGA will clearly show you what's there in your RGB channel underneath all the transparency.
  8. kevinseligmann

    kevinseligmann

    Member

    Joined:
    Mar 23, 2011
    Messages:
    68
    Nice, nice, I will check it out right away. I managed to create the Alpha channel within photoshop and export it as TGA from GIMP (Because for some reason photoshop doesn't want to export tga with a Unity-compatible transparency) and the result is the same as without the Alpha Channel.

    I will try now your app to see if there's a difference and a quality gain. I'll get back to you in a minute!
  9. kevinseligmann

    kevinseligmann

    Member

    Joined:
    Mar 23, 2011
    Messages:
    68
    Now we are talking! Theres a huge amount of difference between a TGA exported from GIMP with AND without Alpha Channel and the TGA files created from your app.

    The settings BEFORE importing the texture to the Atlas are as always GUI, Trillinear and TrueColor. This makes the GUI look like this.

    $ScreenShot00033.png

    Now it's way better than before, thanks!

    P.S: The texture created by the Atlas Maker is type Texture, should I leave it like that or change that one to GUI too?
  10. ArenMook

    ArenMook

    Member

    Joined:
    Oct 20, 2010
    Messages:
    1,901
    If you're working with 2D UIs that don't get shrunk, you can switch it to GUI to get some memory back. Otherwise you can keep it as Texture.
  11. col000r

    col000r

    Member

    Joined:
    Mar 27, 2008
    Messages:
    567
    yes, I think I used 64px character-height. but it makes a difference...
  12. kevinseligmann

    kevinseligmann

    Member

    Joined:
    Mar 23, 2011
    Messages:
    68
    Thanks very much ArenMook, you helped me a LOT.
    I will get back at you when I have the project finished so you can see what your influence did ;)

    Thanks!
  13. ArenMook

    ArenMook

    Member

    Joined:
    Oct 20, 2010
    Messages:
    1,901
    Apparently there is a 1000 character limit on release notes for the asset store. Hum.

    1.90:
    - NEW: You can now specify an option on the UIDragPanelContents that will prevent dragging if the contents already fit.
    - NEW: You can now specify a radio button group root on the checkbox instead of always having it be the parent object.
    - NEW: You can now easily adjust the widget's alpha by using the new UIWidget.alpha property.
    - NEW: UIAnchor script has been redesigned, and the 'stretch to fill' property has been removed. You can now position using relative coordinates.
    - NEW: UIStretch script has been added, allowing you to stretch an object in either (or both) directions using relative coordinates.
    - NEW: You can now specify a maximum range distance for UICamera's raycasts, allowing you to limit the interaction distance (for first-person cameras).
    - FIX: Popup list inspector now shows the "Position" drop-down.
    - FIX: Slider now updates correctly when it's first created, and when you change the Full Size property.
    - FIX: UIDragCamera now takes the camera's size into consideration.
    - FIX: DestroyImmediate calls have been replaced with NGUITools.DestroyImmediate as there seem to be odd issues on certain Android devices.
  14. jtfrench

    jtfrench

    New Member

    Joined:
    Mar 21, 2012
    Messages:
    9
    @ArenMook:

    I've been using Unity Pro w/ NGUI for less than a week and so far it has been going great. I'm really impressed with this library you've put together.

    I'm just wrapping my head around the "layers" concept. I have a scene that has NGUI's camera culled to objects in a custom-made "NGUI" layer, and the standard camera is culled to objects w/ "Default" layer.

    I can't click or touch (iOS) anything when the standard camera is culled to just the "Default" layer, but I can when its culled to "Everything".

    Can you tell me where I should look to learn more about how layers impact what you can/cannot click/touch? I'm noticing things change when I change layers, but I'm not familiar enough w/ Unity yet to really know why.

    Thanks so much!!
    (and apologies if this is not an appropriate usage of the forum, still learning etiquette :)
    Last edited: Apr 2, 2012
  15. holyjewsus

    holyjewsus

    Member

    Joined:
    Mar 7, 2011
    Messages:
    587


    just thought I'd show off some of my badly designed prototype ui using ngui!
    if you'd rather I post in your forum I can remove this, let me know.
  16. ArenMook

    ArenMook

    Member

    Joined:
    Oct 20, 2010
    Messages:
    1,901
    @jtfrench: Layer mask specified on the Camera determines what the camera sees. Event layer mask specified on the UICamera determines what objects will be receiving events. The two work together -- if you specify "everything" for what the camera sees, and "Default" for the events, only "Default" will be receiving the events. Likewise, if you specify "UI" for what the camera sees and "Default" for the events, nothing will be receiving events because the two masks are combined, and the result is what's used for events.

    @redmacmanz: How did you make the color picker? A few people were asking about how to make one a couple of days ago on the NGUI forums. :)
  17. Matkins

    Matkins

    Member

    Joined:
    Aug 24, 2009
    Messages:
    144
    @ArenMook

    How do I go about animating the alpha of a sprite using the animation curve editor? The only way I've managed to get it working is to expose the mChanged bool and give it a constant value 1 curve throughout the animation. Is there a cleaner way? Or is it possible that we can get color/alpha animation curve support in a future release?

    Thanks!
  18. holyjewsus

    holyjewsus

    Member

    Joined:
    Mar 7, 2011
    Messages:
    587
    Hey Aren,

    one of those people on the forum at least was me.

    instead of generating a gradient I found a texture I liked. I used Ngui to draw it as a sprite, calculated the center and subtracted it out from wherever I clicked to account for the dragging window. Then mapped that position to the pixel coordinates of the original texture and used get pixel to get the color info on the texture.
  19. ArenMook

    ArenMook

    Member

    Joined:
    Oct 20, 2010
    Messages:
    1,901
    @Matkins: NGUI is accessed via properties, and all the variables starting with "M" you see in the animation should not be modified -- they're internal, and private. Unity shouldn't show them... but it does. To animate a widget's color via the animation, you need an intermediate class -- something as simple as this:

    Code (csharp):
    1. using UnityEngine;
    2.  
    3. [RequireComponent(typeof(UIWidget))]
    4. public class ColorChanger : MonoBehaviour
    5. {
    6.     public Color color = Color.white;
    7.  
    8.     UIWidget mWidget;
    9.  
    10.     void Start () { mWidget = GetComponent<UIWidget>(); }
    11.     void Update () { mWidget.color = color; }
    12. }
    @redmacmanz: Pssh that's cheating. :)
  20. Matkins

    Matkins

    Member

    Joined:
    Aug 24, 2009
    Messages:
    144
    @ArenMook

    That's much better thanks. Sorry for messing with your mVariables.
  21. gamefools

    gamefools

    New Member

    Joined:
    Apr 9, 2011
    Messages:
    35
    Hi,

    I'm trying to work through just the basics of NGUI. I'm using 2d Toolkit for everything non-gui in my existing project. When I start a project from scratch, everything seems to be working perfect, but when I add it to my existing project, everything is incredibly small. When I click pixel perfect on the Dark Sprite in the Sci Fi example, it sets it to 15x15 and when I hit 'F' it zooms in so small that the box is quite a bit smaller than a single pixel of my 2d toolkit sprites. The sprite becomes normal sized when I set it to around 5000x5000. Also the numbers in the transform boxes when I move the sprite around are very large numbers well into the 10 thousands. Any thoughts on what could be causing this?
  22. ArenMook

    ArenMook

    Member

    Joined:
    Oct 20, 2010
    Messages:
    1,901
    UIRoot scales the UI by the inverse of the screen's height by default. For example, if your game window is 1200x800, the size of the root will be 1/800, or 0.0025. This is so that when you add game objects to your scene, they won't be midget-tiny. My guess is that the 2D Toolkit doesn't do this for you.

    The easiest solution for you would be to get rid of UIRoot script, reset the scale to (1, 1, 1), and continue working in screen coordinates.
  23. gamefools

    gamefools

    New Member

    Joined:
    Apr 9, 2011
    Messages:
    35
    Perfect, thanks!
  24. WarpZone

    WarpZone

    New Member

    Joined:
    Oct 29, 2007
    Messages:
    168
    I just grabbed NGUI and added it to my project. I get the following error:
    Code (csharp):
    1. Assets/NGUI/Examples/Scripts/InventorySystem/Editor/InvDatabaseInspector.cs(37,34): error CS0117: `EditorGUIUtility' does not contain a definition for `LookLikeControls'
    Is there something more I need to do? I'm using Unity 3.5.
  25. Quickfingers

    Quickfingers

    Member

    Joined:
    Aug 29, 2009
    Messages:
    230
    Just wanted to let you know of a bug ArenMook, if I have a UILabel on a gameObject its possible to add a UISprite component to the same object, and on trying to Unity crashes. It possible to do something like the Colliders in Unity with your Widgets where if you try and add one and one already exists you get a warning box?
  26. ArenMook

    ArenMook

    Member

    Joined:
    Oct 20, 2010
    Messages:
    1,901
  27. WarpZone

    WarpZone

    New Member

    Joined:
    Oct 29, 2007
    Messages:
    168
  28. ArenMook

    ArenMook

    Member

    Joined:
    Oct 20, 2010
    Messages:
    1,901
    Free version of NGUI?

    You will want to delete the full version first, make sure that the other dev's app works. After that File -> New Scene, delete the free version of NGUI, and import the full version.
  29. col000r

    col000r

    Member

    Joined:
    Mar 27, 2008
    Messages:
    567
    It's very nice that the position of the widgets is in pixel coordinates, BUT what is the correct way to set the position through script? I have a list of buttons that I want to position dynamically via script. If I just assign transform.position to a new Vector3 with the pixel coordinates, they go far far away. Is there a simple way to just tell a widget to move to pixel-position xyz?
  30. ArenMook

    ArenMook

    Member

    Joined:
    Oct 20, 2010
    Messages:
    1,901
    transform.localPosition
  31. WarpZone

    WarpZone

    New Member

    Joined:
    Oct 29, 2007
    Messages:
    168
    Yeah. Just a guess. But since you say in the first post of this thread that developers are welcome to incorporate the free version of this into their own asset store tools, I figured it could be why there's an extra copy of EditorGUIUtility floating around. I never installed the free version myself, as far as I know.

    Actually I just now tried renaming the superfluous copy of EditorGUIUtility, and I got the same error with InvDatabaseInspector.

    Starting a new scene doesn't seem to help. Is there a particular directory in the project these files need to reside in, or something?

    The other Asset Store content I'm using is Ultimate FPS Camera by VisionPunk. I don't know where that developer may have left remnants of his copy of NGUI, so I don't know how to uninstall it.

    Okay, I just created a new project and I still got those errors. Deleting one makes the other work. Unfortunately, I need both.

    Is the problem caused by the fact that there's more than one folder named Editor? If I move all the scripts into the same Editor folder, and delete the extra one, will it start working? This page seems to suggest that that's not how it works. But I can't think of any other reason why the scripts would be preventing each other from compiling.

    Any thoughts? NGUI and Ultimate FPS Camera are both pretty popular. I'd be amazed if I were the first person to try using them both in the same project!
  32. ArenMook

    ArenMook

    Member

    Joined:
    Oct 20, 2010
    Messages:
    1,901
    Last edited: Apr 3, 2012
  33. ArenMook

    ArenMook

    Member

    Joined:
    Oct 20, 2010
    Messages:
    1,901
    My suggestion is contact the other kit's developer and have him rename his class to something that doesn't conflict with Unity's built-in classes.
  34. WarpZone

    WarpZone

    New Member

    Joined:
    Oct 29, 2007
    Messages:
    168
    That's a good point, actually. Contacting them now.
  35. jtfrench

    jtfrench

    New Member

    Joined:
    Mar 21, 2012
    Messages:
    9
    @ArenMook:

    Thanks for the tip about using UICamera's Event Receiver Mask. That certainly did the trick.
  36. Zemnoph7

    Zemnoph7

    New Member

    Joined:
    Apr 4, 2012
    Messages:
    8
    Hi Aren

    Just bought and imported the newest NGUI version (1.91) into Unity 3.5 and am getting the following compilation errors:

    - Assets/NGUI/Scripts/Editor/BMFontReader.cs(47,34): error CS0433: The imported type `BMFont' is defined multiple times

    - Assets/NGUI/Scripts/Editor/UIWidgetInspector.cs(16,19): error CS0433: The imported type `UIWidget' is defined multiple times

    ...Any thoughts?
  37. Zemnoph7

    Zemnoph7

    New Member

    Joined:
    Apr 4, 2012
    Messages:
    8
    In addition to my comment above, I noticed that the NGUI toolbar menu at the top of the Unity Editor is no longer there. Just incase it servers any purpose to know, I upgraded from the Free version by just importing on top of it.
  38. ArenMook

    ArenMook

    Member

    Joined:
    Oct 20, 2010
    Messages:
    1,901
    @Zemnoph7: You can't just import on top of it. The readme file has instructions on how to do it properly. You need to delete the free version before importing the full version.
  39. Zemnoph7

    Zemnoph7

    New Member

    Joined:
    Apr 4, 2012
    Messages:
    8
    Ah of course, thank you works great now. Just another quick question, just want to get your opinion I guess, what are your thoughts about using NGUI for all inputs in the game? I know its possible, but would there be some drawbacks to say putting all game objects in the GUI draw layer and handling all input through NGUI?
  40. Zemnoph7

    Zemnoph7

    New Member

    Joined:
    Apr 4, 2012
    Messages:
    8
    Gah sorry one more question. I'm playing around with the Popup Menu and it appears that if I have 2 of them in the scene and they are placed one over the other, if either ones popup background part expands over the other one, the Labels of the other one are still shown through the background of the expanded one. Doesn't matter if they are in different panels or completely different depths / z values. The labels always display through. Am I just missing something with depths here? btw working with a 3D gui

    Thanks
  41. ArenMook

    ArenMook

    Member

    Joined:
    Oct 20, 2010
    Messages:
    1,901
    You should use NGUI for all UI-related input, but when it comes to input in regards to controlling your character you will still want to rely on the Unity's Input class.

    As for the popup -- are you using one atlas here? Make sure the depth value on the widgets of one popup matches the depth values of another.
  42. kevinseligmann

    kevinseligmann

    Member

    Joined:
    Mar 23, 2011
    Messages:
    68
    Hi Aren, I have 2 doubts. Always when adding a Sprite, the size of the newly created sprite respects the aspect ratio of the image I chose. After that, I may scale it to fit in a window or something, but I don't mess with the proportions. But when adding buttons, the newly generated buttons do not respect the original image, making me resize them aproximately.

    Is there a way to avoid this? To make the button's dimension same as the image selected for it?

    And escondly and more important, how do I access to a input label value? I tried declaring the LABEL (Not the container nor background) as a GameObject and trying to acces myObject.Text but that doesn't work. The value is null.

    How can I do this?

    Thanks very much!
  43. ArenMook

    ArenMook

    Member

    Joined:
    Oct 20, 2010
    Messages:
    1,901
    Buttons use sliced sprites -- it's a different type of a widget. You aren't limited to what the Widget Tool has in store. Just create your own sprite with the background for your button, then add some text on top and voila, your new custom button. Just don't forget to add a collider.

    UIInput.text
  44. kevinseligmann

    kevinseligmann

    Member

    Joined:
    Mar 23, 2011
    Messages:
    68
    Perfectly, will do that with my next buttons.

    And I couldn't follow you on the UllInput.text, how can I access it? Currently my setup is as follows.

    Code (csharp):
    1.  
    2. var userObject : GameObject;
    3. var passObject : GameObject;
    4.  
    5. strUsername = userObject.Text;
    6. strPassword = passObject.Text;
    7.  
    The 2 GameObjects point to a object with the UiLabel script.
  45. ArenMook

    ArenMook

    Member

    Joined:
    Oct 20, 2010
    Messages:
    1,901
    Get the UIInput component, and access its 'text' property. GameObject has no text property. Try changing your GameObject to UIInput first.
  46. kevinseligmann

    kevinseligmann

    Member

    Joined:
    Mar 23, 2011
    Messages:
    68
    Code (csharp):
    1. strUsername = GameObject.Find("Background_loginUser").GetComponent(UIInput).text;
    All I get is "Unknown Identifier UIInput".

    And when trying to declare the object as UIInput with var asd : UIInput I get the same.

    Any idea? I'm using JS.
  47. ArenMook

    ArenMook

    Member

    Joined:
    Oct 20, 2010
    Messages:
    1,901
  48. kevinseligmann

    kevinseligmann

    Member

    Joined:
    Mar 23, 2011
    Messages:
    68
  49. gamefools

    gamefools

    New Member

    Joined:
    Apr 9, 2011
    Messages:
    35
    Hi,

    I was playing with the trial version of NGUI this weekend and then purchased the full version today. When I went to create a progress bar on the full version, I noticed that Number Of Steps variable is now a slider and maxes out at 11. In the trial version I was able to input any number I wanted into this field to create as smooth of a progress bar as I wanted. Is there a way around this?
  50. ArenMook

    ArenMook

    Member

    Joined:
    Oct 20, 2010
    Messages:
    1,901
    Leave it to 0, and it will be perfectly smooth.