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

of course
he can see the cursor

 

As for the font, I simply exported it from BMFont with simplified chinese characters selected.

That said, I simply use Unity's functionality, so whatever Unity supports here, so does NGUI. I don't do anything fancy.

 

but ....you know, a font containing twenty thousand Chinese characters
you can put all in only one atlas?

 

Yup. Works fine. Exported at size 28, 28100 glyphs, 4096x4096 texture. I think there is more than just chinese characters in there too. Japanese, vietnamese... all the CJK ones.

 

ok...I see
it seems that I can put about 25,000 characters in a 4096 texture..but it maximum texture size in unity, I can not add any other UI pictures...
so maybe I should delete some of the words..Actually 90% of the words have never been used, I simply do not know them╮(╯_╰)╭
Thanks again

 

Japanese didnt work for me in the webplayer, at least not the hiragana and katakana set of characters. Kanji looked all fine though. Using win7.

 

Cool, thanks, good to know -- I am not sure which glyphs I exported to be honest, but with proper glyphs it should all work.

 

Ah, yes that should do it. Ill give it a try later with proper japanese fonts. IMEs a great addition!

 

you can just put your sprites in another atlas and keep the font. it will cause one more drawcall though, but thats not always a problem.

ArenMook, I guess its not possible to split fonts over more than one atlas? Cause 4096 is not so great on mobiles, and if you want japanese/chinese with a size over a few pixels its might be problematic. its quite a special use scenario though and I guess it might require some work to get it to work (and then I havent even though about how to generate the fontatlases split in the first place, I guess bmfont doesn not support that?)

 

BMFont can create multiple textures, but it wouldn't be feasible to create a system that pulls from multiple textures, as this means multiple materials, which potentially means that each new character uses a different material, which implies that they need to end up in different draw calls...

My suggestion: only export glyphs you actually need.

 

Only exporting the glyphs "you need" doesn't work if you have anything where users can do input (aka the IME), since you don't know what someone is going to type even if your game could be well constrained otherwise.

Asian character sets are seldom done with static sprite sheets. Instead dynamic sprite sheets are used with glyphs that are paged in and out as needed. Since the number of characters can be massive, but only small fraction are used ever at one time (or on screen at one time). You just can never tell which.

To do this you need onboard glyph rendering to update the dynamic atlas(s). Such font rendering is built into all OSs (including mobile), but there's no very practical way to harness that from within script in Unity. Unity itself does have a dynamic font system for this, but it doesn't work on mobile for no known earthly reason. One hopes this will be fixed, and the sprite sheets and meta data exposed for 3rd party tools, but that's far from certain.

David

 

Can I create NGUI button and event handler by code ?

void Start()
{
UIButton button = new Button();
button.OnClick += OnButtonClick;
}

void OnButtonClick(){

}

 

You sure can, but not using 'new' -- you need to do AddComponent. There is also no "button" in NGUI, per say. Anything with a collider can act as a button if you have a click event listener on it. In order to have a button send out a message on click, look at UIButtonMessage, or just implement a script that has "void OnClick()" in it or any other event listener function.

More on events: http://www.tasharen.com/?page_id=160

 

--Button <- Box Collider
----UILabel <- UILabel

When I change the scale of the UILabel, can it scale the upper collider as well.

 

You need to recalculate the collider's dimensions for this to work. You can do so by selecting the Button, and doing Add Collider via NGUI's menu again (it will update it for you). If you want to do it via code instead, you can do so by calling NGUITools.AddWidgetCollider(gameObject), where 'gameObject' is your 'Button'.

 

Hey Aren,

For supporting devices with multiple resolutions (aspect ratios), what is the best approach to take? Scale the UI to 1/Height of the screen or just allow cropping of the left and right sides, or is there some other way?

Thanks!

 

That depends on how you want your UI to behave. Also, resolutions and aspect ratios are a bit different topics. Generally the UI in games stays the same relative size even if the resolution changes (as in, relative to screen size), but there are certain areas that are anchored to sides of the screen.

In SWTOR for example, you have your main skill bar, and you have your side skill bars. Side skill bars are glued to the sides of the screen, main skill bar -- to the bottom.

 

Can I anchor the object to the parent game object or sprite instead of the UI Camera ?

 

You can do that just by parenting it in the scene hierarchy. UIAnchor is only for anchoring things to the center, sides or corners of the screen.

 

As I have different Window with a group of button , but each window is placed to different position of the game scene. So I would like to anchor the button to its own window instead of the UI camera.

 

Are you creating resizeable windows?

 

I got tripped up by that too. I assumed UIAnchor would have some option to work with the parent object too. In my case I wasn't doing resizable stuff, so I could just fall back to absolute positioning.

 

Something like the anchorToPivot-script posted earlier in the thread?

 

Here is a part of the user interface I've put together with NGUI:



This is the Store from Temple Run (which is the #1 thing on the iOS store right now, by the way). I'm doing the port to other platforms. The original UI was done in iOS's UIKit... which is very sophisticated, but I was able to replicate it's look and behavior pretty much pixel perfect in NGUI. In fact better than pixel perfect because the UIKit version had some text clipping issues with that custom font.

Each of the buttons in the scrolling list is fairly complex, with lots of parts. They auto-reconfigure their appearance and functionality based on a type enum.

The only remaining issue with this part of the interface, as far as NGUI is concerned, is the scrolling speed is way to slow on devices. Something Aren said he's looking into. So I'm confident it'll be fully up to speed soon given his capabilities and tenacity in perfecting NGUI!

David

 

Thanks for sharing! And I do have a fix for you for the scrolling speed.

 

Seriously? Already. Damn you're good.

 

Maybe I'm misunderstanding something here, but I've run into an issue with the events.

I've got two cameras, one for the UI, the other is Main. I put UICamera script on the UI camera. I set the Culling Mask to a new layer called 3DUI, which I then put all the UI stuff in. I made a button following the tutorial, but button click didn't work. No button events of any sort worked. None of the events seemed to fire.

I looked in the Raycast function of the UICamera script and noticed that you're sending the Culling Mask as the Layer Mask to the Physics.Raycast function. I thought the Layermask was all the stuff you wanted to exclude? From the Raycast description: "layerMask A Layer mask that is used to selectively ignore colliders when casting a ray."

So if I change mouse.cachedCamera.cullingMask to ~mouse.cachedCamera.cullingMask it seems to work fine.

But my question is - shouldn't this be broken for everyone, or did I set something up wrong?

 

So I think this is Unity screwing with me.

Maybe someone can help me out here, or hopefully Aren you can tell me what's going on.

So Aren, this is in your UICamera script - I modified it for this example.

Physics.Raycast(ray, out hit, cam.farClipPlane - cam.nearClipPlane, (1 << LayerMask.NameToLayer("3D UI")))

This consistently returns false when I click on something on the 3D UI layer.

Physics.Raycast(camera.ScreenPointToRay(Input.mousePosition), out clickHit, camera.farClipPlane - camera.nearClipPlane, (1 << LayerMask.NameToLayer("Terrain")))

This consistently returns true when I click on something on the Terrain layer.

Why are these two things inconsistent? Both lines of code are on a Monobehavior. I don't understand this at all.

 

You need to make sure that the game object your UIPanel is on happens to be on the right layer (3DUI in your case).

 

LayerMask is everything you DO want the raycast to hit. The wording may be confusing in their docs, but that's what it means.

David

 

Crap that's what it was! The UIPanel was on the right layer, but one of my container objects wasn't, and I guess that was enough to toss the button into the Default layer.

Thanks!

 

I am not creating resizable window, I would like to anchor the button to the top right corner for several reasons.
1. button image may change during the development ( as the designer always change his mind ).
2. for multiple resolution.

Since UIAnchor is work for UICamera only, it would be good if work for parent gameobject.

 

@yuewah: Just give your image a top-right pivot point and position it where you want (for example 5 pixels from the top-right corner).

 

Yeah, through parenting, adjusting the pivot point you can absolute position most things and nest them together to create UI elements that can be adjusted pretty easily. It's not as powerful as parent anchoring... sprints / struts, etc. etc. But you can get a surprising amount done that way more easily than you might imagine until you try it.

David

 

Sorry to be a bother, but I've come across another problem. (Also, I wish I could search this thread :/ as it might have already been answered.)

So I've got a window, and I'm using sliced sprites with your example SciFi Atlas. I want to add an Icon to indicate a resource, so I added a UITexture. Yes, I know this results in more calls, yes I know this isn't optimized - I'm doing this because I'm still prototyping and the texture isn't even made yet much less finalized. So I just want to quickly add a UITexture.

I created a Material using the icon as its Texture. I created a UITexture and assigned that Material to it. What's weird is that it seems like it's always in the background. It doesn't show up in front of everything else, and it seems darker than it should be. (If I make everything else invisible, or move it to the side, it is there, and it displays.) I get an Info message that says "Shader wants normals, but the mesh UIDrawCall for [the Material] doesn't have them."

Thoughts? Am I using UITexture wrong or does it not mix with SlicedSprite?

 

I've set up NGUI forums a couple of days ago, found here: http://www.tasharen.com/?forum=ngui

I should advertise them better.

You need to assign an Unlit shader to your material, otherwise Unity expects NGUI to generate normals for the meshes (which is possible via a checkbox on the UIPanel, but that's another topic).

Ensure that you are using "Unlit/Transparent Colored" shader on your UITexture's material.

Oh, and if you are dealing with different materials/panels, you need to sort them by adjusting the Z coordinate rather than depth. Depth is only for sorting within the same atlas.

 

As a note, the website now has a fair bit more documentation than before, including a (rather long) writeup for Example 3 (Character Inventory), among others.

Next step: more video tutorials. 30-second videos focusing on specific widget creation should indeed be useful.

 

Hey Aren, I'm getting this error, Im getting that on the chat window example too:

Code (csharp):

1. NullReferenceException: Object reference not set to an instance of an object
2. UIInput.OnSelect (Boolean isSelected) (at Assets/NGUI/Scripts/UI/UIInput.cs:104)
3. UnityEngine.GameObject:SendMessage(String, Object, SendMessageOptions)
4. UICamera:set_selectedObject(GameObject) (at Assets/NGUI/Scripts/UI/UICamera.cs:119)
5. UIInput:set_selected(Boolean) (at Assets/NGUI/Scripts/UI/UIInput.cs:57)
6. ChatInput:Update() (at Assets/NGUI/Examples/Scripts/Other/ChatInput.cs:48)

 

I'm using NGUI v 1.33 and everytime I save my project I get this info on the console:

also when I add a UISlicedSprite with the Refractive Atlas I get:

 

Hey andresp,

I think that's a Unity bug.
Completely close the scene window and re-open it again; I remember reading about this.
Cheers

 

I have already tried even with a new project. It keeps giving those messages. I don't know if they have any practical consequence though, I haven't seen any yet

 

@hjupter: That was fixed in a version from about 2 days ago... 1.32 something. What version are you using?

@andresp: The leaked objects message is harmless, it's a Unity thing. As for the shader -- select your UIPanel and check the "Normals" checkbox.

As for UIPlaySoundOnClick -- this class is gone. It has been replaced by UIButtonSound. Sounds like something did not upgrade correctly for you. Create a new project, import NGUI there, delete NGUI from your old project, and copy the NGUI folder from the new project to the old one. Opening the old project after that should fix any issues you may have had.

 

One last thing btw -- for the refraction to show up, set your quality settings to "Fantastic".

 

@ArenMook
I was following the basic tutorial without using the base scene and I didn't notice the need to check the "Normals" checkbox.

Regarding UIPlaySoundOnClick, I had to reimport NGUI into the old project, but it fixed it. Thanks.

The refraction was not working because I was testing it in a Free version of Unity. That's why I edited my post to remove that sentence.

 

Ah yes, that would do it too.

 

a very minor bug I just noticed: when you change the tint color in a UI Sliced Sprite (may likely happen in other controllers too), and then undo that change, the color pallet is updated but the color of the object in the scene is not.

 

Yup, I think that's either because the Update is never called by Unity, or because Unity simply writes values into private member variables. It's a minor inconvenience, but I could see no obvious way of fixing it.

 

for me it is not a problem. I was just informing you in the case you hadn't noticed yet.

 

Hey Aren,

This is quite an annoying issue that we have been facing. It seems that UIWidgets do not follow the Camera culling-layer-mask properties. In other words, whenever I change the layer of a gameobject to "Background" and change the culling mask of the camera to "Background" it doesn't render it, however, using GUITextures that works just fine.

Thanks.

 

You need to change the layer of your UIPanel. The UIPanel is what gathers the widgets into a single draw call, and the mesh it creates will use the panel's layer to draw.