Today we're going to talk about UI flows. This is the graph, the logic behind your UI. This basically describes what happens when you click a button and you want to show a different view. For example, if you're in the main menu and you click the settings button, you want to hide the main menu and show the other view for the settings. So, there's a logic behind that, a diagram, and today you're going to learn how to create it and how to use it. We're going to make a simple menu just to show you how it works. It's very easy, and you don't have to write a single line of code to do it. All right, let's get started. [Music] All right, so I'm in Unity. This is a clean install of Doozy UI. Let me show you the version just so you should have at least this version to be able to follow. So, 4.2.1. All right, and let's get started. So, what is a UI flow and how can you create it? Well, a UI flow is basically a graph.

you can have more flows working at the same time for complex menus, but today I'm going to show you a single structure, a simple thing, so just so you understand the basics of it, how you can create it, and how you can integrate it into your project. All right, so before we begin, we need to create a graph, an asset file. This contains the nodes that define our logic. So, I'm going to right-click here. Actually, let me create a folder, and I'm going to say underscore demo, just so it's the first folder. And here, I'm going to create Doozy, a flow graph, and I'm gonna call it demograph. I'm gonna double-click it or press enter. It really doesn't matter. And right away, it's going to open node, and this is our root node, our start node. This is the first node that gets activated. It doesn't have any logic, which is just a starting point. And now, let's start and think about our UI. Let's say I'm gonna start with a

simple thing um main menu and then settings all right so I'm going to create a node. This is a UI node by the way, and this is our basic node, and this will be our, I'm going to name it main menu. Um, this is just a name for the node so that we are able to identify it. Sorry for the typo, and I'm gonna connect it. So when the first, when this graph starts, this flow starts, I want to show the main menu window. All right, so I'm just going to connect it here. Now I will have a button called settings that I would like to connect me to another view that I'm gonna call settings menu, for example, right? So I'm just gonna create another UI node, and this will be my settings menu. Okay, so now we have our main menu and our settings menu. In order for things to be easier, I'm gonna create databases for views and for buttons, but I'm gonna do that while I create the views and the buttons so I don't confuse you. All right, so basically, this is how

this diagram will work. Of course, we will not be using a timer; we'll be using a button. So, I'm gonna delete this connection for now. So, this is the most basic diagram that we can have. So, let's start. I'm gonna create a view, and then I'm gonna create... Actually, let's create the databases, but before we do that, I'm going to create a view. So, I'm going to show you where you're using the databases. So, I'm going to go to UI menu containers because this is a container view, basic simple view. I'm just gonna create one here. Oh, for this example, I'm gonna change the cam first. Let's set up the canvas because I really don't like the overlay one. This is where our camera is, so this is our camera, and this is our canvas. That's it. Set to screen space overlay. You can leave it like that. I'd like to have it screen space camera, so I'm just gonna say like that, reference my camera, and there we go.

Now we need to set up the canvas scaler. This is what makes our resolution and our UI scale depending on your target device. So I'm going to say scale with screen size and yeah let's go for full HD 1920 with 1080 and 0.5 right now. Because we're using the new input system, Unity adds an event system but it's set to the old one. So we need to select the event system and click replace with input system UI input mode module and we're good to go. So now we have our container, our simple view. Let's just clear it up a bit and this is our view that also has a show and hide animation. We can hide and show it just so we can preview it and now I'm gonna add a let's change the animation actually no this is not an animation tutorial. So I'm going to change the title just so we know which view we're seeing and I'm just going to put this right here 128.

minus 64. And let's increase this to something bigger. Can you see it? Yes, you should be able to see it. Let's say 80. And here I'm gonna say main menu just so I know where I'm at. And I'm even, let's also save this scene in case we're having any issues demo. And let's change the background to this color. And let's go to a dark shade of it just so it looks nicer. All right, so now I have my main menu. What did I say I need? Well, I need a button for my other view. It can be anything, but for this example, I'm gonna say settings. So I'm gonna add here a UI menu component's basic button, a simple button. By the way, all of these things that you're seeing in the UI menu, I'm accessing here the context menu. But if you want to preview them, you go to tools, Doozy UI menu, and here you can actually see them. So I'm adding this button. You have a lot of other buttons by the

way let me just zoom out a bit so you can choose whichever you want or create your own. You have switches, yeah, you get the idea. So I'm using this basic button. Why am I using these pre-made ones? Because if I enter play mode, then I'm going to do that just now. This button already has an animation, and it just looks nice, and I don't have to do anything. So basically, I can create prototypes very fast. Okay, so we have our simple button, and now let's create our databases. We will have views databases. This is a way to identify views and button databases, a way to identify buttons. So let's go to our view. You will notice here that we have a category and a name. Right now, it's set to none and none because we do not have any database created. And this is our database button. We can open it from here. Another way to open the views database is from tools, Doozy UI Manager, databases, and you can open it from here. Or if you want to see all of them.

you can go to the doozy UI manager window, and here you have all the databases if you want to work with them like that. It's up to you, and yeah, so I'm just going to open it from here. So this is my views database. I need to create a category and some names for this. I'm going to say demo. You can say whatever you want, and I'm going to say main menu. All right, so I just added this. When I did that right here, I now have this option for demo and main menu. Let's add one more. Let's add the settings. All right, so I'm gonna say settings, and now I also have the settings options. This is how it works. Now we also, because we did that in our graph, we also have the same thing added here. I'm going to come back here. I just want to show you that everywhere where the, when you have where you can access this, this database now has these options. So this is um, this is a way to make it easy for you to work with.

and not to have any typos or anything else when you reference them. So, yeah, let's go back. All right, so now my view. This is my first view. I'm going to say demo main menu. There's a small button that will help you have a clean project and will help you rename your game object. So, you see here, I have a simple view. So, now if I click this rename game object, it will say view and the name of the view, view main menu. This way, you know what you're seeing in your hierarchy, right? Let's go to our button here. We have a simple button again. These are other databases, but of course, I can create the ones that I need. Oh, I'm going to create another demo, and here I'm going to say, what button do I need? Well, I'm going to say a settings button, one that goes to my settings view, right? Enter. And now I'm going to create one more, and when after I've been to the settings view, maybe I want to go back to the main menu, so I need a back button. This is

also a special button. So back all right, so now I have two buttons in my buttons database. All right, so here I'm gonna say demo settings, and again I have this nifty little button. I'm gonna click it and say button settings instead of simple button. And now you can see that you can have view main menu button settings. All right, let's also change the text here, and believe it or not, this view is done. You don't need to do anything else because we have these two shot for these two identifiers. You have one for the view, we have a demo main menu, and one for the button demo settings. And because we have that, we can capture their input in our UI flow in our graph, right? So let's do one more thing. When this UI menu is shown, actually at start, I want to say instant height. So I want to have this window with this view hidden when the game starts. And when I enter play mode, you will no longer see it. Let's actually set, instead of free aspect, let's set a resolution for our game.

view. It's really not complicated once you understand how they connect. So, I'm gonna say here 16 by nine perfect. All right, so if I enter play mode, as you can see, our view is hidden. It's right here. All right, we need our second view. This will be our settings view. I'm just gonna, let's move this main menu here. Let's duplicate it. By the way, the views will jump to the start position because we have custom start position set right here, so there's no issue there. And this will be our settings. All right, so I'm just gonna set settings here. And right now, this game object's name is view main menu. Let's just use our button settings. It's quite easy. Let's go at our button, and this will be a back button. So again, I'm gonna say back. I'm gonna rename it. And now let's just change the label, so I'll say back. Again, this is my title. Let me say settings. And to make it easier on the eyes, I'm going to change the color. Let's go to a

green and let's do the same with the background. So, I'm gonna get that color, and I'm gonna go down, way down, yeah. So, now you can identify them with actual. I think I'd like this to be a dark gray. Let's say 20, 20, 20, yeah, something like that. And this as well for the settings. Perfect. So, now we have two UI views: one for the main menu, one for the settings. They do not have any logic because this is where the UI flow comes in. How can I connect that settings button? When I click it, I want to hide the main menu and show the settings. And when I click the back button, I want to hide the settings menu and return to the main menu. How can I do that? Well, with the W, with the flow. I just double-click this, so let me delete this so I can get from the. So, basically, this is a clean graph, right? I'm just pressing space, typing UI, enter. So, this will be our first note. I'm gonna call it main, my main menu. You can even write something here if you

want to just like a note, and let's say, do I want well, I want when I enter this node. So basically, when this node gets activated, I want to show a view, and I want to show the main menu. So this is the graph starts, it goes through this connection, activates this node. When this node is activated, it means we enter the node, it just becomes the active node. When it gets deactivated, leaving to somewhere else, it means we're exiting the node. So on enter node happens when we activate the node. On exit node happens when we deactivate. When this is not the main domain node, this is basically a state machine, if you're wondering. If you do not have a node graph solution for your UI flow, you need to create a state machine-like system in code, and it's quite tedious to keep track of once it goes in complexity. That's why this is so easy to work with. So like I said, when we enter the node, I want to show the main menu. When I leave this, I want to hide the main menu. So I'm going to say on exit.

hide views, and I'm gonna say Devon main menu, and that's it for the show and hide of the view. But how do I leave this node? Well, I leave this node if I press this settings button. And how do I define this in my flow? Well, if you see right here, you have a connection. This is the connection, but right now it said it's a time delay and says after three seconds, just leave to somewhere else and say aft. I'm gonna say this: if a UI button with the category demo and the name settings is clicked. So, when we click this button, remember we set it up. Let me show you right here. So, category demo, name settings, right? So, when we click this button, I want to go to my settings UI node, and I'm going to create it right now again, pressing space UI enter. So, I want to go to this node, and this is my settings menu, right? This is how I'm gonna name it, so settings menu. All right, again, when I enter this node, I wanna show the

settings view so show views demo settings when I exit this node. So when I go back, for example, or leave, wherever I want to hide the settings view, and that's pretty much it, except one more thing. We need to connect the back button, and the back button is a special function, especially in a UI flow. A UI graph is not your typical graph because it needs to be able to go back, and in order to do that, we have the back button functionality. So you will see here that there is this says toggle the back button functionality for this node. Can you see it? I think you should be able to see it. So yeah, so I'm going to click this, and right now, if I press a back button, regardless of what type it is, if it's a keyboard, if it's a controller, or if it's a button called back, remember we created one, it will go back through this same connection, and you're gonna see it even has a different color. It's great, and this is your basic

your basic basic UI flow, and this is something that every type of UI needs to have. So, you need a way to define your flow, to jump from one part to the other. So, there are a lot of other nodes, um, as you can see here. You have a portal signal, a back button node, you have some scene management, you can load the download scenes with this, um, you can click the application, you have some time scale, you can change the time scale of your game, and you have some utility nodes, or so some debugs. And I'm gonna show the pivot node, of course, a random node, and of course, a sticky note. All right, now I have my views, I have my buttons, I have my flow. Now we need a way to use this diagram, this graph that we created, this UI flow. We need to activate it, because it doesn't work just like that. So, you need something called a flow controller. This is where you load your graph, and this activates and makes this all work. So, right now, if I enter play mode,

you won't see anything because there isn't the logic that we just created hasn't been loaded. And in order to do that, we need a um let's go to can you see it no let me get my head out of the way. So I'm going to use node flow controller. This is basically a simple component and here it accepts a flow graph right and this flow graph is our demograph. And we can also see I'm gonna dock this here just so you can see what happens in play mode. So what we're gonna see now is this node will get activated then this connection will will light up because it was accessed and then this will be our active node when this node activates. It enters the node and it shows the main menu and then it stops. It just waits for your command. Your only command, your exit node command is this is this demo settings option. So when you click that button then it goes away. Let's enter play mode and see that this is actually true. And as you can see it activated this jumped here and now we

are in the main menu. If I'm gonna click the settings button, you will see that this connection will light up and this node will get enabled. Of course, when we leave this, this will get on exit node will be called on the main menu and hide our view called it. It calls hide for it and then here it's gonna go. It's gonna call show on enter for settings. So let's click it and there you go. Now when I'll click back because this is a special connection that goes back, you're gonna see it lights up purple and goes back. There you go. So this is our most basic UI, like I said, because this is a specialized node. I do not have to click the back button. I can also click the escape key or the Android back button or actually let me show the escape key. So my keyboard, this is my uh, where's the camera? Escape key. I'm gonna click it and it just went there. Yeah, so settings and escape. All right, all right, let's uh complicate things a bit in order for connections to look

better let's say I want to show. I want to add another menu. Let's say a user profile. All right. And I want to access that through the settings menu. So I'm going to come here. I'm gonna duplicate this. And this will be my user profile. Of course, I want to add it to the database so it's easier to work with. I'm gonna say user profile. I'm gonna rename it. Now here I'm gonna change it to title and say user profile. Let's also change the color a little bit. Something like that. Let's change the background. It's not that great. The greatest one, but it should be okay. And now we need one more button here in the settings menu. And here I'm gonna create another one. And here I'm gonna say user profile again. Another button. So user profile. So I'm adding another entry into the buttons database. User profile. And let's also rename it and say profile. All right. So again, we are going actually. Let me leave it right here. So now we need another UI node. Can you

see what I'm doing here. Let me check. Yeah, so I'm going to say another UI node. And here I'm going to say when we click the UI button called demo user profile. I want to go here. And this would be my user profile menu, for example. And I want to show my demo user profile when I enter the node. And when I exit, I want to hide that. All right. Remember, we want to go back. So in order to do that, we click this button. All right. And this is how we added one more view. And these are chained, by the way. So let's enter play mode. And now I can say settings, user profile. And of course, I can go back and forward and back and back. So this is how this works. Notice that we did that in two minutes. So basically, now you can start and construct your UI with proper graphics and profile animations and so on. So this is how this actually works. So settings, escape, I'm going back. Settings, profile, escape. Let's say I want to be able to go from my user profile.

to the main menu without going through settings. How might I do that? Well, I can add a button in my user profile to go to the main menu, and we're going to use some pivot nodes just to make the connection easier to see and follow. All right, so let's do just that. Let's play here, so let's add one more button here, and let's duplicate this. And here, I'm gonna say main menu. I don't have one, so I'm gonna say main menu. You can write whatever name, button name. It doesn't have to be main menu. You can write whatever you want here. All right, but it's easier to understand. Let's say you're working with a team. Well, you would want them to understand to make the minimum required effort to understand what your UI is doing. This is actually made for designers. So, let's say pain, so it should make your life easier. So now, I have my main menu button. Of course, if I enter play mode, because there's no logic added to it, it doesn't work, right? So, I am clicking

it and it doesn't do anything right. So let's go to our graph. I'm just going to make it a bit bigger. So what I want to do is when I'm in the profile menu, I want to click the main menu button and jump over there, right? So I'm going to say UI menu UI button demo main menu. Now we have a problem, a visual problem, because sure, I can connect it like that and it will connect, but now my graph looks, pardon my French, like right. In order to avoid that, we're gonna use some pivot nodes. These are some visual aids. So I'm gonna delete this connection, and I'm gonna create some create node utils pivot node. These nodes don't do anything. They just help you make a easier to understand connection, and I hope that you're going to use them a lot, because otherwise you won't be able to see how the connections work. So this is my first pivot node. I'm gonna connect it here, and I'm just gonna rotate it until I think, yeah, this is okay.

now I'm gonna create another pivot node space and p, and I'm gonna connect this one here. This is just a way to draw connections, and now I have a way to get here. All right, so this is how this works. There can be, if you're looking very closely at the connections, you can see one means it accepts one exit, one connection. Infinity means you can connect more nodes to use this pivot node. So, if I have another UI node here, I can say, Okay, you can connect here. So, just so you can see how this works. All right, so now this should work. One thing I would like to do when I enter the main menu, I want to clear the graph history just so I won't be able to go back. Of course, I can make it go back, but I'm not interested in doing that just yet. All right, so let's connect it here. Let's also move these a bit back. Come on, select and go back a bit. Yeah, that's much better. All right, um, come on, don't jump. Yeah, perfect. So, let's enter play mode.

so settings, uh, profile, and now I can go to the main menu. When I'll do that, you will see that this connection will light up, this node will light up. So basically, the entire path will be leaked, and you'll see how the connection went. So main menu, let's go, and there you go. Of course, if I press escape, it doesn't work, and I can go back settings profile escape escape. Now, if I want to be able to go back, and you basically don't want to do that, but you might want to do that, so I'm just gonna not clear the graph history and make this a back button. By doing that, if I press escape from the main menu, it will go back through this entire path back to the profile menu. So that's why the back functionality is very important here, because it will help you go back without adding extra connections. All right, so let's enter play mode, and let me show you the new functionality that I just added. So let's go to settings, and I'm gonna press escape, settings, profile, escape, escape.

settings profile main menu. Now, if I press escape, it's going to go back through the entire connection back to the profile menu. And I'm going to press escape now. Check it out, even the color change so that you can understand that that was a back button. And of course, because the graph also has a non-persistent history, you can go back to the main menu. And now, if I press escape, it won't be able to go back because you're at the start of your history. So, settings profile escape escape. Now, if I press escape, nothing will happen. Now, settings profile main menu settings, for example. Now, if I press escape, it will go back to the main menu. Now, because there's another loop, if I press escape again, it will go to the user profile menu. And finally, that's it. But I recommend you do not enable this in your main menu unless you really need to if you want to go back from where you came from. And also, you can clear graph history. So now, notice that I did that at runtime profile main menu. If I press escape, it

won't go back. I'm pressing escape. It doesn't go back, right? And it also cleared the history. So this is the most basic way to create a UI. This is your UI flow, and of course, you can imagine you can add more and more things and have a lot of nodes connected this way. There are other connections and other ways you can load scenes, unload scenes. Let's also load the scene just so I'm going to show you how that is done. Let's load and unload the scene with this particular graph. It's really easy. I'm gonna add it into the main menu. Let's do that in just a few minutes, so it shouldn't be that hard. So I'm gonna save this scene, and I'm gonna create a new one, an empty one. And here I'm just gonna add an image without an event system because I do not need one. Let's say this image will be right here. And let's add a text to it, UI Text Mesh Pro. Let's make the background dark. Sorry for

the and say hello world. All right, let's center this. So basically, this is another scene that we're loading. I'm gonna save this scene, and I'm gonna say load me. This is the name of the scene, and I'm gonna save in order to be able to load and unload the scene. It needs to be able. It needs to be added to your build. So let's load again our basic scene, and let's go to file, build settings, and here I'm gonna add load me, right, just so I know what I'm doing. I don't know why I have a deleted scene here. All right, so remember, you need to do this. Otherwise, otherwise it won't work. And in the main menu, we're gonna create two buttons, load and unload, just so you can see how this looks. So here I'm gonna duplicate this. Oh, sorry. So duplicate, and this will be. Let's add one more button, and let's say load and unload, just adding two button names. So load, load. Let's change the background a bit so I

can identify it so load and let's add one more and this will be our unload. Unload again, let's make it something like that and let's say here unload. I'm just going to use nodes for this and this is my unload. All right, so now I have my two graphs right, my two, uh, what am I seeing, my two buttons. All right, let's go back and add them to our logic. So here, I'm gonna move these a bit. Let me just make this not maximize. Come on, let me just bring it out just to make it bigger for you. I'm just checking that you can actually see what I'm doing. All right, so we need, we have two more buttons. Let's add them. So I'm gonna add one more button and one more button. So to exit connections, right, the first one will say UI button demo load and the other one UI button demo unload. So we have our two buttons. They're not doing anything right now because they're not connected to anything, so you won't have an issue if you're

clicking them. Let's enter play mode just to show you. So, even if I click them, I cannot leave this main menu node. If I click settings, it will work, but if I click those two because they're not connected to anything, it doesn't work. This is our UI flow, right? So, let's disconnect. Let's exit play mode. Sorry, I'm a bit tired. So, space scene management, load scene, and I'm gonna connect this load to load scene. And actually, I'm gonna move this back like so. Come on, move down. Perfect. Maybe we can do it like that. Yeah, looks a bit better. All right, so when I'm loading a scene, I can load it in two ways, either by name, and the name of the scene is load me, or by build index. You get the build index from file build settings, and this, this is zero. This is the first scene. This would be your build index. This is a number. You can do it either way, and I'm gonna load scene additive, so I'm adding, I'm not replacing this scene. I'm

just adding one more scene to my current scene allows inactivation. Yes, scene activation delay 0.2 seconds, and after that is done, I want to go to the main menu. So, I'm just going to edit another pivot node right here. I'm going to connect it, and I'm just going to connect right here just so it's easier to see. All right, and this is my load scene, and I would like an unload scene as well. All right, so scene management unload scene again. I'm gonna put it here, just gonna move these down. All right, let's move this as well, and here I'm gonna say unload scene. As you can see, I'm trying to make a good layout for the graph, and you should do too if you're working especially with more people. You want them to be able to understand the graph with ease, so just take care when you're designing it. You're designing it right, so it's easier for them to understand what is happening. All right, so again, what scene am I unloading? Well, by name, I'm unloading load me.

Right, and I can also wait for the scene to unload. It's not the case here again. Actually, I can connect this right here and not wait. Let's add one more pivot just so it looks nicer. All right, you don't have to do it like this. I like to do it like this because it's easier to see. And yeah, yeah, this is my diagram. So when I click the load button, it will go to this node, load a scene name called loadme that needs to be edited from my build settings. And then it will come back to the main menu. When I click unload, it will unload the scene called loadme and go back to the main menu. Let's come here. This is my diagram. Please note I haven't written a single line of code. It's only clicks. So load hello world, unload. There you go. And you can also, let me just make this smaller so you can see it. So if I click load, notice how this path leads up hello world. I cannot see the other button. And now when I click unload, you'll see this path leads up unload.

now of course, you can also add a progressor, but this is a more advanced tutorial, so yeah. So, this is, of course, settings profile back escape, and there you go. Load, unload, and notice how the scene is loaded here. Load me with the canvas. All right, unload. It's removed. All right, so this was it for a simple UI flow. I'm gonna show more advanced tutorials with progress reloading screens and how to add a progress. It's quite easy to do, and I hope that you understood how you can connect your button and your views in order to show and hide something because this is the basic building block of any UI. You need to be able to create your flow, to see it, to edit it, and just to change whatever you need on the fly. I hope this was helpful to you, and I'll see you in the next tutorials. Thank you very much. [Music] [Music] You

UI Flow - Nody Tutorial - How to create a UI in Unity - Doozy UI Manager - How-To Tutorial

UI Flow - Nody Tutorial - How to create a UI in Unity - Doozy UI Manager - How-To Tutorial