How do I create a UI

Questions & Answers
1

How do I create a UI? I make a TD that needs wave control similar to this:

 __________________________________
/____   ________   ________   _____\
|    \ /        \ /        \ /     |
|e 2 | | Wave 3 | | Wave 4 | | Wave|
|____/ \________/ \________/ \_____|
\__________________________________/

    <---<---< Dynamically moving

I have found no way to draw that in OnGUI....

I thought of making big rectangle and small ones textures but then I have no way of clipping the waves on the sides (2 and 5).

I can’t make the big rectangle’s sides opaque and override the the waves because some of the map is seen through this…

How do I do this?

3

I would recommend to use GUILayout and just use a ScrollView for the scrolling. For each wave you can use what you want: a Label or maybe even a Button if you need some user actions. You can group them together with BeginHorizontal or BeginVertical. The scrolling can be applied via scrollPosition parameter (you only need x).

The most important thing you might need is to setup some GUIStyles to give them the right look. You can create a complete seperated GUISkin or use some GUIStyles.

AFAIK you can even use a GUIStyle on a Group (horizontal/vertical) to give each wave a frame texture.

I think each wave entity should have the same size. With GUILayoutOptions like GUILayout.Width you can set a fix size.

var scroll : float = 0;
var wavecount : int = 25;

function OnGUI() {
    GUILayout.BeginScrollView(Vector2(scroll,0));
    GUILayout.BeginHorizontal();
    for (var i = 0; i < wavecount;i++) {
        GUILayout.BeginVertical("box",GUILayout.Width(100));
        GUILayout.Label("Wave "+(i+1));
        GUILayout.Label("Some info...");
        GUILayout.EndVertical();
    }
    GUILayout.EndHorizontal();
    GUILayout.EndScrollView();
}

If you want you can place that all into a Area to define the position and size on the screen.

ps. I wrote that from scratch, haven't tested it yet.

2

Alright... Have a GUI Text or maybe even 3D Text that scrolls across the top of the screen that has Wave #. This scrolls on its own (Just translate it over... 

function Update() {
    // Move the object to the right relative to the camera 1 unit/second.
    transform.Translate(Vector3.right * Time.deltaTime, Camera.main.transform);
}

Then, you can have another GUI Texture that also does the same EXACT code.... This however would have the shape... Then make both of these children of the camera... Now, it'll move, you'll never see it moving and being all weird looking as it's at the top of the camera, and as long as your FOV is below 180 (It better be haha), then you're golden...

Hope this makes sense =).