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

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

  1. ArenMook

    ArenMook

    Member

    Joined:
    Oct 20, 2010
    Messages:
    1,901
    NGUI is a powerful UI system and event notification framework for Unity (both Pro and Free, 3.4.2f3 or higher) written in C#. It features clean code and simple, minimalistic approach to everything. Most classes are kept under 200 lines of code. For a programmer this means a much easier time when it comes to working with the kit — from extending its functionality to tweaking the existing one. For everyone else this means better performance, smaller footprint, and less memory overhead — all of which ultimately save you money.

    Features:
    • Full Inspector integration
    • No need to hit Play to see the results
    • What you see in the Scene view is what you get in the Game view (fully WYSIWYG)
    • Component-based, modular nature: attach the behaviours you want to make your widgets do what you want without having to code (with a variety of templates to get you started)
    • Full support for iOS/Android, Flash (with exception of input -- it's not supported in Flash).
    • Flexible event system
    • Make complex UIs that take only 1 draw call
    • Create your atlases right in the editor, update/modify them at will, or import an atlas from the Texture Packer.
    • Support for lighting, normal mapping, refraction, and more — unleash your creativity!
    • Support for clipped panels with hard or soft edges.
    • An assortment of useful scripts to help you — from changing a button color to dragging an object
    • Simple built-in tweening system.
    • Support for eastern languages with IME input.
    • Clean, short, simple and extensively optimized C# code
    • No DLLs or external resources

    The kit comes bundled with 11 step-by-step tutorials, 11 examples, and 3 video tutorials, all of which can be found here without having to buy the kit.

    Free Version http://forum.unity3d.com/threads/124032-NGUI-Free-Edition?p=834225

    The Free Edition of NGUI can also be used by other developers inside their own Unity Packages -- even commercial ones!

    HD Video Tutorials

    Examples

    The 3rd example in particular is very advanced and not only has a system for random item level +quality generation, but also a full Inspector integration for data entry. Even the way you define stats on the items has been simplified -- you define all items with stats as if they were max level, then specify actual item range that the created items will be constrained with.

    The kit is currently available for $95 up on the Asset Store, as well as directly via PayPal. You can rationalize the purchase like this: will NGUI save you or your developers at least 2 hours of work? If yes, then you have nothing to lose by grabbing a copy.

    An alternative Professional edition version can be obtained for $200 that comes with a personal access to NGUI’s GIT repository, giving you access to all of its revision history, the ability to easily merge/diff selective revisions, and always be up to date. It's very useful for those who plan on modifying NGUI's source to suit their own needs, but still wish to have a hassle-free way of staying up to date. You can find more information here.

    All methods come with quick support via email, forums, and Skype and provide free updates.

    For more information, please visit the website.

    [​IMG]
    [​IMG]
    [​IMG]
    [​IMG]
    [​IMG]
    [​IMG]
    [​IMG]



    Last edited: Feb 19, 2012
  2. ivanzu

    ivanzu

    Member

    Joined:
    Nov 25, 2010
    Messages:
    2,065
    That looks pretty cool!
  3. Jaimi

    Jaimi

    Member

    Joined:
    Jan 10, 2009
    Messages:
    2,280
    Does the it come with the orc and the equipment?
    Last edited: Jan 3, 2012
  4. ArenMook

    ArenMook

    Member

    Joined:
    Oct 20, 2010
    Messages:
    1,901
    Edit: No longer relevant.
    Last edited: Dec 11, 2011
  5. Lypheus

    Lypheus

    Member

    Joined:
    Apr 16, 2010
    Messages:
    609
    Looks really good ArenMook!
  6. gregmax17

    gregmax17

    New Member

    Joined:
    Jan 23, 2011
    Messages:
    180
    wow, I am excited all over again! I was just looking around at gui stuff and then all of sudden, you came along!

    I can't wait for the release of this. Mind posting a video how you set this up in addition to your step-by-step tutorials please?
  7. Rajmahal

    Rajmahal

    Member

    Joined:
    Apr 20, 2011
    Messages:
    996
    Looks great ... Will buy as soon as it's released.
  8. Eskema

    Eskema

    Member

    Joined:
    Jun 23, 2010
    Messages:
    296
    What will be the final list of components?, label, button, scroll list,etc,etc
  9. ArenMook

    ArenMook

    Member

    Joined:
    Oct 20, 2010
    Messages:
    1,901
    I've never recorded videos before. Can you recommend a program?

    Button is not a widget. :) Anything can be a button -- just attach a component to a collider that has an event listener function such as OnClick, and do whatever you want there. Highlighting a widget? OnHover event, again do what you want there. It's really simple, and I will explain it thoroughly shortly.

    Starting list of unique widgets: UILabel, UISprite, UISlicedSprite (for 9-slicing), and UITiledSprite. Everything else is handled via behaviours.

    This kind of design allows 95% of classes to be under 200 lines of code, as opposed to 2000+ lines of code just for a button of a certain unnamed high-priced UI kit. Less code = faster execution and less memory, resulting in a much faster program. Not to mention less headache when it comes to maintenance... but I digress.

    I'll post a writeup shortly.

    P.S. There are tutorials that explain how to make a button, scroll view, mouse cursor, tooltips, etc.
    Last edited: Dec 8, 2011
  10. gregmax17

    gregmax17

    New Member

    Joined:
    Jan 23, 2011
    Messages:
    180
    I haven't done it before either, ha. I am on a Mac, and if you are, any of these look promising.

    Will the GUI be able to work with different screen resolutions with minimal code changes (ie, iPhone to iPad)?
  11. ArenMook

    ArenMook

    Member

    Joined:
    Oct 20, 2010
    Messages:
    1,901
    Yes, you don't need to change anything. The UI doesn't stretch horizontally, just vertically. It's just like any other object in the scene -- if you make the screen wider, you can simply see more of the scene. If you wish to anchor something to a specific edge of the screen, you can -- use the provided UIAnchor script. Oh, and this script is not limited to UI and can be used to anchor just about anything... if you so desire. Works equally well with both orthographic and perspective-based cameras.
    Last edited: Dec 8, 2011
  12. NeilM0

    NeilM0

    Member

    Joined:
    Mar 31, 2009
    Messages:
    78
    Can you render 3D objects on top of the GUI?
  13. ArenMook

    ArenMook

    Member

    Joined:
    Oct 20, 2010
    Messages:
    1,901
    Yup. The UI is just another in-game object. If you are using only one camera and position the UI widget behind a 3D object, that's how it will be rendered. I recommend using multiple cameras though.

    In the demo above the orc is drawn on top of a UI background, and then more UI is drawn on top of the orc. This required the UI to be split up into 2 parts however.
  14. jashan

    jashan

    Member

    Joined:
    Mar 9, 2007
    Messages:
    2,499
    @ArenMook: Looks very cool!

    If you are on Mac, I'd go with ScreenFlow. I'm not using it a lot because I don't need to do a lot of screencapturing - but when I use it, it's just awesome :)
  15. ArenMook

    ArenMook

    Member

    Joined:
    Oct 20, 2010
    Messages:
    1,901
    I do have a mac, but I'd be more comfortable doing this in Windows.
  16. ArenMook

    ArenMook

    Member

    Joined:
    Oct 20, 2010
    Messages:
    1,901
  17. DanTreble

    DanTreble

    Member

    Joined:
    Aug 31, 2010
    Messages:
    515
    Looks very promising.

    That certain other high priced GUI solution is very good at clipping sprites and text in scroll lists.

    Is clipping something that you will support? I'm looking at that 412 triangle panel and that isn't trivial to clip!
  18. ArenMook

    ArenMook

    Member

    Joined:
    Oct 20, 2010
    Messages:
    1,901
    The way you do scroll lists is a bit different with NGUI. It essentially uses Unity's built-in functionality. It will all be covered in the tutorials. The 412 triangle panel is that many triangles because it uses a UITiledSprite to create its background. It tiles a part of the texture atlas, creating new triangles until it reaches the desired size.
  19. Thinksquirrel

    Thinksquirrel

    Member

    Joined:
    Feb 8, 2011
    Messages:
    904
    This looks very nice, and very polished. The bonus scripts are a great touch, as well.
  20. DanTreble

    DanTreble

    Member

    Joined:
    Aug 31, 2010
    Messages:
    515
    Please don't say render textures :-/ They aren't great for mobile.

    Looks great, I wish EZGui had a UITiledSprite equivalent. I wasn't complaining about the triangle count, more pointing out that it makes clipping/scissoring more complicated
  21. ArenMook

    ArenMook

    Member

    Joined:
    Oct 20, 2010
    Messages:
    1,901
    Hell no :) That's what Unity does for OnGUI, and it's a terrible way to go.
  22. SteveJ

    SteveJ

    Member

    Joined:
    Mar 26, 2010
    Messages:
    1,991
    Any estimate on when this will be on the Asset Store? Sorry if it was mentioned - couldn't spot a date.
  23. ArenMook

    ArenMook

    Member

    Joined:
    Oct 20, 2010
    Messages:
    1,901
    Edit: No longer relevant.
    Last edited: Dec 11, 2011
  24. Eskema

    Eskema

    Member

    Joined:
    Jun 23, 2010
    Messages:
    296
    the alternate way via paypal could be really interesting
  25. RandAlThor

    RandAlThor

    Member

    Joined:
    Dec 2, 2007
    Messages:
    818
    What functions will this kit have for mobile control with touchscreen?
    Do you make tutorials for using this with iOS and show how we can use buttons, make sliders, checkboxes and such?

    Can this work with playmaker and the the iOS gesture asset?

    Oh, and will this work with itween to let our future gui looking very dynamic with easein ans easeout animations?
    Last edited: Dec 9, 2011
  26. ArenMook

    ArenMook

    Member

    Joined:
    Oct 20, 2010
    Messages:
    1,901
    iOS and Android should be fully supported with all the functionality minus the OnHover and OnTooltip notifications: http://www.tasharen.com/?page_id=160. There is nothing special about making apps for mobile devices. As far as you are concerned, nothing changes. All the logic is taken care of by NGUI. All the tutorials will function exactly the same.

    I am not familiar with Playmaker or the iOS gesture kit, but I'm sure it can. NGUI widgets are all just in-game objects, giving you 100% control over what you do with them and will behave just like any other game object. Attach scripts, send them messages, scale them dynamically -- all of it is fully supported.

    iTween support? Sure, same reason as above. :)
  27. gregmax17

    gregmax17

    New Member

    Joined:
    Jan 23, 2011
    Messages:
    180
    Oh man... this is getting me excited.

    Setting it up through PayPal would be faster than going through the Asset Store... so how about you do just that :)
  28. ArenMook

    ArenMook

    Member

    Joined:
    Oct 20, 2010
    Messages:
    1,901
    Yup, I did. I ended up getting a surprising number of inquiries overnight so I sucked it in and forced myself to sit down and learn the basics of how it all works.

    http://www.tasharen.com/?page_id=140

    Distracting me from finishing the tutorials though... I wish I knew someone who was good at PHP and was familiar with PayPal IPN!
    Last edited: Dec 11, 2011
  29. gregmax17

    gregmax17

    New Member

    Joined:
    Jan 23, 2011
    Messages:
    180
    I could of helped you with that, I use PHP and Javascript more than Unity (hurts to thinks about it), and I am familiar with PayPal. Anyways, you got it up and running just fine it looks like :)
  30. kheng

    kheng

    New Member

    Joined:
    Oct 22, 2008
    Messages:
    126
    Is there an automatic way to swap to a double resolution texture for HD?
  31. ArenMook

    ArenMook

    Member

    Joined:
    Oct 20, 2010
    Messages:
    1,901
    Code (csharp):
    1. NGUITools.ReplaceAtlas(before, after);
    Last edited: Jan 9, 2012
  32. kheng

    kheng

    New Member

    Joined:
    Oct 22, 2008
    Messages:
    126
    Thx that's easy enough! Looks like I can pick this up now, since you got the paypal all setup!
  33. ArenMook

    ArenMook

    Member

    Joined:
    Oct 20, 2010
    Messages:
    1,901
    Hey DTreble, I've added the example of how to do it using Unity's built-in functionality. Pic here.
  34. ArenMook

    ArenMook

    Member

    Joined:
    Oct 20, 2010
    Messages:
    1,901
    Alright, version 1.0 is up. 9 tutorials, 3 examples. The download page has been updated and those who already picked up the kit can grab version 1 whenever they like.

    I should probably start a new thread at this point... but -- http://www.tasharen.com/?page_id=140
  35. Legacy

    Legacy

    New Member

    Joined:
    Oct 11, 2011
    Messages:
    651
    I imported the package and i get an error in ComponentSelector.cs

    Code (csharp):
    1. Assets/NGUI/Scripts/Editor/ComponentSelector.cs(42,43): error CS0117: `Resources' does not contain a definition for `FindObjectsOfTypeAll'
  36. kheng

    kheng

    New Member

    Joined:
    Oct 22, 2008
    Messages:
    126
    Just a heads up I get this error when switching to IOS.

    Assets/NGUI/Scripts/UI/UIInput.cs(103,41): error CS0103: The name `k' does not exist in the current context
  37. ArenMook

    ArenMook

    Member

    Joined:
    Oct 20, 2010
    Messages:
    1,901
    My sleeping schedule is completely out of whack. Just woke up at 1 AM!

    @Efraser: Are you using the latest version of Unity, 3.4.2?

    @kheng: Aha, I had a feeling I missed something. Thank you, I will get it fixed up in a minute. You can also fix it on your end by replacing 'k' with 'mKeyboard'.
    Last edited: Dec 10, 2011
  38. Eskema

    Eskema

    Member

    Joined:
    Jun 23, 2010
    Messages:
    296
    A small fix for the UIInput.cs script. If you are using a mobile device (ios in my case) you won't receive the updated label unless you add this code. Because the system is not taking care about the iphonekeyboard

    Code (csharp):
    1.  
    2. void Update()
    3.     {
    4.         #if UNITY_IPHONE || UNITY_ANDROID
    5.  
    6.             if (mKeyboard != null  mKeyboard.done)
    7.             {
    8.                 label.text = mKeyboard.text;
    9.                 mSelected = false;
    10.                 mKeyboard = null;
    11.                 mText = "";
    12.             }
    13.            
    14.     #endif
    15.     }
    16.  

    Of course if someone else has a better approach I'm all ears :)
  39. ArenMook

    ArenMook

    Member

    Joined:
    Oct 20, 2010
    Messages:
    1,901
    Thanks! Unfortunately iOS and Android handle input slightly differently, and what worked fine on Android didn't quite cut it on iOS. I'll add your fix.
  40. Eskema

    Eskema

    Member

    Joined:
    Jun 23, 2010
    Messages:
    296
    Thanks to you for this package, so far my tests are working perfectly. There's something that I'm missing, a tutorial on how to create the atlas. It's pretty straightforward for me, but I'm sure other people will miss that one or maybe not.... :)
  41. ArenMook

    ArenMook

    Member

    Joined:
    Oct 20, 2010
    Messages:
    1,901
    You have a point. Thanks!
  42. Legacy

    Legacy

    New Member

    Joined:
    Oct 11, 2011
    Messages:
    651
    yes i am, it seems to be mixing up references, when i added the the line UnityEngine.Resources it worked just fine.
  43. ArenMook

    ArenMook

    Member

    Joined:
    Oct 20, 2010
    Messages:
    1,901
    Ah, you have your own class named Resources?
  44. Legacy

    Legacy

    New Member

    Joined:
    Oct 11, 2011
    Messages:
    651
    Nope i started with a fresh project a few days ago so i could get the hang of creating interiors and playing with lighting with arteria 3d's dungeon pack. i havnt played with any references the most ive done is play with the values of my camera controls class.
  45. ArenMook

    ArenMook

    Member

    Joined:
    Oct 20, 2010
    Messages:
    1,901
  46. Legacy

    Legacy

    New Member

    Joined:
    Oct 11, 2011
    Messages:
    651
    Actually i just checked my references, it looks like i also have Photon unity client library and the a* UnityPath library from angry ant. Those may be conflicting with the unityengine reference hmm...
  47. ArenMook

    ArenMook

    Member

    Joined:
    Oct 20, 2010
    Messages:
    1,901
    That would do it. :)
  48. ArenMook

    ArenMook

    Member

    Joined:
    Oct 20, 2010
    Messages:
    1,901
    Well, that was unexpectedly quick... apparently at least someone at Unity is working through the weekend. NGUI is now up on the Asset Store.
  49. Legacy

    Legacy

    New Member

    Joined:
    Oct 11, 2011
    Messages:
    651
    Can you do an example on the dragui script?
  50. ArenMook

    ArenMook

    Member

    Joined:
    Oct 20, 2010
    Messages:
    1,901
    Do you mean UIDrag? There is one -- Example 2 uses it. But the basic writeup of it is this: just attach it to a collider that's your draggable surface (for example your window's background), and set the target to be what you want to drag -- for example a camera. You can also drag the window itself this way.