Beginner Guide to Setting Up NoesisGUI and Unity3D

if you enjoy using xaml and the power of WPF and you're looking to bring that to Unity then this guide is going to be perfect for you in just a few simple steps we'll have you set up with gnosis GUI and your Unity projects before diving into it I'd love to hear from you in the comments what UI framework are you currently using in unity great okay let's get started on my screen I have the documentation for getting set up with gnosis GUI and unity I'll have links to this in the description so that you can click on this and get set up easily before I do a quick scroll through this and get started let's go through a quick checklist of what assumptions I'm making about your current setup you should already have Unity Hub installed and a current version of the unity editor you'll also need to have Visual Studio already installed in your computer I currently am using visual studio Community Edition and I'm using Unity 3D 2021.3.15 F1 alright so the first thing we're going to do is start with creating a new project at Unity from the unity Hub I'm just going to press new project here I'm just going to pick 3D you can pick whatever you'd like to get started with but I'm going with that and set a name for it now that we have our Unity project pulled up let's go back to the documentation for gnosis GUI and see what our first step is as the documentation suggests we're going to have to get the latest Unity package rate from their website I'll also provide a link for that in the description so when we go to the downloads portal we're going to want to get this Unity package download and you can see right here that this is great for Unity and you'll press this download button what you're going to want to do at this point is actually extract that download into a folder you can see on my screen I just have the zip file open and here's all the contents from the download you're going to want to extract this to a temporary folder and then we're going to go back to Unity to pull it into unity all right it might be a little bit hard to see but from Unity we're going to go to window and then we're going to open the package manager we're going to press this button right in the top left of the package manager and we're going to say add package from disk from there we're just going to go browse to the folder that we extracted the contents of that zip file to and then we're going to select package.json just a quick note that I have seen this half happen in unity were the first time you do this nothing actually seems to happen and there's no error I've had situations where I've repeated this a second time and all of a sudden it just starts to load as you might expect so for the current setup of my project it puts up a warning but I'm not concerned with this right now because I'm not dealing with the different input systems once the package has been added to your project you'll see that gnosis GUI puts up a little welcome screen for you what we're going to be showing today is that we're going to load up one of the examples right into our new project and that way you can see it in action before we go to do that there's one step we're going to want to do which is actually getting a license for Nosa skui now before you get scared by that we do get a trial license it does last for 30 days and then what you're able to do from there is when you need a new trial license you can just go generate another one if you have any questions about how the licensing works you can check that out on the noses page and you can look up all the pricing information as well right for us to go enter a license for no susque what I'm going to do is go up to the tools menu that's here to the gnosis GUI option and then press on settings in the menu if if we look in the top right corner of the screen you can see that there's license name and license key this is where we're going to put the information that we're using for our temporary key I'll provide a link to this trial license generator in the description as well so you can click that and get going but all that you're going to want to do on this page is enter the name that you'd like to use for your license and press the generate button below the word key you'll have a little input box marked as a read only that you can copy your key from just so I don't forget during editing I've actually blown away the field in the HTML so that way you can't take my key okay now back in unity back in the top right corner you're going to want to enter the same name that you put for your license name and then you're going to want to paste in the key that was generated as well go ahead and close that tab once you're done now to load in our first sample to get started with our first gnosis GUI sample what we're going to do is go back to the package manager the package manager again is under windows and then package manager from there we have gnosis GUI selected on the left hand side and we can expand samples so that we can see the list of samples that we can go import the reason I suggest starting with the sample is that so you can see how some of the code Works we're going to start with hello world because of course just like everything else you do in programming you always start with hello world go ahead and press the import button once that's been imported into your project we can go over to the hello world folder and then you can see that we have a scene here called hello world that we can go open go ahead and double click that I'm going to move my head out of the way once again and I'm going to press play awesome stuff so if you're familiar with using xaml and WPF then you can unlock all of that power with noses GUI just like this one more quick thing that I want to show you is when it comes to editing code that we're using for this we can go launch Visual Studio directly by clicking on the files here I'm going to go ahead and open the main window something you're going to want to keep in mind when working with gnosis GUI and unity is that some of the files that you'll see in your solution Explorer might not show up exactly how you'd expect if you're used to using them in just normal visual studio and WPF development what I mean by this is if I go expand the project once we look under the hello world folder and then this xaml.cs file you'll notice that there's only this back-end code file based on the example we ran there is absolutely no way that just this code we're looking at could animate so beautifully what you may want to consider doing is pressing this show all files button inside of your solution Explorer you'll notice once I've done that there's a bunch of hidden files here again if you don't have a lot of experience with working in unity in Visual Studio together the project files themselves are often controlled by unity and going and messing with some of the project files might not be exactly what you want to do because they might get recreated automatically by unity however in this particular case if we just want to go open up the xaml file for the main window you can see that when I double clicked it I have all of the xaml code in front of me a super quick note that I just wanted to bring to your attention is that sometimes the default editor for xaml files might have been remapped if you notice that that happens and it does not open in the xaml editor I recommend right-clicking going to open with and then selecting xaml designer by default so as we approach the tail end of this video I just wanted to mention to you that if you're looking at all of the code that we have in here for the xaml and all of the animations you might be saying to yourself well this is going to be impossible to design with because I can't see anything what I wanted to bring to your attention here is that in Visual Studio they seem to have migrated away from having the xaml preview feature and there's an ongoing discussion about this and I think that with Maui coming about maybe they're going to be looking at trying to reincorporate some of this in the future however what you are able to do is actually open up these xaml files in blend and get a beautiful editing experience inside a blend and you can animate everything and it looks really nice so that's a quick guide for getting set up with no says gooey inside of unity so that you can start making xaml based uis right in your games right at the end I'll link you to another video that I have about using blend noses gooey and unity altogether if you thought this was useful please give me a thumbs up and subscribe to the channel because it lets me know that you like content like this and of course if you have any questions about the process that was used please leave a comment below and I'll try my best to answer you thanks so much for watching and as promised you can check out that video right over here thank you