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

Hi guys,

I thought I would share a little script I wrote for this very nice UI solution. It's a very basic/simple grid layout script that automatically arrange its items in a grid layout.

Couple of notes:
- The bounds of the collider put on the same object as the GridLayout will be used to determine the maximum row width. Right now there is no culling/handling of items overflowing from the grid, so you'll have to deal with this yourself.
- The size of the first item in the list is used as the reference item width/height for the entire grid
- Doesn't support automatic resizing if the grid width/height changes at runtime (I only need static stuff for my game)

Once you have your grid setup, you just need to call your_grid_layout.Add( your_ui_element_collider ).
ArenMook: feel free to include this in your package, and modify at your own discretion.

 

Cool, thanks!

 

@Aren, this event system is pretty sweet. I have a feeling I will be putting a lot of this in my code

Code (csharp):

1. #region NGUI event handling

One drawback though, compared to ezgui, is that the RayCast HitInfo is not passed through to the events. In some applications, like mine, it might result in having to do another raycast (expensive) to find out where the Press or Drag hit on the collider. Instead I am going to try to hack UICamera.cs to just expose the hitInfo object as a property. Or maybe pass it through in a struct.

 

That sounds useful. I've gone ahead and done just that. Let me PM you a modified version of the script.

 

Im currently having an issue, one of my developers is trying to setup NGUI and no matter what he does the images are all pixelated but on my end when i did them a while ago they looked crisp but now when i try to set him up with the latest version of NGUI it is now really blurry and make pixel perfect does nothing, any ideas?

 

Hmm doesnt seem that my post took hold did you see my last post aren?

 

Pixelated? You will have to show me a pic. As for blurriness -- have him take a closer look at the hierarchy of the tutorials. He probably added UIAnchor to the wrong object, or the camera is a child of UIAnchor-adjusted object (it shouldn't be).

P.S. Also ensure thate the ortho camera's size matches the screen size. You won't get pixel-perfect results otherwise.

 

Btw, this is the tutorial that describes the correct hierarchy: http://www.tasharen.com/?page_id=424

All widgets would be children of Root in this case.

 

Here is a screen shot of the blurriness.

 

Ah, that just looks like your atlas couldn't fit everything in it. Did you cram a set of large images into one texture? Unity limits textures at 1024x1024 by default unless you change it on texture import. Select the texture, and double-check.

 

The Atlas was already created by Efraser and it works fine for him. The same thing happens with the default atlas that come with the plugin.

 

What quality settings are you using, and is it set to use quarter-size textures?

 

I am using Fantastic and what do you mean about quarter-size textures?

 

Quality Settings menu -- double check which quality setting it's currently using and ensure that the Texture Quality is set to "Full Res". If that's not it, tell me the dimensions of your texture, and prefferably send it to me so I can have a look myself.

 

Its set to full res. Hers the texture.

 

Can't see anything wrong with this. Just created a test atlas, eyeballed the coordinates of the window background, and here's how it looks like with pixel-perfect coordinates:

 

Ya i know, cause efraser's works fine and mine looks terrible. Ill try from scratch and get back with you.

 

It's your texture -- either set to a much lower size on import, or your quality settings is really set to "Fastest" rather than "Fantastic". Easiest way to check and modify this in game -- attach EditorQualitySettings script to one of your game objects. It shows you the currently used quality setting (and allows you to change it without going through the menu).

 

Not sure if this is possible, or if it's been mentioned already, but I'd like to vote for proper centre justification on UILabel objects in a future version. Seems to work fine on single line labels, but not on multi line labels.

I imagine it wouldn't be too easy to do it, so understandable if it's not possible

 

Everything is possible. I expect it will take me a couple of hours to get it working, but it's certainly doable. This should be one of the features in the beginning of January when I release a build with new features.

 

Hi!

Is it possible to use NGUI without RaycastsHitTriggers toggle being on?

thanks,
Slav

 

Sure, it's up to you which layer the UI colliders lie on and whether they're marked as trigger or not.

 

http://forum.antares-universe.com/ngui-t588.html#p1701

I just wanted to post this, I forced Neodop (whined at him) to write something up quick to access events for NGUI... I haven't had a chance to test yet, but should work to just add that as a smart block.

 

Hmm... interesting. Can't say that I am familiar with this package... Thanks for sharing!

 

Any plans to make it compatible with flash export option?... already tried and doesnt work T_T

 

You mean 3.5 beta? Yeah, I'll do it once it's stable. I tried using 3.5b1 back when it first was released and it was so horribly buggy that I decided to wait until 3.5 rc1.

 

=( i was looking forward to using NGUI in our flash submission for the unity contest.

 

Ah, alright I can take a look at it sooner then. Like tonight-ish.

 

yes i was expecting using for the contest too, i just bought ngui yesterday

 

Its no probelm if you cant ill just have to suffer with the unity gui system (Ewwwwww) lol

 

Hey, that's at least two people that need this, so I'm sure I can take a look at what's not working at least.

 

Well, I had a look at what's wrong. It seems what Unity does is "translates" C# into ActionScript, and not everything is supported. I can't use HashSet, MemoryStream or StreamReader. TryParse methods are also not supported (ie. int.TryParse). Fun times... So essentially to fix this I will need to write my own hash implementation, use try/catch instead of TryParse, and... I'm not even sure what to do about lack of IO functions. If I can't read the data from a file, that's a bit of a problem. I suppose one way of going around it would be to have font information get imported only once in the editor (the way sprites get imported from TexturePacker).

I'll have to give it some thought, but at this rate it will take a couple of days to resolve these issues.

Edit: Eww, Enum.GetNames isn't supported either!

Edit #2: Done. Vesion 1.10 supports Flash.

 

@ArenMook hey NGUI its simply amazing tool to make GUI its so simple to use , I've some suggestions:

Input text selection <--- Feature request
9 Slice would be awesome
Scrollbars? dunno i know i can do it but should be already built on the framework dont you think?
More events: OnDoubleClick, OnKey (already made this but with an update)

Keep up the good work

 

Maybe some blink option for the caratchar

Code (csharp):

1. void OnSelect (bool selected)
2.     {
3.         if (label != null  mSelected != selected  enabled  gameObject.active)
4.         {
5.             mSelected = selected;          
6.  
7.             if (mSelected)
8.             {
9.                 mText = label.text;
10.                 if(blink)InvokeRepeating("Blink",.3f,.3f);
11.  
12. #if UNITY_IPHONE || UNITY_ANDROID
13.                 if (Application.platform == RuntimePlatform.IPhonePlayer ||
14.                     Application.platform == RuntimePlatform.Android)
15.                 {
16.                     mKeyboard = iPhoneKeyboard.Open(mText);
17.                 }
18.                 else
19. #endif
20.                 {
21.                     label.text = mText + caratChar;
22.                     label.showLastPasswordChar = mSelected;
23.                 }
24.             }
25. #if UNITY_IPHONE || UNITY_ANDROID
26.             else if (mKeyboard != null)
27.             {
28.                 mKeyboard.active = false;
29.             }
30. #endif
31.             else
32.             {
33.                 if(blink)CancelInvoke("Blink");
34.                 label.text = mText;
35.                 label.showLastPasswordChar = mSelected;
36.             }
37.         }
38.     }
39.  
40. void Blink()
41.     {
42.         if(caratChar == _caratChar){
43.             caratChar = "";
44.         } else {
45.             caratChar = _caratChar;
46.         }
47.         label.text = mSelected ? (mText + caratChar) : mText;
48.     }
49.  

 

Thanks!

9-slice? UISlicedSprite is the 9-sliced sprite. Do you mean something else?

Btw, Flash support is mostly done, with some reservations, as expected for a beta release:
- String input doesn't seem to work in Flash.
- Some things don't seem to be supported (cube textures is my guess)

http://www.tasharen.com/ngui/flash2/

 

Great work on the flash support!!, have you thought on any workaround for the input support?

NVM about the 9-slice i was thinking in something else... if a window have 9 sides and the left and right center part between their top l/r and bottom l/r parts would be cool if the l/r center part got tiled instead of stretched.... sorry for my english my main lang its spanish

 

For example: the portion of the image within the red box get tiled insted of streched

 

Consider simply splitting up your widget into multiple parts made up of UITiledSprites.

How would you tile a texture that can be cut off in the middle, thus creating a visible seam between that side and the rest of the window?

 

well that image its not a good example... i know i can do it splitting the widget but ill have to resize everything manually which is not that bad i was just suggesting some way to make it automatic hehe

 

Alright, NGUI (v1.10) now supports 3.5 beta 6 and works fine with the Flash export feature, with exception of these noted features which I can't fix that seem to be on the Unity's side:

- AudioSource.PlayOneShot is bugged and results in only static on Flash.
- Input.inputString is always empty, so it's not possible to type anything in input fields right now.

Here are two examples (example 1, example 2) built in the Free version of Unity 3.5b6 using NGUI.

You can download the latest version from the download page you got via your PayPal purchase, or wait a bit for Unity guys to approve it on the Asset Store.

Happy holidays!

 

Sweet, downloading it

 

works like a charm!.. thx for the update now i can use ngui for the contest ... the problem is the inputs, need the for logins etc, will have to make a login screen on flash or use the built in GUI if its possible

 

Yeah, unfortunately that's something Unity guys need to fix. I have no control over Input.inputString. :\

 

So where can I find pointers on how to make something akin to a listbox?
.
I'm trying to make a chat window construct. Receive text, adds a line to the bottom, scrolls the whole thing up. Haven't seen a tutorial or example that covers that. The closest was the orc thing, but that's a fixed number of things and uses a custom viewport.

All in all, very good so far. Easy to use, logical and clean.

 

Chat window... If I was to do it, I'd have a game object off to the side of the screen with a camera on it, kind of like in example 2. The camera would move up/down (ie scroll), but generally would try to stay at the bottom. As a new chat entry comes in, a script attached to this game object would create a child UILabel, and reposition all previous children up a bit to make the new one fit.

 

Got it. I'm having some trouble with example 2 and didn't see any explanation of what's actually going on in the tutorials.

I setup the 2d UI scene with the root object, a sliced sprite frame, a sliced sprite for the entry area. I put the main 2d camera under the root that contains the frames. I added 2 empty game objects at the ul and lr corners, also under the root.

I made a second empty gameobject, added a second ortho camera and label underneath it. I made sure the ortho camera could see the label by default, and then moved it out of the way.

I added the ui camera script to the 2nd camera, along with the viewport script. I then set the ul and br transforms.

The camera doesn't show a preview anymore, nor does it show the picture in picture view I was hoping for.

What am I missing? Did I misunderstand the example?

 

Off the top of my head I can't think of anything in particular, you set it up correctly. It must be some small detail, but its hard for me to tell just based on the description. Ensure that the 2nd camera is on a +1 depth, and double-check its dimensions and its viewing area.

 

I can't set the dimensions and viewing area on the 2nd ortho camera. The viewport script seems to override it.

Hmm.

Maybe I can clone off the existing sample and use that.

 

You can just disable that script if you want to set it manually.

 

Lesson:

When assigning topleft and bottom right, don't use the editor view to align it. Make sure that the UI camera sees them as top left and bottom right.

Also the fullsize setting is sorta confusing. I had to make it larger to get it to show up. What exactly is that setting for?

Again, awesome tool though.