Entities and Components | Game Engine series

am i am i cool all right let's uh let's stick with orange for this video hey what's up guys my name is jonah welcome back to my game engine series where we now have some colorful lights in the room to play with let me know what color you guys want to see in the comment section below so we're right in the middle of implementing an entity component system if you guys didn't see the first video in which we kind of took an introduction to the specific library that we'll be using then it'll be linked up there and you can check it out uh today we're going to be continuing on with uh talking about entity or ant which is the library we'll be using as well as talking about how entities are going to be fitting into all of these components because so far we've been talking a lot about different components that we can actually have as part of our um like scene i guess but we need to also talk about the entities so uh let's and i always do this so unprofessionally let's fade into um the view here and we're going to take a look at uh all the stuff that we've got inside the scene class so um i don't think we could even run anything last time which is why i didn't commit anything today what we're actually going to do is we're going to try and get an entity onto the screen that actually renders something and that is our task for today i think that um instead of just talking and showing you examples which is what i did last time now that we have a pretty concrete uh i guess set of skills i was going to say but now that we have some information about the library itself we can actually begin using it for its intended purpose so what we're going to do is we're going to go into sandbox at the moment the thing that runs i believe is the sandbox 2d yep right over here this is now going to be we want to convert this maybe like we're rendering a few different things here if i um i don't know this stuff doesn't compile but i think everything else should so if i just run this is a good starting point um okay so much stuff going on here quick quick little hot tip here maybe i should move you know what because we're all friends here let's uh let's just dynamically just move this in the middle of the video that's fine that's professional what i can do is i can go with more of like a streamer setup as you can see i'm preparing for streaming on twitch um i can maybe move my face over here i don't know let me know what you think about the face cam um i can move it down here but then that's just like i don't know it's covering up the time and that's really important for you guys to see as well as other things maybe i'll leave it here in the middle because there's nothing really going on in the middle but it might be really annoying for you guys to to actually um [Music] uh watch this i don't know if it's going to get annoying because like for example right here you can't even see half it no that's stupid i'm doing a complete 180 on that let's maybe put it um i'll leave it at the top let me know where you want the face cam okay so uh my point though with that and i'll try and make sure this fits in here is it it's really important you actually take a look at the output window if you're still using the and i'll just leave this here so that you guys can see it well if you are still using the error list which is this thing right which i'll also put over here if you're still using the error list you should stop that immediately because i mean it's not bad to just get a quick overview as to what's going on but you can see that like i mean this is telling us get is not a member of and storage it looks like the actual uh like error if we double click on it takes us to nth code which as you can see like i mean obviously obviously the code inside and will compile except it won't in this case because it's templated code and we're actually we're actually somehow providing something that doesn't work and so it can't generate the template and so we get the compile error this kind of stuff is um you know is is stuff that is extremely difficult if not pretty much impossible to debug just by reading the error list so if you go to the output instead because what happens is the error list basically pauses the output text and then tries to display some stuff here but a lot of the times especially with templates it displays complete garbage here that is like you know i mean it's the first line of the whole error message basically so if you go back and you can see you you look at the output you'll see that we tried to compile scene.cpp and then you can see here that it failed because git is not a member of this like storage mesh component whatever class i guess with ant entity equals entity so that's just telling us what the actual entity template parameter here is set to and then you can see that we have another message saying see declaration of this c reference eventually it of course will come down to our code and this is where our error message is actually coming from so cncpp line 54 it says see reference to fun okay it doesn't even matter really if we double click on this it's going to take us to the actual code which is this over here that caused the issue and then we can try and like debug that or do whatever we want with it and see what the problem was okay so it's important that you actually take a look at this because if you don't then it's going to be pretty much impossible to debug this and then we have some triple issues here [Music] and again it's going to probably come down to template parameter illegal use of type void i don't even know exactly what's wrong with this line because just from the top of um uh like from the top of my head well i don't even know if that makes sense but anyway it looks fine to me um so i'm not exactly sure i think group dot get transformed mesh component nt i must just be misusing the api maybe um i don't know if group.get is a thing actually i'm beginning to suspect that it's because the mesh component is super weird and it's kind of empty but if we give it a default constructor how will that change anything okay so this is a very weird issue here so i basically what i did is i added a default constructor tool which probably isn't even the problem but i added some actual data to it i think because what happens potentially is if the class is completely empty it seems like it tries to like replace it with a void or something and to be honest i have no idea where that's coming from it might be coming from the way the tuple class actually works inside the c plus plus library i'm not sure but basically if you have an empty component that's i guess that's treated like an empty struct is treated as a special case and it does not compile so you need to make sure that you have some kind of data inside there and as you can see if you do everything works anyway that is weird and that's obviously not something that we would actually encounter in the real world because we would never have a component that has nothing in it but if we run this um you know everything everything should work and that's kind of that's great um but anyway so the reason i wanted to open this is just to kind of see this scene okay so we have these kind of red squares let's try and actually add them in as entities and maybe i mean i'm not sure how much this is going to work to be honest because it's kind of one of those things that i feel is either all or nothing meaning you either convert the whole scene to work like this or you you don't do any of it like i don't think we can partially get this to render um at least uh well we can technically but that would be kind of hacking it but anyway so that's kind of our goal our goal is to kind of maybe create like an entity class and in fact we might even talk more about empty glasses next time at the moment we want to actually see this in practice and i'm going to add an on update function uh with a time step to the uh to the scene where is time step is it just in here um i'm going to add a non update function with a timestamp to the scene and then we're going to call that obviously every frame and then we have the opportunity to actually do some rendering and stuff here if we wanted to so the way that we'll set this up is and this will kind of be our test right so inside editor layer which is actually where everything happens sorry i was in sandbox saying everything's coming from sample example layer and all that stuff i forgot that we were actually um inside the editor that's okay i've recovered i've remembered um let's go over here and um maybe include hazel dot h let's include hazel slash scene h i'll just do it here um doesn't really matter where and then what we're going to do is we're going to say ref scene m scene this is going to be like our active scene might even call it active scene and then over here i'm just going to create an arc we'll create a scene um i think the api for that is create ref it's a little bit different in hazel dev because we've actually got our own ref reference counting system so sometimes i need to take a second to remember how all this works um so we'll create a scene here and then what i want to do obviously is and this api doesn't really exist yet but i'm going to want to i'm i'm going to create all my entities here why do we have hazel colon colon everywhere let's just quickly get rid of all of that i think that was because um we copied this from sandbox and that didn't have the hazelnamespace this obviously does so uh inside our rendering code which i think at the moment does it really happen no okay so where do we render stuff at the moment it's here isn't it um and we bind our frame buffer okay this stuff needs to be slightly reworked but whatever we'll do it here so what i kind of want to do is inside update we'll we'll just pretend that we do it here we'll say active scene on update and then the time step this is where we're going to update our scene update scene and obviously all the rendering is going to be submitted and like will happen from here as well so that's important at the moment we're doing it from this editor layer which obviously is not correct we want it we want to be rendering from the scene the scene is what needs to be rendered um so we'll do uh so that's where that gets called but then over here i want to also be able to create entities obviously so usually the way this works is you tell the active scene or you tell you tell a scene i want to create an entity like inside you an entity belonging to the scene so usually um i'll write something like create entity and then that will return that will return usually an entity for me and we'll talk about that a little bit but ultimately what i want to do here um is have some kind of function which again we'll do this without like making we'll do this like one step at a time i have to remember that this video is does not need to like i don't want it to be too long but ultimately what we would eventually have is some kind of entity create entity function that returns an entity type which we'll create in the next video and we'll talk about how that is going to work and what that's going to enable us to do and how it's going to make our lives easier but for now it's going to return an end entity which again is temporary code because we don't want to be really we don't want to be returning anything to do with ant to our client which in this case is the editor layer um it should be completely 100 hazel's api apart from like glm um so uh so this is temporary basically but it's just gonna let us do stuff um and also uh it's going to let us explore and a little bit better so create entity um yeah okay let's just implement this so again this will do this will basically for the basics of this it'll return registry create so we now have an easy way to create an entity we just call this function and then we get an entity back i can just do auto entity like that this is going to be like one of our one of our red squares so the idea now is i want to add a component to this square i want to add two things a transform component's obviously something that's very useful i probably want to call the entity something so there should be something like a tag component which is essentially going to function as the entity name and then i also want to give it maybe like a sprite renderer component or something that will just tell it hey render this as a sprite render it as a red square so to accomplish all of that stuff and we'll go through end here but to accomplish all of that we need some components obviously because the components of the actual like data that will tell our systems what to actually do or rather you know i mean during our kind of scene update we're going to just take a look at all of the like sprite render sprite renderer components get all the transform components from all those sprite renderer component entity entities as well and then that way we can actually render a scene um because we'll be able to go through all the sprites and render them at the given location locate then the location is provided by the transform component okay so to make all of that happen um let's go ahead and inside this scene um folder i'm going to make a new uh components i'm going to make a new file called components.h i'm going to put all of the components in one and i'll zoom in i'll try and zoom in more i know people have been asking me to so we'll try and do this at like 250 zoom or so um i might by harbor just zoom out and if i do i'm sorry i'm going to try and make an effort to actually stay at this zoom level at least um so inside here we're gonna have all of our components so we'll have transform component i do like to actually call them you know x component um so i like to have the word component in them the reason is that if it's just transform if it's just mesh like that might be good for like the c-sharp api but even that's debatable um you know for scripting languages even like i like to have the word component in there because that way it's not an actual like mesh it's a mesh component that distinction is important for me so we'll have the transform in here and then as i described in wow this is so big let's unpin let's pin that somehow or unpin it um yeah so this is basically what we want right uh we want include glm let me know what you guys think of this font size because to me it's like it's almost a bit difficult to work with like look at this anyway whatever um so that's the transform component uh that has everything we would want in a transform component let's make a sprite renderer component this is going to be real simple for now this is just going to be a color glm vector color just like that really really simple stuff um you could initialize this to whatever you want so transform we could set to mat four one color we could set to um you know we can set it like that one one one one or something like that you know we can actually i wonder if i can just just to make this cleaner if i can just do that that would be nice okay so transform is being initialized with one which is identity matrix because there's a constructor for that and then color will be initialized to one one one one i think that's pretty reasonable um that's just gonna give us some sensible uh defaults so that stuff doesn't necessarily need to be set all the time um uh other copy constructor other dot color color i don't know why like we don't need a copy constructor wait what is this maybe this was wrong oh this was from mad4 yeah i was going to say like why are we doing that um this is just us being able to i guess take in a color it's not a bad idea so that we can actually specify a color like this and then just do color color okay definitely not going to have any of this because of course this is going to contain much more than just a color but i guess when we create a sprite we might want to specify a color or a texture and then when we have textures in here we'll do that as well and we might even do that now we'll see okay so now we have a few components right this stuff is really simple i will actually include uh i will actually include them here components authorization cp file because we'll need them here and i guess i'll go into hazel.h and actually include hazelscene components over here okay now with these components in mind um i'm going to zoom out to like 220. is that fine let me know if that's fine because like it's really it's really hard to work i'm not going to lie i mean i'll do it if you guys want but i need to make sure that it's even something you want first um so over here we'll do uh and remember to add components to the registry what i'll do at the moment which is not really what i want to do obviously but what we'll do is we'll kind of return this registry so this is temporary we're going to be removing this code next episode um but we're going to basically say enter registry we'll just call we'll just say reg because this is so temporary um and it's going to return this registry right we'll obviously return it by reference um that's it and then what we're going to have to do is do active scene registry and then we can start doing all of our all of our ant related code for adding our components which we obviously tested out here so we want to do um where is it registry in place and then into which entity where where i'm placing all of this so we'll call in place we'll say square because that's our square entity and then we're going to in place a transform component and then the transform component we're going to and this is just like the constructor here so i can say like you know identity or i can leave it blank because by default it should be identity of course so this is now the transform and it should be in place for our square now i want to actually add a sprite renderer component so we'll do the same thing except we'll say sprite renderer component into the square and what are we doing let's set a color of it used to be a red square let's maybe make it green so i'll do 0 1 0 1 okay so we now have a green square um now that's not happy with something none of them match the argument list i think it's just because we're not saying it's a vect4 yeah okay so we need to be a bit more explicit there for some reason um so uh there we go maybe because it matches like what else is component like i don't know i guess because it could be this maybe i don't know anyway um okay that's it that's it that should be enough for us to now render a green square okay and that's it that's all we do we add it to the active scene we set up its components obviously this api will be changed next episode can't stress that enough but i want to show you how to do it through and as well now that we've done that um you know when we go and render everything which happens here let's go ahead and just like i mean well we still need to do this i guess um and remember this is stuff that we ultimately will move into like a class called scene renderer um in the future but for now you know let's make sure we update the scene maybe like here um begin scene as well something that like you know let's let's get rid of all of these rotated quads and stuff like that we'll see if we can at least draw the green thing um and then you know this as well this was like our like loop of stuff and like there's a lot of stuff going on here i don't really like like where i need to be um let's get rid of these scopes here profile scopes that was just to test out the profiling system which we're not really using at the moment so let's get rid of this stuff um because we don't care we want to make the code a bit more simple so whatever render or reset um stats we'll do the update stuff here um rotation all of this stuff you know what let's let's kind of get rid of this this exists i'll i'll get rid of it to clean it up but it exists already inside the um inside the sandbox and and the sandbox 2d class i think so we don't really need to deal with it here we can always recover that code if we wish so um so just to uh kind of clear things up right this is what we have at the moment so the thing the big thing that we need is we obviously need a camera component and in fact we might even add that now um just to make things a bit easier let's just try this first though so i'll update the scene in between render a begin and end obviously not ideal but it that should work technically in terms of like how our code is going to run so if i go back to scene and i go to on update this is where the juicy code begins so at the moment what i kind of want is this right i want to actually go through a group of transform and sprite renderer components right as i go through transform and sprite renderer components right and get them and i'll get them by reference so that i'm not copying them and not doing any of that it's not too harmful to copy them here but obviously if we were trying to write to them we would need to make sure we weren't copying them otherwise we would end up with not writing anything to the original component inside the entity inside the entity of course um is like a figure of speech because it's not actually inside the entity that's not where the storage is it's an nc component system but anyway so yeah so we've got a sprite renderer sprite to render a component i'll just call it sprite um so now we can actually render it so i can just be like renderer draw render 2d um draw quad uh i might need to draw like a rotated quad i don't know um do we have a function that can take in a matrix i really hope that we do but i have a feeling we don't we still don't it's like the first thing you want to do i can't believe it's not in here okay static this is like the most important function here which is static void draw quad and instead of taking in a position a size and all of that stuff right it should take in a glm mass for transform okay so we're drawing a quad based on a transform okay um with a color that's all we need this is the really really basic stuff that i am shocked that we still don't have to be honest um and then we also want this so a version that can draw textures okay so with these two armed with these two let's create them now um for like for a 2d game you probably don't need a transform which makes sense that that's the case but usually obviously with engines we tend to like transform so we're going to use them instead um now coming over here um you can see that we we have a transform that we're calculating anyway which is why it makes sense that this stuff exists and we probably want to rewire this a little bit to go through one code path um i might do that next time ultimately what i want to do here is actually take this which is the thing that renders with a color i'll copy this entire function and again we'll we will consolidate this code a bit later um so instead of this transform we've got a transform right so that's kind of it and you can see that's that's really it actually we just do a transform for each vertex that will have the translation rotation scale information inside it color stays the same and we're kind of done right so ultimately um i guess we can consolidate it now because it's not not that much work if we scroll up what we the only thing we really need to do um inside this thing is when we figure out the transform we need to figure out the transform and then draw quad with a transform and a color that's it right and that should work um i should probably test that but i'm going to say straight away that should pretty much work because all we're doing is constructing a transform and then um putting like the code path giving it into that code path that takes in a transform and that is it so um the texture one let's do the texture one as well so i'll copy the texture one which is this um and i'll paste it into here isn't the texture one supposed to be this is supposed to be underneath i don't know why it's all the way up there we'll paste that in transform goes away and then in the other one the opposite happens so transform stays everything else goes away draw quad so we do transform texture tiling factor all right done i think that's it so now what we can do now we've extended that api a bit is we can just draw quad transform and then sprite dot color and that's it that's that's that's how easy it is okay um it's really simple so include hazel renderer renderer 2d to get that and that's it now obviously begin end is something that we need to talk about um but ultimately we're doing it at the moment inside the editor layout and we're just doing on update which happens to do the whole rendering stuff um but i believe that should work so let's get rid of maybe like this this kind of functions as our demo at the moment um so i will leave this um as just like you know i'll call this like ours call it i'll just say ant example code just to say writing a comment and example code okay this is the ant example code that we can refer to as we kind of do stuff with the entity component system i don't know let's hit f5 let's this is exciting let's see what happens we should just see a green square i think look at that first try awesome amazing and everything still works with our camera everything's great okay awesome i'm really happy with that um now the square color you know we've had this variable floating here for years and it does nothing let's make it do something let's say that the square color let's actually point this into and this is this is how we can retrieve this is a good test um to retrieve like components and stuff like that we basically want this so we'll do um this square entity that we have we'll keep that so i'll say um and square entity we will keep that over here we could have assigned it later maybe i will just because this is a bit of a demo and we might remove it later it's just it's just not it's just a 32-bit unsigned end so it's totally fine to copy and everything of course um and then we'll do uh m active scene reg get sprite renderer component from square entity dot color and that's it that's actually what we need we can take a reference to that we can stick it right in here but to make things easier we'll take a reference from it so this is our square color and then we'll just stick that into here put a semicolon there see that into here okay and now we should be editing directly the color of the square and it should we should get that visual feedback and everything should be instant right so here it is oh look at that right we can edit the color this is much like my room was looking earlier um but we can now edit this color and everything's great okay so that um that's we're going to end it here i think that is let me just awkwardly switch back to camera um that is the introduction to this is the second introduction i guess into component systems this is how everything's going to work i hope this video was a little bit insightful for how we're going to be structuring this whole scene and entity component system and how they're going to be working together as you can see it is super simple the code is not going to change from what you saw here today the api will but the actual underlying code that we're calling is largely going to remain the same the biggest problem at the moment is just how we handle scene rendering because we're kind of doing half the stuff in editor layer we're doing half the stuff inside this scene class it's not really good at all and it's going to break if we try and do anything remotely advanced but the actual entity component system code here like the way that we're making new entities and adding components and retrieving components that api is going to be improved in a bit more hazely but it's going to more or less work in the same way hope you guys enjoyed this video if you did please don't forget to hit the like button and also help support the series on patreon.com huge thank you to everyone who does support the series don't forget you can get access to beautiful 3d stuff inside hazel dev inside hazeldev um and also access like live streams where i develop this stuff and um you know if you're interested in jumping ahead and you want to you want to maybe challenge yourself and have a go at actually taking this existing public code and trying to implement the entity component system on top of that and you want a little bit of guidance then checking out the halodev branch is also a really good way to kind of challenge yourself and uh and improve and practice um with taking the kind of code there and using it as a guide and trying to integrate it yourself into this public version i think that's a really good exercise and something that uh that i encourage you to do thank you for watching i will see you next time where we're going to basically be improving that entity api we'll probably also create like a camera component move that into the anti-component system and try and more or less make this an actual proper ecs demo thank you for watching i'll see you next time goodbye [Music] you

Channel: The Cherno

Views: 18,501

Keywords: thecherno, thechernoproject, cherno, c++, programming, gamedev, game development, learn c++, c++ tutorial, game engine, how to make a game engine, game engine series, entity, component, ecs, entity component system, entities and components

Id: -B1iu4QJTUc

Length: 30min 36sec (1836 seconds)

Published: Tue Jul 21 2020