Make a Visual Novel in Unity 2023 - Episode 01 UI Design and Project Start

foreign [Music] [Music] and welcome to the first episode of the visual novel series 2023 Edition are you excited I hope you are because we're going to get started right now and this episode is going to be focused on making our UI and building the the startup for our Unity project so we've got absolutely nothing at this point and I'm going to walk you through the whole process and but feel free to just Branch out the whole point of this is making a system that's your own all right so let's go ahead and open up Unity Hub and if you don't have Unity uh just go to the unity 3D website I'll leave a link down below and you can go ahead and download the unity hub from there once you have the Hub if you don't have an install version then go over to installs and choose to install an editor and then just choose really your best option is one of the long-term support versions they've been out for a while they've got support and they're very reliable so the version that we're going to be using you could go with 3.16 I've already got 3.5 F1 installed so that's the one that I'm going to be doing so once we have this once we got our install of unity let's go ahead and create a new project and make sure you got the right editor version up here if you got more than one it'll show up there so with us making a visual novel yes it is 2D but that's not the only kind of visual novel there is out there there are 3D kinds as well so you could choose either 3D or 2D it really doesn't matter once you start a project you can still switch between the two so it doesn't matter which one you choose the only real difference here is if you choose 2D then it's just going to change how things Import in your project versus a 3D so in 3D if I were to import an image it would default to importing it as a texture if I set up my project in 2D mode it would default to importing those images as Sprites just to as an ease of use kind of thing so not a huge difference not a big problem if you choose one or the other but I am going to go ahead and set up a 3D urp and I'm going to call this the visual novel 2023 then making sure you select a good location for it and when you're ready go ahead and hit create project so now we've got our Unity project open and it's completely blank here all we have is three objects in the scene our main camera directional light and Global volume which I'm not going to use any Lighting in this scene so I'm going to go ahead and delete that and I don't think I'm going to use any post-processing effects just yet so I'm just going to come over here and disable that object as well and now let's hop into game view because this is going to be helpful for visualizing how things are going to look as we're building this as our we're building our UI that is so this is a good time where you could have your idea for how you want this to look drawn out in some sort of digital Studio like uh what is it Photoshop and and which is actually what I've got over here so I've got my design more or less of what it's going to be inside of and all these layers are set up to basically simulate how things will layer on top of each other and ultimately how I'm going to create it inside of unity you'll notice all of these the controls foreground characters background all that stuff they're all individual layers and they're all stacked on top of each other so this is kind of what we're going to be doing in unity only in Unity on on the canvas this is actually going to be the exact reverse order because for Unity what's on top is drawn first and what's on the bottom is drawn last hence that'll be over top of what we do for the moment let's go ahead and go into our assets folder here this is where everything that we use inside of unity for this project is going to be stored at but as we import packages uh they're gonna They're Gonna Fill Up This assets folder and so if we have just our regular audio scripts images whatever stored in here it's gonna get kind of messy so let's have a separate spot for our stuff versus the things we're going to be importing from the unity asset store and the um the package manager like text mesh Pro system for instance different things that we'll be using like that so let's go ahead and create a folder called underscore main underscore so it'll sort first and Main because it's going to hold all of the main files that I personally Import in here you don't have to do this but this is how I like to organize my projects inside of here I'll also have a subfolder for graphics that'll hold my images and my videos I'll have one for audio because we're going to have different sounds and music for this and also I'm going to want one for scripts where I store my c-sharp scripts and this is one that we all need we're going to want a folder called resources and resources is going to be very important resources is how Unity is going to dynamically load assets that aren't referenced in variables or prefabs for these other objects to use in the scene so when we want to call a character we're not going to have a reference of that character in the scene uh we're going to load them from resources because we have to do that at very specific ways the same thing with images same thing with audio so all that's going to be dynamically loaded from resources so before we get started I'm going to go ahead and save this as a new scene coming to Main and just create my own scenes folder inside of there this is going to be a visual novel Okay cool so now we can start building the UI and in order for us to render anything onto the screen what we need is a canvas so we'll be coming to the user interface tab down here in the create menu we can choose canvas and that'll actually create something where we can put user interface elements on but the way we want to do this for the visual novel is we want to actually have two canvases two cameras and two canvases One camera for each canvas and the reason for that is we want to have something that has the the base graphics on it and we want to have an overlay system and this is really something that's necessary for later on in the series once we create our screenshot system we want to be able to ignore a certain canvas because if we're just taking a screenshot off of one it's going to capture anything over top of our visual novel like our settings menu or like um like well any anything else my brain fart at the moment but we only want to capture characters and stuff that's part of the story and separating that into different canvases will help so what we could do is let's go ahead and create an empty object and what I'm going to do is I'm going to just call this the BN controller and this vegan controller is just going to have all the objects that must belong to the visual novel system in order for it to function so if I were to turn this into a prefab this is the object that I would import into a scene to get dialogue or visual novel resources into a new scene just by dragging one object so like I said we want two cameras so let's go ahead and make another camera and this one we're just going to call the overlay camera but it's important on this one that we come down and we remove the second audio listener script here because you can only have one in unity and it will throw us a lot of Errors if we just leave it there or a lot of warnings rather and now let's go ahead and take both of our cameras move them into the controller as well as our canvas and this is also going to be the main canvas so let's go ahead and create a second one and call this the overlay canvas now again what I mean by having the overlay canvas versus the main is everything we see on screen here is part of the base display this is what is part of our our visual novel everything else is an overlay like our save menu our load menu and our configuration if we were to save this screen right now if we were to save that then if everything were on one canvas we'd be capturing this save menu but by separating them we're able to separate what our screenshot system will capture as you can see right there but we don't need an overlay right now so let's go ahead and just move those two together and disable them at the moment actually no before we do that before we do that it's important that we get the right configuration for each of these so to get the configure for our cameras right we just need to change how they layer on top of each other so let me change this name to camera main just get things consistent and in in our inspector you can see that this is set to base render type we have base and overlay so if we change our camera overlay to Overlay and then come back into Main and go into the stack which is where we can add new cameras we'll just add overlay on top of that so that way this camera is only going to render stuff on top of the main camera and we can exclude that from screenshots later on if you're not using urp this may look a little different and what you'll have to do is you'll have to go in and change the depth of the camera with a higher number being on top and for the overlay camera you'll want to change the clear Flags to depth only but in urp pretty straightforward just change that type now the second thing we want to do is we want to change how our canvases render so and this is really for live 2D characters later on I found an issue with using overlay versus using screen space or camera space that is it it was not playing nice no matter what I tried to do so if we go ahead and change our main canvas to screen space camera and then pull in our main camera then do the same thing for overlay change overlay to screen space camera and move that into overlay and that'll take care of us and the only thing you have to worry about is for your canvases if you are operating in 3D space and this is part of a 3D environment then you just want to make sure that you Tinker with your plane distance and set that to a low value so that way it's very close to the camera otherwise you might have clipping and that would not be fun or pretty but with all that out of the way we're not using overlay just yet so I'll go ahead and select those and disable them for the moment and now what we want to do is I want to make a root object and this root object is going to be what enables everything on screen when we want to bring up the dialog and this will be a child of the VN controller I'm going to call that root [Music] and we're just going to take the canvas for Main and overlay and move them inside of root [Music] and here's where we're going to create our layers so if we come inside of the canvas here let's go ahead and create a new empty object and call it layers and inside of layers let's go ahead and make a panel object and we're going to make a panel for each one of the layers that we have such as for our characters and dialogue and this one I'm just going to call it zero because it's layer 0 and this will be the the underlying background and that's not something I talked about before this is just because I want to add a black color um that would kind of darken anything behind this scene when dialogue is active whenever that is so but I need to scale it up because that's not showing the whole screen since we made layers an empty object by default it's not going to consume the whole screen so let's go ahead and Ctrl shift alt and then select this expand button to shoot it to all four corners and that'll go ahead and scale up our background as well we don't need the image on the actually I do want the image on that one but we don't need the image on the other panels we're going to do so the other one that we had was straight up the background and that was layer one on top of the background we had our characters and on top of characters was our cinematic layer on top of cinematic we had dialogue over the dialogue was the foreground and on top of foreground was the controls and for each one of these I'm going to go ahead and remove that image component because they don't need to show anything for underlying background I'll remove the Sprites set that to none that way it just fills the whole screen and there we go make that a little darker another reason you might want this underlay here is for number one if you're using a 3D mode here you can darken anything anything in the actual scene view once dialogue starts but additionally if we were to set our main camera to have the background type to solid color that way whenever nothing's happening all we have is a black screen looks good but a little sneak peek later when we do screenshots if we try to capture the background color of this camera it's not going to work so good it's not going to be Pitch Black it's going to be like an off shade a little lighter so if we have under laying background here and just set the opacity all the way up then what we could do is basically Force anything behind everything to be black if that makes sense and again that would be for screenshots not the actual in editor or in-game viewing experience and just to visualize this if we had text on the screen and the camera color was set to black but we didn't have that underlay and we went to save this uh what we would get is this because basically it's just capturing the transparency of that camera but if I were to come in and activate that underlay background and then take that screenshot one more time then we get the correct view so that's why I have underlay cool so with all that out of the way now we can actually put in the elements to visualize our visual novel here how it's going to look so I actually have a couple of assets here that I'm going to bring into the project and I'll leave these in the resources section as well you can find that at the link in the description or if you're onto the web page it'll be right in the resources beside the video so I'm going to make since none of this stuff is really anything I'm going to be keeping in the project just for demonstration purposes right now I'm going to make another folder uh underscore testing and basically this folder for me is just anything temporary that I'm going to delete before I actually build the game so I will just go ahead and drag all of these items in there we go and here's where you would notice if you made the 3D template for this project then your texture type will import as default whereas if you chose 2D this would go ahead and be Sprite here so for the character I am going to turn that into a Sprite so I can place the character on screen um and the dialog bar I'm going to do that as well and this one I'm actually going to keep this one yeah because I would like to have a soft dialog box okay so let's go ahead and add our background first so inside the background I'm going to make a and remember this is all just for testing right now or just for visualization I'm going to make a raw image component and scale this up and I'm just going to set the texture to be that background there we are how's that okay now the characters let's go ahead and add a UI uh image and drag in our character there now for our Sprites there's a little button here called preserve aspect ratio we only have that on images we don't have that on Raw images and the difference between raw image and image is image needs a Sprite a raw image needs a texture let's drag out in this character and just scale her up a little bit something of the sort and that'll be fine okay and now for our dialogue layer so let's go ahead and make our dialog box let's add another image and I'm going to drag my dialog bar in here and since this is actually something I'm going to be keeping I am going to take that and move that from testing into main so I don't delete it later and then to graphics and I'll just make a subfolder per UI there we go and so the dialog box let's go ahead and change this color to Black and I'm going to make that slightly transparent that might be good for now okay so let's add our text to the screen so if we go ahead and right click this object and select UI Unity has integrated text mesh Pro which is a great text solution but you need to import the essentials first so let's go ahead and do that and that's going to import it directly into our assets folder and now let's just pick a good position for this text and let's make one for the name as well [Music] all right and we'll give this a name I'm gonna call this name text and this one will be dialog text okay so that just leaves us with the controls layer and we'll make this pretty simple and just add another panel but set this to be on the bottom okay apparently that won't scale down so I'm gonna drag that to be roughly about the size of the bottom of the screen to the bottom of the dialog box and about the area that I think the buttons are going to uh consume that space let's go to UI and add a button and just label them for each button you plan to use [Music] and on this panel we'll create a horizontal layout group so that way our buttons just automatically align down there take them drag them pop them in there and boom they automatically fill the space if we want to we can control the width and the height so that way they can zoom the whole Space there but I don't want these buttons to actually be visible so we can turn off the image and also turn off the image on the panel but then come through on the text and maybe change the color a bit I might make it orange just to stand out and make these buttons italics italicized and that's it so we've got everything we've got the layout here we've got the visuals up uh the character's a little small so I may actually scale her up a bit but you know we can see what we're doing at this point now and that's the big thing so next episode we're moving past this and we're getting into making our first script hooray getting right into the meat of the project and that's going to be we're going to be bringing dialogue into this box here we're going to start making it appear start making it generate so that way we can actually start having conversations on our screen so join with me in that episode and I'll see you then bye foreign [Music] [Music]

Channel: Stellar Studio

Views: 33,103

Keywords:

Id: HvjmoawQo_4

Length: 21min 47sec (1307 seconds)

Published: Sun Jan 15 2023