From the course: Learning TouchDesigner

UI process overview - TouchDesigner Tutorial

From the course: Learning TouchDesigner

Start my 1-month free trial

UI process overview

“

- [Instructor] Now we're going to start building a user interface for our scene so we can have different controls that change different parameters of our realtime, 3D scene here, and that's obviously one of the great things we can do in Touch is not only be able to have these results rendered in realtime but build interactive systems that allow either buttons and sliders on screen or other controls outside of the computer to manipulate our scene. So I'm going to go into the project one here, and what we're going to do first off is going to make a new container. So I'm going to hit tab, go to our components, grab a container and lay this down. We're going to call this U-I. Alright so for most of these containers we've actually been switching them to operator-viewer mode. If I click on 3D and I go to the common tab, you can see, it's set to operator viewer, which we've been doing. So we can have views of the various outputs of our different modules here. For the U-I, we actually want to keep it on its default control panel, cause we're going to be making a control panel. We also want to make sure to set the width and the height of this properly, because our render is at 1920 by 1080, we set the whole pipeline up here to be full HD. And we want the U-I to be set to that as well, so it lays over the whole image properly. So I'm going to set this to 1920, 1080. Okay, so I'm going to go inside there. And now what we're going to do is hit tab, and under the comp, you can see that we have a bunch of different panel options. And so we have a button, going to lay a button down here. I'm going to go up a level, and you can see if we zoom in, now our button is in the lower left corner here of our U-I. And one more important thing we need to do is we need to make sure that this U-I is on its separate layer on top of everything else we're doing so we can interact with it. So we want to set its layer, in this case, to one. If we had a bunch of different things, we want it layered in different ways, we can have all kinds of layers, but this is really simple. We have our imagery, which is basically layer zero, and then our U-I which is going to be layer one. So when I hit play, I'm going to hit f1. And now we go into our perform mode, you can see our button is laid over our image, and I can click on it down here. Now let's talk about the frame size for a second, because this is all set up to full HD, 1920 by 1080. If we go out here, we can see that the project one is set to 1280 by 720, which means that it's just going to take whatever it has inside of it that we've set up to view, and it's going to scale it down to that size. And our perform noterer here, which is our window component, allowing us to go into perform mode, is just following the automatic size there. So what we're going to do here is, this monitor is set up to 1600 by 900, and actually for it to work properly on this particular system, it actually wants me to set it to 1601 by 901, just a particular quirk of this setup. No big deal. So I'm going to set this to 1601 and 901. And you can see that then it just scales everything to that. If I hit play and hit f1, now we're in total full frame mode. You can see we still have this border up here. Hit escape to go back into edit mode. And let's go over to perform, and I'm going to turn borders off. I'm going to hit play again, f1, and now we're totally clean, full-frame, and this is great, cause now we have our full image on screen with nothing else there, and we've got our user interface button set up. Obviously that button's not set up to do anything, but now we've looked at the nuts and bolts of how to get everything set up to get a nice, clean, full-frame image and how to make a user interface component that we're laying on top of our image. So now that we have that set up, next we're going to move on to actually starting to build the different building blocks to control different parts of our scene.

Contents