How to Build a Character Creator UI in Unity

TRANSCRIPT

Hey guys, welcome back. In this lesson, we're going to set up the UI that's going to interact with the DNA eventually. It's going to be the next lesson in fact when we start interacting with the data. But in this lesson we're gonna lay out the UI. So we're gonna add some sliders that we saw in that the first presentation that's going to allow us to control some of those DNA attributes that we were just messing with in the last lesson. We're going to add some buttons that allow us to change our hairstyle, to change our skin color, and just show you how you can do different things with different types of inputs. And with a couple different slots, and with some different data. Then we're going to create a button that will eventually represent the create character or the save character button that will allow us to actually generate the data that we can then load into another scene later on. So we can have our character in our game based on the character that we created. It's gonna be pretty cool. So in Oom now what I want to do is first of all, let's just do a split view here so we can see the game, and the actual scene view here. And I see where my character's gonna be standing. And I want him to be standing a bit off to the left so we can have the menu on the right. I'll just drag the camera to the right a bit. Probably something simple, you know, just like that. If we make this into like a 16 by nine, we can see what it's gonna look like on a wide screen, which most things would be. We'll go off to the right a bit more, and we'll come in a bit closer maybe. Maybe cut off a bit and do a little angle down. Just a wee bit. Even a little closer I think. And then just raise it up a bit. And you could put some work into this, to get it how you would like. But this looks pretty good to me. So with that, what I want to do now start creating some UI elements. Now I'm going to first create a simple panel that's going to allow me to position all my elements where I want them on the canvas. So I'll create a new panel here. And I'm going to hit F or double click on the panel to center it in my frame. In fact, we'll go into 2D mode so we can do that a bit easier. And what I want to do is just create a panel that's going to be off to the right of our character here. Just kind of floating out here. You know the kind of character creation screen that we're going to be creating. The one that you see in most RPGs. Something very similar. And I don't want this to be transparent. In fact, I just want it to be a darker color maybe. Up to you entirely how you want to do this. That looks pretty good. And I'm just going to call this customizer. And Inside of this we're going to kind of section it off. At the top we're going to have a title that's going to be for the sliders that we're going to have here. Then we're going to have like a hair section that's going to have a few options for hair. And then we're going to have a few options for skin color. Which in my case I'm just going to have buttons, but in your case you could have images that would show you the color that you're going to have if you're going to click on that button or maybe just you know, have colored buttons to show you the kind of skin color that you would have. So I'm going to create a UI text element or we could use TextMesh Pro here. In fact let's use TextMesh Pro because it is a lot better and more efficient than the built in Unity Text. And it comes by default with Unity now. So all you have to do is actually select that, and you'll get this window that says you have to import the essentials for TextMesh Pro to work. So we'll go ahead and do that. It'll just allow us to have crisper, more scalable text in our customizer here. We're going to set this to be... First of all I don't need the game view up for this. We're just losing space there. We're going to set this to be... Let's make the panel not scale, I'm just going to anchor it to the right here. Because we want it to be a certain size, and not cause any issues here. And I'm going to grab this text element and we're just going to drag it to the top left corner, make it about 20 in size, something like that. Maybe 24. And we're just going to drag this up just like that. And I'm going to call this Character Settings. That's going to be the title for this panel. Look in the game view, that's what you've got. Pretty cool. Now if I were to click play, we can kind of see where we stand here. There we go. So we have a guy standing here, then we're going to have the options for the guy over here.

[bjmgraphics]

I am making a 2D game with a character. How would this tutorial fit in with a sprite character? Should I make numerous variations of my 2D character? Thanks

[SavageSoftware]

Hi, where is the next video in this customised character ui tutorial? This a great start, but I'm new to unity so unsure how I'd hook my colours up, so my character updates in real-time and also how to store this custom information to use at gameplay time??