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

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

  1. Zhosay

    Zhosay

    New Member

    Joined:
    Dec 12, 2011
    Messages:
    98
    Hey having a short question.

    The tutorials etc work fine for NGUI but the problem I face is that you made the Camera size in relation to the game size. If its for a standalone where you change the Resolution of the game whats the easiest way to see the gui in the same position example in the bottom left corner. Or do I need a script on each GUI object calculating it?
    Last edited: Dec 12, 2011
  2. ArenMook

    ArenMook

    Member

    Joined:
    Oct 20, 2010
    Messages:
    1,901
    I bet I know what's wrong. Your mac is sending out "Delete" keys instead of "Backspace". Oddly enough, I tried the same thing on both of my macs, and it worked fine. Either way, I'll add a check for both. Thanks! :)

    Edit: Done. Please try the first example again.
    Last edited: Dec 12, 2011
  3. ArenMook

    ArenMook

    Member

    Joined:
    Oct 20, 2010
    Messages:
    1,901
    UIAnchor is what you're looking for. It lets you anchor components to sides of the screen (or the center) with an offset.
  4. ArenMook

    ArenMook

    Member

    Joined:
    Oct 20, 2010
    Messages:
    1,901
    That's a good idea. Will do!

    Where does the null exception happen? Also double check to make sure you have a UICamera script attached to your camera, otherwise you won't be receiving any events.
  5. ironwill96

    ironwill96

    New Member

    Joined:
    Dec 12, 2011
    Messages:
    17
    @ArenMook The exception occurred after I added UIStateColors script to my UISlicedSprite that is a child of my button gameobject. I did it again this morning and no null exception but it still doesn't work properly - the button just disappears and my UI Label sits on top of the UI background (no button is there anymore). It doesn't re-appear when mousing over it either. I do have a UICamera script attached and if I stick to GrowOnHover script that bit works fine.
  6. ArenMook

    ArenMook

    Member

    Joined:
    Oct 20, 2010
    Messages:
    1,901
    Make sure the UISlicedSprite background is on a higher depth value than the window background.

    Edit: Oh and make sure you specify the 3 colors in UIStateColors. :)
  7. Legacy

    Legacy

    New Member

    Joined:
    Oct 11, 2011
    Messages:
    651
    Another request is how to add your own type of font, from what i looked at it looks pretty similar to a texture atlas but im not completly sure how i would go about adding in my own fonts.
  8. ArenMook

    ArenMook

    Member

    Joined:
    Oct 20, 2010
    Messages:
    1,901
    I am currently working on a second video tutorial that will go through these steps:

    1. Font creation
    2. Atlas creation
    3. Adding NGUI to an existing project (which will be provided as a free download)
    4. Writing event listener scripts

    So the font stuff will be covered. For now there is some documentation found here.

    Basic steps for font creation are:
    - Export a font from BMFont using a 32-bit texture (A = outline, R, G, B = one) in PNG format.
    - Rename the exported FNT file to TXT, move it along with the texture into your project's folder.
    - Create a new game object, add a UIFont script to it.
    - Drag drop the font's TXT file into the font data field.
    - Create a material using the font's texture, and assign it to the UIFont.

    Save this game object as a prefab and use it. :)

    The video tutorial I am making is going to explain all this in detail, including the steps necessary to merge the font's texture with the UI atlas.
  9. ironwill96

    ironwill96

    New Member

    Joined:
    Dec 12, 2011
    Messages:
    17
    Figured it out, I was using the eye dropper to match some colors in my scene, and for some reason when you eye dropper a color from an existing buttons color, it puts the alpha value at 0 so my color assignments were invisible :).
  10. Eskema

    Eskema

    Member

    Joined:
    Jun 23, 2010
    Messages:
    293
    I have to add another bit about font creation, besides BMFont (for windows only), you can use the amazing Glyph designer (only for mac), just export your font in txt format like this image

    [​IMG]

    And drag'n drop your font texture into texture packer if you want to pack the font with the rest of your GUI sprites.
  11. ironwill96

    ironwill96

    New Member

    Joined:
    Dec 12, 2011
    Messages:
    17
    Dumb question, what are the 2D UI and 3D UI layers used for that I created per the readme? Do I assign my UI elements to these layers to tell NGUI which type of GUI i'm putting in?

    I want to start putting in HUD elements to my game using NGUI that are relative to the camera fixed and always stay in the same spots on the screen (screen positioning versus world space).
  12. ArenMook

    ArenMook

    Member

    Joined:
    Oct 20, 2010
    Messages:
    1,901
    They are only used to get some of the examples to run properly as they have objects on those layers. The video tutorial I am making right now will also explain how to set up layers for your UI so they are not just sitting on the "default" layer.

    Layers are used to determine what gets drawn by which camera -- so if you have a main camera, it should probably not draw your UI, leaving that for your UI camera.
  13. Legacy

    Legacy

    New Member

    Joined:
    Oct 11, 2011
    Messages:
    651
    Adding this to an existing project couldnt be easier.

    1.) Import the package into your existing project.
    2.) Create a new layer(s) for your UI
    3.) Create another camera and change it to orthographic(set up the clipping panes to your liking and make sure you set the camera postion and rotation to 0).
    3.) Change the culling option on the main camera to everything BUT the ui layer.
    4.) Change the ui cameras culling to JUST the ui layer.
    5.) Set the depth on your ui camera to a number higher than the main camera(so you can draw the ui over the main camera).
    6.) Attach the UICamera script to the ui camera and vuala your all set.
  14. ArenMook

    ArenMook

    Member

    Joined:
    Oct 20, 2010
    Messages:
    1,901
    Couldn't have said it better myself, thank you :)
  15. ArenMook

    ArenMook

    Member

    Joined:
    Oct 20, 2010
    Messages:
    1,901
    Here is the advanced tutorial covering importing NGUI into your own project, font creation, atlas creation, custom scripts, and more. The project used here can be obtained for free -- http://www.tasharen.com/workshop/workshop.zip as a thank you to everyone. :)

    Available here in high quality, or on youtube in slightly worse quality.

    Last edited: Dec 13, 2011
  16. Jaimi

    Jaimi

    Member

    Joined:
    Jan 10, 2009
    Messages:
    2,252
    Is it possible to add "clipping" to a parents bounds? The reason I'm asking is because in your textbox example, it's easy to overflow the box. Of course you can limit the input, but to guard against someone entering a name full of M's and W's you would have to limit the characters to a relatively small number.
  17. ArenMook

    ArenMook

    Member

    Joined:
    Oct 20, 2010
    Messages:
    1,901
    Yes, it's actually on the list of planned features (and would have been in already had I not spent 2 days making videos :) ).
  18. holyjewsus

    holyjewsus

    Member

    Joined:
    Mar 7, 2011
    Messages:
    587
    honestly, the videos are convincing me to purchase more than the features... it's a careful balance... cannot resist entering paypal... information... ahhh...
  19. ironwill96

    ironwill96

    New Member

    Joined:
    Dec 12, 2011
    Messages:
    17
    Yes hooray for the video tutorials, I find them the most helpful for dense people like me to learn how to use the system :). I still haven't played with multi-camera setups as i'm still so new to Unity (only been using it heavily for 2 weeks now) that i'm still just using single camera scenes but hopefully will get cracking on that soon.
  20. Quickfingers

    Quickfingers

    Member

    Joined:
    Aug 29, 2009
    Messages:
    230
    hi, do you have anything in this package to handle changing of aspect ratios? Like a relative positioning thing?

    Other than that question I'm sold on this!
  21. ArenMook

    ArenMook

    Member

    Joined:
    Oct 20, 2010
    Messages:
    1,901
    Yup, UIAnchor.
  22. Quickfingers

    Quickfingers

    Member

    Joined:
    Aug 29, 2009
    Messages:
    230
    Great, purchased and playing with it :) Loving the workflow, although SlicedSprite doesn't seem to work at all in current version. Is there a known issue with it? (Unity 3.4.2) It doesn't have any controls for the 9 slice margins and clicking pixel perfect does nothing, it comes in at scale 1,1,1 and doesn't change. I can scale it up manually but it doesn't slice it, just looks like a regular sprite that's stretched
  23. ArenMook

    ArenMook

    Member

    Joined:
    Oct 20, 2010
    Messages:
    1,901
    Not all sprites have been set up for 9-slicing. If you select the atlas and browse through the sprites you should be able to tell which ones have been set up and which ones hasn't. If a sprite can be 9-sliced, it will have a blue rectangle inside a green one.

    Pixel-perfect won't rescale your sliced sprite, it only adjusts its scale to use whole numbers. Try setting the scale manually to something like (300, 300, 1).
  24. Legacy

    Legacy

    New Member

    Joined:
    Oct 11, 2011
    Messages:
    651
    i had an issue last night after exporting my font and then trying to combine it with my sprites. I deleted everything and started from scratch and yet when i created the atlas in unity my sprites were not showing up right, i had random peices of sprites or no sprites at all o_O. Also could you explain what 9-slicing is?
  25. Quickfingers

    Quickfingers

    Member

    Joined:
    Aug 29, 2009
    Messages:
    230
    thankyou! I was using a custom Atlas and didn't realise you had to setup the inner rectangles within the Atlas component rather than the slicedsprite component. It works wonderfully now, thanks
  26. ArenMook

    ArenMook

    Member

    Joined:
    Oct 20, 2010
    Messages:
    1,901
    Version 1.06
    • I've changed tutorials to use UIAnchor instead of specifying the half-pixel offset manually like before.
    • Added a UIAnchor documentation page.
    • Added a new example scene showing how to use UIAnchor for all 3 of its purposes. The same example scene shows how to use UIOrthoCamera to create resolution-independent UIs that keep their size in pixels regardless of resolution (what you'd have if you used OnGUI).
  27. ArenMook

    ArenMook

    Member

    Joined:
    Oct 20, 2010
    Messages:
    1,901
    Off the top of my head I can't tell you what was wrong, but if you ever encounter an issue with your UI not showing up right, hitting Play usually resets everything.

    As for 9-slicing... Adobe illustrator has the same feature: http://rwillustrator.blogspot.com/2007/04/understanding-9-slice-scaling.html

    Essentially it's a sprite where corners don't stretch, sides stretch in 1 direction, and the center stretches in all directions. It's used to create sharp looking windows using very small sprites.
  28. Quickfingers

    Quickfingers

    Member

    Joined:
    Aug 29, 2009
    Messages:
    230
    @ArenMook great support you got going on here. Keep it up :)
    Just FYI Input Fields aren't working for me on Mac within the Editor (3.4.2).
    I can click on them and they get focus (Pipe character appears) but any keys or backspace/delete doesn't effect the UILabel at all. Also could we have an option to set the carat character in the Input inspector? The pipe character is good most of the time but because of its size it actually makes my input field shift if its centered with the fonts I'm using. (Also this would allow us to not have a carat if we wanted for some reason)
  29. ArenMook

    ArenMook

    Member

    Joined:
    Oct 20, 2010
    Messages:
    1,901
    You have iOS targeted. Change to web or stand-alone. I'll add an extra check so this wont be necessary.
    Certainly.
  30. ArenMook

    ArenMook

    Member

    Joined:
    Oct 20, 2010
    Messages:
    1,901
    Done. If you've used PayPal you can grab an updated version from the same location.
  31. Quickfingers

    Quickfingers

    Member

    Joined:
    Aug 29, 2009
    Messages:
    230
    Blimey you don't mess about, I did use paypal when I saw your update rate I thought it best :) while I've got you... having UIAnchor is good but it might be wise to use percentage based values from 0-1 rather than pixel values as offsetting by 100 pixels from the edge might be right for when the screen is 1024x768 on iPad but definitely wont be the case when you go down to 480x320 on a 3GS :)
  32. ArenMook

    ArenMook

    Member

    Joined:
    Oct 20, 2010
    Messages:
    1,901
    Unless you use UIOrthoCamera, your UI scales relatively to the height of the screen. The 100 pixels you specify are in a fixed resolution -- the resolution you're using while developing your UI (ideally your target resolution), but if your resolution's height value scales, so will your UI.
  33. Quickfingers

    Quickfingers

    Member

    Joined:
    Aug 29, 2009
    Messages:
    230
    Also if I might make a suggestion, you can't select the sprites in the editor, i understand that's because they aren't really there as the meshes are batched in a hidden gameobject, but I've tried this on the UIWidget
    PHP:
    public void OnDrawGizmos() {
            
    Gizmos.color Color.clear;
            
    Gizmos.DrawCube(transform.positiontransform.localScale);
    }
    and this works for those centered sprites... it really improves the workflow being able to click the ui elements and move them about. (I'll leave it with you, maybe you can make it work for uilabels too ;) )
  34. ArenMook

    ArenMook

    Member

    Joined:
    Oct 20, 2010
    Messages:
    1,901
    Hehe thank you, I will give it a try in a bit. You can currently select the geometry if you select the root of your UI (the one with a UIPanel script on it) and uncheck the hide checkbox.

    Eskema just submitted a mod that adds wrapping support for UILabel -- I have to look into this one first. :)
  35. spk

    spk

    New Member

    Joined:
    Jan 9, 2009
    Messages:
    527
    Hello Aren,

    This is looking very promising. I have a couple of questions for you, before I give in to the urge of getting your lovely package :)
    1) I would like to see how the "under the hood" API looks like (especially for the sprite and text/label components)
    2) How easy is it to change a sprite texture at runtime?
    3) Could you tell us more about the text/label component? In particular:
    3.1) Does it support left/center/right text alignment
    3.2) Is multi-line supported? (textbox area)
    4) Is the UIAnchor relative to screen only, or can it be relative to a parent panel? For instance, can I have a child panel automatically anchor itself to the inner right side of its parent?
    5) Is there support for automatic widget layouts (like Unity's GUI Horizontal Vertical layout)?

    The UI solutions I've tried so far have been a rather poorly designed mess, but I've got my hopes up on this one :)
    Last edited: Dec 13, 2011
  36. ArenMook

    ArenMook

    Member

    Joined:
    Oct 20, 2010
    Messages:
    1,901
    1) Here you go.
    2) spriteName = "your new sprite". :)
    3) Left and center yes, right not yet. It's on the list. Multi-line -- yes. The item tooltip in the 3rd example is just 1 label. Embedded colors and all.
    4) Relative to the screen. Relative to parent is as simple as parenting your widget to another game object.
    5) No, working with NGUI is like working with game objects. Less scripting more mouse movement. :)
  37. Quickfingers

    Quickfingers

    Member

    Joined:
    Aug 29, 2009
    Messages:
    230
    Quick bug In the UIAtlas:
    If you change your coordinate format to "texcoords" before importing the txt file. It borks the settings as they are still pulled in as pixel values.
  38. ArenMook

    ArenMook

    Member

    Joined:
    Oct 20, 2010
    Messages:
    1,901
    Thank you, I'll fix it.
  39. spk

    spk

    New Member

    Joined:
    Jan 9, 2009
    Messages:
    527
    Thanks, you've got yourself another customer ;)
  40. Quickfingers

    Quickfingers

    Member

    Joined:
    Aug 29, 2009
    Messages:
    230
    Also is there a way to preserve the inner rectangles? Every time I update my texture atlas, I have to reimport the text file which loses the settings I had for the inner rects?
    Thanks dude I'll stop spamming your support forum now :)
  41. ArenMook

    ArenMook

    Member

    Joined:
    Oct 20, 2010
    Messages:
    1,901
    :)

    Hmm. Yeah I can see how that can be a pita. I'll put it on the list.
  42. spk

    spk

    New Member

    Joined:
    Jan 9, 2009
    Messages:
    527
    Is there a way to center-justify a multi-line block of text? Right now I only found how to change the widget's anchor position to be either topleft or centered, but not how to make each line correctly centered.
  43. ArenMook

    ArenMook

    Member

    Joined:
    Oct 20, 2010
    Messages:
    1,901
    Do you mean center each line independently of each other? Right now you'd have to make several center-aligned labels as the alignment happens on a per-label basis not per-line.
  44. spk

    spk

    New Member

    Joined:
    Jan 9, 2009
    Messages:
    527
    Alright, not a deal breaker but I think that would be a great addition for a future update ;)
  45. ArenMook

    ArenMook

    Member

    Joined:
    Oct 20, 2010
    Messages:
    1,901
    No argument here. :)
  46. wccrawford

    wccrawford

    Member

    Joined:
    Sep 30, 2011
    Messages:
    1,581
    I just found this today and watched the videos, and I have to say it looks amazing! I'm looking forward to finding the time to play with it.
  47. SteveJ

    SteveJ

    Member

    Joined:
    Mar 26, 2010
    Messages:
    1,939
    I'm also really keen on NGUI, but I'm a little bit concerned about it when it comes to precisely laying out controls.

    For example, the movement controls in my game (currently using Prime31's UIToolkit):
    [​IMG]

    From what I can tell, you essentially have to eye-ball the controls to place them on screen with NGUI?

    Is there another solution? I'm guessing maybe you could attach a script to the GO and have it move itself to something like screen width minus the GO width, or screen width minus 2 x the GO width, etc? Would that sort of thing work?

    Also - unrelated but I'll just tack it on here: I'm assuming it's easy enough to send new text to the label control through code? As in find the game object and set the text of the UILabel component to "something"? The demos I've watched have all been setting text manually at design-time. Just want to confirm that those properties are accessible.
  48. ArenMook

    ArenMook

    Member

    Joined:
    Oct 20, 2010
    Messages:
    1,901
    You don't need to eyeball it, you can simply specify the precise coordinates in the transform. In the 3rd example the backpack grid is created procedurally by cloning a prefab at specified intervals.

    Yup, UILabel.text property.
  49. ArenMook

    ArenMook

    Member

    Joined:
    Oct 20, 2010
    Messages:
    1,901
    Version 1.07
    • Added a "max length" parameter to labels, specified in pixels.
    • Added word wrapping to labels (thanks, Eskema!)
    • Added gizmos for widgets. Since they don't rotate, they're pretty much only for 2D UIs (thanks, quickfingers!)
    • Tweaked UIAnchor (thanks, Spk!)
    [​IMG]
    Last edited: Dec 13, 2011
  50. ChezDoodles

    ChezDoodles

    Member

    Joined:
    Sep 13, 2007
    Messages:
    54
    This is awesome!
    I have PURCHASED and tested pretty much every GUI system available for Unity including 2D Toolkit, EZGUI, UIToolkit, blindGUI, iGUI, GUIKit001 and my favorite up to now: ex2D - but I have to say nothing beats NGUI !!!

    It is so simple and elegant :)
    I don't need a 2D sprite animation system - just a GUI.
    And I also like not being dependent on some magic DLL - which might not work / be compatible with the next version of the Unity editor (already been there with some GUI products).

    And since I prefer to layout my GUI's in code to support multiple layouts depending on resolution and screen format it seems easy to make a few CreateButton / CreateWindow / CreateLabel / CreateXxx methods to create my custom flavors of UI-components.

    The only things I miss are:

    1) multi-line word wrapping (already fixed as I understand it).
    2) information about how much text I can fit in a rectangle (for possible multi-page formatting of long text).
    3) "typewriter" effect for all text ... yeah ... I know I can add characters to labels ... but that will mess up the word-wrapping of lines. You need to know the entire string in advance for correct layout ... just not show all characters at the same time (build the entire mesh, then just update the mesh vertex index array based upon a timer.)
    4) soft-clipping like ex2D have - very nice - without having to set up additional cameras.
    5) text-shadows/gradients like ex2D and 2D Toolkit have.
    6) query the size (in pixels) of a text label, so I can resize / layout accordingly.
    7) query the height (in pixels) of a font.

    These additions would really make my day!
    Last edited: Dec 13, 2011