Transcript for:
Creating Editor Visualization for Move Component in Unreal Engine 5 C++

hello and welcome back to a new video in my unreal engine 5c plus plus tutorial series in the last video we have created our own move component as well as talked about uh actors and components so basically move component was just moving an object around the scene we had this f vector move offset which was basically a three-dimensional vector that was pointing from the origin of where the object was placed so the component was placed to the offset where it shall move and of course we also had a speed to control how fast the object is moving we use these two parameters to calculate and normalize offset vector max distance the current distance as well as the move direction and the start location and we use them inside of the tick function to basically move to their code is not very complicated very easy to understand so that's it what we've done last video but last video we actually uh saw that we our our technique has a drawback basically this uh this effector here this move offset uh where is it there it is this so your property that we could celebrate the editor we could set it and it would work 100 correctly and 100 as intended but the thing is it wasn't really visible what's what's going on here so we had no visualization where the object was moving you would need to manually dial this in and always uh press run and press run and press run until everything would work perfectly and this is like very very hard to get this stun and a bit frustrating to set up and what we're going to do today is we're going to create a uh uh editor visualization so basically android engine better to say the uh uh the modules of the unreal engine that are for the editor basically give give us some interfaces that we can use to draw in editor visualization that are just in the editor and that's what the topic of this video is and we're also gonna go in here and maybe improve this it depends on how long it takes me to write the editor visualization because i have never done this before but i have made some research and i hope we need to do so that we are getting to it but i don't know if it works it still works on unreal engine five but yeah we're gonna do it anyways all right so first we need to understand the core concept of the unreal engine before we can actually get to the point where we write our own editor visualization and this core concept are modules so in unreal engine every piece of source could no matter if it's coming from the engine the editor your game a plug-in or whatever every piece of code of the unreal engine lives inside a so-called module a module is just a container with some headers and source code that serve a specific purpose so for example if we take a look at the unreal engine 5 project here in visual studio we can see that we have the source directory here and we have for example the runtime directory and if we scroll down a bit we for example can find the d3d12 rhi this is a module everything in here is a module and this c3d12 rhi is the uh render interface for directx 12. if we would scroll way down we would also find a vulcan uh rhi for vulcan and we would also find the general rhi modules and basically what these are these are basically the abstraction over the os graphics api so just an abstraction layer over directx 12 or like any runtime the idea is that you can just swap out the implementation underneath and basically all engine subsystems are just using the rendering interface and the implementation below depends on how uh how you basically set up your game or you might even have a a in your settings of your game you might even have a dropbox where you can select yeah i want to use vulcan or directx 12 to basically switch this around so basically the idea is that everything comes lights and modular in modules that's why the name module is there and basically what every piece of code is a module and um when we are getting to our game we can actually see that we have this new cpp tutorial and this new cpp tutorial is actually a visual studio project and um inside of that we also have the source folder and down here we have the new cpp tutorial which is actually our code module so you can see everything that is in this new cmp tutorial is a module or is inside of our module we have just one module in the cpu tutorial when you create a c plus project the unreal engine will automatically create one module for you and this one module's purpose is basically to house all the game related to c plus plus code for example our move component so when it comes to editor visualizations you could just say all right we're going to drop that implementation inside of our current module the new tbp drawer right we just create the editor visualization inside of this game module and at least if you are just using the editor everything works fine but as soon as you're going out of the editor and you want to try to deploy your game uh things are getting uh different because well of course do you really need the editor visualization in a shipped game no you don't it's it's just for the editor so you won't need to compile it does it matter if you compile it actually no you could just leave it in there i think binary would be a bit bigger it might take a bit longer to load all classes since unreal engines instantiating each object at the startup um so we just would just trade some some disk space and performance on initial load i don't think that it would put any stress on the engine during run time of course if you have like 1 million classes and they all need to kind of like be in in some lists or sort of trees or something like that then it might be a performance issue and searches are a bit slower but virtually we don't have any we wouldn't have any issues by having our editor visualization in our shipped game but actually that's just a theoretical standpoint in the practical standpoint we want to give we're going to get an issue as soon as we compile because uh the editor visualization uh requires some functions some other modules that are just compiled in the editor and when you're shipping your game basically or the unreal engine builds tool will stripe out all editor code it will remove the full editor related code it would build in a different configuration and then your visualization component would require the functions from the editor components and they are not in there and you're gonna get some link issues and um you cannot compile your game and you cannot trip it and that's an issue how can we solve this well we solved this by basically creating uh two modules one of them we already have it we have our game module and what we want to do additionally is we want to create a new module that is just going to contain our in editor code uh unreal engine actually has two ways of doing that doing it via plugins and doing it via a editor module this now depends on what you want to do if you want to write some shared code that might be used across multiple projects like you have your your your own kind of like feature for example if you're building a two braided style game and you have like these ropes where a lara croft clan can slide down or climb up these ropes then you would maybe implement all these features that are required for this robe all the components or the actors for that he would implement them in a plug-in and then you can use it across all three new survivor trilogy games and maybe even the upcoming new tomb raider game then you could easily do this like you know you're going to use this feature in future games or it's a feature that is quite common that you might want to actually export and and save for other games but in our case we have a move component that is bound to our project at least currently we could have gone a different architectural choice and write a plugin but we don't gonna get as complicated here we just want to write some basic stuff here and basically what you then do is you go to module approach you have to your modules your game module and your editor module the editor module will extend kind of like the features of your game modules to have some in-editor functionalities and then later on when you're shipping your game the other stuff is just gonna striped out editor stuff so how we're gonna do this it's not that easy but we're gonna do it anyways because we want to make a full feature tutorial on the unreal engine if you wanna have some basic tutorials you can watch some other guys here you're gonna get everything that you to require and everything that is but is required in a practical standpoint to write robust and good games so what we're going to do is we're going to create a new module so step one the first step that we need to do is basically we need to go in and modify our unreal engine project file just make sure that the editor is not started i just have open visual studio but i don't have the editor running somewhere that's that's important and the next thing that i want to do is basically open up the folder where all of my unreal engine project is in how can i do this well you can go on the right to the solution explorer click your solution right click the solution and say open folder and file explorer and you're gonna be at the root directory of your unreal engine project now what i'm gonna do is i'm gonna go one folder up i'm going to right click my new cpp tutorial i'm going to show more options here and i'm going to open this up with visual studio code you don't need to do this you can do this fully with the um with the uh built in windows editor tools or visual studio or whatever you like but i'm going to do this because i can zoom in here so that you can see stuff a bit better all right so what you want to do is you want to actually modify this new cpp tutorial your project or however you called that uh this is basically a project file that gonna show you what's going on here inside of your project for example you can see that uh we have loaded two plugins this is like done by default like this modeling tool editor mode bridge which is probably qixel bridge for mega skins um i'm not quite sure of that but basically this is like all the setup that was done via your via your ui what we're actually gonna care about is this module section this is just a new project it's just a json file and inside of this module uh array there are all modules defined that are loaded in our game now what we want to do is we want to add an additional module so we're going to add another json object here and what i'm going to give it i'm going to give it a name just going to leave it empty for now a type also empty for now enter loading phase i'm going to leave this also empty for now now we need to populate them well name is actually quite simple we're going to copy over the name of our project and we're just going to append a editor suffix this is just good practice you could name this however you like but i'm liking it to have it like that that you have this with appended editor now the type of the module previously on our game module it was run time because it's basically a module that extends the runtime of our game so that we have our functionalities but what we now want to do is we don't want to extend the runtime we want to extend the editor so we're going to write in editor here loading phase is basically when your module is going to be loaded in this case it's default on the type of editor modules for that it's gonna it's recommended to do it at post engine init this is just something that you can find in the unreal engine documentation and example of them for editor modules basically after the engine was initialized this module is going to be loaded we're just going to do this like that very simple all right and then that concludes actually all modifications to the new project file now we basically have told the unreal engine hey there is another module that you shall need to load but this isn't enough because now the engine can't find a module now if the engine would start up it would try to load this module and it cannot find it how can we make the engine find this module well we need to build it so inside of the source directory we need to basically uh tell the the unreal engine compiler that it shall also compile this editor module and where do you do this you do this inside of this new cpp tutorial editor targets.csharp there you're going to basically introduce a module here you can see extra module names at range it's going to add a range of modules in this case it's uh adding a new string array and currently just has the content of new cpp tutorial but we are now also want to build the uh editor module so i'm going to copy over the name and tell the compiler in case we are on an editor built that this is why we are putting this into the news every tutorial editor targets.cs and not in the normal newspaper targets.cs we just gonna put it in here and basically what is that this basically telling the compiler hey you shall compile a new cpv tutorial and you shall compile a new cpv tutorial editor now what uh the compiler would do it would search inside of the source directory for the new tutorial editor folder but it will not be able to find it because we have not created it yet so what we want to do is create a folder called new cpptutorial.editor great so now the edit if the folder is there what it's going to do now it is going to try to search for a build script but it cannot find something there is nothing in this uh in this folder here actually it is searching for a file called new cpptutorial editor.build.c as you can see we have that one here without the editor suffix near cpu tutorial.cs i'm going to copy that one and paste it over to there i'm going to go in rename this and also append the editor suffix here so now i have created this file usb tutorial editor.build.cs and what i now also want to do is i want to adapt this so that the class name is also properly so and it's not new it's not public class cpu new cpu tutorial is called class news tutorial editor because this is like the name of the module and of course we also need to match this also down here at the dvd constructor also put this in usb tutorial editor uh down here we basically need to set up how our module is built and by default we can leave this as is but since we are actually depending on classes that are defined in our actual module new cpp tutorial so in our game and in our game code module we're going to need this move component to basically access it and draw a ui for that or in editor visualization we actually need that new cpp tutorial module as a reference so what i'm going to do here is i'm going to add this to the public dependency module name so currently we are just depending on all of the engine stuff we can leave this in there even though we might not actually need this and we're just going to paste in here at the end the new cvp tutorial which is going to basically tell the engine compiler and unreal engine build tool hey also compile that or basically which it is actually telling the uh compiler which include path to use all right so basically now we have introduced the module instead of the editor built target and we created a build file for it which is correctly depending on our core game module now there actually is actually with something missing as well more thing missing here actually what is missing here is um an actual module itself so each module needs a class that implements the uh the editors or the the engines i module interface so the module interface interface i module interface class and this class is basically containing all the code for a module what i'm going to do here is i'm going to add a new file we're going to call this new cvp tutorial tutorial editor dot h ucp tutorial editor dot h and we also gonna add the same one but with cpp now i'm gonna go into the new cbptutorialeditor.h and i'm gonna copy some code in here um i'm gonna add you a a url that basically tells you where to find the these templates and basically this is the declaration of a module now it's currently still at this my game editor which is from the unreal engines documentation but we're just going to rename this to new cpp tutorial editor because this is basically how it is called and what i'm also going to change is this name down here i'm replacing the my game editor keeping the f at the prefix and the module as a suffix and pasting that in basically here now we have f neo cpu tutorial editor module there's a class that we need to basically uh how we need to name this and we also need of course to define this up here and now by default you can see that we implement two virtual functions the startup module function and shutdown module function this is kind of like a constructor and destructor again uh we don't need them we can just delete them we don't need to implement them here because we don't need to do something uh in the example of unreal engine they actually do some logging um there but yeah uh we are not gonna do this like that we don't need logging for now now let's go into the new cpp uh tutorial.cpp file and let's paste also some information in here so first let's fix the include currently it's including my game editor but we want to include you cpp tutorial uh why didn't it suggested that but yeah that's just like usb tutorial letter.h we want to include that one and then we want to implement this game module it's just a macro that's gonna add all the required code we're just gonna copy this f new name here the class name and the module name here we're gonna copy and paste them in here and this is gonna then correctly implement the game module so the unreal engine can actually find it so this shall conclude everything that we need to set up now i can actually minimize visual city code again and go back into my visual studio solution in the proper visual studio and what i want to do now is to hit a quick build as well of course in the development editor configuration and we're going to see if everything builds as expected let's see what it's going to do all right so the build succeeded actually it is created a library and what we want to do now uh is actually start the the editor so i'm going to make sure again development editor and i want to start the local windows developer and we're going to see if everything blows up or if the editor starts without any issues uh if we done everything right it shall start without any issues all right let's see new cpu tutorial is loading uh i have not put in any logging if you have would have put in some logging we could also debug this properly oh i started with debugging i didn't want it to do that but okay can actually detach while i'm already debugging all right so the uh editor opened up correctly so i'm assuming that the module has been loaded all right i quickly restarted the engine to make sure that we are now in without debugging what you now want to do is you want to click on tool and you want to say refresh visual studio project this is basically updating your project and should in theory add the um at our new module so you want to click reload all and there you go now you can have z in the solution explorer that the new cpp tutorial uh is also in here so that we can go in and create code for that all right i'm a bit sad that we cannot see it down here in our c plus plus classes i would have hoped that it would show up here but it didn't we're gonna see if we can get this fixed but um then i'm gonna i'm gonna pause it in a second what do we do wanna do quickly is we wanna quickly see if the module has been loaded so what i'm gonna do is i'm going to click on tools up here debug modules and this is going to open up a a modules panel that can basically dock this in here or actually let me dock it right there no not there there then i want to have it and actually you can see here all the modules that are loaded in from from from the from from the editor so each module you can unload it reload it recompil whatever you want to do all modules engine modules editor modules there should be everything in here uh we are we are searching for the my cpp tutorial and you can actually see we have the new cpp tutorial module that we could recompile we have the new cpp tutorial editor module so you can actually see that both modules are in here which means that we have done everything correctly and the module has been correctly patched into our into our unreal engine instance so i'm going to quickly check if we can add this somehow to the uh z plus classes view all right so um [Music] i don't know why it's not shown down here maybe because we cannot place it i think it's because it's an audio editor module and we can't play something from an edit editor module in the in the scene so that's why it's not showing up down in c plus classes but you can still actually create the plus plus classes for that let me quickly maybe zoom out a bit so that you can see when i'm going to tools and um i'm going to say neoc plus class now i basically could select something in the comment classes but we are doing some extraordinary stuff so i'm actually going to go to all classes and i'm going to search for component component visualizer and we want to do is we want to create a component visualizer which i can't do is that not working why that's interesting f component visualizer it's not working like that all right then what we're gonna do quickly is we're just gonna create a common thing and we're going to create an a non class here and we're going to add in all the code that we need on later now what i want to call this i want to basically call this um yeah uh yeah i'm just gonna call this uh how did we call the other one we think i called it uh move component uh yeah move components that was called move component and it's now gonna be class moved uh component visualizer visualizer like that and then what you wanna do is you wanna actually change where you wanna add it you to change this from new cpu tutorial runtime you can use cpp tutorial editor and this will basically change where the module is created now what you want to do is hit create class and boom it should be all reloaded in the visual studio project reload all i'm just going to quickly get rid of our constructor and destructor and i'm going to get rid of this here as well or do i want to get rid of this actually we're gonna see i think i want to get rid of this yeah probably so let me get rid of all of that now we actually want to adapt this to um [Music] to be available for our component visualizer so actually we want to do some includes we want to actually include target component component visualizer dot h we want to include that one and we also want to include our target component so the move component dot h so the component that we created our move component we want to include this command visualizer seems to work why is move component not working move component should work we're going to see it might be fixed as soon as we compile because these are like default unreal engine stuff and this down here is our own code that shall work but we're going to see now what i want to of course change is i want to say all right um it's going to be a public f it does that do i have intellisense for that no good component visualizer f component visualizer it's a base cluster we want to implement it if i would peak the definition you can actually see uh that it is existing here so let's close this up and let's go in all right so what we want to do now is we want to overwrite a function so i'm going to go in here and say quick actions or implement virtual method this is something that visual assist is giving us and what i want to basically override is um i want to overwrite this uh draw visualization function so that one here virtual void draw visualization and i'm going to click ok and this is going to implement it's going to add a function down here and it's also going to implement the code here and what i basically now want to do we have this you active component this component one here and we actually want to cast this one uh one thing that i forgot here before we're going to implement this function we're going to rename the class here i can do this with visual assist but we just want to make sure that the f is is prepended now i actually don't want to rename the file like that here this is just because this is how unreal engine works with the prefixes and we just want to make sure that everything is correct here all right uh let's quickly go to my move component because i want to copy the full name yeah it was you so i was correct there now inside of the uh edit visualizations um what i'm basically going to do is i want to cast the u actor component to a u of move component and i'm basically just going to do this like that this is my move component this is going to be equal to cast to my you move component and i'm going to cast from component like that um i'm not quite sure why it's not accepting my includes but this is how it should work at least i don't know why because we're depending on that module so it should also include this um i'm quickly gonna check something can we do this with new cpp tutorial slash come on slash move component something like that yeah that is working this shall now also remove issues here all right this is cons so we also want to make sure that this is a const component here as well all right so basically we want to get our move component here and basically what we now can basically do is we can start and as soon as we have the move component we can draw our visualization but i want to quickly make sure that this f move component visualizer also has access to that so i'm going to scroll down here to private and i'm going to add a friend class f move component visualizer so that i have access to the members of the uh of the uh object itself and what i now want to do is i want to basically now draw a line we have this f primitive draw interface pdi and this pdi has ever function it has for example this draw line function where we can give it a start vector and an end vector a color a def priority group thickness step bias and whatever we want and basically what we tell it here is to draw a line and the start is quite simple we want to have the move component get a location or get component location here to basically get to the location of the start and we want to draw the line to let's say we do this like that so it's a bit more readable and basically we want to draw it until our move component dot how did we call that offset uh move offset move offset i think you call this here move offset there it is so you want to take the the current component location and we want to draw the line until the move offset next parameter is a linear color f linear color dot red there should be something like that already in there yeah it is then we need the depth priority group i don't know what that is let's put us at zero we're gonna see what this is gonna be doing do i maybe have something in my reference about that depth priority stuff oh yeah they are actually important these priority groups like spg gi spsdpg foreground something like that can i pick that what is that um oh yeah so enum is in depth priority group is actually a thing here and we have like a world in the scene like foreground and maximum uh yeah just gonna use this like that and this shall basically just do everything that we want this shall just draw a line to basically tell us what's going on here um you know what would what what would what happened if we were to recompile this how can we recompile this well uh go to your unreal engine no that one now we can zoom in of course again and now i can go to all to my modules and i can click the new cpptutorial editor and recompile this this should give us something do we have some output for that there's some feedback i'm going to click recompile but i don't get feedback do we need to unload this recompile load i just think that it does it under the hood maybe we're going to see but it somehow didn't do that is this drawing something if we click the statue no is it drawing something if we hit the move component no it's not working why is that um according to the unreal documentation you actually need to register that component and register this within the editor what we are currently not doing how do we register that well let's go back to visual studio did it had some output here no it hadn't i have kind of like doubt that it really recompiled that but yeah um we're gonna see in a second when i implemented like the last step that shall be required for actually visualizing stuff so how do we register that we need to register this actually when our module gets loaded so the cpp tutorial editor module currently has nothing in here because we deleted the functions now we're gonna need them so i'm gonna say uh implement virtual methods and we're gonna [Music] implement the we're gonna implement the startup module and the shutdown module functions so click them implement them or if you don't have visual assist you can of course always type them in manually sorry for that but uh yeah so here we have them veterans are the module override we could make them virtual here as well but we don't need it so now we have basically these two functions here and inside of these two functions we can basically implement uh our or register our uh components what we're doing this first of all we um need to make sure that our editor is valid so we're gonna check if editor is valid so basically we just need to check if g unreal add is is good so basically that this pointer is okay if this pointer is okay we are fine we can actually go on and now the next thing that we want to do actually is we want to create a or basically we want to um we want to register something with the uh the editor and what my reference that i have that also reflects that unreal engine 5 is a valid thing says s of 4.7 there is a bug that prevents you from registering it in the correct way and we need to change the doodles with a work around because this is like not recommended what we are doing here if that makes sense but there is like a register component visualizer function here that needs then that basically needs the name of the the the target component target component is our uh year move component static class dot how does this thing called get fname get f name which is basically giving it the unreal engine name and we don't have this included yet uh actually i want to conclude this here so basically what i want to do is i want to include um the move component dot h which should make this one valid should doesn't however get valid could also include this directly near uh tutorial move component does that help no because i think this include here is not even valid because it's not a private include it's just a public include so maybe we also need to include this here because it's only valid in headers somehow yeah that's that's how it works uh all right so we now have basically supplied the component class name and the next thing that we need is a t-shirt pointer and it's getting invalid again yeah i don't care it should work we're going to see so next thing that we want to do is basically uh make this visualizer um as i shared the unreal engine pointer the class is called a t-shirt pointer and it's a ship pointer for the f f component move component visualizer f move component visualizer like that and basically just call it move visualizer and it's going to be easy to make shareable new f move component visualizer like that but i think it needs some parameters node it doesn't it's just total carnage that it's not working correctly but yeah i hope it compiles because it's kind of like not quite correctly so move visualizer is going to be added here as well and what we also want to call is the move visualizers on register function because this is not called if we do this like that this is understandable but before we basically gonna do this we want to check if the [Music] move visualizer is actually we wanna do this like that is valid so if the pointer is valid then we want to call these functions and this should in theory register the module and what we also need to do is we need to unregister that so basically this is registering the move visualizer and then we want to do also the cleanup of that so we will unregister that so g unreal add unregister component visualizer and we also need that name again so i'm gonna copy that over and we shall be good with that one very important information is that this might break in the future but we're going to see let's go back into here the engine unload unload the editor module recompile it do we actually can i maybe go into aha unable to hot reload modules while live coding is enabled so we disable live coding here down here enable live coding disable live coding aha now this is working let's see if it compiles compilation failed that's good show log what's what's what's wrong uh open lock so what what issues do we have uh probably we are not linking with the correct module and that is right so we have linker issues and we can not uh basically load this model this was expected because like my documentation is really really bad the module is actually called unreal add that we need to add as well and that one is not in there currently so how do we edit we go to our what's it here yeah public dependency module so basically we are depending on core object engine whatever but not the editor so we basically want to add unreal add here like that and this shall now give it the correct dependencies for the editor as well so we're going to go back into the editor and recom chute recompile it ah there we go compilation completed this looks good it seems to have successfully completed it should also reflect this somewhere down here good that now finished correctly and now we should be able to load it does it crash no it loaded does it work yeah it actually works you can see this is now showing a red line that's going up here do you see it a nice and little small red line because it's currently moving quite high and now if i would go into my details panel go to the move component that actually tried to offset this this should be reflected but since the value is quite big let's make sure you put this to 200 there you go now you can see that the line has basically lowered and if i would now move this somewhere there you can basically see ah yeah the line is basically correctly showing how the object is going to move if i deselect it it's away if i select it there you go you see basically the line where the object is going to move that is very nice we now have made um serious undertaking uh to get a stupid little line it still works i'm really surprised it does it might break in the future i don't know why this is not the official interface where you're not meant to overload this this is also why i think the class explorer didn't uh didn't really offer us this this object here we also like are doing it yeah totally not the unreal engine style but that's okay so yeah let's see if it's the visualization also works yeah it works it's quite fast actually and it's actually visualizing exactly where it goes i can click it i can basically see where it is going you could maybe go in and make the line a bit bigger so that you can see it a bit better but i think for now this is actually good it's like it's a similar line to like this the sphere that is drawn around when you click it so the editor visualization is somehow always involved there i don't know how if there is still a proper way but the only thing you're going to find for editor visualization is that instruction that i found and i think it's quite nice to actually know something like that and know how to how to get things done correctly because it's important um you know that i've actually clicked this one then i just know i'm always drawing the full actualizations all right but it is properly visualizing stuff and i think that's enough for the video it was enough for today so uh yeah no don't need uh you're not allowed to basically have hot live coding here uh of course you can always like your game code can also be recompiled by pressing that button without live coding you can always recompile and hot reload here you don't really need this live coding button i don't know why it is there it's a bit more convenient but you can always do this as well here from the from the modules panel but yeah that's it when it comes to editor visualizations i hope i blown away your mind and yeah next video we actually gotta make it do what i promised and actually get into making this move a bit more dynamic with like ability to pause it reset it interact with it with blueprints and all of that nice stuff so thank you for watching see you in the next video make sure to like and subscribe and yeah see you next time bye [Music] [Music] you