Exploring UI Toolkit in Unity 2023.2 - Live Session

okay there we go hello welcome um just want to say hi before I jump into things um I'm at Game Dev guide hopefully you can hear me uh let's see we'll just wait for people to um let me know can you hear me okay everything sound good before we sort of dive into everything um um this is the first time doing this so there will probably be some uh teething problems and um okay this looks like you can hear me cool okay awesome uh yeah so um we'll see how this goes the general idea is that I want to do some of these streams because um there are sometimes some topics that like I just don't have time to make videos about in terms of they're either like really in-depth or um I can't quite figure out a full story to tell or build a demo that makes sense right and so um I figured potentially trying something like this could be a good way for us to do a more relaxed um session together and go through some things um and just sort of try a new format really so hopefully that's uh something that that works and and I guess we'll sort of go through it and see and so this is kind of the first trial version of this format um where uh we're just going to kind of explore the UI toolkit changes in 20 23.2 I mentioned this in my previous sort of unite video there have been some sort of significant changes that have been added to the tool set that sort of made me uh realize that it's potentially possible to start working with it and um it's clearly the future that Unity are going in so I wanted to get familiarized and the goal really is to learn enough about it so that I can make a more in-depth video about it next year when um I guess when 2023 goes live fully and yeah just cover cover the process a bit because as you know I do a lot of UI work on the channel and um I figure it would be a cool um a cool thing to go through so uh let's see what you guys are saying hello uh cool video NPCs making them Dynamic instead of jittery yeah um 2023 you me Unity 6 you know what so it's really interesting that uh they haven't quite said whether 2023.2rpm but yeah it I I'm not sure if 2024 is Unity 6 or 2023.2rpm [Music] up and see how they do as just normal kind of videos um but but yeah so oh people from Liverpool hello welcome uh turkey Chile wow you're from all over the place crazy um is there development Community around you guys or is it sort of do you find um you're all sort of working in individual spaces I don't know I don't know how to phrase that but yeah is there a good sense of sort of development communities where you guys are from or is it is it a bit more remote because um having you one of the reasons I moved to Vancouver was specifically because of there's a specific sort of uh game development Community here and um I thought opportunities would arise and thankfully they did I've mentioned that in the past so um Syria wow Canada hello fellow person in Canada um Palestine wow okay from Russia amazing so all right um looks like we have a world tour of people watching so thank you very much those time zones you're in some incredible time zones which is uh thank you I guess for for for joining I tried to make this in something that everybody could um attend um but obviously yeah fully understandable me being the full other side of the world to some of you means um it's obviously not compl completely the best timings for things um so some of you say mostly remote some are saying that there are uh there's a community being formed growing and to be honest the Grassroots aspect of it is something that I've always enjoyed um I was living in Brighton before I moved to Canada and Brighton has such a Grassroots kind of game development community in the UK and um I really love that aspect of it so um definitely if you can get stuck in and put events on and and do things we used to have a game development sort of drinks event once a month and everyone who worked remotely or in studios or whatever would come to this sort of one Pub and we'd all chat and and build and I think that's one of my favorite things about working in the games industry definitely is having that sense of community and familial family family element I suppose um yeah all right let's uh without further Ado let's dive into things um feel free to ask questions as we go along I don't know what the delay is like here so I'm going to imagine it's probably somewhat significant so um I may save some of the questions till the end and we can go back and review things but um really I'm just going to go through what I feel has changed significantly in in UI tool kit so let's um let's switch over and uh welcome to to um me doing UI work for cabs of chaos you don't know that's the game I'm working on on the side outside of my full-time job and it's a um driving competitive driving game arcade game uh where you race to deliver passengers to the final destination in the most chaotic fastest and most chaotic ways possible and um I'll go more into details about that sometime in the future whether it'll be in this video I'm not sure I'll probably sprinkle in a little bit of information about the game but um I've been doing a lot of work on design really now I've been there was a lot of tooling work that I was doing to sort of proof concept of tools that I wanted to use to build this thing and and prove where I can build it in a reasonable amount of scope and now um I am working to really sort of go into production on the game and um get things to a level that I'm happy with so I have actually I can probably show you I have um one of the biggest things I wanted to do was make sure that the uh character is at the showroom is um that the game had four playable characters so I'm basically trying to work on a first sort of vertical slice of the game and from start to finish really just have like one level four characters and uh generally get an overall feel for the game so we have sort of four playable characters that you'll be able to drive around as and um they'll all have their own little unique personalities and vehicles um so um we will yeah the idea really there is that we're going to move I'm going to move sort of into Productions and um I did a first prototype level I think that was this one this might be no this was like a really early gray box I did wow okay cool um this was just way too big uh this was like I had as you can see I kind of got into a oh no I have to build out a whole thing and it wasn't really well thought out and this was using some old tooling that I did which is why it looks so strange um um and then I ended up resetting that and built out a uh a there's a level one test is here somewhere um and then instead ended up oh no okay well that's fun I do not know why you can't see anything but all right well never mind oh wait is it just hidden there we go it's hidden there we go why was it hidden what the heck all right good job so um yeah this was the little prototype level I built which as you can see is very small but uh during some initial play test while prototyping I got a good feeling for how I wanted to lay things out and what I wanted to do in that regards and I'm really happy with sort of how I've settled on the general Logistics of the game and and how I want a level to feel so the next big thing is working on a on a level I'll get to what we're doing today in a minute I just want to preface everything and um uh things always happen when you show things to other people yes exactly everything this is also the first time I've had the project on this machine so it's it's um it's a fresh install of unity and a fresh install of the game so um but yeah one of the things I learned from this project was and this this is a really good example is this is a navesh and there's a um nav mesh link here and the AI can actually drive and will also jump off the nav mesh like you would as a player and things like that have really good sort of tense moments um there's another section here which is a sort of similar moment where you can sort of come and Karen off the side here so the this taught me everything I wanted to do and this was a big this is a big thing that I've tried to do on this project is build out these little um I guess gray box areas where which you can see right I've got all of these scenes so there's this the the character showroom that we were just looking at a minute ago and the um there's other things what is the joint I don't know oh this was a really early product protype of me testing um the physics of the vehicle I think uh opponent I've got an opponent AI room that I put together so it's just like lots of different scenes specially built to um build out like to work on different Mechanics for the game and then now I'm in that point where I'm trying to put them all together so um I think I have one final test here which is one of the most recent ones which is um but maybe not maybe I didn't put it together question Mark um there should be maybe not there's a destruction test for yeah all the boxes and driving through those uh I don't know if there is a vehicle yeah okay I can show you this this is let's see if this works actually this is a good time um now we'll get a bunch of errors but yeah so this was really me just testing oh man the motion blur is really oh that's horrible o okay yeah good job all right so let's turn off the motion blur on that volume profile and uh pretend like that never happened so anyway there's a bunch of scenes test scenes and demo scenes um that I've put together for different things that I've been trying to try this was just a pickup and drop off test that I did to test out the the mechanics um everything by the way is work in progress all the visuals and stuff so things will change as I move forward with the project but um yeah you get it hopefully you get a feeling for how I've put this project together so um the point really is that I've got all of the little pieces now together and I've proved a lot of the pro uh questions that I had and so I'm really just trying to flesh out a uh yeah like I said a vertical a vertical slice first playable whatever you want to call it um and for me the cool thing about this is what I realized is I can kind of build most of the game pretty easily and then a lot of the like to get to a feature complete level and then from that point it's then just content work so my my current plan is to um I'll come back to camera for a minute my current plan is to build out ultimately all of the interface to to the best I can before I you know if I need to add all features but basically make the Game feature complete and then just work on content because ultimately I just need a first level and my character four characters and I can prove out the majority to the game and then from that point it is just more level design and more character creation and you know additional content here and there maybe some extra things that you can do in levels maybe a couple of different mini games or something but um yeah so that's kind of my focus really over the next year I'm going to guess because you know having a full-time job is tricky to fit all this stuff in as well but um and make videos for the channel uh but yeah that's kind of the plan so um what I have been doing is figure figuring out what I want the interface to feel like and um you know this was triggered by me going to unite and and thinking about the UI toolkit Pipeline and how that's going to change moving forward so um I just wanted to show you essentially what uh I've got planned I've been working on this over the past couple of days and um so here is ultimately what I want the splash screen to look like um this is all really early work in progress a en feeling for what the um UI it's like the base menus might look like and mode selection that kind of thing and then um like a map selection the overall interface for the project um for like the the game world when you're playing and uh yeah some like a basic character colle uh select screen so just really trying to figure out all of these pieces and break it all down into elements and so um what I have been working working on is then this first like splash screen and um there are some challenges moving between UI General Unity UI and um UI toolkit and I think it's not fully there yet but it looks like it's heading in the right direction and I think that's important so thankfully you can have both of them at the same time um but I don't know if you can see this like there's some weird intricacies with some of these assets and so I need to I'll need to tune some of the assets a bit better than I I currently have them but um yeah let's let's dive into looking at some of these changes uh in what rendom mode do you have the canvas uh so okay so with UI toolkit the canvas doesn't exist you now have this new um UI document element over here which is just a component that you can have and um uh that determines rendering the um UI toolkit panel I don't know what I don't know what they call them the UI document the visual tree asset there you go um and that's controlled by the panel by a pan set of panel settings which is very similar to the canvas settings from what I can tell and you can choose like where things go so you can actually render uh UI toolkit stuff on like render textures and then render those in Old Unity UI if you wanted to in theory let me check this out um I can edit things yeah and you can set like Atlas settings and the way that it clears on the camera and how you overlay things um there's like runtime themes which will go into in a moment uh but yeah so ultimately that's how it works and you make a document uh where are we screens here title screen okay so you make a uxl document um which can either be opened in code or open opened in the uh UI Builder which is here and looks terrible right now there we go okay um so let me show you let me actually quickly just show you what this looks like um in play mode uh first and there might be some music so I don't know how loud this is going to be let me know if you can hear the music by the way um but the big challenge with this stuff is to do things like this is really hard to do like the moving elements don't worry about these weird blurry lines I'm aware of those um I need to fix those but the like getting stuff to move in UI tokit is not the easiest thing in the world especially if you want to move constantly and we'll we'll dive into that [Music] um yeah okay cool you can hear the music is it too loud or is it like a decent volume um it looks like it's quite loud so I'm going to turn it down a little bit bit um I moved away from it's just a little too much yeah okay cool I turned it down I'll turn it down a little bit so it's more in the background that should maybe be better um anyway it's for all placeholder stuff right now um so I'll I'll mute it for now but uh yeah that's kind of a feeling of where I'm trying to go with this and um the weird thing about getting things to move around in UI toolkit is okay so primer for UI toolkit is it's basically CSS like that's it it's you're ultimately doing HTML um document design uh let me let me open up visual studio and um we can have a look at the project uh youi Builder the the cool the weird SL cool thing about Unity 23 is that it now has these like actual Windows didn't exist in unity before so I'm trying to get used to them and I I'm not used to them like this strange overlay that Unity have now um okay so can I edit this not in can I go edit script you is there an easy way to do I don't know uh looks like there isn't okay I'm going to have to open a different script and then open open that cool that's good uh yeah all right open that'll do will that do does that do what I wanted to do that does do what I wanted to okay cool um yeah so just while this opens um so right now yeah I'm so I'm using this project as an exploratory as an exploration into UI to kit and I'm determined because it's going to be the way that un need move forward so I think it's important to figure it out and um know where they're going with things but um yeah it has challenges there are some things I like about it okay so like one of the one of the key aspects of unity's you uh canvas UI I am gooey whatever you want to call it um is that if you're working on a team and somebody wants to edit how the general thing looks or functions you have to have that thing checked out and nobody can make any changes until that's checked back in right if you're doing team stuff if you're on your own ignore everything I say because I guess it doesn't really matter but the um that can cause some problems especially if you want people to be designing and also making like code changes at the same time right because you need to check that prefab out or the asset or whatever to add components and and do that while some somebody's also trying to change visual elements and because it's all component based you have this sort of horrible hierarchy and with UI toolkit because everything is essentially text files um you don't have that problem because you can merge and that honestly was the one biggest selling point for me on actually thinking about UI tokit in a positive light after after a while and next next week we'll go into um more details about how long I've actually dealing with UI toolkit because I've been doing stuff in the editor with graph VI and that is based off of a the editor UI toolkit stuff and i' I fell in love with it there just because it's um that is all stuff I've handled in code rather than doing this UI Builder workflow stuff but um yeah I thought that was an interesting positive and sort of something that really made me think about UI talk it in a different light that the fact that you can merge these data elements together so let me show you what this looks like um I can get it working this when none of my there we go so what is it called T screen so uh else so this is what this is what UI looks like in UI toolkit it is a glorified XML document and then you have a um I guess it's called cabs default style yeah and then this is what the styling looks like it is so if you're familiar with webd you kind of know what you're doing um and like I said it has pros and cons because it has all of the cons that webdev has when it comes to like animation um and everything with that but it does mean that you can do micro adjustments to how things look across the board and that that is another powerful thing that UI tokit can do so what I'm going to try and do today is actually Define a button type and Define like that as a visual component that I can use everywhere in the game because as I showed you in the mockups um this like button type I just want to work across and I've actually already done this with this text and I'll go I'll show you that first but this sort of um General look and style I want to Define as a button that I can use and then because of the way that UI toolkit works if I do need to make any changes I can make some changes in this USS file and it will propagate or in the XML files it will propagate and that is a powerful set of um tools that we haven't really had in the past apart from prefabs or like script object workflows and it's really clunky um so I can I can see where they're going with it um and in general I think they're heading in the right direction and I think in the next few iterations ations based on their road map we will get some which I think we'll look at at the end after we've sort of reviewed everything but um the general consensus for me is that um I think the changes that they've made in 2023 have made some significant improvements for me to want to use it properly uh and and I think that's where we'll start in a moment because I want to do some comparisons between how you had to do previously had to do things and what you can do now to make elements work so that's where we'll move into um yeah HTML CSS and JavaScript yeah so it's basically H it's XML CSS and C is is ultimately how you get things doing it's appealing to developers not much designers yeah so um uh even for developers it takes 10 times longer than traditional UI system to make the same thing it's not helpful I I mean I kind of agree with that I think I think the UI Builders makes things easier for certain people but the for me working in a team I think the fact that if you're familiar with TSS that opens up which you know there are a lot of web designers out there so that opens up the the the pool for people that could work on this stuff um and like I said I mean some of you may have way more experience working with this than I do but um you there's definitely an element of yes you're still going to need to do some tooling and component based behaviors and stuff to get this to function the way that you want and it's a little bit more uh heavy-handed but like I said they have been making some stries in improving this so um we're just exploring and I will have a fully realized set of comments I think in a future video where I can write a script and and do the full comparisons visually so like I said this this is us just kind of exploring things having some conversations um making a complex UI with the old system was horrible stuff just went inside uh inside and yeah inside out and completely Bonkers yes sorry I was trying to read a thing but there's freaking there's like my reaction thing is in the way um yeah so I think it really just depends on your disposition as to what you what you want to do um moving to a CSS style is something that you kind of have to if you can if you can kind of accept it like there are a lot of Pros right and I've already said the one thing about like being able to merge styling somebody can just edit the style in a text box and two people can be adding Styles and like changes to Styles at the same time and they can merge it and it will just work and that is that is like you're working on a team and you're dealing with UI and you know across a huge project that is a that is a significant like there is a reason that the majority of UI systems by uh tripa studios are pretty much XML like they're I think coherent UI is one of the biggest players in um in the space for specifically Unity games as well um and that's all CSS based I know a lot of people have used that it they uh the game I worked on in our real game was also using coherent UI too so a lot of a lot of Studios end up going down this kind of Route so I can completely understand why Unity have gone this way um and uh yeah the the real key here is is definitely being able to just add these like small components of stylings to two objects to sort of change how they look at any given time and you can take a thing and be like okay no but add this little piece of style to it because it has this mod I guess they're modifiers or mutators I suppose and thinking about it that way is an interesting um set of like tools that you have now but it 100% is a paradigm shift and it is totally going to be dependent on the project that you're working on right so for me just to kind of stay relevant and have things to talk about um I'm exploring this and I think it's important especially if you do want to work with a higher pool of people you you open up more access for this so I think that's important um designing our software is extremely Webby so having a system that's more webik is going to be much easier to respond to the ux teams yeah I think um I think it's like I said it's just totally going to be dependent on what you're doing um so you know it's it's pros and cons and like if you're working on your own some of these things you're never going to run into as problems um but if you've worked on teams before you will run into a ton of problems that you just have to deal with with like unity's preab system and stuff so it's your mileage may vary I think is the best way to do this so okay I'm going to stop chatting now and let's actually like dive into something I wanted to do today um because uh yeah so um here's a good example of what we have to do so you saw all that stuff was like scrolling before and um you to to do do this you have to kind of take advantage of take advantage you have to manipulate these class lists um give me one second okay um so you one of the things I have here is a style called scroll Checkers and all that does is um enable the transition animation for the translate property and it lasts 30 seconds and so when the game starts um where is the go here there title screen control I'll go into we're going to be building out a component so I'll go into more details about what the C like controls are actually doing shortly but um just for now what we do is we fetch everything so we get a reference to all of their elements and then at once the game starts we run a co- routine and just Loop adding classes and removing classes and and looping that and I don't know how I feel about it as a way to animate but it's exactly the same thing you have to do in JavaScript if you are doing um HTML sort of animations so like I don't know I have mixed feelings about this and I really hope that they build in a better animation tool kit they they have got plans to do some improvements animations but right now this is this is clunky to just like have some stuff scroll across the screen um it's it's pretty heavy-handed so and I'm I'm not a big when you could just like tween before it's I mean in theory you could write a tweener for that specific style property right like you could grab the um you could do like m do style and then uh transform translate I think or translate transformation yeah uh translate I think and do value and then you could twe that value inherent like inside of code so it's it's kind of there but that's not the way like inline inline animation and inline styling and stuff is not recommended because then you have a bunch of things doing all these inlining things and writing all of these class definitions so um yeah uh you can actually catch the end of the class transition swap classes at the end of the trans yeah I did I did see some stuff into that I haven't looked fully into that yet but um um it's it's an interesting way of doing things and I'll look more into the opening classes at the end of the transition and timing things there probably is there's like schedules and stuff ins like the visual element workflow is actually really interesting and if you did just want to code UI this is kind of thing i' like about it like if you just purely want to code UI and code Styles and stuff you can do everything in cop you like never have to touch uxl and you can you almost never have to touch the USS either you don't necessarily have to have this and we'll go into that next week because all of the um graph view stuff that I've done in the past I've I've not dealt with uxl I've done some USS stuff just because it's easier to create like like properties that are shared among things in that but I still do a lot of inline styling for editor tools and things like that too so um we'll cover an alternative workflow this is the sort of runtime workflow today that I'm I'm playing around with and then I think next week we'll do the here my current editor workflow for visual elements in editor that is purely code based so um yeah all right so as you can see you have to add this you know scroll Checkers and then and then if I add check a Target I think check a small Target position a to here that'll start to move it's cool that you can preview it in the UI Builder window I like that and when we're talking about sort of designers and stuff I think it's really cool that designers are going to be able to do stuff like that and build out these behaviors just from classes because then a programmer can be working on something else the designer can be like hey here's my classes here's the flow of classes that I want in this order so that this Behavior happens and then the programmer can just Implement that basically so I think that's a huge um as somebody who who you know has previously had to do a lot of work on this sort of stuff I think that's a that's like a really big change and it is an a nice sort of inherent native workflow to this system look at it go back so yeah if I kill this it then just snaps back into place but excuse me um um so yeah anyway uh one of the things that I've I've got here is a custom text element that I've just built I did this I did this the other day and what I actually want to do is which we're going to do today is convert this uh button element into a full component that we can just put anywhere in our project so these are the default sort of unity components and as we all know they are useless in a full game and you almost definitely create your own like prefab variance with seven of these different elements combin together so um we're kind of going to do that today and um so this is what I call a shadow label and it is basically a label inside of a label because the outlining uh feature in here isn't great and so I figured out a way to get sort of outer Strokes using um an sort of SDF hack that I did which I'm not going to go too far into but ultimately I was able to manipulate the text elements that way I think I set the Styles up here um but yeah so it there's a the text is shared between both of these and so I wanted a comp root component that meant that I could change the label um and it's just it just works and so now I can just put this Shadow label everywhere I want this kind of text format which as I said is you know as as we saw in my design is kind of everywhere like it's going to be it's going to be all over the place so I wanted a component that could easily um do that and uh yeah so that's the need for this little Shadow label component and so I'm probably going to create I don't know we can name it we're going to name a button today um but yeah I want this probably this button container element because that's the whole thing that's these little dots here um you can see it's the sort of backdrop here um um so yeah I mean look I will say the thing I do like about about the UI toolkit workflow and this UI Builder panel is you get a lot of control functionality built into this system um and I think I think it's I think it's neat right that you can just come in here and like make some changes see how they look and then you can choose to revert them or you can save them into a class and then be like okay well I don't need that for this but this is a class I can use in the future so it's got a lot of um uh sort of functionality so let's let's show let me show you how you would do that so I've got a bunch of changes here uh the visibility one I actually don't need like that should that should not be but there's some settings here that I've changed based off of the default and so I need to save this into um a class so that it's sort of stored as that right for this sort of backdrop element so what I'm going to do is I will create a thing called um button uh backdrop and then if I hit uh extract inline styles to new class that has now added all of that all those changes I've made in the editor to this class here which if we look over here should have updated the stylesheet um maybe not oh I need to save it if I save it and then I'm here it should now be there we go so it's it's it's created that USS for me right which having a what you see is what you get editor like there's some issues with this that I've dealt with and actually in 2022 um it it had all sorts of problems and so I like if you're using 2022 I don't recommend I don't recommend using this at all because like there are some problems and I'll go we'll go into that in a minute when we talk about creating custom controls um but uh I do really like that you can make changes and then be like okay now save those as a ultimately a style prefab and then uh you can apply that sort of later down the line so you know and then if I want to get rid of it I can just get rid of it and it's gone right that element has now just fully gone and I can put it back and it's there and like that is that's cool it's good like that saves time that really does save some time so um um do you think one should use your to it right now wait a little longer look I mean it depends where you are on your project right like if you're just starting and you want to explore it I think it's worth exploring I think depending on the complexity of the uui that's going to make a difference um I know I don't know how performant it is yet I'll find that out in the future and I'm sure I'll report on it I know they've made some performance improvements recently but um we'll we'll see moving forward how it goes it seems fine so far and like depends how demanding your UI is I think the one thing to keep in mind is that it's retained mode um so it will only kind of change and interact with things through events and maybe maybe we can look into doing that today that's probably something we deal with next week I don't know if I'm going to have time to go over getting buttons to work and stuff I think we'll do some State specific changes uh if we have some time today but um yeah we'll um we'll go into it a bit more and look I may do more of these in the future I you know I'm working on this game in my spare time now so if you guys like this kind of thing let me know um and we can do more more in the future so um but that I will be doing a video on UI toolkit and I'll I'll it'll go in more depth because I'm trying to review this and I'm I'm working on this version um to sort of build a you know I have to familiarize myself with things and understand the pros and cons so I can make a video about it for you guys I don't just sort of make a video out of the blue and sometimes I do but I'm spending a lot of time doing research to make that video um but I I like to have a few series of things that I want to explore and talk about beforehand and that's that's kind of why I did this today is because it it's going to help me come up with those thoughts that I want to go through but really it's just been I've just been looking over it and I wanted to share it because I think it's an interesting topic so uh right let's talk about building this button out so I have this button container and it's going to have these selection of elements I've now got classes that I can um apply to them I think I just need to apply a class to this one um because what we're going to do is we're basically going to convert all of this into what I have currently as my shadow label component um we're just going to make a c script that ultimately builds out the XML structure for this single button element right so we can we should then be able to and I haven't tested if I can do yeah we so we should then be able to to put them together right like that so that's kind of what we want to do so we can just eventually get one grab it drag and drop it and it will just look like that right and I also want to have the label as a property that can just be set on the root of the button container um because I think that's an important feature to have if we have if we really have time I want to figure out how to bind that text because one of the biggest changes to 2022 uh 2023 UI toolkit is that you can The Binding system is far as you can see here The Binding system is this EX now and it's all in the editor and previously it wasn't and it sucked and you had to do a whole bunch of work find stuff and make changes Based on data in the project so um let's move on I've been talking a lot I hope I hope this is good and you follow along um uh why didn't you switch to Unreal after the UN changes I you know what I did I spent some time I think I spoke about this in my at the end of my last video um um I will I'll get into that at the end of this we can talk about it and um I'll make a note to talk about that because it is an important question um and um ultimately I did explore it and I just figured that I'm going to spend a lot more time doing working unreal than I could just spend like the amount of time I could I could finish my game in the amount of time it would make to just like get back up to speed with unreal and so I'd rather finish my game first potentially and then maybe move on but we can talk about that in the future I I'll do a little Q&A at the end of this before we finish for the the session so um we'll probably go for another hour or so I think and then and then do a little Q&A and then we'll end the stream just after that so right let's um let's build out our button containers so firstly let's build this into a style so we'll call this um uh I don't custom button I don't know like Shadow button yeah let's call it Shadow button stick with a shadow label nomenclature we'll call it Shadow button and and then um extract inline styles to new class cool okay so we now have our visuals that we can apply in C to get exactly to get it to look exactly how we want so what we'll then do is go into the project and um uh yeah so I noticed one of the really cool things is I can do some comparisons because this tab button and this tab view comes with the Shader graph package and it's using the code framework from the 22 version of UI toolkit and it is a nightmare and I will show you exactly how it's a nightmare so uh let's actually I mean I think you can look in the documentation actually because I did this the other day we can look at the documentation and go through that too if we if we need to so but I think I can just show you right okay uh let's go to the project here and make a new component so we'll create a c script I apologize for my keyboard it's a clacky keyboard so uh Shadow button you're going to get some clicks probably well my coffee is cold how do you drink coffee if you drink coffee let me know would you drink coffee when it goes cold it's like lukewarm cold right now um yeah it's not great o I'm not a fan of iced coffee so I don't enjoy when coffee goes room temperature it should be hot uh anyway right by yeah I you know I actually should have put it in I have a I do have a um I have a fellows thermos that I got from Unity actually at GDC and um it's really good and I don't know why I haven't been using it recently but I am um best kind is lukewarm no that's criminal that is absolutely criminal my god wow lukewarm oh man some of you just want to be contrarians huh classic um all right so as you can see here the structure for building out a label that label that I have um CL all tabs for now oh no I I meant to close everything else all right well let's open that back up Shadow button well let's put these side by side um and so the workflow for building out a component in 23 is actually really quite good um and I mean it's one of those things with unity where like when things when even a small Improvement happen you're like oh my God this is the best thing ever because we all have stockhome syndrome um but I think they made this was another reason I wanted to cover this is because at the talk I was like oh no this is this is good this is good um so let's add these in here and should be a partial class and there should be a uxl elements now this thing is awesome this attribute is amazing um so if we go here and we go t I think it's called a tab View and I have to look in packages there we go all right so let's have a look at the C script for what you had to do in 2022 so to get this ultimately now you can build out your C script use attributes and the uxl will be made for you and the um or implied for you and uh all of the functionality inside of UI Builder will also be built for you based off of just these attributes over here right previously though you had to write a bunch of boilerplate code you had to write this just to say that you could use it in um UI Builder you had to add uh additional functionality and I'm not sure if it's in this script specifically but um uh you had to do you had to load the style in as well at yeah no this is it you had to load the style in although we might no that should be fine um and you had to have some I wonder if the actual the other one has similar to button there we go I'm curious now I haven't had a look at this oh there's two of them hey that's cool oh that's plastic huh uh yeah there you go uxl trait that's what I wanted to have a look at okay so you also then had to what this uxl attribute is doing you had to write here and write a bunch of boiler plate about like expose this specific property in the UI Builder and then run through this whenever things change in the UI Builder and then make the changes and the names here had to match the names in the C Class it just it just it just s so it just it's not good it's really bad so um yeah so don't they some of you in the chat are recognizing this change and how much better it is those these attributes save and you know it's still kind of a little bit boiler platey But ultimately you have to write all this stuff and it's really annoying and funky but you also still had to kind of design the XML as well or you had to write out the XML structure in here yourself and you just had to write a whole bunch of boiler plates so um that's now gone but yeah so you would uh you'd have to design this separate uxl document oh no it's going to try cancel I don't want to open it in your so never mind um I might be able to open it in here I really wish they had a way to open oh there we go yeah okay so you had to define a uxl document as well anyway and then I think they had to be named the same or something for it to work it was just it was just not fun so um that's gone as far as I can tell that's gone and now you just use this uxl element to say hey I think you have to Define this as a partial class I think that's the only like trick but um yeah it it just it can just be a normal visual element which is really good too because if you're doing stuff in uh you want to create like runtime elements and things you also have to do some funky stuff before whereas now I think you can just instance the um the class like this and so I really I really appreciate that that's how it's structured so uh that's the biggest um that's kind of the biggest uh change for me and the biggest thing that made me go okay I think this is doable now because um previously you had to do a lot of that stuff uh unless you're doing the entire thing structured in code and you're doing UI based code generation and in that side of things then it's irrelevant and like I said we'll talk about that next week when we talk when we do graph view stuff because that's probably how I'm going to build things out because that's the way I'm familiar with it and it's a very different workflow but uh if you do want to rely on these like component based things you moving to this [Music] um attribute based structure is as far as I'm concerned very very good especially because you can basically say hey this is what I want you to expose in the Builder editor and um this is how I want it to function when it changes the the set thing just adds that functionality which is great excuse me so what we want to do then is add in uh all of these elements so the button container will be the root component so we want to add a class to it called Shadow button so let's start there this may go horribly wrong by the way this is the first time I've tried to do it bigger than just a single element but I feel like I learned how to do it uh over here so um Can Can you guys see this okay or should I I realize the code I guess I'll Zoom the code in so it's easier to see on the screen I I hadn't really considered that but um is that better I that's probably better right at like 160 161 that's annoying why would you go to oh there we go okay because it was what 120 then 132% I'm just using the scroll wheel and then 145 and then 160 those are odd steps okay cool you do you visual studio um yeah cool that's better okay sorry about that I I should have thought about that that again live I'll learn I've learned my lesson um all right so we'll go public and then what do we want we want the let's define the button first so we'll go Shadow button and then in here we will go add to class list and what was the name of it other side of things that I do quite like is you can just get the um CS so there we go you can just go grab them uh did I did I not save it oh I didn't save it again Shadow save there we go okay now Shadow button should be here there it is okay cool so Shadow button so add that to the class list and um that should give us the start of what we want so we should in theory now see this appear as an object in our list yes okay cool um that is the one thing I've noticed that is different is it the preview this used to show a preview of that element when you hover it over it but that doesn't work anymore with the custom controls I guess it works yeah it kind of work I that that's broken that's very broken they need to fix that that should show a preview maybe because I haven't added a style or something I don't know in the definition I'll look into that it's not a big deal but it's just something I noticed I think if you have if you have one saved as a template and you hover over it it will show you how it looks um but yeah okay so and then inside of there we want a um visual I think it's I think just we'll just add a visual element and call it select a dots okay [Music] so uh I'll I'll do it properly and we'll we'll give everything a property so visual element um Shadow dots I guess is that what I called them select a dots That's What I Call uh right select the dots equals new visual element can you select dots name and select dots class test just select that's right okay and then add that and so you see we can just slowly build out our UI element in code right so if you wanted to just Define a panel you could do it this way and you make it a visual element and you just add that as the root because um uh no screen controller let me show you the controller um you could very easily just um have a mono Behavior element that just bches a visual tree like this and you could just add so like I could just root. add Shadow button and let's say I should be able to maybe not oh I probably have to import the class maybe not huh okay I guess not um maybe because it's partial maybe that's why okay so that doesn't work the same way that it used to all right that makes sense I suppose this is we're learning things this is what the stream is for okay so I guess you can't do that but anyway my point really is that if you did want to build out your UI um you could add a button at least right like you can add a button and you can add you know a label or whatever and so you can just you can just code your UI if you want right and it it it's fully capable of doing that if that's how You' like to do it um and you kind of have a little bit more control there especially because of the style system that you wouldn't have the same level of control over if you were doing this with um yugui or or I am gooey and so um um yeah uh yeah maybe I do have an assembly definition or something um new yeah yeah it's fine it's fine my point was really just you can build stuff out so um it's fine uh okay so we'll add select a DOT oop that's not what I wanted to do um open and accidentally start playing music that's how you get a stream banned on YouTube because YouTube hates anything that is not yours um okay so back in the UI Builder here we are uh select dots button backdrop so that's the next thing that's also just a visual element let's do that uh visual element button backdrop just do the same thing button backdrop uh one of the other reasons I will say I I could not stand working in um unreal is that just like Intellis sense and just C++ sucks I just I cannot I I don't whatever it's fine but like the C++ Unreal Engine workflow is terrible and um there are some things that I just don't want to do in Blueprint um because once you get to a certain scale of things you're just dealing with these nightmare spaghetti messes and um yeah I just I just couldn't get on with it the fact that you had to use like visual assist or Rider or you had to pay for something you know per year just to be able to edit code in C++ it was not I was not fond of it at all so I really like C I just I really really do and it's really hard to move away from C when like how nice C is and how well integrated it is into visual studio um after using it for however many years like I I can write C++ it's fine it's just that I I realize how much I rely on being able to type very quickly because of intellisense Auto suggestion things and it's good um I'm pretty sure that Microsoft have stuff built into like understanding your programming patterns to provide you the right um I maybe this is Maybe completely made up on the spot here just um but like it gets used to how you type and so it's suggesting Things based on what you've been doing so even cry engine support Unreal Engine is worse than C++ because they're macros yeah exactly lure or C sharpens the engine I completely agree I've read I think it's in the road map I was I think they're looking into better pot reloading although there is a hot reload plugin you can get now so excuse me um it is possible so um yeah but yeah I just I can't like that was one of the biggest things is I was I was just spending so long getting code to work um and then every time you do write code you have to recompile the project and that takes like depending on what you're doing it takes a while um but the biggest thing for me was there's just no way to um I said I talk about this later but for what I want to do there's just no way to make any visual changes to or it's really difficult to make visual changes to Unreal without decompiling the entire engine making building a brand new render model and then uh building it again so like the specific look that I have for my scenes um and the the lighting model is totally custom and I didn't realize actually just how good which is weird because you it's kind of a given but like the material system in unity running from Shader files and like that just that just defining how your game looks is great and that doesn't exist in unreal you have to use their lighting model unless you want unless you decompile everything and do it all in C++ like the the concept of a Shader doesn't exist in the same way um that you have in unity so like that was kind of one of the big like oh no this kind of sucks that your just stuck in PBR and if you're and so for somebody who's not making a PBR based game like you have to do a lot of hacks to stylize it or you do source and then we're back into C++ land sucking so um I did a lot of hacks to try and get some of these sort of shading Styles but like this is my you know this is a custom lighting model that I've built into my shaders and I can make changes to it very quickly and very easily and like yeah that just doesn't exist in the same way in so um yeah yeah the that that's why unreal and everything looks like it's made in unreal because that's the one thing you can get unreal games to look like which like if that's what you want your game to look like then fine and it's great and it's beautiful and it's gorgeous but that's not the aesthetic I'm going for so um you know probably and and this is this is the frustrating part is that I think gdau is probably the alternative but the gdau is not a commercial alternative right now excuse me spoke about this in my previous video so rocking a hard place really anyway back to building out our button um uh pass this we will get some stuff done in this stream uh button backdrop so basically what we want to do is build this element out and then I just want to drag and drop it in and it like work and that would be very cool so I think we then need to build our button element so that's cool so uh that can actually just be a button because we're going to need to support functionality for it button equals new button and that is just it's just called button I just called it button show me name and um I didn't add any classes to that did I no and then we add a shadow label inside of the button Okay cool so oh I didn't add the button backdrop um add button and yeah I didn't style it and then we add a shadow button and the shadow button has all the controls it needs but a shadow label but we will create I'll just call it label um because we will want to change that with the text property we're basically going to copy this into to be honest I should just do this right now um because we need that functionality so let's just copy this and pop it in here and so this is this is basically how you're going to expose oh yeah well uh all right uh Shadow label it is uh right so Shadow label equals new Shadow label and then we add that to the button button. add Shadow label all right cool I think I think that's everything we needed to do and then in here we just when we set the label we instead just set the shadow label to M value to Value I think that will do what we wanted to do I haven't tried like integrate like uh nesting to uxl attribute functionalities but I I would imagine that does what we wanted to do so um uh as a web developer although I work most on back end I welcome on your UI to Kit overlords yeah I've spoken about this over the video and I think if you if you missed anything feel free to go back and watch when uh when the stream's over but um yeah I I can understand I really can understand the direction that they're going and I and I do think it's I think it's the right choice just given how the industry operates and how UI uh functions in most other uh Studios from what I'm aware of um there are like scale form was one of the industry standards for a really long time and it's the same thing it's just this like external I think it was like it was based on flash if I remember but that was like the industry Dominator but it was slow if I recall which is why everybody hated it it's the same kind of thing there's just this like third- party UI pipelines that Studios used and um most have ended up in this webdev functional space so right like I said okay so do does that mean our shadow button is done do we now have a shadow button that we can just add like this let's find out oh nearly what did we miss we missed something oh no ah did I add some custom controls I think I added some custom I did I did I added some custom just that that doesn't make sense did I add some custom Behavior there no button this might be where we find some um bugs that's the whole point of this oh weird okay wait so if I hide the container oh no this is just oh did I just forget to add an element into well let's see if we can position mode Let's play Spot the Difference um why do those two behave did I misspell something button backdrop no dead order perhaps no I think um I have just missed something is it that no it really is just a game of Spot the Difference right now I'm pretty sure well that set to relative no that's set to Rel uh H welcome to live bug fixing courtesy of the UI Builder there's something specific that I've done that has ah okay the button does have a um Fe okay let's add a that is definitely something I've missed okay um so we've already got Shadow button so Shadow button button uh yeah why not Shadow button button uh there we go let's add that to that class list I don't think that fixes it but it might be the order of things are being added or whatever so button class list Shadow button I don't like that I don't like that but whatever um oh that did it that fixed it we solved the problem that was the that was it that's what we needed to do yeah there you go so um but you know like hopefully that kind of demonstrates actually kind of the cool thing about it is that just that one selector um can have such a huge difference on the way in which an element is dis played and I think I I kind of think that's cool that you can just use these little selector elements like this you just have to remember to save them and get this and this is why inline stars are really dangerous because you have these weird overrides that start happening um it's kind of the same problem when you dealing with with like prefab elements and you're like why is this one behaving differently it's because it's got this overridden property you have to then go through the menu and deal with that so okay so we now have our shadow button which means let's see if the label works oh it does look at that okay press any button look we did it we converted this individual element into a new template that we can um we can now place in the project that's great look at this so we can then do button the second cool and it looks exactly how we want it to look we can put it in lots of places and then if we we make changes anywhere else um in the game to the selectors it will just as as Todd Howard says it will just work it just works so cool all right that's that's good I like that a lot I really like that that's um there's pros and cons about this whole thing so the next thing the last thing I kind of want to do let me check my list of what I wanted to do um okay well yeah all right I do how much time we have enough time we probably have enough time one of the things I do want to do is like logo like animate this logo um so that it I don't know when you the music when the music comes on I kind of want it to like maybe spin or like maybe spin maybe it'll scale I don't know I haven't decided yet but I think I wanted to do something however the real the real thing I wanted to look into today um is The Binding system now I haven't touched this yet so we're going to we're going to learn about this live and I don't know how this is going to go but previously you had a really long winded way and I I don't I have to look at the docks for this but it was it was very long-winded to um uh to bind data this is the manual if I can get 22.3 okay so this is like this is the current LTS way of doing things um you can only buy serialized properties and you had to do it through um although this might be editor UI yeah it is editor UI uh runtime UI there might there might not even be a way to like find things in runtime UI in the same way you might just have to have done it like update the element live that's also Poss maybe that is the way that you had to do stuff before um honestly it looks like that might be what you did what you did I don't know if anybody has had an experience playing with that let me know um run time render UI in the game maybe that'll do yeah maybe there isn't a way to do it in the LTS version which like is an even bigger deal actually because being able to set data as like this thing has Chang just update yourself to update this value or like sync this value with this piece of data is like an extremely valuable thing so there is binding for runtime but it's not available in 2022 okay right yes cool so that's where we're at then okay good that's what I thought so let's look at how we're supposed to do it um is it in here data binding runtime data bind there we go okay um how do they want us to do this create a data source asset okay uh UI find find the label to a data source okay data source but this is all happening I'm sure there's some shortcuts in the Builder for this Define a data source for runtime binding oh so there's like an actual data source class interesting don't create property findings go through the property rather than the field this allows you to do validation notify the changes create property field serialized field don't create okay I mean so I'm going to hope that these two teams have worked together but ideally what I would like to do I might not do it in this video but what I would like to do is bind this label to a um um a localized string value and I downloaded the I downloaded the localization package yesterday um up until now I've been using my own localization system um which is just like an old editor window thing uh this was like the first video I did on the channel was building a a localization none of my icons are working that sucks um but I'm interested in using un one just to see I think that's kind of one of the things I'm I'm trying to explore as again content for the channel and um it would be interesting to compare I don't really want this to turn into a localization video though so maybe I'll spend like five or 10 minutes seeing how quickly I can build out a little localization thing um so let's let's have a quick look at unities localization move this over localization yeah so I was um one big things packages don't get talked about enough so one of the things I want to do for this is actually try and experiment with some of the multiplayer features I don't know if I'm going to have multiplayer working I think this game is a good um I think it's suitable enough for net code for game objects because it's not a complex game in any any in any other sense I think the client can do a lot of the behavior management so we'll see um so let's look at uh I mean if I have to build a like integ like a a middle ground for binding data for localize localization package that's fine I don't mind building little like and I think this is one of the interesting things about Unity right is that like you can just build Bridges between things and so that's fine um pre-release version for 1.5.0 what version do I have in the project uh let's have a look oh I'll give you a little preview of my mesh graph tool um for next week which is we we'll probably start somewhere around there so localization is 1.45 okay do you have to go uh is it the project settings enable pre-release packages okay version history pre-release version for 1.45 how do you do you have to go into the registry for it to find the pre-release versions um yeah I know but I'm I'm looking forward to playing around with net code for game objects cuz I think it'll be interesting [Music] um uh where are we my brain is melting slightly apparently and I'm not L why why am I all the way down there localization is right there okay no okay uh you need 1.5.0 PR2 okay how do we how do we get the pre-release version filters update available no I have it set to show me the pre-release packages so why are you not showing me the pre-release packages anybody know how to have in prefer yeah it is it is it's enabled in Project settings but is it also in preferences no uh maybe it doesn't work in this is not LTS this is the 23.2 maybe that package only shows up in.3 question mark um okay let's try that install package from because I'm fine using a pre-release package that's fine it'll get updated fast enough probably well that might be giving Unity a bit bit more credit than they deserve um inst package by name I think that's the one we want to use right oh in the version Oh there's a little version thing there now okay so com. Unity thank you uh Maran for that um I plus many package [Music] yeah [Music] uh localization and then what 1.5 1.5.0 d pre2 h don't you just love doing things in unity let's see that works oh yeah that did it thank you um cool I'm fine yeah I mean look even if we didn't have to do it that way um we can we could probably build a system that uh Works around it and maybe we'll have to do that this might be a risky move but it's fine um okay let's look at the 1.5 document oh they're at pre five now hold on oh there you go look it's there all right let's add that's okay vote in the comments do we actually update to pre5 or do we stick with pre2 I'm assuming it means you need at least pre-2 but should we get the latest latest or should we just stick with the one that we know has the feature [Music] um you can vote quickly while I have a drink I might go grab some more coffee actually um yeah I'm going to grab some more coffee real quick but vote let me know back in like two seconds okay if two Works don't bother probably a um yeah probably a good disposition I think that seems like it's a healthy way to go uh all right yeah seems like we're agreed we we might want to stick um far know pre5 has some fixes so you don't have to do some hacks to make The Binding system work ah H has some fixes oh well all right maybe does it uh do they say in there I mean pre5 does seem to string oranization set different strings what's new let's have a look all right let's actually let's actually do this add support for you I talk at data bindings the main updates in this release localization tables has you know I haven't even touched the localization system this is probably also another video I could make um so we're really learning on the Fly here um okay it doesn't really tell you what's happening in the pre oh there we go fix ISS XML attribute converters not being included in 20 23.3 we're not using 20 23.3 um 20 23.3 and we're on pre2 okay so we don't really need to update because this looks like it's 20 23.3 and we are not using that so looks like we'll stick with what we've got okay I don't think there's uh make a video on nearly every single package yeah there is um plus three fixes and five issues yeah that sounds about right there you know what honestly I would love to um but you know there's there's an aspect where like I want to make videos like this on stuff that is relevant to things I'm doing and it's kind of relevant to content yeah let's let's have a little little quick conversation on just like the type of stuff that I want to make because I never really spoken about this on the channel but I hope it's clear that the things that I talk about come from a place of like I've been working on this this is something I've been dealing with and I would like to um Carry On like share this knowledge you know it's stuff that I've struggled with maybe like a couple of months ago and I figure out how to do and then so I share that and ultimately half the time I go back and watch my old videos for like how did I do that thing and um and that's kind of the place where I get a lot of this from so it would take me a long time to go through and review some of this stuff but also I don't really want to do topics on things that I'm a not that interested in and be not really confident enough about that I'm or or um passionate about to form solid like opinions and recommendations of um because I just I don't think it's um honest isn't the right word but I I don't think it's like true to myself and so I really try try and focus on things I'm either interested in and want to do some research on like this is a good example because as you can see it's really important and and crucial to the project that I'm working on and so I think like that's where I want a lot of the Nugget of the topics to come from and I really hope that that comes across in the videos that I talk about is that like there's always a basis of things I've been dealing with and solutions that I've come up with and they're more on a scope of longer projects that I'm working on because there's a lot of really really good content out there covering all of this stuff um and you know you can Google a lot of these and you'll get some great YouTubers colleagues and friends and peers of mine um covering these packages and I don't really want to step on those toes unless I've either got something else to add or a unique take on that space so like the localization system I think would be interesting to do because I built my own one and I would like to compare and choose whether or not to recommend it because honestly if Unity are providing tools for me and they're good um then cool the only reason I build my own tools is because Unity don't half the time so uh you know it makes for great videos but it's not great for um for me because I have to sit there and make all these Pro these tools it's also why I like the graph VI stuff which again we'll go into next week but um yeah so uh that's also why I want to explore net code for game objects there's a lot of really good content on there um but I I hope that I can add some and if I do a video on it it will be like here's this thing I've done with NE code for game objects and I'll probably recommend like some other videos to do one of the things I really want to do is a replay system that just captures the state of the entire game and then you can like play back a replay a for bug testing I think it's going to be really interesting if I can get that working I can send it to people they can just send me the replay and I can see what's gone on um that's a system that I think is going to be really interesting I would definitely make a video on because I think that's like there's a take to that that I can I can have anyway right let's um let's get localization going um uh how how how how do we do that I assume there's a localization window would do you have to make a localization asset all right let's see Unity how is your documentation okay we've got like what window what Windows have I currently got okay that doesn't need to be this is the UI Builder all right so we're going to stray away from the UI Builder briefly and we'll open that back up in a minute and um let's figure out um let's figure out a place to learn how the localization works so does your manual actually tell me anything guides is there a get quick start guide 2020.3 all right we installed the thing create a oh there's a oh it's in Project settings okay check boxes you generate locals and then it creates some assets for you all right that does sound quite good so edit right welcome to the side tangent of learning how the localization system works um is it project settings or localization there we go okay create man scriptable objects are the best I I love I love how all of unity is just built on scriptable objects and you can also just build everything on script objects it's kind of neat they're just like eh we'll just use these two um everything is a do asset just do assets all the way down uh okay cabs um uh scriptable objects actually maybe we make an actual I'm going to make an actual localization folder and then localization settings asset sure okay local gener available that right H I was going use culture INF all right Sy language I mean I assume for now you can just pick English and be done with it right oh my God why why why are there so all right uh um okay generate local let's just oh all right you now have to make that one oops C chaos station let's make a new locals select F so that's where we put our oh it's using addressables all right that's another thing I really don't know anything about yet is addressables we haven't really dealt with them ult info formatting English you're in dollars fair enough um I guess that's what the other versions of English defined more than anything else right okay cool we now have locals oops choose a default okay well that probably is the one that I just made and then create the asset table collection localization tables window window Asset Management localization tables you have to make a localization table as well that's just the window I already forgot where it is where is it window Asset Management okay Asset Management localization scene control okay well I want to look at that what is that this is fun all right window I apologize I should have I should have learned some of this beforehand um but welcome to my process I guess uh localization table I will I will the next week's stream will be way more um focused for sure because I I know I kind of know what I'm doing there this one is very much like a we're diving head first together um which I hope you like uh no tables found please create one all right new table oh right so you can create like a set wait what was it an asset table collection string table okay let's just call this B uh I don't I know localization table I doubt we'll need more than one8 Jesus Christ okay uh CS just like it really is scriptable objects all the way down okay CS of chaos localization tables there we go all right now do we have an entry we have an entry look at that all right key um uh Splash underscores let's go underscores button prompt that seems to be the way that most Keys work okay so press any key where's the any key um what does this button do edit table metadata oh neat okay all right and so then what I assume is that when there are more locals you can put them in there or you can export it as a CSV right okay I see that and then you can import that CSV back in and it will really you just need to put like the English master in and then you can add new locals later yeah all right and P you know honestly this table thing is not that far off from what I built myself um I had a different format and I was using number IDs but I think string Keys especially if they're hashed should be fine um all right um so uh let's see if the localization team knows if the UI toolkit team exists exactly this is what we're doing today um so let's have a look just looking at comments here um can I make a switch from to to next project that's something we have to deal with yeah okay so we're here together um yeah the import export that's exactly what I think is cool about it and that's why I wanted to have a look at it um it seems like as you add more languages you can just you know build off this list so let's start here and I'll dock this in case we need it for any reason but now now let's figure out how to bind this um okay why well uh let's open up the so I guess you can just bind the object wait can you if it's that easy that would be awesome but it probably isn't going to be because that's not unity's way of doing things so let's find out if I can just bind the table and then pick the key and it just does that that would be really neat um where am I okay so you are my title screen let's get binder back please upgrade to pre5 all right well I mean it said that um 32 the changes list did not say anything about have they just not added them into the change log CU it looks like all right if we run into an issue we'll upgrade to pre5 um I'm not going to do it just yet but let's and yeah let's um let's let's go through this pain and then realize we have to upgrade probably so Shadow button label right because I mean part of this is also just figure out how bindings work here anyway so um I just grab that SEC was it the localization table want that that what I want to put in there path oh boy what is the path yeah that's a local shared data this is part of the joy here is figuring out what specifically we actually need to find it's the table table that comes with an English right so table would be the key all right maybe we have to open the asset and have a look what's going on uh Eid ah o interesting so they are using you can't bind to the table asset directly print a drop down when you create a oh uh okay I should have a look at how The Binding system actually works here because I am it is unclear to me an object to use as the data source for The Binding because it's like if I recall there should be a flag here to allow me to bind things but maybe not um I haven't really tried The Binding system yet for this so okay all right it seems like we need to update to pre5 so let's let's do that I I will take your word for it if you've been through this pain I trust you um so let's do that and then see what happens there there so uh window package manager all right they just clearly haven't made the notes I do need to look at how bindings work though I I haven't I've kind of skipped over that step so let me have a quick look on um data binding my Boulder yeah a lot of this is all in um in the like one of the things you could do is write write the key in h yeah I'm curious if you can bind it that way or if you could like a workaround could easily be to just write the key in and then have the have the actual binding happen in this aspect of it and fetching the value that way potentially it's a little bit heavy-handed but that is another like that's how if I was doing this with my own system and I didn't want to bind directly that is another way that I could handle that so there is a workaround if we can't get this working that's that's what we'll do for now and then I'll figure out a legitimate way to do it so that what I because what I would like to do is is get the binding stuff in as part of the a tutorial that I build um and I don't want to be here forever so but I think I was going to do some other stuff but I think once we if we can get binding working I think we'll leave it there excuse me for today and um oh no that's not what I want okay I was just looking here and then the manuals just decided to freeze on me so um run time oh I guess I wonder if that means like at runtime probably UI maybe it's in UI Builder h this is classic like there's nothing nothing easily I can see in the manual here will tell me how to do these bindings inside of UI Builder um okay I'll do a quick Google search I'm figure this out yeah um after right click on the label I think that's the mistake I like there doesn't seem to be a binding option we've upgraded so let's maybe it's just relative to the data object yeah so I can't right click here right click on the all right let's put an actual label in I wonder if it's part of the problem let's just throw a label in here see add binding okay right yeah okay so we need to figure out how to get that to a I thought that might be the problem because there was a step I remember reading about this and that was a step that um was missing so okay how do we get that to tell me to add a binding so it doesn't it doesn't seem like we want to go this way that might be to like bind the entire UI element for data source which I think is not what we want to do so that's fine so we need to figure out how to get finding to work on this element um and then we can bind it directly yeah that see like focusable gets add binding but label does not so get started to find how do we make something bind a bow that's question the lab I wonder if we can just look at a label and see if that tell me you going to let me open that there we go all right like I'm just curious if uh sometimes you can get an inkling as to what's going on um and figure out when stuff is bindable or not all right oh maybe okay maybe it's bug um what's my approach to look through docs oh I really just um I'm just trying to look in the right place uh let's go back I'm currently just searching around inside of the um serialized system finding examples system maybe that's it mind find to a uxl template no find a custom control there we go uhuh ah I think it just needs the bindable element um sub thing Shadow button bable element it is that all it needs let's find out no all right well we're one we're one step there I might have skipped ahead um sat is cool when need to change his h [Music] so oops create a binding with the inspector custom control to custom data type let's try that show us what we need to show well this is like problem is they're doing all this stuff in uxl which might be the way that you have to do it to expose it but um B without the binding part no so it must be something in this custom control I think um I reckon there's probably something there's probably some attribute or some specific thing that it has to have inside of the um the custom element like that seems this this seems like the closest to knowing how to do this but how do you expose it in UI Builder um let's have a I'll do a quick Google search on the side here to figure out how to do that um right so ah I wonder if it's somewhere in this flow I wonder if it's something like this is what causes it to be exposed public object value I wonder if it's something like that but because I know that they've been doing some like a lot of this is tied to that kind of stuff object changed set value without notifying it did say it only worked properties um but the the label is a property although I cannot remember where it was when we were looking at that um mining system yeah this seems like specifically for script objects there's not a lot on custom controls to be honest um it's fine it's un tread territory really this is like a brand new thing uh you know I do have access to I wonder if I wonder if this is this is part of it that it needs notifi value changed or something along those lines um although maybe it's on you know what maybe it's on GI Hub uh and I can just look at hold on this is probably the best thing to do here um I wonder if they have that's not a package anymore this is the annoying thing is like when you use things in packages um when when they were using packages it was really cool because you can just look in the package and like the scripts are all there but they moved your I to Kit they've moved it all out of the packages now so I'm unsure your um I'm unsure how to do yeah I don't think I don't think there is a GitHub for the toolkit um there's some code examples maybe maybe we can find something in the code examples I wonder if and this is the default um finding stuff for okay we may not be able to do this I may need to spend I don't want to spend ages trying to figure out how to do this um this just might be not might not be something we do I I'll spend another couple minutes having a look but this may be something I have to do outside of my own time because it's kind of getting close to when I want to end the stream it's been going for like two hours now so um what we'll probably do I'll keep looking for for a minute but while I'm looking um if you guys have any questions or anything you want to ask um we'll do a little Q&A for a little bit and uh before we finish and then um we'll wrap up so you know I might try this notify value change thing and see if that's some of the boiler plate that's needed [Music] um but uh yeah let me know if you have any questions and um feel free so let's look yeah this is not where there is something I'm missing that needs to be in the label itself to expose it to us and I wish I could look at the label like the actual core label code is it built in as a package and it's just like an inbuilt package no that's like old you are that sucks because it would be great to see all of that stuff um yeah I think we've H enough of a wall that I would have to do quite a lot of work to figure out how to get this to work so unfortunately that might be where we have to end things um but hey now you have a reason to stay tuned and watch a video when that goes live and I actually finally figure this out I just I don't think there's anything uh that I can find with wait oh I might have found something I found a bind custom controls to data you can create a bindable custom control derived from the base field generic base class instead of bindable element this provides the following advantages implements the float field is a UI toolkit control which inherits from base field it's possible to create custom controls derived from Implement ion it wait it might have just needed this interface and listen for change events we may have found it all right let's try that uh string question mark wait okay how was that other one look wait we might be in the right place here hold on we may have a good so let me get the old example back uh create a bindable custom control let's have a look what that example was showing oh okay this is just hidden this is exactly what we need example field base field base field string well no because it's like a full component it's not a field so I want the alternative version which is what we were looking at a minute ago uh okay back to where we were then so data binding uh serialized object binding examples and then bind to a custom control how is that implemented itif changed object and then the object field. register value change call back on object that's the value and then oh okay right so it's just got to be called value spring okay we'll rename this to Value set this need set value without notif oh maybe this is fine just being called label then it just needs set value set value without notify value okay uh and then in there that's doing some stuff all right we can we can worry about this in a minute um oh no public stram okay it does need it does need to be called value all right okay we'll do set value without notify value and then M label will be yes let's just try that for now we'll see what happens um the question is does this get exposed if it gets exposed then we're good and we figured out how to do it we at least figured out how to expose things to The Binding system um if not then we may just leave it there uh value ah oh okay that doesn't do anything so that's changed and there's no finding option but we're in somewhere here I've missed something uh set value without notifying one object oh M object field register Val change h oh maybe it's this that we need okay let's try that maybe it needs specifically needs that element afterwards PR just just going for it um far previous equals this. value see set value if value equals this very return okay if value equals this do value fine then return and that's weird I how I feel about that but sure whatever get M value M label let's just rename this to M value stick around and have a look at that then you got some editor stuff but like that doesn't seem to be a big deal deal um if new value equals n fine else new value is new Val then update it and then set value without notify and value does that don't need to do that shadow label yeah there's still no binding um all right well there's there's more to it than this clearly and um I don't want to be here forever and I don't want to waste anyone else's time so I think we'll have to leave it there you know what if I start the next stream and if I figure it out between now and next week we'll start the next stream next week with a little overview of how you do this and we'll get it and I'll show you um I'll show you how to do it so um yeah because we've been going for a while now and I don't think it's that interesting to watch me hack my way through this um there's probably something strange that's specifically needed to get this to work unfortunately um cuz this coolback is only specifically to update the object field inside of the element so I don't feel like that's specifically required um so I'll go back and have a look but um yeah that's frustrating but this happens I mean that's the whole point of this stream right is US figuring this out the um the next one is going to be far far more detailed because I know exactly like that's going to be closer to to a tutorial because I've done that thing many times this is very much a deep dive exploration thing instead so um yeah um feel free to message me if people find out though by all means um let's switch over to I think yeah sorry I think we will just have to end things here but I will figure this out and I'll let people know so um if you aren't in the Discord come into the Discord because I will almost definitely report my output in the Discord Channel there's a link in the description to the Discord um and other ways you can support the channel if you want um but let's answer some questions feel free to keep asking um we'll spend about maybe 10 10 minutes or so uh just answering some questions and then um we'll wrap things up so um yeah let's do that but hopefully uh hopefully this has given you enough of an overview of the UI to things aside from the half hour of me figuring out how the localization system works we kind of went on a big tangent here but that's Game Dev right like that's what it's like so um yeah let me now we're not showing the other screen I can bring my chat over so I'm like not looking the other direction and um I hope I hope you've enjoyed everything so far um let's look at some of the questions um I plan to make videos about system architecture and organization for UI to here so I did a video on uh assembly definitions that's as much as I think you need from me regarding project organization um and go watch that if you want um but I will be making like an actual video uh on UI to kit and maybe I'll talk a little bit about how I want to do that there um but yeah that's kind of it [Music] um any leaks for iteration time no I don't they they no I'm also under NDA so I will not be saying anything that I haven't been told already but um any of the stuff coming outside of we don't get told that much really regarding like releases and stuff that isn't already public so uh but I would not be disclosing that hereit um yeah uh so I don't know let me know what you think about this stream format should I do more of these in the future I I'm more than happy to do more when I'm working on um um you want to see the pup okay yeah well she's she sometimes brings like um toys and bones and things and I really didn't want her like chewing in the background and squeaking toys and stuff but I can grab her for you got it she was just now she's just been sitting on the couch hold on um all right there you go there is a dog there she is this is the Pua she's just been sleeping we'll go for a walk after this so yeah she she's doing a very good girl and uh we'll take her out I'm going to take her out for a walk after this so she's just kind of waiting patiently for that because it's long past her normal sort of walk lunchtime so yeah anyway uh let me know what you think of this format and if it works it's very different to things I normally do but I'll keep the video up so um we you know hopefully it's here as a reference and we'll see when I make the final UI tokit video that's definitely what I want to do um chat is saying you are very beautiful Scarlet so you know um anyway yeah we'll do next next week's stream is going to be I may change the date I may do it on the 27th rather than 28th um so just stay tuned um the depending on holidays and things I hope everyone has a good Christmas Eve and Christmas if you are celebrating that kind of thing so um you like seeing things fail that's good because it's very different yeah I mean I do a lot of Polish work in my normal videos because like it's um it is nice to have that in that like condensed format rather than this two like the investment of time to watch something like this I I understand is very specific yes I'm talking about next week's graph view um oh yeah okay let's I was going to show you a little preview so what I have there what we're going to do we probably won't do this specifically but um for this project what I have is a um uh I've got a graph tool that um let me see I don't know if I have a I had I had a scene that I was working on I wonder if it's the um I had like a building test scene that I was working on and I am not sure if it's still I must have deleted it which is weird uh Rock gen test maybe that's it save save the front end I think this is it yeah this is it okay so um yep there we go so I've built a tool using I have a procedural graph tool that I was using a while back I this is a tool that I've built called mesh graph um that is ultimately geometry nodes like a really rudimentary version of Geometry nodes just built for Unity and so I've made a specific graph um for me to test this was my like biggest final test was okay how can I build background buildings and I'll go into this I'm going to do a game um an update on the state of the project but I was like how can I do buildings for the background in a way that isn't going to take me you know years of work in blender um and so can I build this sort of like procedural workflow that will get me most of the way there in terms of like just you know set dressing ultimately and um that's what this is so uh I don't think I have support for double clicking that yet no I don't so these are um mesh graph objects and that's a create basic building check out I can then open that graph and so it's a series of nested um mesh manipulation controls right so uh a really simple thing I'll make I'll I'll make a tool quickly little previews little sneak preview we're not going to do this we might do this but I don't want to have to go into like a bunch of information about uh procedural mesh structuring um but we can uh I can show you kind of some of the things that tool can do because I'm quite proud of it um but I just I wanted something that I can use to slowly build out like oh no uh some input like I said this is not this is not designed really to have anybody else look at it apart from me it's very buggy uh can I open that now yes there we go okay um great so what we can do is we can like make a cube or not there are some bugs when you make a new one there we go go okay uh when you make a new node so I can make a cube and look it made a cube and um I can change the settings inside of the graph and it outputs that specific thing no material on this property let's just let's just do that screw it yeah let's have a big old box um and then I can do things I don't know if um okay let's just a really simple rudimentary thing that I I like doing and this is kind of how these are built is um let's say I want two cubes I can just group those into a single material and then I can offset this one and uh as you can see there's now two cubes so like I can very quickly do things like that and so one of the things you can do for what I've done for this side of things is made a thing called a point grid this and then we can separate the distance out right and then you can do like instance uh wait um might be points mesh onto points maybe that might be how I did this and then we can put like that Cube onto this and then we can output those there we go right and just like very um procedural workflows for building out like complex geometry shapes and obviously that that like mesh instance could be another mesh coming from other uh software but that's ultimately how I've done this so I've created um a bunch of points and then each of those points get filtered and I filter by like the left the right the up and the down and then I instance different types of meshes based on like the floor Etc and that's this really complex um sort of she she is my dog is now this is why she wasn't in here because she's now sitting there like just making mizes you can't see her she's behind me she's just sitting there being cute but she's eating stuff so anyway um we we we'll head out soon she's kind of restless I think so but um yes anyway so uh this tool is specifically that structure right so so you can it just is layering things on top of things and filling out the different sides and making buildings etc etc so it's a structure of all these little procedural geometry rules and then eventually we've managed to get a building and so like I said the thing for me was can I build a a workflow that would allow me to as you can you know imagine I can now just customize each of the different elements here and be like okay well I want you know for the sides I want this mesh to be used and for the front I want this mesh to be used and so I can create a lot of different styles of buildings now really really quickly and really easily and that is something that I think is going to be a key player for me not to spend four years making this video game um and actually ship something so uh yeah will the the Grau workflow is exactly what that is I mean we can feel free to let me know how you want I was thinking we do some kind of um Behavior script because mesh graph is really good for all those kind of things too I just chose to use it for this for this project but um I will I may in the future make another one for like AI behaviors too I was thinking about that for this project so uh let me know if you want like a behavior tree or you want me to show how to build these little we can do a basic version of this tool to to show off the different elements but the key thing I'm going to show next week is how you start with this the the the sort of General flow and idea behind um node-based architectures and um how the data management works and then how to build a node how to build connections how to read those nodes and how to flow through the graph and then how to work with um subgraphs and um uh like data properties too much like um Shader graph or anything like that so it's going to be an in-depth look next week which is probably what I I I think I have some stuff I need to do on the 28th now it's just reminded me so maybe on the 27th just keep an eye on the stream schedule on YouTube it may change to the 27th but if not it'll be the 27th or 28th and um that's what we'll be going into so um yeah gra was really cool uh a basic dialogue system yeah we could do something like that as well um it's a little less uh that that shows off some things a little less than what I particularly think would be good for cuz I think the the key aspect of why um mesh graph like this graph thing works or or the graph you works is the difference between different types of nodes doing things and how they connect with one another and I really want to showcase that and how you get these sort of chain links to work with one another um because it's not specifically uh doesn't come to to mind like massively easily so we will um we'll go through some of that stuff so um yeah that's probably it I think we'll wrap up here uh as a little preview of what to come next week but let me know what you want to use as an example and um thank you so much for watching this has been a strange thing but uh it's been fun and I appreciate you you coming and hanging out with me for this this past couple hours as I've bumbled through like I said I'll let you know in the Discord I will post about it in the Discord if once once I figure it out I will figure it out but I just need some more time and uh uh I also need some lunch so I'm going to do that too but yeah thank you have a good Christmas period if you celebrate that and um I think I guess I'll see you next week if you're not subscribed then by all means hit the Subscribe button and um yeah there's ways you can support the Channel Down Below um if you want to become a patron and see uh I've now added an ad free tier so I will upload this stream to patreon ad free uh as well and the next one too um future videos will all be ad free on patreon so that's awesome I would really appreciate that um and yeah thanks that's it have a good have a good one everyone and I'll see you again next time thanks for watching bye

Channel: Game Dev Guide

Views: 9,506

Keywords: unity, learn, games, gamedev, how to, making games in unity, tutorial, unity tutorial, learning unity, unity3d tutorial, programming, making games

Id: GclXi9__WPo

Length: 149min 42sec (8982 seconds)

Published: Sun Dec 24 2023