in-game tutorial screen darkener

[timmypowergamer]

So, maybe this topic already exists somewhere and I am just searching for the wrong thing, but I can't find anything that helps me solve this problem I'm having:

I am trying to create a tutorial in my game, where it darkens everything on the screen except for a dialogue box and the UI element it wants you to click on, and nothing else accepts input until you do. I have the input part working correctly, but I can't figure out a decent way to highlight just one panel or sprite.

I am porting this to NGUI from our previous UI system where I just had a full-screen semi-transparent image act as the "darkener" over everything and then I would just re-layer the targeted UI element to be above it. This won't really work in NGUI for us though, since the targeted button/sprite/whatever is usually on a different panel, sometimes a different atlas, and adjusting depths can really wreak havoc with things.

Any ideas on what I could do?

[ArenMook]

This is done differently depending on your version of NGUI.

In 2.7 you'd put your popup on a separate panel that has a Z position closer to the camera than everything else (for example -100), and use a full-screen collider covering the screen behind it.

In 3.0 you'd use NGUITools.BringForward(targetGameObject), and you'd still use a screen-covering collider to intercept the events.

The screen-covering collider is generally best placed on the stretched sprite that darkens everything behind it.

[timmypowergamer]

So, to clarify, here is an example of what i am trying to achieve:

I have a panel at the bottom of the screen with some buttons on it. One of those buttons opens our in-game store window. The tutorial starts and pops up a help box that tells the player to click on the store button. When it pops up, everything but the help box and the map button become darkened, and nothing but the map button gets hover or click events.

I already have the input part working. The fullscreen collider on the help box intercepts all input, and forwards it to the map button. But I can't get the map button to appear above the darkener. Im not sure which version of NGUI we have right now (doing all this for work, so i'll check on monday), but that NGUITools.BringForward might be what I need. Already tried adjusting the z-depth of the button on the fly, but it screws up the draw order of the rest of the panel its on.

Anyway, thanks for the advice, i'll try it on monday and see how it works.

[ArenMook]

If adjusting the Z changes the draw order then you are not using NGUI 3, and you won't have NGUITools.BringForward.

[timmypowergamer]

Indeed. I guess we started using NGUI a couple of weeks before 3 came out. Now we are a little too far into it to be able to port it to 3 very easily. I plan on doing it when it makes sense, but at the immediate moment we have a deadline

In any case, I figured out a workaround (in case anybody else finds themselves in a similar situation):
I put the HelpBox on a different UICamera that draws above the main one. The darkener is physically behind all other UI elements, but since it draws first, it appears above everything else. Then when I target a UI element to be highlighted, I just change its (and all of its children's) layer to the same one my HelpBox uses, and add a UIPanel component to it if it doesn't already have one. This actually greatly simplified the input filtering part as well (since I no longer had to forward events to the targeted element and check if the mouse really was over it, etc.). I just let the HelpBox camera handle the events instead, and a full-screen collider catches everything else. When the HelpBox gets dismissed, I return the UI element to it's original layer and remove the UIPanel if I had added one so there aren't any unnecessary draw calls.

I think this would be a non-issue in NGUI 3 if BringForward works the way I expect. But for now this seems to do the trick. Anyway, thanks for the advice Aren