Camera Component UI | Game Engine series

hey what's up guys my name is the channel welcome back to my game engine series so last time we took a look at creating a properties panel check out the video up there if you haven't already and today we're going to be continuing on with the whole properties panel adventures more specifically beginning to implement the ui for all the various different components that we have in our game engine at the moment so the first thing i want to do is actually take a look at hazel dev so if we uh if we come on if we come on over here into hazelnut this is the development version of hazel that's available to patrons uh by the way patreon.com best way to help support the series and everything that i'm doing here um if we look at the properties panel here obviously it's been expanded quite a bit uh you know compared to what what we have in our kind of humble game engine series version of hazel but um this properties panel you know the idea is we can select anything here and of course it's going to display the actual components that we have here you know we can add components we can remove components the ui is still kind of like work in progress but you can see that it's basically functional and this is just an example of what it is we're working towards in our kind of game engine series so what we're going to focus on today is this camera component so the camera component uh lets us it's obviously something that we actually um add to a camera if we were to play the scene now you can see that whatever the camera component contains so like you know the projection the field of view you can see i can change actually while it's running but all of the stuff that the camera component actually uh you know controls is the in-game camera that we have for our scene now we've created a scene camera in our um in our code base so if we look at this scene camera class the scene camera class is i believe what's inside our our um camera here so we have a camera component with a scene camera you know whether or not it's primary fixed aspect ratio for like resizing based on the window size all of that stuff this represents an actual runtime game camera and that's what that's what this component controls so we can change between perspective orthographic you can see the ui updates and gives us like an orthographic size and nuclear farclip whereas with perspective we have a vertical fall as well as like a near clip and far clip um i guess we didn't see the far clip text but anyway this this kind of layout and this this ui i guess is what we're going to be creating today before we jump into that though i did mention in my previous video which was uh about like the importance of long-term planning and it was like a hazel hazel road map essentially that there is now officially a road map for both the development version of hazel as well as this kind of game engine series version of hazel and by this i don't mean what's on the screen right now i mean let's let's let's show our amazing game engine series version of hazel this right so there is now officially a road map for this series if you go to hazel engine.com roadmap there'll be a link in description below as well this is what you'll see right this is the game engine series progression so it's got the current goal as well as what we're currently working on these are generally in order of of how we're going to work on them the stuff within here probably isn't necessarily strictly in order but you can see that what we're going to be uh doing and what we're working on at the moment is the hazelnut ui kind of minimum viable product right so we're trying to create a ui for hazelnut that is somewhat functional so that we can create like a bunch of entities add components to them do all of that kind of fun stuff and then once we have that you know we're going to be focusing on serializing the scene so that we can save all the work that we've done as well as load it and then you know actually hit play to play the game that's the idea that's kind of the progression that we're working towards because our goal is of course to create that 2d workflow and get that up and running so what what i want to do today is knock off one of these and as i mentioned we're going to be doing the camera component ui and our goal is to kind of make it as at least as functional as this stuff here so without further ado let's dive in and take a look at how we can uh do all of this stuff so what i want to do um is first of all if we go into the scene hierarchy panel let me just terminate this um you know we have the if entity has component transform component we're going to do the same thing but we're going to do it for um let's just get rid of some stuff here we're going to do this for the camera component of course so camera components uh camera we'll get the camera components and we'll just get the well there's a there's actually a bunch of stuff in here that we want it's not just like the transform the camera component has whether or not it's the primary camera and stuff like that um so maybe let's just retrieve camera component like that and then this so this is basically the skeleton for what we actually want now when we start editing this one of the first choices that we have to make is whether or not we're a perspective camera or an orthographic camera now at the moment we are focusing on 2d so technically you could say maybe we don't need a perspective camera if we're strictly rendering in 2d then there's no need for perspective because well there's two dimensions so clearly stuff further back is not going to be rendered smaller however i think i will add support for this just because we might as well and i know that some people want to do maybe some kind of maybe maybe even if we do deal with 2d quads maybe we still want to have them in 3d space and you know i'll allow for that even though we're strictly supposed to be doing 2d stuff so to make that happen what we want is is kind of like this combo box right to be able to go between the two so let's take a look at how we can implement a combo box inside i am gooey so there's a control called i am gooey begin combo right well this is like the the function we call to actually start the combo box we have a label for it um and this will be our i guess we'll just call this projection and then we have a preview value which i guess is going to be the current projection so what we kind of need to do is basically create a little we can just use a const char pointer array here we'll call this projection type strings right and then this is just going to be the two projection types so perspective and orthographic orthographic right we then need to uh actually get the current projection type of the camera now at the moment if we look at our camera and specifically our scene camera i don't believe we actually like that there is no like current projection type right so this is something that we need to add and i think the way that i did this um in hazel dev was by simply having like an enum class uh called like projection type and then i think i just had like perspective set to zero and orthographic set to one so the purpose of this and also the reason why these numbers actually matter is because they're actually we're going to use them as indices into this array so in other words zero is going to match perspective so the first index inside this projection type strings and orthographic is going to match index number one right so now we've got a way to store them as an enum right and we can just um i don't know where we're going to put this i guess we'll put it as the first thing projection type uh and we'll set it equal to like i guess all the graphic for now just because we're in 2d land but realistically you probably want for a game engine like hazel you probably wanted to be 3d by default because that's what you would probably expect people to use um even if they are making a 2d game nothing nothing necessarily wrong with perspective rendering of course or perspective projection okay so now uh the next step is going to be to um see what the current cameras projection is and then actually have a uh i guess like a a pointer to the projection type so cons char current projection now these are constant pointers so we don't have to worry about copying them or anything because they're just pointers so current projection string current projection type string right so what this is going to be is one of these right um it's going to be one of these um and specifically it's going to be camera component dot camera dot get projection type which we don't have yet cast to an end so we've got the enum we're casting it to an end we should get zero or one and that should correspond to one of these and this is what we can feed into here so we'll say if this is for whether or not we actually click on it to expand it so if it has been started we need to deal with we actually need to write some imgui code to handle uh selection here which we will do in a minute but first i want to implement this get projection type function so this will be projection type get projection type const return projection type and then now obviously this should work out okay so um what this should do is if i just launch this um probably no not really any point in launching it just yet but i will anyway um what this is going to do is hopefully when we select the camera entity because it has a camera component all right nothing else does um clip space entity again i don't know why it's called that but that's also that's our secondary camera you can see that it says the disorthographic and if we click on this it doesn't actually say anything yet because we need to populate the list but you can see that the type is correct it is in fact orthographic because we set it to orthographic by default so what we want to do now is actually populate it with all the values so how do we go through all the values well we basically need to go through all of these strings so i i can say four in i equals zero i is less than two i plus plus because we know there's just two project projection types and there always will be um and in fact i might call this like well we'll call this eye um so the first thing is we need to see what the currently selected projection type is uh so is selected i guess um so in other words is the current one where it ring iterating over is that the currently selected projection type and the way that we check that obviously is just by you know these are the same like the pointers are equal in fact so we can just say current projection type string equals projection type strings i right so if it's the selected one then that will be true then we'll write if i'm going selectable uh projection [Music] type strings string i'm currently referencing the height without code obviously here um and then this is i it's just a little bit different so i'm trying to do all the variable renaming in my head um so what what a selectable is is basically a little thing that you can select so that's like one of the when we actually hit the drop down menu and we see all the options there a selectable is one of the options so what we're doing here is we're handling a click on it so if we click on us we obviously want to now select whatever was there right so the new projection type that's what we're trying to do here let me just make sure this is all fine so it's selected um is selected so what is this exactly so ball selected equals false by default but that's set to that and everything else should be okay i'm not sure why that's not apparently constant shot construct oh right sorry this uh needs to be projection type string as i right so it's the current progression type string a const char pointer um and then uh so if we have in fact selected it we just need to change the current projection type string to be this right because we've selected it and then finally we want to actually obviously set the projection type on the camera so we've got get projection type we'll also make a set projection type and it should be fairly easy because what we want to do is set it to i essentially because that's the current index of perspective or orthographic so to do that we can um write the function so avoid set projection type now this will again need to potentially recalculate the matrix and do some other stuff which we'll talk about in a minute but this is going to set the projection type to whatever it is so projection type type type okay and then now obviously we need to cast this to scene camera projection type just like that all right great so we've got that sorted out now um and that's obviously if we click on it uh however we also need to say that if um if is selected we want to give it a default focus so this is important as well and to be honest i don't remember exactly what this does um [Music] if it's selected as the default time yeah so what this do i guess what this does is it actually shows the default item as the as the uh like inside the combo box so important stuff all right so we then then we end the combo box and these are just little ui things as usual um but that i think that should be it so the actual set projection type function it depends how your camera is set up because i think in hazeldev we recalculate the camera's matrix all the time whereas if if you uh obviously if you um have an actual recalculator projection function that happens upon setting orthographic or setting perspective and stuff you need to call that so we potentially need to call this right um but more importantly we need to actually populate it with perspective camera uh you know fields right so we what this ends up looking like is a little bit complicated because if you look at this inside hazeldev a vertical field of view only applies to a perspective camera however if i if i switch to orthographic i don't suddenly want to throw throw away that value of 45. i obviously want to keep it because if i switch back i expect 45 to be there not 0 or like some other default value if i set this to 55 or whatever and i go to orthographic and then back again i want it still there which effectively means that this component needs to carry both the orthographic parameters as well as the perspective parameters that's kind of expected now obviously for a games runtime or whatever you wouldn't need any of this technically you'd probably only get away with a matrix and everything's fine but you know this is the editor and it needs to be able to have a lot more information than the game so what this means is that we need to uh inside the camera class and i guess we can test this out but i mean this should work at the moment all we're doing is storing an integer which represents the current projection type that we can set to whatever we want so in other words this should remember what it is if we change it to perspective it should it should be perspective and then orthographic so this should now work and obviously we can we should be able to play around with this and you know this one's totally graphic that one's still perspective but obviously that does nothing at this point in time which is fine because we don't really expect it to do anything we haven't written that code yet but now when we actually go through this so this is the combo box when we actually go through this and we like want to set things like the orthographic size we obviously need the projection parameters as well so what we'll do first of all is we'll check to see what the current projection type is um this time we don't need to we can use a switch statement or we can use a just an if here so we don't need to obviously pass it to an end here we can just do scene camera uh projection type uh perspective and then we do all of the perspective stuff right and then if it's orthographic then we need to display all of the orthographic properties so the orthographic properties specifically are obviously um if we just look at the same camera it's the orthographic size yeah so it's obviously going to be like the orthographic size um and the near clip and the far clip but we don't have functions for that so i'm going to add the functions in now so the functions shall be uh sorry i'm a little all over the place here still checking in on stream chat and all that stuff um so we'll we'll do uh this will be i guess get near clip so the good the good news with the neoclip and the far clip is it applies to both um projection uh to both perspective and orthographic projections so return near clip um but no actually i should say that unfortunately no it doesn't because whilst it does apply to both we do need to we didn't we do need to separate them because it's obviously very common for orthographic to be like between negative one and one for example and then perspective to be between zero and ten thousand or like zero point zero point zero 0.01 and 10 000 right so they are completely different and we would expect them to you know remain faithful to what they're supposed to be so get orthographic near clip and then get orthographic far clip so we've got those two and then we obviously want to have set orthographic near clip near clip and then set orthographic far clip um all right so uh get us in setters and let's just uh organize that maybe like that so orthographic size orthographic near clip orthographic far clip let's display that stuff so um let's see uh you know what i'll do probably is just do camera equals camera component.camera just because i don't want to keep calling camera component.camera everywhere like here for example and here okay so um camera get orthographic size is what i care about i'll just quickly write them down get all the graphic size and then we obviously have near clip and far clip okay so this is pretty simple just i'm going drag float i guess the orthographic size so label again we'll just say size labels are currently going to be on the right because that's how i am gui works but in the future we will write some code to make them like be split up into like two columns here um and be like you know with the labels on the left and the stuff on the right but just not at the moment that's going to actually be in our roadmap in the polish ui pass that we do eventually okay so size is camera uh and the way that you do this again again as like you know usually i end up doing something like floats um you know ortho size or something equals get orthographic size and then this is what i obviously pass in here so this becomes uh taking an auto size um i don't know what the units should be and then if it if it changes at this point then i'll just set it so camera dot set author size or the graphic size to author size that's it and this kind of pattern you follow for everything else so um the uh orthonor ortho far this obviously near clip far clip um set orthographic far clip set orthographic near clip orthonia lots of lots of copying and pasting here um so this is like near far to keep the label simple i think that's it right so that's basically like that's us setting the camera correctly no recalculating is taking place here which is wrong but um i think we've got all the ui sorted so if we click on camera you can see it looks here it doesn't look the best but um you know we should be able to set the stuff uh it doesn't look like it actually gets set uh which is strange oh okay oh this works why does this work oh well they're all pointing to the same thing here that's because i'm a yeah not enough copying and pasting it seems i tried my best but no i'm drinking some pineapple tea here which is a little odd but it's not too bad um all right there we go orthographic near and far is fine and yeah it's it's a little bit strange as to uh why the size is working so if we set the other graphics all right because it actually caused recalculate projection so this is something that we you know as a little um i'm not sure if we want to calculate this or like recalculate them straight away um but uh you know we could just easily just add recalculate projection let me just um i don't like the fact that it's doing that but there's no way around it all right so when we set anything where we calculate the projection pretty standard um including when we actually set the uh when we actually set the production type so if we launch this now hopefully our clipping will also work and yeah we've basically written a little camera um ui component system which is pretty cool so we can edit the camera stuff there's the size there's the new clip and far club you can see it's working because it's clipping now if we go to perspective um and then back again it'll recalculate everything we won't see that because there is currently no no perspective stuff so let's add in the perspective stuff now so the perspective stuff how does that work well if we go to scene camera basically we want a copy of this but for perspective stuff so i'll conveniently just edit both both of these at once perspective except instead of size we probably want to like it's it's just the the fog really um by default in hazel i'm setting this is the vertical fault to 45 by default just because that seems good and then perspective near and far um perspective near and far so zero point zero zero one i was point zero one um and perspective far we'll set to we'll set it to like ten thousand maybe i don't know that that does seem like a lot maybe one thousand um it doesn't really matter too much like for now obviously like with precision precision and like stuff like that for you know various clipping and said fighting things you might want to tweak that for depending on the scale of your game and all that stuff but again for now it's not going to matter um all right so that's the perspective stuff so now we just want to add a whole bunch of functions now because there's going to be a lot of stuff here i'm going to actually group both the orthographic and perspective stuff together right and again because perspective is presumably the more used one i'm going to put this up here actually so i'm i've copied these i'm pasting them here again and then instead of orthographic size obviously this becomes perspective fall um now we'll say perspective vertical fault so it'll be nice and uh you know um detailed here verbose if you will with our naming um just because we might want like a horizontal file function i don't know this will obviously do set instead and this will just set the five i guess we probably also want a function that can easily set all of these at once so what i mean is like it'd be nice to have like a set perspective like yeah well actually we've got one here set autographic so again it'd be nice to have a set perspective function that just sets it to whatever we want for us um so uh let's change this to perspective 5 equals 5 and just to be really clear here i might make sure that's set to vertical 5. um all right let's just quickly get through this stuff perspective instead of orthographic everywhere um and that's probably it to be honest so again i'll duplicate this function just for completeness we'll call it set perspective vertical fall near the far clip um and then this will actually uh set everything for us so it'll do i guess perspective of equals vertical fluff orthographic no sorry perspective near equals near clip perspective far equals far clip and then it will recalculate it but the other thing that it has to actually do by the way is make sure that our projection type is set to perspective right and this has to set it to orthographic because now when we recalculate things like we did before we need to actually see what it is so if the projection type equals perspective we'll do one thing else there's only two types so it doesn't we don't really need to see this but uh how did i do it in hazel that did i actually have an explicit check yeah i actually had like a switch statement okay whatever um let's just do uh else what one else we've only got two anyway so else we'll do the orthographic right but if it is if it is um perspective then we basically just want to set projection equal to glm perspective uh i believe and then fog with height so this just does the aspect ratio for us i think which i guess we don't we might not need because that viewport size sets the aspect ratio so actually we don't want perspective for we just want perspective yeah so this this this takes in the field of view which is the fov and then we have the aspect which is aspect ratio which is the um our screen uh aspect ratio of our viewport then near and far which is just perspective near and perspective far okay that that should be it actually um so now if we hit f5 oh we haven't added ui for any of this my bad but we should at least see the difference when we just set it to perspective i think um so if i set this to perspective yeah there we go disappears okay so um at the moment by default with the perspective projection on i think uh our square should actually be like at the same position as our camera because the z coordinate is not you know it's zero so that camera i think um but uh that's why we're not seeing anything but if we quickly fill this stuff in so again this is gonna work exactly the same way right except the only difference is that um i'm actually going to just hurry this up by changing orthographic to um perspective in the selection and then obviously [Music] um and then near and fast the same okay that's it i think um the only difference is the yeah well that's it actually make sure we call recalculate projection and i think that's good um now can we move the square backwards though that's the thing i don't know if we can do we have no i've got xyz transform i think we should be able to right yeah we do so if we get the camera entity here um [Music] uh we can still obviously change the ortho size if i switch to perspective um oh vertical five is zero point seven eight five oh we're still on ortho size wait what but that is the vertical five why is it is it in radians oh it's in radians my bad okay um so this let's rename this because we didn't rename it so this is the vertical file i'll just do a lowercase vertical file and then we want to convert that into degrees and then back into radians because we want to deal with it in degrees um that should be better okay so um there's our camera let's make this a little bit bigger perspective 45 good and then if we actually move our camera backwards by increasing our position um you can see that we can see this and as we move as we keep moving the camera backwards it goes further away we've done it 3d rendering inside hazel the game engine series i mean amazing i know i know that you guys want a 2d but here's a here's a curveball we're now doing 3d stuff okay that's pretty cool right and then obviously same with the green square we can actually push that back in space or forward in space and you can see that depending on our z position this is actually now getting smaller because we're of course using uh orthographic projection sorry perspective projection if we go to our different camera um i guess we won't see anything because uh where is our green square green square is not in here has to be like that right why are we not seeing this that's oh there it is okay and then obviously if we switched over from camera and maybe this camera is like way further away then you can see that the different sizes and stuff even though technically it's quite the same size and we're doing we're using completely different types of projection okay so if we had multiple squares which we could have um then you would see the difference actually let's set that up quickly that'll be fun so let's add another square if we go into uh where is our square entity uh is it easy for us to just we should add a function to duplicate a square that'll be nice but um let's add another square square two red square um we'll make this one red uh and then i think that's really all we need right because it automatically creates a transform that's pretty easy nice and easy to create these entities they'll be they'll be in the same position i think which could be interesting um but if we move the red square out of the way see this is the fun this is where the fun begins um if you can call if you can call it that so if we go to perspective and we just pull this a little bit further away if we get the red square and we you know move it either closer or further or whatever and if we switch cameras um then let's move that camera this is the clip space entity camera right oh um let's increase our far clip far clip um then you can see that these cameras these squares are exactly the same size right with all the graphic projection but if we go to perspective projection they're different sizes because one is further away and that is the difference between perspective and orthographic projection if you're new to graphics but also a really good test of our cameras working properly now we haven't set up the primary camera control or anything like that i don't know if it's worth doing that just because um actually it is it is because it does work i don't think it works in hazel dev but we've made it work right because i think that's what that's what we do here i think we yeah there it is primary camera so if it's if it's primary camera then we yeah we basically have a little toggle for it so what we want to do is um if we go into uh scene hierarchy panel which is where where we are anyway then um what what should we have this first or last or hmm i don't know i guess we'll have it first we can just do i am gooey checkbox um and then this will be basically uh primary and this will just be um camera component camera component dot primary and we'll also add in a fixed aspect ratio which is more of like a a um orthographic thing to be honest i might add that in at the end here and i think that that that should maybe work now now the thing is obviously we are manipulating this using other editor ui and that's totally fine so like if we look at um this camera it's our primary camera camera entity clip space camera is not our primary camera and then if i toggle this this goes on right so we now have a way to see that but we can also actually uh toggle that off um now we've got no primary cameras in our scene that's why we're not seeing anything and then we can decide to like turn this on because this will only affect stuff when it actually like gets changed something else changes it it doesn't read it and respond um and then uh yeah so that's it uh it's bothering me that this is in a different place but i guess it doesn't matter uh and then fixed aspect ratio um if we have an autographic camera like this and we turn fixed aspect ratio on i think that no matter what we resize it to you can see that it's going to keep to its own aspect ratio um which is probably not necessarily what we want but if we change that and then we resize you can see that it works properly so that's what that does but yeah that's the camera component now fully functional hope you guys enjoyed this video as i desperately trying to find the right overlay um hope you guys enjoyed this video if you did please don't forget to hit the like button below and if you aren't on twitch then don't forget to follow the stream shout out to jack jackson jack jackson for subscribing uh during the recording of the stream of the stream of the stream um don't forget that you can also help support the series by going to patreon.com and then you'll also get access to hazel dev which is what i showed earlier the more advanced version of hazel and of course you'll be supporting hazel's development as well as the development of this whole series next time according to our roadmap it looks like we are going to continue on with um other ui stuff probably like the sprite rendering ui maybe revisiting the tag ui and getting uh all of the rest of the components basically sorted out so we can have a more complete way to actually build build stuff inside hazel and then from then onwards we also want to be able to create like add and remove entities and stuff like that using the ui so that's really when we'll be able to stop using the code hopefully and start actually building things inside hazel thank you all for watching and i will see you next time [Music] goodbye [Music] you

Channel: The Cherno

Views: 11,937

Keywords: thecherno, thechernoproject, cherno, c++, programming, gamedev, game development, learn c++, c++ tutorial, game engine, how to make a game engine, game engine series, camera component ui, camera component, ecs, imgui

Id: RIMt_6agUiU

Length: 35min 57sec (2157 seconds)

Published: Thu Sep 24 2020