Create complex window using new UI element

Hello everyone,

I'm currently building some game for fun, and i enjoy it a lot. While i started using tutorails on YouTube, i created a UI systme using the old way, with the OnGUI() function.

Now i wish to use the new one, with prefabs and instantiation, and creating buttons and simple things are ioncluded in my project.

But i don't get how to create more complex things. For example, when ordering the construction of something, i want the game to pop a window showing the different crafts possible, to allow the player to choose it.
On clicking on an item of the list it would show the construction materials. Like the picture below.



But i don't understand how to do it properly. In my idea i should create a prefab, instantiate it, and then, i don't know how to pass to the window the list of objects, how to change the content of the "requierments" part on clicking a button, and how to complete the order on clicking "craft".

Thanks in advance for your answers, Gabriel

 

No, you don't need any prefabs. Have all the UI elements you need on your Canvas, and simply deactivate them till they're needed. Then you can do things like show a sub-menu or some other window in response to a button press without any code at all — you simply set the relevant object to active in the button onClick handler.

Go through the UI tutorials; I think that will cause a lot of "oh!" moments, and save you tons of time.

 

Once you've done the UI tutorials in the learn section, check out a few on my channel as well. The dynamic menu and the chat box one might cover everything you need.

https://www.youtube.com/playlist?list=PL9XrzOfMtxxHLwYeDusb1CIi_7dvP23Sz

Some tips for complex layouts:

• Everything starts with a panel
• Use Horizontal and Vertical Layout Groups on parent elements
• Use Layout Elements on child elements
• Use empty GameObjects with a Layout Element to determine spacing
• Use prefabs for your low level objects

The Layout Element is your best friend. You really want to spend time understanding how this component works.

 

First thanks for your answers.

@JoeStrout

So you mean that i should create all the windows used in my game as part of the scene and be just deactivated? That mean there could be an awful lot of them in a management game.
By UI tutorials i believe you mean the unity tutorials such as this one :
https://unity3d.com/fr/learn/tutorials/topics/user-interface-ui/ui-button?playlist=17111

@BoredMormon
Thanks for the tips i'll take a look at the layout element and your youtube channel.

 

Yes, that's the standard way.

Another way to do it is to turn them into prefabs, then delete them from your scene, and just instantiate the prefabs as needed. It's a little trickier to get the layering exactly how you want it, though. (Layering in a Canvas is determined by order in the scene hierarchy.)

Yep. But then do @BoredMormon's tutorials too; I hear they're quite good.

 

Thanks.

Just make sure to hit the learn section first. Mine presuppose you already know the things covered in the learn section.

 

Alternatively you can create them within their own scenes which allows you to load and unload as well as activate and deactivate them as needed via the SceneManager API. Starting with Unity 5.3 you can even have multiple scenes loaded within the editor at once.

https://docs.unity3d.com/Manual/MultiSceneEditing.html
https://docs.unity3d.com/ScriptReference/SceneManagement.SceneManager.html

 

You can also use my Procedural UI package. You wouldn't need to worry about elements instancing and positioning. Windows are scalable and movable, and they require just a few lines of code to work
Assetstore link here