I made my own UI library in C++, How to design a complicated system?

Поділитися
Вставка
  • Опубліковано 20 сер 2024
  • Join my Discord:
    / discord
    Wishlist Midnight Arrow on Steam:
    store.steampow...
    Join this channel if you want to support me 😻:
    / @lowlevelgamedev9330
    Check out Pika Engine, where Sushi is also at the moment:
    • So I Made My Own Game ...
    Glui: github.com/mee...
    Music: Evan King - Virtually Impossible
    Music: Evan King - Booty Shake Robot
    Music: Evan King - Spicy Boom
    / contextsensitive
    contextsensiti...

КОМЕНТАРІ • 80

  • @HalfAsleepSam
    @HalfAsleepSam Місяць тому +2

    I, too want me to learn this stuff but it just passes through me like radio waves.

  • @felipelopes3171
    @felipelopes3171 11 місяців тому +7

    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...

    • @lowlevelgamedev9330
      @lowlevelgamedev9330  11 місяців тому

      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.

    • @felipelopes3171
      @felipelopes3171 7 місяців тому +1

      @@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.

  • @plabankumarmondal
    @plabankumarmondal 11 місяців тому +31

    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++

    • @lucy-pero
      @lucy-pero 11 місяців тому +7

      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.

    • @lowlevelgamedev9330
      @lowlevelgamedev9330  11 місяців тому +3

      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

    • @aksakalaradhita
      @aksakalaradhita 11 місяців тому +2

      There are easier alternative build system like premake, ninja, or scons. So you can avoid Cmake

    • @TinyGhost42
      @TinyGhost42 Місяць тому

      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.

  • @amigaworkbench720
    @amigaworkbench720 10 днів тому

    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.

  • @veto_5762
    @veto_5762 22 дні тому

    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

  • @AgnisNeZvers
    @AgnisNeZvers 11 місяців тому +2

    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.

    • @lowlevelgamedev9330
      @lowlevelgamedev9330  11 місяців тому +2

      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)

    • @AgnisNeZvers
      @AgnisNeZvers 11 місяців тому

      @@lowlevelgamedev9330 If you want to torture yourself - add features like menu transition and UI element state transitions (hover/pressed).

  • @anonimowelwiatko4455
    @anonimowelwiatko4455 10 місяців тому +6

    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?

    • @BasPower12
      @BasPower12 7 місяців тому

      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

  • @kgola3569
    @kgola3569 11 місяців тому +2

    Bro, I love your videos!

  • @rmt3589
    @rmt3589 11 місяців тому +5

    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.

    • @lowlevelgamedev9330
      @lowlevelgamedev9330  11 місяців тому +3

      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 😂😂

    • @rmt3589
      @rmt3589 11 місяців тому +1

      @@lowlevelgamedev9330 But... I'm already fluent in HTML and CSS... T^T

    • @siniarskimar
      @siniarskimar 11 місяців тому +1

      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.

  • @MahdiyDev
    @MahdiyDev 11 місяців тому +3

    Amazing video

  • @edhahaz
    @edhahaz 8 місяців тому +1

    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.

  • @CheeseOfMasters
    @CheeseOfMasters 11 місяців тому +3

    Just finding my way into the gui space to create a small text-based adventure game, this is a very good introduction!

    • @lowlevelgamedev9330
      @lowlevelgamedev9330  11 місяців тому +1

      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

  • @that404nerd
    @that404nerd 11 місяців тому +2

    Yo i hope u make a video about a grouping system or layer system for a game engine. Btw this video is amazing yo

    • @lowlevelgamedev9330
      @lowlevelgamedev9330  11 місяців тому +1

      hm that would be a good idea thanks 💪💪

    • @that404nerd
      @that404nerd 11 місяців тому

      ​@@lowlevelgamedev9330thanks for the reply man!

  • @bloodaid
    @bloodaid 4 місяці тому +1

    What someone needs to do is to create a GPU accelerated GUI library that accepts CSS styling for all the elements.

  • @unethicql
    @unethicql 11 місяців тому

    Damn, its like 4 minutes, but my brain is overheated already.

  • @SuadoCowboy
    @SuadoCowboy 21 день тому

    Why "Spanish" is on the CC instead of Portuguese on the cat part 😭

  • @BasPower12
    @BasPower12 7 місяців тому

    I'm inspired and also wanna create my own C++ game engine

  • @madeso
    @madeso 8 місяців тому +1

    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.

  • @arl-t8d
    @arl-t8d 11 місяців тому +1

    Well well well

  • @astrahcat1212
    @astrahcat1212 10 місяців тому

    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.

    • @lowlevelgamedev9330
      @lowlevelgamedev9330  10 місяців тому

      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 💪💪💪💪

    • @astrahcat1212
      @astrahcat1212 10 місяців тому

      @@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.

  • @PaulMetalhero
    @PaulMetalhero 10 місяців тому +1

    Very nice work!
    Question: how do you implement scrolling inside a gui window? is it just a view matrix?
    I use OpenGL

    • @lowlevelgamedev9330
      @lowlevelgamedev9330  10 місяців тому +1

      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

    • @PaulMetalhero
      @PaulMetalhero 10 місяців тому

      Thanks@@lowlevelgamedev9330

  • @elenamariam5275
    @elenamariam5275 11 місяців тому

    Sushiiiii ❤❤❤

  • @EnLopXf
    @EnLopXf 11 місяців тому

    New subscriber more video tutorials about WinApi thank you

  • @oh-facts
    @oh-facts 11 місяців тому

    is this ui library meant for in game UI or debug/editor UI?

  • @GentleMannOfHats
    @GentleMannOfHats 11 місяців тому +1

    very cool. If only I understood C++

    • @lowlevelgamedev9330
      @lowlevelgamedev9330  11 місяців тому +1

      you could always start learning it

    • @GentleMannOfHats
      @GentleMannOfHats 11 місяців тому

      @@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.

  • @ulrich-tonmoy
    @ulrich-tonmoy 11 місяців тому

    Will you make any game engine or ui library in Zig

    • @CheeseOfMasters
      @CheeseOfMasters 11 місяців тому

      zig-gamedev has dear imgui bindings in a library called zgui. It's pretty easy to use with imgui c++ tutorials.

    • @seanomik6176
      @seanomik6176 11 місяців тому

      You can do this in zig as well as long as it has an opengl (or other API) wrapper

    • @ulrich-tonmoy
      @ulrich-tonmoy 11 місяців тому

      @@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

    • @seanomik6176
      @seanomik6176 11 місяців тому

      @@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.

    • @ulrich-tonmoy
      @ulrich-tonmoy 11 місяців тому

      ​@@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.

  • @yuvu11hjg
    @yuvu11hjg 2 місяці тому +1

    Amog us

  • @linksword7110
    @linksword7110 11 місяців тому +1

    Amongus

  • @Slowxvibes
    @Slowxvibes 11 місяців тому +1

    amogus

  • @RuedigaTheSecond
    @RuedigaTheSecond 11 місяців тому

    Yooo

  • @lustydough
    @lustydough 11 місяців тому

    ayoyoyoyo

  • @korigamik
    @korigamik 11 місяців тому

    Oh fuck that ting notification sound. You made me deaf🤬🤬

  • @watchcrap1
    @watchcrap1 11 місяців тому +1

    Bootstrap in 2023 😂

    • @lowlevelgamedev9330
      @lowlevelgamedev9330  11 місяців тому

      I am not a web dev I don't know what is used there right now 😂😂😂 so take it only as an example

    • @andikasujanadi
      @andikasujanadi 11 місяців тому +1

      I left tailwind for bootstrap in 2023, what's wrong with it?