I wrote my UI from scratch in C++ using OpenGL, OpenAL and encapsulating the system mouse and key events. I build a "menu" by first adding a group specifier(i.e. PAGE or LINE), then adding the items to that group. Groups behave like a basic layout. A "PAGE" group will layout items vertically and a "LINE" group will layout items horizontally. I can also specify alignment for the group or item level. I only have a button, static-label and a scrollbar for controls.
i know it looks like that from the outside but it's not really an issue. You have so many choices on how to build your program and it can be as simple and as complex as you want. some people just write a short .bat file to build the whole thing. You could just write a small c++ program that builds the real program. Or just use premake, it's pretty good and simple. It can output a visual studio solution, or a Ninja file, which makes a super fast and simple build.
totally agree with you and that is way I have a few videos with cmake on my channel. The one called make your first c++ game now just explains how my cmake setup works so you never have to deal with it again. Maybe it helps I configured it as sane as possible
My solution for submenus is statemachine. Represent each state with a number. Or routine of each layout is abstracted into function and those functions used as a state.
Your code is interesting. I used to code in similar fashion while working at my first job. Now I kinda lean more into Clean Code approach. Both have their own pros and cons. I also started digging into CMake lately. It's not this hard actually, I might get grasp of it. I made once my GUI but it was very newbie approach. I want to take on this task soon and see how much I improved, adding layers of abstraction and making more scalable, easier to read and work with approach. I respect work you did and knowledge, passion and skills you are sharing with others. Definitely one of those types who like to write my own tools and use them. I think it's common between C++ programmers. Do you unit test what you write? Also, you made a lot of projects but do you plan on making something bigger, have your own purpose or you just enjoy process of making stuff and prototyping?
I'm a C++ learner. I barely have a tenth of the experience you have. I'm inspired and want to build by own build tools like you once I become a C++ game dev
Wait, you can use CSS for a game engine's UI!? I mean, I've heard of Unity CSS, but never considered CSS was an option for me. Would be amazing!!! Hopefully I can find a tutorial, and if not, hopefully Phind can help me.
yes and there are some ui intensive games that do that because they can more easily find people to work on their ui but please don't do it 😂😂. You are bringing a bigger echosystem than your entire game just to make some simple UI and now what was suppsed to be the simplest system becomes the most taxing and it slows down your game 😂😂
This kind of solution is more common in non-game user interfaces (for example GTK), where a subset of CSS is implemented. *Be warned*, just because you can, doesn't mean you should.
There is an interesting project (a bit old though) called Oui-Blendish that is a clone of an older Blender UI. It's still interesting, if for nothing else, for the components NanoVG and OUI. When it comes to programmatically handling and designing UIs, I’d say Java Swing is, in my opinion, the best organized and structured, and I would definitely use it as the design reference for my UI library.
Just now I've been wondering how to should I implement an UI in small drawing application I'm working just on and this just pops up on my feed, you just made me realize I'm overcomplicating myself
As someone with experience in UI programming (I wrote a desktop UI app from scratch), I think this video has several misconceptions and is a disservice to the community. Don't get me wrong, if you want to write your own UI library, go ahead and do it, but it's another thing when you don't report accurately why you're doing it and leading others to error. (1) in web development, visual editors are used all the time, not by the front-end developers, but by the UX designers. Although you can define everything in code, it's usually too tedious to do so, and there's pretty much no way you can compete with a skilled designer using visual tools just by writing code. For desktop apps, there are a lot of RAD tools where you can design the UI yourself and just by inheriting from the generated class you can do everything, and it's orders of magnitude faster. (2) the fact that UI libraries are event driven/use callbacks has nothing at all to do with visual editors. Even if you write everything using code, you still need to understand them. That's because every modern UI library (and by modern I mean after Windows 95 and the Unix OSes in the 80's) uses a display server as a backend, and only this display server knows when a user has performed some action. (3) what distinguishes immediate mode UI libraries from retained ones is not that it has a declarative hierarchy for its elements (every UI library has this). Immediate mode UI allows you greater control over the rendering process, while retained ones keep everything separate. That's why you use Dear ImGUI for games, where you want to overlay the UI on top of a scene, whereas if you use a retained library like Qt or wxWidgets, they don't have that functionality, the best they can do is give you a canvas where you can draw stuff using OpenGL or equivalent. (4) you did not even mention how every UI library solves the layout responsiveness problem. they have the concept of sizers, which can take a variable amount of space depending on the screen size, solving exactly the issues you explained in the video. Like I said, it's OK to write your own UI library, but if you do so, make sure to study beforehand what's already been done so that you actually code something useful...
Thanks for the feedback. I expected to get some feedback like this and I agree with you but I wanted to keep things simple so I ended up not mentioning some things.
@@rytif Thanks for your thought provoking comment. I did not attempt at all to hide the fact that I develop for web and enterprise, and it's indeed obvious from my comment. That doesn't change the content, though. This video has serious errors. I am not a game dev, and I also don't make videos saying how I'm developing an engine that's much better than what gamedevs use, because I know it takes a lot of work. That's not to say that gamedevs cannot make comments about other industries, as long as they are correct, of course. You need to have responsibility of what you publish, and that's not exclusive to software development, by the way.
The HTML code is just layout, that could easily be made in a visual tool, so no, I don't think you can draw the conclusion that a visual tool is worse from that.
well what you saw there uses imgui so it was not done by me but when Ill do my own scrolling I use my own 2D library tjat just does the computations by hand on the cpu. I don't recommand it tho not becaise of performance (it is totally fain on performance) but because it is harder to code and read than using matrixes
There aren't more gui libraries than there are engines. The reason there are "many" is because there are many languages and platforms. You also showed bootstrap, bootstrap is a component library not a gui library.
nice, I'm glad it helped 💪 the best advice I can give you is to make a good structured code and fix all of the things because UI is quite difficult and annoying and this will help you
@@ulrich-tonmoy you can try learning it in c++ first. It would help understand what you need to do to render in zig. That's what I did when I moved from c++ to rust.
@@seanomik6176 i m already building a game engine with c++ and learning c++ wont help cause zig gives the lowest level of control to users so theres not much in the standard lib like we have in c++ we have to code them ourselves yep Rust is like better C++ while Zig is like better C that gives you even lower hardware control but for game dev C/C++ still king and Zig might be added to the list cause you can use C/C++ interchangeably and also use zig as cross platform build system.
You don't like callbacks either!! Yessss thank you!! 🤔🤔🤔🤔🤔🤔 What you can do for creating animated UI, is use shaders for transitions and smooth animations, as of course you don't have any animator with keyframes and that would take forever and be useless to make for an individual project.
hm for animations I think I will premake some primitives to allow you to just move elements, I recomand to do the calculations on the cpu for simplicity and flexibility, there is no need to make them on the gpu, ill see when I get there thanks 💪💪💪💪
@@lowlevelgamedev9330Well, GPU is faster and because then you can use all kinds of free MIT licensed effects from ShaderToy and elsewhere online. It's all in GLSL only unfortunately though, so gotta re-write it.
@@lowlevelgamedev9330 I've been intrested in learning. I have wanted to try homebrewing games and C is one of the few options as the code ran on bare metal haha.
I wrote my UI from scratch in C++ using OpenGL, OpenAL and encapsulating the system mouse and key events. I build a "menu" by first adding a group specifier(i.e. PAGE or LINE), then adding the items to that group. Groups behave like a basic layout. A "PAGE" group will layout items vertically and a "LINE" group will layout items horizontally. I can also specify alignment for the group or item level. I only have a button, static-label and a scrollbar for controls.
I learned C++ in uni but I really hate build tools(eg CMake) in C++ ecosystem and that's the main reason I never got into creating projects with C++
i know it looks like that from the outside but it's not really an issue. You have so many choices on how to build your program and it can be as simple and as complex as you want. some people just write a short .bat file to build the whole thing. You could just write a small c++ program that builds the real program. Or just use premake, it's pretty good and simple. It can output a visual studio solution, or a Ninja file, which makes a super fast and simple build.
totally agree with you and that is way I have a few videos with cmake on my channel. The one called make your first c++ game now just explains how my cmake setup works so you never have to deal with it again. Maybe it helps I configured it as sane as possible
There are easier alternative build system like premake, ninja, or scons. So you can avoid Cmake
honestly, same. Add to that where i was using the new M1 chip at the time and it made it even more confusing for me.
Same im currently making one in c# which has been a breeze compared to build tools
Bro, I love your videos!
thank youu 💪
I, too want me to learn this stuff but it just passes through me like radio waves.
My solution for submenus is statemachine. Represent each state with a number. Or routine of each layout is abstracted into function and those functions used as a state.
yeah well a sumbenu is a state machine, sounds nice💪 I use a stack for my state machine (each menu has an id pushed om the stack)
@@lowlevelgamedev9330 If you want to torture yourself - add features like menu transition and UI element state transitions (hover/pressed).
Amazing video
thanks 💪💪
What someone needs to do is to create a GPU accelerated GUI library that accepts CSS styling for all the elements.
Your code is interesting. I used to code in similar fashion while working at my first job. Now I kinda lean more into Clean Code approach. Both have their own pros and cons. I also started digging into CMake lately. It's not this hard actually, I might get grasp of it. I made once my GUI but it was very newbie approach. I want to take on this task soon and see how much I improved, adding layers of abstraction and making more scalable, easier to read and work with approach. I respect work you did and knowledge, passion and skills you are sharing with others. Definitely one of those types who like to write my own tools and use them. I think it's common between C++ programmers.
Do you unit test what you write? Also, you made a lot of projects but do you plan on making something bigger, have your own purpose or you just enjoy process of making stuff and prototyping?
I'm a C++ learner. I barely have a tenth of the experience you have. I'm inspired and want to build by own build tools like you once I become a C++ game dev
Using C++ lambdas as the delegates in retained mode UIs is handy; it provides some of the high cohesion that immediate mode has.
Wait, you can use CSS for a game engine's UI!? I mean, I've heard of Unity CSS, but never considered CSS was an option for me. Would be amazing!!!
Hopefully I can find a tutorial, and if not, hopefully Phind can help me.
yes and there are some ui intensive games that do that because they can more easily find people to work on their ui but please don't do it 😂😂. You are bringing a bigger echosystem than your entire game just to make some simple UI and now what was suppsed to be the simplest system becomes the most taxing and it slows down your game 😂😂
@@lowlevelgamedev9330 But... I'm already fluent in HTML and CSS... T^T
This kind of solution is more common in non-game user interfaces (for example GTK), where a subset of CSS is implemented. *Be warned*, just because you can, doesn't mean you should.
There is an interesting project (a bit old though) called Oui-Blendish that is a clone of an older Blender UI. It's still interesting, if for nothing else,
for the components NanoVG and OUI.
When it comes to programmatically handling and designing UIs, I’d say Java Swing is, in my opinion, the best organized and structured, and I
would definitely use it as the design reference for my UI library.
Just now I've been wondering how to should I implement an UI in small drawing application I'm working just on and this just pops up on my feed, you just made me realize I'm overcomplicating myself
Yo i hope u make a video about a grouping system or layer system for a game engine. Btw this video is amazing yo
hm that would be a good idea thanks 💪💪
@@lowlevelgamedev9330thanks for the reply man!
As someone with experience in UI programming (I wrote a desktop UI app from scratch), I think this video has several misconceptions and is a disservice to the community. Don't get me wrong, if you want to write your own UI library, go ahead and do it, but it's another thing when you don't report accurately why you're doing it and leading others to error.
(1) in web development, visual editors are used all the time, not by the front-end developers, but by the UX designers. Although you can define everything in code, it's usually too tedious to do so, and there's pretty much no way you can compete with a skilled designer using visual tools just by writing code. For desktop apps, there are a lot of RAD tools where you can design the UI yourself and just by inheriting from the generated class you can do everything, and it's orders of magnitude faster.
(2) the fact that UI libraries are event driven/use callbacks has nothing at all to do with visual editors. Even if you write everything using code, you still need to understand them. That's because every modern UI library (and by modern I mean after Windows 95 and the Unix OSes in the 80's) uses a display server as a backend, and only this display server knows when a user has performed some action.
(3) what distinguishes immediate mode UI libraries from retained ones is not that it has a declarative hierarchy for its elements (every UI library has this). Immediate mode UI allows you greater control over the rendering process, while retained ones keep everything separate. That's why you use Dear ImGUI for games, where you want to overlay the UI on top of a scene, whereas if you use a retained library like Qt or wxWidgets, they don't have that functionality, the best they can do is give you a canvas where you can draw stuff using OpenGL or equivalent.
(4) you did not even mention how every UI library solves the layout responsiveness problem. they have the concept of sizers, which can take a variable amount of space depending on the screen size, solving exactly the issues you explained in the video.
Like I said, it's OK to write your own UI library, but if you do so, make sure to study beforehand what's already been done so that you actually code something useful...
Thanks for the feedback. I expected to get some feedback like this and I agree with you but I wanted to keep things simple so I ended up not mentioning some things.
@@rytif Thanks for your thought provoking comment. I did not attempt at all to hide the fact that I develop for web and enterprise, and it's indeed obvious from my comment. That doesn't change the content, though. This video has serious errors. I am not a game dev, and I also don't make videos saying how I'm developing an engine that's much better than what gamedevs use, because I know it takes a lot of work.
That's not to say that gamedevs cannot make comments about other industries, as long as they are correct, of course. You need to have responsibility of what you publish, and that's not exclusive to software development, by the way.
The HTML code is just layout, that could easily be made in a visual tool, so no, I don't think you can draw the conclusion that a visual tool is worse from that.
Very nice work!
Question: how do you implement scrolling inside a gui window? is it just a view matrix?
I use OpenGL
well what you saw there uses imgui so it was not done by me but when Ill do my own scrolling I use my own 2D library tjat just does the computations by hand on the cpu. I don't recommand it tho not becaise of performance (it is totally fain on performance) but because it is harder to code and read than using matrixes
Thanks@@lowlevelgamedev9330
Why "Spanish" is on the CC instead of Portuguese on the cat part 😭
I'm inspired and also wanna create my own C++ game engine
Well well well
well well well
There aren't more gui libraries than there are engines. The reason there are "many" is because there are many languages and platforms. You also showed bootstrap, bootstrap is a component library not a gui library.
Damn, its like 4 minutes, but my brain is overheated already.
😂😂
Just finding my way into the gui space to create a small text-based adventure game, this is a very good introduction!
nice, I'm glad it helped 💪 the best advice I can give you is to make a good structured code and fix all of the things because UI is quite difficult and annoying and this will help you
Will you make any game engine or ui library in Zig
zig-gamedev has dear imgui bindings in a library called zgui. It's pretty easy to use with imgui c++ tutorials.
You can do this in zig as well as long as it has an opengl (or other API) wrapper
@@seanomik6176 you dont need that you can also code platform specific what i mean is a tutorial to learn theres not much good Documentation to learn
@@ulrich-tonmoy you can try learning it in c++ first. It would help understand what you need to do to render in zig. That's what I did when I moved from c++ to rust.
@@seanomik6176 i m already building a game engine with c++
and learning c++ wont help cause zig gives the lowest level of control to users so theres not much in the standard lib like we have in c++ we have to code them ourselves
yep Rust is like better C++
while Zig is like better C that gives you even lower hardware control
but for game dev C/C++ still king and Zig might be added to the list cause you can use C/C++ interchangeably and also use zig as cross platform build system.
is this ui library meant for in game UI or debug/editor UI?
game ui, for debug editor UI ImGui is the way to go
You don't like callbacks either!! Yessss thank you!! 🤔🤔🤔🤔🤔🤔
What you can do for creating animated UI, is use shaders for transitions and smooth animations, as of course you don't have any animator with keyframes and that would take forever and be useless to make for an individual project.
hm for animations I think I will premake some primitives to allow you to just move elements, I recomand to do the calculations on the cpu for simplicity and flexibility, there is no need to make them on the gpu, ill see when I get there thanks 💪💪💪💪
@@lowlevelgamedev9330Well, GPU is faster and because then you can use all kinds of free MIT licensed effects from ShaderToy and elsewhere online. It's all in GLSL only unfortunately though, so gotta re-write it.
Sushiiiii ❤❤❤
yesss
New subscriber more video tutorials about WinApi thank you
yes they are on their way 💪💪
very cool. If only I understood C++
you could always start learning it
@@lowlevelgamedev9330 I've been intrested in learning. I have wanted to try homebrewing games and C is one of the few options as the code ran on bare metal haha.
Amongus
amogus 🗿
Oh fuck that ting notification sound. You made me deaf🤬🤬
sorry about that 😅😅
amogus
amogus
Yooo
yoooo
You got strong Russian accent.
It's Romanian
@diver2048 The gpysie land ?
Amog us
good, good
Bootstrap in 2023 😂
I am not a web dev I don't know what is used there right now 😂😂😂 so take it only as an example
I left tailwind for bootstrap in 2023, what's wrong with it?