Search Unity

  1. Megacity Metro Demo now available. Download now.
    Dismiss Notice
  2. Unity support for visionOS is now available. Learn more in our blog post.
    Dismiss Notice

Non-overlapping, re-scaleable UI?

Discussion in 'Immediate Mode GUI (IMGUI)' started by bigkahuna, Dec 14, 2007.

  1. bigkahuna

    bigkahuna

    Joined:
    Apr 30, 2006
    Posts:
    5,434
    I find the new Unity GUI system to be very flexible, but I wonder how one would go about creating a UI similar to what Blender or Microsoft Expressions uses (see screenshot)?

    I can create a fixed-proportions, non-overlapping UI by using camera "normalized view port rect" settings and a GUITexture window frame. But the GUITexture isn't re-scaleable.

    If I use UnityGUI, then I have to use Render Textures to put a camera in a window, but how would I manage all those windows dimensions for the various screen sizes and proportions? And at what performance loss?
     

    Attached Files:

  2. shaun

    shaun

    Joined:
    Mar 23, 2007
    Posts:
    728
    I can't see anything here that isn't possible in the Unity GUI - although the Timeline would be tricky in the current version.

    Checking and setting the window sizes isn't so bad - it would be a S***load of work with a complex layout like this, but it can be done. Everytime OnGUI is called you're setting the size anyway.
     
  3. bigkahuna

    bigkahuna

    Joined:
    Apr 30, 2006
    Posts:
    5,434
    Thanks Shaun, but either I'm missing something or I haven't made my issue very clear. I went ahead and edited the screenshot to be closer to what I'm talking about (sorry Microsoft ;) ).

    In the screenshot you can see that I have 3 "video" windows that are made by using RenderTextures in a GUI Window. The "non-video" windows would have GUI buttons or text displayed. This mock-up is obviously geared for a widescreen display (1440 x 900 or so), so I would scale my RenderTextures appropriately. In this case, I would probably set my big window to a RenderTexture size of 1024x512.

    But here's the glitch and maybe I'm just not picking up on this yet, when I want to set up the screen, for example, a 1024x768 display, I would have to rescale each of the RenderTextures, right? And wouldn't I have to do that for each and every possible screen resolution and aspect ratio? Or am I missing something?
     
  4. forestjohnson

    forestjohnson

    Joined:
    Oct 1, 2005
    Posts:
    1,370
    Unless I am mistaken, you can have cameras rendering on top of gui, right ? in that case you should just set the port view rects every frame. And if they can't render on top of gui, just make the gui transparent there.
     
  5. bigkahuna

    bigkahuna

    Joined:
    Apr 30, 2006
    Posts:
    5,434
    Not sure I follow you Yoggy. Are you suggesting that I use "port view rect" for each of the cameras, and then overlay the Unity GUI elements on top of that? Because AFAIK a camera view is always behind GUI elements, right? That's why I was using RenderTextures, so I could drop it on top of a GUIWindow.
     
  6. HiggyB

    HiggyB

    Unity Product Evangelist

    Joined:
    Dec 8, 2006
    Posts:
    6,183
    You're correct, the new GUI will always render in front of the camera. But I'm not sure you need render textures either, why can't you just have "holes" in your GUI through which the rendering camera peeks through? That way you won't scale the render textures so much as set each cameras' on-screen display region instead.
     
  7. bigkahuna

    bigkahuna

    Joined:
    Apr 30, 2006
    Posts:
    5,434
    Thanks Tom, I think I follow you now. What about the "empty" spots where there will be nothing but a GUI Window? I suppose I would just leave those empty (no camera assigned in that area)? I'll have to experiment with this to see how it works...
     
  8. shaun

    shaun

    Joined:
    Mar 23, 2007
    Posts:
    728
    I think I was overshooting your expectations :) I assumed each window would be draggable and snap into a grid layout.

    If its just going to be fixed, its not all that difficult - as Tom said you can build a custom GUIStyle for a "VideoWindow", make the center transparent for these types of windows using PShop and the Border settings, and calculate the rectangle within OnGUI().

    The other option is to calculate the resolution of the render textures on the fly (maybe make users choose their resolution on startup?) and fix it for the session. Although I don't think there is anything wrong with resetting the size of render textures at runtime. The only advantage here would be a more flexible GUI, but it might be overkill.

    In my case, I use a combination of the two - I have a scene that renders in the main view and is surrounded by a GUI, and when the user switches to GUI "dashboard" mode, it grabs that camera into a render texture (512x512) - the switch is instant seamless.
     
  9. bigkahuna

    bigkahuna

    Joined:
    Apr 30, 2006
    Posts:
    5,434
    Thanks Shaun. It'll take some thinking to visualize what you're describing, but it sounds very interesting. You wouldn't have a screen shot or two handy?
     
  10. shaun

    shaun

    Joined:
    Mar 23, 2007
    Posts:
    728
    sure - it's the last post here.
    http://forum.unity3d.com/viewtopic.php?t=7198

    The center widget contains a render texture (it's a bit disproportionate since this was done with Unity 2.0 alpha way back).

    When the user clicks on 3D layer mode, it just turns off the RT and the camera then writes over the background camera (using camera depths).

    Cheers
    Shaun
     
  11. bigkahuna

    bigkahuna

    Joined:
    Apr 30, 2006
    Posts:
    5,434
    Thanks Shaun, I remember that screenshot, very nicely done BTW. So each of those windows is a separate Widget? If so, that's an interesting approach. What do you do for a Windows version (assuming you have one)?
     
  12. HiggyB

    HiggyB

    Unity Product Evangelist

    Joined:
    Dec 8, 2006
    Posts:
    6,183
    It seems that with Shaun's help you're on your way, but I wanted to comment on the above. You might need to have one camera that does nothing but render your background color (no models) and that is the "bottom-most" camera so you get a full screen background color of your choosing. Otherwise if there are regions with no camera rendering to them you'll get solid black (which may or may not be desired).
     
  13. bigkahuna

    bigkahuna

    Joined:
    Apr 30, 2006
    Posts:
    5,434
    Thanks Tom. I actually tested this some while back, and I found that screen areas that weren't covered by a camera sometimes had some very weird effects. But that was using Unity 1.62 and prior to the new GUI tools. This topic has given me some "food for though" which I'll have to ponder on for a while before I'll be able to decide how/if I'll be able to implement it.
     
  14. shaun

    shaun

    Joined:
    Mar 23, 2007
    Posts:
    728
    All the components in that shot are inside of a single unity instance - the "widgets" are just the concept for the way users manage their dashboard.

    Tom is right about the background. In this case I created a background scene and everything else is rendered on top of that via other cameras with higher depth values.

    I was using LoadLevel previously to switch between scenes, but had a lot of problems with DontDestroyOnLoad. So instead I use hierarchies of GO's and just activate and deactivate them as needed. The reason I mention this is because applications tend to be more non-linear than games (like tabbed browsing in Safari) - and it looks like your making an app :)

    Hope this helps.