BEST WAY to make Desktop Applications in C++

if you're trying to build a desktop application in c plus plus finding a good gui framework to use can be tricky i mean don't get me wrong there are so many different options out there you could use something like qt or wx widgets i mean they seem to be popular they're cross-platform what's the problem the problem is i hate them i mean does anybody actually have a good experience using like qt or wx switches to build a cpu plus application not to mention the complex licensing model that goes behind some of these that might cost you quite a bit of money so what do you do what do you do if you just quickly want to make an app in cbos plus why is everything so difficult well before we answer that question let's step back a little bit why are you using c plus plus to build an application because if you're not there are so many things you could use i mean if it's just something simple then maybe you could consider writing a web app that runs in like a web browser that'd be easily cross-platform out of the box including mobile devices and really anything with a good web browser and if you wanted to be more desktop focused with that kind of ease of web development situation then why don't you just use something like javascript and electron i hear it's great for the more serious applications you could use something like c sharp and wpf i mean yes you'll be restricted to windows only but maybe that's okay i could go on the point is there are many different ways to build applications you don't have to use c plus and in fact i would say c plus plus is kind of an unusual choice unless you're like me if you're building a performance intensive application or something that's low level or something that really highly revolves around a library maybe that's written in c plus and using wrappers or whatever is just a pain and you want to just write an application in c plus instead you know for those use cases it really does make a lot of sense to just write your actual kind of application gui part of everything in c plus so as an example for those of you watching this channel you know that i build game engines a game engine what is a game engine a game engine is basically like this c plus plus core or at least it is in most cases that then has stuff built around it to facilitate the production of games as an example so since the core is in c plus plus and usually that core will adapt to whatever platform you want it to adapt to so whether that be windows mac linux maybe mobile devices maybe consoles that core is very intrinsic to the application therefore it makes a lot of sense to write any tools that might go along with the chord that really rely on the core such as an editor which needs to actually have like a viewport that is the core running inside it as well as adjacent tools it makes a lot of sense to write that big tool i'm talking about the editor in c plus now you don't have to i worked at ea for almost five years they have frostbite frost ed the frostbite editor is written in c sharp wpf it of course uses the frostbite c plus core but the actual tools are written in c sharp so even if you are writing a game engine of course you don't have to write your tools in c plus however as i mentioned the downside with c-sharp wpf is that it's windows only which is okay for a company with proprietary technology such as ea because their development teams can just use windows and in fact in the games industry most people do use windows i'm not talking about the indie developers with their cool macbooks i'm talking about like triple a developers usually run on windows now unity and unreal are two very big engines very popular engines that have the core in in class plus but then also the tools or specifically the editor is also written in cbs plus unity has a bit of a c-sharp thing going on with a lot of plugins and all of that but the core kind of rendering framework is still there in c plus and if you want to be cross-platform and if you are a game engine that already has a lot of rendering going on in my opinion it makes a lot of sense to write your editor in c plus plus and to also be using a gui framework that uses like immediate mode rendering using your graphics api the reason being that you are a game engine like you are rendering things in real time you're doing graphics intensive work it's totally okay for you to use that same tech for your application ui anyway game engines aside what if i just want to build an application as people's bus why is this so difficult what is the easiest way for me to get up and running that is what i'm here for today i just want to show you guys what i do when i want to build an application in c plus plus how it's incredibly simple and way easier than anything else i've tried and out of the box it's not only cross-platform including like mobile devices and consoles but it can also adapt to any rendering api you might be using directx 910 1112 opengl vulcan metal and you only have to write your code once and it's completely free in open source doesn't this sound too good to be true i am of course talking about i am gui or dear i am gooey which is an absolutely wonderful immediate mode gui library but wait isn't im gui some kind of like toy you know debug ui thing for like testing out applications just something like really simple that can't be used to build big applications no it's not it's amazing and it can do pretty much anything now i will put a little disclaimer here just because and that is like i don't want this to turn into like a retain mode versus immediate mode versus hybrid kind of uis and like what what the best thing to to use is i firmly believe immediate mode uis are just superior but i also acknowledge that it does depend on what you're doing my specialties in game engines game engines as i mentioned are very much real-time rendering dynamic machines so for what i do i think it's totally okay if you are trying to be extremely efficient on some kind of low-spec embedded device or something like yes maybe you don't need to render the ui every frame and be all responsive and stuff but i would argue that right now in 2022 for most cases immediate mode uis are just better but isn't imgui like really limited and you can't style it very well and it just doesn't look good no where do you no because you're literally rendering everything as if it was a video game like you can do literally anything this is what hazel's editor looks like this ui is completely written in i'm gui yes we did have to modify some parts of i'm gui to actually make this happen but we are still using i am gui and it is still great to be honest the only area where i start to see problems with i'm gui are like if you have absolutely huge data sets if they're all being kind of rendered refreshed every frame you might run into some problems but there are always strategies to mitigate that you can just use caching in some form however in our experience in hazel like for example if we have like hundreds of thousands of objects in the scene or something the bottleneck has always been our code so for example like we need to show details in a tree view and to get those details we have to hit like the asset manager and other engine systems to retrieve those details those have usually been the bottlenecks not the i am gooey rendering code my point is it's very fast anyway enough talking this has been quite the lecture but i just wanted to explain to you guys what is going on in a minute we're going to dive in and take a look at how to actually write an application in i'm going but first i want to mention that this video is sponsored by hostinger hosting is pretty much the best web hosting platform on the internet if you need to host a website or if you need a server for something to do on the internet hosting it is your go-to maybe you don't need to use c plus to write your application maybe you can write it as a web app how are you going to host that web app using hostinger we use hosting it to host hazelengine.com which by the way you can go to to find out more information about hazel the game engine that we're building setting up hazel engine.com was an incredibly simple process like you just press a few buttons fill in some details such as like you know the name of your website pick your operating system and it's pretty much ready to go and that simplicity applies to if you just want like a shared hosting website deal or if you're using a vps like we are and not only is the actual like ui and dashboard and all that beautiful and simple they also have a ton of useful documentation that will help you get going or do something really specific it's not only useful if this is your first website i mean i've set up a lot of websites in my day but just coming in and finding out the specifics of this web host in like just a few words on their documentation is so refreshing but i guess having such a nice clean user interface and brilliant documentation you probably have to pay a lot for that right no hosting as prices are honestly insane they're honestly the best value web host i have ever seen click the link in the description below to sign up if you use the coupon code cherno you'll get an even bigger discount and i promise you you will not be disappointed huge thank you as always to hosting out for sponsoring this video so as i mentioned let's dive in and take a look at how we can make a c plus application using i am gui this is the i'm gui github repository this is where it all begins now the only thing i want to point out here apart from the fact that if this is your first time you know you should read the readme all that stuff maybe get to know the library there are two main branches there's a branch called master there's a branch called docking the rest are just like feature branches but these two as you can see are kind of like the main the main events now docking even though it's not the master branch is a very mature usable branch that has been around for like years eventually it will be merged into master it's not merged into master at the moment though and it has a lot of really really useful functionality such as a dock space so that you can dock windows like you would in many applications these days as well as being able to drag windows outside of the viewport as you'll see when i show this later in this video so my advice is to use the docking branch now in my opinion this docking branch is really what makes imgui actually useful in the real world for real applications if it wasn't for that kind of being able to drag windows outside of the main window and also you know doc dock spaces all that stuff uh i probably wouldn't be making this video today recommending that you use i'm going for applications because without this it would be a little bit weird so let's obtain this i have prepared a folder here it is called i am gui apps uh if you just click on the little address bar type in cmd to get to a command prompt let's go ahead and clone i'm gui and we will start from there so let's go ahead and grab that url we'll go over here get clone i always do a recursive clone just in case there are sub modules that we need to obtain i actually don't think i'm going has any but we'll do a request clone anyway we'll paste in the repository url you don't really need the dot yet it'll add it if it's not there uh and then i'm gonna check out specifically that docking branch straight away so if you do a dash b we won't bother checking out master and then we'll have to switch to docking we can just check out docking and then if you like you can give it like a folder so i'm gonna call this my application it's going to check out all of this code into a folder called my application enter and now it's going to clone i'm gui okay done that didn't take much time let's go ahead and go to that folder here we are here's my application and we have all of our code here now i am gui works pretty much anywhere because it has a lot of really good examples and you can see over here just how many examples it has if you're just doing a speed run and you just want to get up and running with imgui then just open the imgue example solution pick literally almost whatever you like so for windows i recommend either falcon or like directx 11 or 12 but this isn't exactly a speed run so let's talk about this a little bit these example directories have essentially like the boilerplate examples for each platform and library right so we have win32 like directx 10 for example this is using the win32 api to actually like create the window and handle all the events and then it uses directx 10 as the rendering apis the graphics api so glfw opengl 2 for example will use glfw as the windowing and event library and all that and then it'll use opengl like version 2 compliant code to actually do all of the rendering there's even m script and stuff here so you can run it on you know the web uh there's metal so you can run it this will probably just be a mac os version but they do have like ios and android example somewhere else here's an android example for example the point is there's a ton of stuff here and then not only is there this but they now have a back-ends folder this used to be part of examples that contains the actual back-end files for all of these my point being that it's really easy to integrate this with literally anything and that's the beauty of this that's what makes this so amazingly cross-platform the fact that they just have example implementations of everything and you don't have to do anything yourself right all you really have to do is open up this imgue examples.solution now i'm going to upgrade all of mine to like the latest because i'm using visual studio 2022 and i think this is still 2019. let's go ahead and drag that into here it's upgraded all the projects cool that should be pretty straightforward and then as i mentioned we pick something so as an example i'm just going to pick gelfw vulcan let's set that as a startup project if we wanted to to keep things clean we could unload like literally all the other projects and i mean this is where like if you were actually writing an application like you were writing your own application using imgui maybe you wouldn't start with just you know modifying this example solution if you want to see a video on how to actually create a project from scratch using i'm going let me know i'll probably do that but otherwise this is just going to be faster so you'll see basically five main files in this kind of example glfw vulcan main is the entry point as it implies this is what has the actual like main function if i can find it over here right there's our int main it's got a bunch of gel of w boilerplate code and see this is where it's so amazing this is why i love i'm going so much as well because not only is it an amazing gui like library framework whatever it's also a fantastic kind of example of how to get up and running with all of these like apis like whether you're using glfw for windowing or sdl or win32 here's a beautiful example of how to set up glw create a window set up vulkan for it and then render ui to it right so if we just hit f5 this is going to be a debug build but it doesn't really matter for us this is what we get right this is basically ready to go right we have a beautiful application and as i mentioned because this is the docking branch we can literally take this and just drag it out of the window and you can see it's now its own window this is impossible in the main branch or in the master branch this is why again as i mentioned like this kind of functionality is great i can drag it to my other monitor i can treat it like it was a normal application which is amazing and then under examples we've also got that dock space right now it's a dock space now i can dock this in here and you can see suddenly we have a very like real looking application but it's all running in i'm gui it's all rendering like you know well in this case add v-sync i'm on a 144 hertz monitor like it's all rendering like real-time frame to frame every frame is is rendered from scratch you know we have a good immediate mode ui ready to go so how do we kind of convert this into our own application well from here you could literally set up anything you wanted to right and there's even some useful comments being like you know if you if you want your own font because that's a common request i'm gooey's default font is a bit you know debug looks like a debug ui thing um you can change that easily obviously and then we have like again very well annotated the main loop here so inside the main loop we have some important im gui commands that have to happen at the start of each frame so i am gui impulse vulcan new frame glfw new frame and then finally i'm gooey's new frame once you finish these three lines of code within that main loop this stuff is basically rendering all of the ui that we just saw so let's just say we're not interested in this right and then it goes all the way down to the actual rendering code so that we also need to keep so over here now is where my code goes here right so within this now we could set up our own ui so to demonstrate this in a little bit more of a kind of robust way i'm going to create a new file now i'm not sure where this will go exactly because i don't know where the directory is it's okay we'll just put it in here um i'm going to go ahead and create a new item and this is going to basically be like our application like ui stuff so i'm going to create a new file just to keep it clean and simple so you guys know what i'm talking about new file new new header file there and a new cpp file you know if i wanted to well let's just keep this simple right i don't want to be all over kill here let's just create like a namespace called my app um and then we'll create a function called like you know render ui or something like that nice and simple let's go back to that c plus plus file there's our render ui and then over here you know as long as we include i am gui and i don't even know how this was including that i am gooey so let's go take a look okay so like this basically all we need right over here now i can like create a window so i'm going to begin and you know let's just say this is going to be my like settings panel or something i create that window i'm going end to end the window and then we can like add a button hello let's add like a drag float so we can have like a static float value we can have like some kind of thing that we drag around this is just an example obviously um that's our settings panel done render ui so if we go back to main let's just include that application window or sorry that application file that we just made application.h and then we just do my app render ui f5 and we now have that settings panel i talked about right but what about the dock space so you can see there is no dock space this is actually vulcan rendering a clear color in the background here which again is is another perfect example you know if you are in fact writing an application that revolves around graphics rendering this is where it's great to use i'm gooey as well because you you basically have all the vulcan boilerplate stuff done you can start rendering whatever graphics you like as well as have ui stuff easily on top of that and that works really well obviously so how do we set up that dock space in fact how do we do anything in i'm gui well i am gui has a fantastic file called imguidemo.cpp which is huge it's like 8 000 lines and it has examples for everything that you might want to do so let's let's go ahead and simulate a scenario in which i don't know what to do how do i create something well the first thing is let's go back to our app right i'm going to go ahead and just type in i am show demo show demo window f5 right so now we're not only going to get our settings window we also get that demo window now within this demo window you can just have a browse so like basics you know here's like some stuff i might want oh i want to make a tree how do i make this whole tree thing right and because these all have strings obviously that are rendering you can just search for these strings within the file so for example basic trees let's go to that imgui demo file and search for basic trees here it is right and we have again the actual code that was used to render this specific like tree so again as an example we know that we have a dock space somewhere here and it's gone ahead and made it on the main window here so let's just search for dock space this is an example for docking and dock space right so show example app dock space so again i'm going to just literally copy like all of this now there's a menu bar here and there's some stuff that we probably don't care about but let's just copy the whole thing anyway we'll go back to application i'll put it at the at the beginning here so then we'll just strip it so what don't i want so if like again p open is not really a required parameter here we can replace it with the num point because we don't want to close the thing show docking disabled message like we don't need that stuff sure we'll keep the menu bar um was this a menu item again we can probably just strip some of this stuff we don't care about like help marker well this is the close option i'm not going to have a close option done right and then i'll take my settings panel and put it within the dock space like that we can get rid of the show demo window and then suddenly just like that we have a dock space we have this and guess what it's now dockable so we can just dock it over here again to extend the example of a game engine let's just say i have a viewport panel as well right so i'm going to make another viewport window i'm going to go ahead and dock this into here there's my viewport docket into the center and guess what i basically already have like my game engine up and running i just need to render my stuff in vulcan or directx or whatever i'm using to a texture to a frame buffer and then just display that image inside this im gui viewport as just an i'm gui image right that is literally done uh and then of course if you close this and then reopen it it's going to save old layout and that gets saved inside an imgui.ini file so it's basically like ready to go it's such a simple thing and and because we've kind of segregated everything into this application uh you know into these two application files let's say that i don't want to use vulkan anymore i want to use directx 12 right because that's i don't know for whatever reason maybe i need to or i want to or whatever i can go ahead and just like grab these two applications now of course this is not like the best architecture like you probably want like a static library or something with these things but for now i'm just going to copy application.h and cpp into here right i'm going to set that as my startup project we can like unload that vulcan project entirely so it doesn't get in the way and then again i'm going to go into main i'm going to include application.h and then i'm going to go into like the main function you know i'm going to find my well i'm going like render is kind of what i'm looking for there's my rendering code there's that example ui code and then we have the same pattern you know dx dx 12 new frame win32 new frame i'm going to frame so in between these two let's do my you know the my app render ui f5 now it's building the directx 12 example using the win32 api of course my ini file like didn't get carried across so i'll have to reset up the layout but you can see that's that's it like that's up and running but that's my directx 12 example and of course if we wanted to customize that text a little bit we could just change the title to like my app or something and then now we have my app up and running with everything so really simple this was practically a speed run i apologize if i went very fast and as i mentioned this is not like you know the best architecture but this is just how you get up and running with im gui really easy and from here of course you can build literally any application you want it doesn't have to have any rendering right i don't want to i don't want you get the wrong idea like you don't have to render 3d graphics in this viewport you can but you don't have to you could this could be a calculator app right it doesn't matter but the point is uh it's just really easy to get up and running works on every platform any like device really and yeah i don't think i need to say anything else but you know me i will say something else uh if you want to actually see where the app was like created to and you want to distribute this for whatever reason let's go back to like debug or i'm just going to one of these things to see where the exe file was output to let me just make that a little bit wider so you can see i like to use this output console sometimes to just quickly grab the path so this is my exe file that we were debugging there there's a debug build you'll probably want to use a release build but anyway here is my like directx 12 example uh let's actually do something cool though i like that layout let's go ahead and grab that iron gui ini file and we'll pop it into this debug thing and overwrite this one just so that we retain our layout and that's it right we now have our application there's a lot of like debug symbols and stuff that we really don't need um it all builds into a static library right so this little my app situation my app is now literally just this exe file and this ini file right if we grab that put into an isolated directory so it's clear what actually goes into this rename this select my app we've made an application we've made a c plus application that is like two megabytes again this is a debug build so i regret everything it'll be much smaller and much let's actually do that let's just build a let's make a release build i just did a build all which is not what i wanted to do let's just build this specifically and again it's just going to put it into the release directory here it is 473 kilobytes let's go back to our my app and uh we'll just delete that replace that enter there's our release build up and running done ship it it's literally ready well actually we do get that console window though so maybe i'll take back my regular ship thing let's go back into the release configuration here and to link a system and we will just set this to be windows instead uh let's go ahead and rebuild that now we will get a linking error over here because of win main i'd honestly the i feel like the win32 example should definitely include that instead but you basically have to i don't remember the win main like function but for windows application you have to use uh the win main entry point so let's go ahead and quickly we don't really need all this fancy stuff do we f5 just double check okay now we get um no console being allocated there which is good so if we go back to my app and uh go ahead and go into release copy that you know the drill paste it in my app enter no console ready to ship i can't believe it's not butter i mean i can't believe that was that easy if you want to see some more content around i'm gooey definitely let me know as i mentioned i can go a little bit deeper into how to actually set this up from scratch not using their examples but you know how you would set it up if you had like an existing library or game engine or something like that or if you want to see some more like styling stuff so how to get it actually looking nice and how to get it to look more like hazel all that stuff let me know as well hope you guys enjoyed the video hope it was helpful to you hope this will help you out with your c plus application development if you need a website or a web server definitely check out hosting.com the link will be in the description below i will see you guys next time goodbye [Music] you

Channel: The Cherno

Views: 891,983

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

Id: vWXrFetSH8w

Length: 25min 59sec (1559 seconds)

Published: Fri Feb 11 2022