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

Hi Aren, I have one more question regarding NGUI. I really don't know if it's NGUI related, or the camera, unity, or whatever, but as I'm using NGUI I think this is the best place.

My application is a set of numerous screens, showing information, videos, buttons, etc. So I decided the best way to manage this what to create every screen next to each other, and when the user clicks a button that triggers the next screen, move the camera to that screen. This way I can manage all my screens at once, and I don't play with deactivating each screen recursively depending on with one I need to show.

The ONLY problem I found with this, is that everytime I move the camera to the new position, the screen flickers. It's like 1 fps is black and then the image. It lasts a milisecond, nothing really, but my superiors want me to get rid of it and i have absolutely no clue of why is happening this.

The script itself is really simple, when a button gets clicked, it pases a parameter to a function and depending the value sets the camera transform.position to a certain value. That's it. That's all.

I tried to make a screen recording, but in the video the flicker doesn't show up. I already tried this on several pc's, so it's not vga card related.

Any clue with this? Sorry to bother you so much.

 

Try disabling using this script instead and delay it by a frame or two:

Code (csharp):

1. using UnityEngine;
2.  
3. public class DelayedDisable : MonoBehaviour
4. {
5.     public int framesToSkip = 1;
6.  
7.     int mFrames = 0;
8.  
9.     void Update ()
10.     {
11.         if (++mFrames >= framesToSkip)
12.         {
13.             NGUITools.SetActive(gameObject, false);
14.             Destroy(this);
15.         }
16.     }
17. }

 

I don't understand something. This would apply to what exactly? My moving camera? In that case the destroy would delete the camera or the script?.

If this goes to my camera, then the logic would be: Click a button -> Move the camera and at the same time run this script?

 

Sorry I read too quickly. You will want to put all your windows on top of each other, and disable all but one. When you click a button, enable one window, and disable the other. Don't move the camera. If doing so you get the flicker, use the script I posted.

 

I will try your script right away for disabling the active window. The reason I switched to the moving camera was because of the flicker.

 

I do that very thing, and it works fine, way easier than moving the camera. Why don't you want to do it? I wrote a simple "panelmanager" class that would do it all for me, if you're interested, I'll post it here.

 

I'am certainly interested in that. I have a sort of Screen Manager too, but my idea of moving the camera is because I have to add/edit the gui constantly on each window, and activating and deactivating each window as I edit them was a bit tedious. This way I have all my screens spread accross the editor.

 

Sorry Aren, does the script need to be in any special folder? Because I get '`NGUITools' does not contain a definition for `SetActive'.

 

The full version of NGUI does, and that's what I support.

However you can just use SetActiveRecursively to achieve the same effect.

 

I was told I was using the full version of NGUI. I will talk to my boss into buying it because we will use it for commercial purposses I think, and for the support of course.

I will try your script right away and get back at you with the results.

 

If you get a "free version" message and a watermark logo popping up in the top-left corner, then you're using the free version. If you have the full one, then you need to update because NGUITools.SetActive was added a long time ago.

 

Yeah, I'm not getting watermark nor the free version, so I must have an old version. I will talk to whoever bought it and tell them to upgrade the package on this computer.

On the other side, I tried the script and the camera flickers even more when de/activating the roots.

 

Try skipping more than one frame.

 

any chance that you make a playmaker actions for it ? most of us are artists
it will help alot making creating things easer .

 

Nope, still the same.

My script does:
NEXT button clicked -> Execute the script on the active window calling it with GetComponent and in the line that follows I activate the new window.

 

@mrbdrm: Playmaker action for what?

@kevin: Next button clicked should activate the next window immediately, and AddComponent<DelayedDisable>() to the current window.

 

Diarrhio was having a discussion about disabling buttons on page 82 that ArenMook didn't seem to reply to. He said:

That's not really true. You don't even need to have the user pick the sprite, since UIButtonColor already does that lookup for us. I made a simple script to disable buttons that simply works, just add it to the button instead of UIButtonColor (UIButtonColor.cs needs to be just slightly changed - just add protected level to mColor, mInitDone, and Init() )

Here's the script:

Code (csharp):

1.  
2. //----------------------------------------------
3. // UIButtonDisablable NGUI Extension by Petrucio @ Pangas Entertainment
4. // http://creativecommons.org/licenses/by-sa/3.0/
5. // Copyright © 2012 Pangas Entertainment
6. //----------------------------------------------
7.  
8. using UnityEngine;
9.  
10. /// <summary>
11. /// Extender Script that adds disabling functionality to NGUI UIButtons (Use this instead of UIButtonColor)
12. /// UIButtonColor modifications: Add 'protected' to members: mColor, mInitDone, and Init
13. /// </summary>
14.  
15. [AddComponentMenu("NGUI/Interaction/Button Color + Disablable")]
16. [RequireComponent (typeof (BoxCollider))]
17. public class UIButtonDisablable : UIButtonColor {
18.  
19.     public Color disabled = Color.grey / 2;
20.  
21.     Vector3 mBoxSize;
22.  
23.     public void UIEnabled (bool isEnabled)
24.     {
25.         if (!mInitDone)
26.         {
27.             Init();
28.             mBoxSize = (collider as BoxCollider).size;
29.         }
30.         (collider as BoxCollider).size = isEnabled ? mBoxSize : Vector3.zero;
31.         TweenColor.Begin(tweenTarget, duration, isEnabled ? mColor : disabled);
32.         this.enabled = isEnabled;
33.     }
34. }
35.  

 

Feature-request:

It would be awesome if we could have a 9-sliced-sprite that doesn't stretch the borders horizontally and vertically but repeat the texture instead. This way you could have great details in the borders. Ok, the sprite couldn't be scaled completely dynamic since the texture repeat should fit the corners to not look wrong but scaling it in steps would be totally fine.

Would you think about implementing this?

 

@Asse : +1 !

 

Another +1 for sliced sprite with tiled border.

Thanks.

 

If you can make me a texture that you want 9-sliced this way, I can look into it. Right now I wouldn't have anything to test it with, and I'm not an artist.

 

This one should be good enough.

http://dl.dropbox.com/u/8881824/textures/dotted_sprite.png

 

Check out how this is implemented in the resizableImageWithCapInsets method of the UIImage class for iOS:
iOS UIImage.

Might be helpful...

 

+2 for tiled borders (and center!)

 

This one may do. Maybe a bit innacurate as i didn't want to spen lot of time on it but should illustrate the concept.

 

Thanks!

 

Your progress is my progress

 

+1 I tried to suggest this feature months ago

 

Indeed, +1 for sliced sprite with tiled border!

 

@Aren: Could you put in an option to adjust the amount of pixels / space between the textures in the texturepacker? I was having troubles with filtering because 1px between textures was just too little as it filtered/blended the nearest neighbour pixel with it. Changing it to 2-4px fixed it. This is especially noticeable with textures with transparency around them, they would get a line at the transparent edges.

It would fit perfectly in the Atlas Maker tool imo

 

Also I think there is some major inconvenience in the way the atlas-maker works. Image I have a texture of 30x30 with a black square of 24x24 centered. Packing it in the atlas makes the tool trims away the transparent-pixels (why?) and giving it 3,3,3,3 padding. I always remove the padding, else it is placed with a slight offset, which I don't want since I want to use the same coordinates as in the photoshop file.
But the problem is, because of the removing the transparentpixels, the atlastool thinks the size of the texture is 24x24, instead of 30x30. Making it 30x30 again, you also have to adjust the left and top.

I think this workflow could be optimized more, leave the transparent-pixel trimming to the user and keep the padding to 0,0,0,0 by default.

 

The whole point of padding is to replace transparent pixels with an offset. If you get rid of padding, you break the feature. Padding is used to position the sprite properly after transparent pixels got trimmed away.

As for the padding pixel size, I can make it configurable, but if you are seeing anything with 1 pixel padding then it suggests that you are scaling your images past their intended size, and aren't working in pixel-perfect coordinates.

 

dont we need to write scripts to control the clicks and sliders ? can't we have a playmaker actions for that ?
to make easy and simple interface its easy but with big projects its easier and faster with playmaker .
before i got ngui i used unity gui with playmaker .

 

I am also not fond of the auto-trimming. I've learned to work around that, but it annoys me to no end - if I want to work with non-pixel-perfect coordinates, I should be able to do so without so much hassle.

 

@Arenmook : I am testing the free version with much interest and am considering buying the full one. Just a question regarding text input : is there already a way to manage "dead keys" (the ones that allow typing letters like ô, î, û, ö, ë, etc.) like in Unity's GUI input fields ? I have tried with a converted Unicode font that includes all necessary characters : I can display anything I want programmatically, but not via the text input fields provided in the demos.

Also (but I understand this might be asking way too much...) it would be great to be able to select text in the input fields.

[Edit] : just saw that other special characters that don't require any key combination (in French : é, à, ù, è, ç) can't be typed either. I apologize if the solution is trivial and/or has already been given in the thread, but wit 112 pages to read...

 

@Yann: The input field reacts to whatever Unity reports back via Input.inputString. If Unity doesn't report them, there isn't much I can do. The input hasn't changed since the free version, so whatever you see in the free one is likely what's going to happen in the full one as well. That said, I know IME support works well for asian languages, allowing you to type something like "ni hao" and it will be converted to the appropriate pair of glyphs. Maybe there is something more to it, as I haven't heard of complaints about special keys before. Perhaps the font you've exported has different glyphs?

I will eventually add a feature that will allow you to click on the text to move the cursor there, select text with the mouse, and keyboard... but it's not one of the "coming soon" features right now.

 

+1 for Playmaker actions!

 

Ok, probably a dead simple question but I don't see it covered in your tutorials.

When my game starts I want the main scene to be displayed with a menu on top.

Got that.

When the play clicks 'play' I want the menu to disappear.

When the game ends (all enemies killed), I want a menu to popup on the screen (without loading another scene or anything)

What is the best way to turn off the menu(e.g. when a button is clicked) and call it to display again ?

Thanks,

 

Best method is to animate it or tween it off-screen and disable it. Both ActiveAnimation and UITweener support the disable-when-finished feature.

 

After reading and reading and comparing (docs,forums,experiences,etc.) I've finally made up my mind and purchased a copy today before the madness ended... Nice work.

 

Use NGUI Events in PlayMaker! Download here:
http://hutonggames.com/playmakerforum/index.php?topic=1356.0

More NGUI Actions coming soon...

 

Nice!

 

Hello Aren and everyone, i purchased my copy yesterday - after trying it out and knowing how great NGUI will be to my game.
I actually had no problem with the free version, but when i got this one, there seems to be a little problem i cannot get my way around!

The buttons seem not to capture any events, i created a brand new project, imported NGUI [the examples and tutorial scenes work great], but when i create a UI with a single button, it does not animate at all. no errors or warnings, any help, and especially any tips to troublehsoot similar issues? im using unity3d 3.5 and NGUI 1.92

Appreciate your support.

 

Check your UI camera is set to the correct layer that the UI objects are on.

 

Thanks sonicviz for the quick reply
That tip helped me better understand and work with the scene, it fixed it when i created a new scene. i think the default layer values must be tweaked for the scene to work [my bad memory maybe]
Going back to my original scene and trying to fix it, not sure yet what is messed, but it looks like the UI Camera clipping planes needed to be enlarged to fix the interaction with the buttons. enlarging the clipping planes slightly made them catch the clicks - however the clipping planes were already larger than the UI.
I don't have a problem right now, just tweaking to get things working as before, so i will post if anything comes up, thank you!

 

'Best method is to animate it or tween it off-screen and disable it. Both ActiveAnimation and UITweener support the disable-when-finished feature.'

Hi,

Tried this, it seems to disable the button, but how do I disable the menu object itself ?

once the player clicks the button to e.g. exit the menu, I'd like the menu to disappear (and have no performance hit from running offscreen).

Also, how best to call the menu to appear when e.g. all enemies are killed ?

Thanks,

 

Tween the menu object, not the button.

Making it appear is equally simple. UIButtonTween script (and UIButtonPlayAnimation) has an option of what to do if the object it's supposed to tween is disabled. Choose to enable it.

 

Thanks but I'm not clear

Using ngui Example 8

1) I want to call from code 'Panel - Main' to display......how best to do this ?

2) When the player clicks on the 'exit' button I want Panel - Main to disappear (and not have Ngui create any performance hit since I'm developing for iOS)...I have added Panel - Main as the Tween target on Button Exit...UIButton Tween script and selected 'disable when forwarded. This makes the Panel - Main disappear but I seem to still have the performance degraded a bit as if its still been displayed...?

3) Once 2 has made Panel - Main disappear and I want to again call it to appear again, how best to do this in code ?

Sorry if these are stupid questions.

Thanks.

 

You can always select the panel in inspector and see if it's really disabled or not. If not, then chances re you didn't specify the correct disable condition. For example, after forward? Chances are you want the opposite, since forward animation animates the panel in, rather than out (in example 8 anyway).

As I mentioned, making it appear is the same as making it disappear. Just conditions are different. Example 8 already does all of this for you, so you can see how it's done. Example 1 also does this with cubes.

 

Sorry you've lost me.

Guess I need the line of code to

disable

enable

The Panel - Main from Example 8