Programming a GUI Library for my New Game

A slightly more technical devlog video this week, as I talk about how I'm implementing a new GUI system for my city-builder game.
My previous game "Equilinox":
store.steampowered.com/app/85...
Text tutorial:
• OpenGL 3D Game Tutoria...
Get access to the code and support the channel on Patreon:
/ thinmatrix
You can follow the progress of the game on my social media:
Twitter: / thinmatrix
Instagram: / thinmatrix
Facebook: / thinmatrix
Trello: trello.com/b/BR79CTWQ/city-bu...
Email: [e-mail]
Background music by Jamal Green:
/ jamalgreenmusic
Outro music by Dannek Studio:
/ dannekstudio
#devlog

[@Danidev]

Really enjoyed this one, so interesting how you tackle the different problems and explain them! I particularly liked the rounded corner solution!

[@raz-gamedevelopmenttutoria6977]

Aye my g Dani what's up :)

[@raz-gamedevelopmenttutoria6977]

Also could you see my devlog if you want honestly

[@69bruh]

Reply or milk is bad (Obv orange juice is good but milk is better duh)

[@Wheezr]

Damn dani didn't know you were a superfan

[@yasin_karaaslan]

lol Dani

[@ThinMatrix]

I'm sure some people will be wondering why I don't just use an existing library (or game engine in general) and the main reason is simply that I enjoy it! I do game development because it's my passion and making the engine myself is a big part of that for me. I find working on the low-level rendering code and structure of the engine one of the most interesting parts of game development. If engine development doesn't interest you then I would absolutely recommend using an existing engine. By the way - I'm only working on the basic GUI system at the moment which I will later use to create the GUI in this new game. The GUIs that are shown in this video were just being used to test the system and aren't really anything to do with the game.

[@equation1321]

are you from sweden?

[@pengie_]

Thank you for your explanations on your Gui system, feels like it came at the perfect time because I'm developing my game and I've got a working UI system that works for resizing but felt like the code was a bit messy and repetitive in some places but your constraint system gave me some good ideas. Love the content and keep up the amazing work as always.

[@hrmny_]

You should still try IntelliJ IDEA 🙃 Potentially with the Material Theme if you care about that

[@_gamma.]

I was curious of why you rolled your own engine, but you've already answered my questions! I think the way you've designed the UI library is really cool too, thank you for sharing your progress!

[@thehambone1454]

ThinMatrix I too enjoy the low level stuff :). So much so I really don’t even consider myself a game designer!

[@MarcusMeyerTricks]

So glad you are doing a new series. I really enjoyed the last one!

[@VoicesFromTheDark]

These videos have a calming effect on me that few other series on KZbin have. It's wonderful to watch you and your projects grow! 😍

[@999Souls]

Exactly my thoughts

[@PerisK4]

Can you recommend some similar series?

[@VoicesFromTheDark]

@@PerisK4 I watch Dani from time to time. His dev vlogs are pretty relaxed too, though a bit more memey kzbin.info/www/bejne/qoW3daKHhpWJiMU

[@jasonrubik]

Not related at all ( DIY construction versus game dev ) but this guy is very relaxing as well, and has some of the best production quality in the category : kzbin.info/www/bejne/bWi8aHd-m9R5hc0

[@dragonminz602]

Glad i found you! It`s nice to see, that someone else writes everything by himself :) You motivate me realy to go on

[@shade0636]

He didn't write everything by himself.

[@user-do1oe5uh6z]

@@shade0636 you know what he means... come on...

[@gabriel-vo3hu]

I really love how youre showing us code and explaining your systems!

[@Lasher122]

I love your style, you are so calm, you know when to take a break and you can plan your work. Best of luck in your projects, I will absolutely continue to follow your stuff!

[@itskeopi]

I am beyond excited about seeing new videos from you!

[@515sensei]

Your desk setup is amazing! Love how it's connected to nature!

[@reza7105]

Great devlog as always! Actually quite enjoyed the more technical side of things, I wouldn't mind if you showed us more of the technical stuff in future videos as I think more people here would be interested in it. Can't wait to see next week's video when we finally get to see the first gameplay mechanics!

[@TonsOfHunStudios]

Agreed!

[@cpottzy8944]

So relaxing watching you work. My wife and I watch every video you come out with! We love city building games, so can't wait to see this journey!

[@codestealthy]

Very cool video! Excited to see the rest of your progress! I like the way you explain how you do things! Easy to understand what you are doing!

[@vernisan]

Watching yours videos is so relaxing! Thank you so much for doing this. I´ve been struggling with opengl concepts for years, but watching your series made it much easier to grasp. Keep up the great work and being the awesome person you are!

[@ThinMatrix]

Thanks a lot for the nice comment :)

[@IOSoraOI]

Hope development has been going well! You're one of the first indie devs I subbed to for watching dev logs and still one of my favorites!

[@Demonnof]

really happy to see more of your thought process while coding very nice

[@liamsutton6202]

Loved the visual demonstrations of the things you're implementing! :D

[@FergusGriggs]

4:23 That is some sleek UI, looking amazing

[@PhodexGames]

Great you are back. Another journey another opportunity to make a great game! Best of luck!

[@marcosteinke]

I always watched your equilinox videos and was amazed how far your game developed... Now seeing you creating a new game and being at the stage as I was when I quit my game, it motivates myself to continue

[@TonsOfHunStudios]

What is your game about?

[@PimStoit]

I love your vlogs. They're a excellent mixture of game development behind-the-scenes and a view into your life. I'm absolutely a fan!

[@TonsOfHunStudios]

Agreed! They are both entertaining and informative!

[@Mohammad-tw7cq]

Always happy to see a new video and to see you code and cook.

[@SnutiHQ]

Those rounded corners look so beautiful! 😍 See the benefit of making a system where you are fully in control. 💪

[@wokarol]

That looks awesome and so clean :D I love thought out systems like that

[@smyk1975]

Your great taste in everything you do also shows through in your code.

[@felipeaugustomarques1725]

Hey Thin, I'm learning about shaders and your example of how to do rounded rectangles made it so clear to create an algorithm. Thank you

[@lee-n7422]

I've only seen this video by you but I already think that you're a super inspirational person! Scripting within an engine is pretty tough and you write an entire game on your own - really impressive.

[@TonsOfHunStudios]

Agreed!

[@LittleMikeStarCraft]

Its amazing how much the fluid transitions really make it look better.

[@ccricers]

First time I've visited this channel for dev logs, and I'm really jealous of the outdoor view from your office!

[@rawrimnotapuppy]

The timing on this video was great! I have been working on a small 2D Java game engine in my rare free time for awhile now and just in the past couple weeks I have playing around with a simple GUI system. Learning about game engines and hacking away on one is tons of fun and it is awesome seeing another developer with a similar mindset. Thanks for yet another inspirational video!

[@TonsOfHunStudios]

Awesome! What's your game about?

[@rishon1273]

Your PC setup looks so serene. I even took a couple pages out of your book when setting up my own new programming environment. I’ve heard that even having pictures of nature in offices can help increase productivity to a certain degree. It looks like you put some real thought into how you set it up. I’d be really interested in watching a video dedicated to that topic.

[@tyrdledevarchive7794]

Watching these devlogs are so inspiring, I am currently studying Game Development and we are using Unity, which is a powerful tool and I am falling in love with it, but the reason I got into programming anything in the first place is because I liked making things from scratch, I loved having control over every little thing and trying to make it perfect. Watching you go step by step building what looks to be a really efficient and dynamic game engine, and its just so inspiring it makes me want to learn OpenGL just so I can do the same. I look forward to seeing your future videos!

[@NinjarioPicmin]

hi there, may i ask where you are studying game development :) ?

[@tyrdledevarchive7794]

@@NinjarioPicmin Sorry for the late reply, I am not used to having KZbin notifications XD I am studying game development at TAFE in Australia.

[@chenz4658]

IDK why your video popped up on my youtube but your video successfully attracted my attention! Great work so far by yourself and keep it up!

[@marl3x]

The UI-System is so freaking cool! Good job!

[@JoshuaKisb]

wow... inspirational i spent the whole day procrastinating and there he is... getting stuff done

[@waynevanson277]

I'm loving all the code implementations. I come from typescript so it's interesting to see UI handled in java. Keep up the great videos and good luck with the game!

[@eshvartz]

Good luck with the new lib mate :)

[@stainlessdroid3249]

what a beautiful place for code you have there! I love it

[@lilcatfriend4575]

It's awesome to have you back! You're the best indie dev on youtube 😁

[@Hades948]

Really excited for this series! I loved Equilinox and I'm sure this game will be even better :D Really glad that everything has worked out for you, Karl!

[@ThinMatrix]

Thank you :)

[@JonasTyroller]

Scaling UI with the screen size can definitely be a bit tricky especially when you combine it with an option to scale the UI in the settings. I like the solution you found for it. Looks quite easy to use now. Also 8:28 I didn't know you're painting. Nice.

[@ThinMatrix]

Yeah, allowing the display to be resizeable adds rather a lot more complexity; it has been quite a pain to implement at some stages! But I think I've sorted it now, and hopefully won't have to worry about it again :P

[@zatso4617]

Keep it up man! I love this so much!

[@ThylineTheGay]

Gosh your videos are so relaxing!

[@widden_]

I absolutely love this videos and I don't even play games, but as a developer this is something that inspires me to be better! Very happy that you started a new series, a new game, a new adventure. I which you all the luck!

[@ThinMatrix]

Thank you! :)

[@collwyr]

damn your motivation kicks me in the dirt everytime i see you progress in making games.

[@dousalproductions6152]

such an inspiration! ive only been watching you since the end of the equilinox devcycle but you have changed my outlook on so many things! also, about the scalable ui, perhaps the player shoud be able to resize it like someone could with a tab on a computer. i dont know, just seems interesting seeing as its a city building game, that kinda customization would be cool

[@TonsOfHunStudios]

Agreed!

[@Pe0ads]

So impressed with you rolling your own engine, very cool to watch as I enjoy this kind of low-level programming but don’t get to do much as a web developer!

[@Avidi]

Beautiful work as always man! :D

[@ThinMatrix]

Thanks!

[@rccsab]

Wow! Awesome stuff man!

[@SausageTaste]

idk since when but im glad to see you started to use dark theme! The video is much easier for my eyes now.

[@TheKiwiKingdom]

Really cool to see you do another one of this and it excites me to see you making your own engine.... I was more of a game programmer than game engine designer... I tried to make C++ engine and felt bored, but I like your tests are really coming along nicely. :D I also like editing for this video, it is amazing. I have only ever used Java for minecraft modding and when I was learning Java a few years ago, kinda nostalgic seeing these videos too.

[@SrIgort]

Some time ago I started my own C++ engine too... Bro, it's absurdly complicated, I really understand why you got bored, I get bored all the time because EVERY F*CKING TIME I hit a wall and need to figure out how get through it... But I will not give up, because I really want to do it and create a really cool game with it :)

[@MartinBargados]

I'm really looking forward for this games and many more, I am a fun of yours. Would like to see some teamwork production in the future to delegate important tasks like history, drawing and many more, what turns out it's always interesting to see :)

[@jonf9989]

Still. the cooking segment was still the best. This is probably D best game DevVlog i've seen so far. Your work station is superb!

[@Hexful]

Your office is how I've always wanted it, it's breathtakingly beautiful.

[@zahirkhan778]

Whenever I watch your devlogs I start thinking about what am I doing with my life! These videos inspire me to do something that makes me happy.

[@TonsOfHunStudios]

Yes dude, go for it! If you don't mind me asking, what is it you want to do?

[@zahirkhan778]

@@TonsOfHunStudios I have a list of many things I want to do . Right now I want to make KZbin videos on factorio and modding in factorio. Come morning and I will forget and go back to wasting time :(

[@TonsOfHunStudios]

@@zahirkhan778 Cool! My advice would be to pick one to start with, then once you build the habit you can start the other.

[@libaty6438]

I love it when you film the nature or the food you cooked.

[@TheBasyx]

I hope you know how much poeple that watch you, love you and your style of videos. You are just so pleasant to watch! Also the only youtuber I watch that consistently has 0 dislikes when I watch the videos.

[@ThinMatrix]

Thank you! :)

[@artem_hilia]

1:22 "centered horizontally"

[@ThinMatrix]

You have to use a bit of imagination ;)

[@undefinedchannel9916]

What about it?

[@patrick1532]

Good lord that food looked absolutely delicious, was not expecting this video to make my mouth water because of juicy code AND juicy food

[@gigonio]

Aah i love your vids! Keep up the good work!

[@guilhermesoster111]

Nice! Please do more technical devlogs :)

[@NeoChromer]

I'm just amazed that you are working all those years with Eclipse. Kudos to you !

[@n8style]

love the constraints system, nicely done!

[@ThinMatrix]

Thanks!

[@fiatmultiplaa]

This is your most beautiful setup. Never move from here.

[@tongshen6610]

This is what I’m living and striving for. Making beautiful, elegant, robust system! I somehow manage to forget it

[@rcookie5128]

so much flexibility with the UI system!

[@igorock4jesus]

Thanks! It's so great. I repeated your concept via Constrains. more thanks!

[@ahmadrosid3250]

I really enjoyed your video, thanks.

[@xuanhungdo7285]

Hi, thanks for taking us to the event! :D

[@Br4nd0nS4n7os1995]

One word: Beautiful!

[@keanu_]

Das UI sieht echt gut aus! Besonders die runden Ecken gefallen mir. 😆

[@handlechar568]

That clean code tho. EDIT: Spoke too soon , missing spaces on lines 64 and 69 of UIRenderer, you are so fired XD.

[@Xusemeh]

*69* Nice.

[@FrostDriveX]

It's like all this guy does in life is the right things. He never gets on youtube and wastes life watching videos, never wastes life checking social media. He works. He goes outside, and he cooks with friends. This guys got it figured out.

[@Noctureal]

In the past I have created my own 2D game engine also with Java. It was one of major projects I had back when I was studying computer sciences. I have followed your journey from long time and it has been really great to see how you have developed and how your engine has developed. I personally didn't want to jump into developing engine anymore as I do have full time job and game development is just a hobby so I stick with existing engines. I believe your journey is really inspiring for some people who want to try get into game development and maybe even want to make it from scratch! Keep going with these amazing things.

[@juuuuuj956]

have been waiting for this!

[@Niko-iw1sr]

Thank you for motivating me!

[@carrapaz3645]

Just subbed, very nice work

[@willcurry500]

How do you have friends in all of these countries? It’s awesome

[@ChrisD__]

The internet is global!

[@ericlamotte6581]

Become an expat for your work, and/or join “internations” for the expats near you. Or simply work in the UAE and you’ll meet thousands. It’s not hard especially if you already live in Europe.

[@515sensei]

@@ericlamotte6581 hey man, what UAE stands for? United Arab Emirates?

[@ericlamotte6581]

515sensei lol yes.

[@LeoCeregaArtist]

poor people, low social class, dont have nothing to do in their friendlists, thats for sure.....damn élites

[@a7b641]

This is what i want. A clean room, a beautiful place to live, friends, and just ahhh....

[@ThePotatoLlamaz]

I really can't believe how far you've come man, not in an offensive way though. I remember stumbling upon your channel when you had 30k subscribers and were working on Equilinox, you've gone so far

[@TonsOfHunStudios]

He has hasn't he!

[@20GK20]

amazing room

[@deecoder4497]

You Sir, are an inspiration..... and an excellent one...❤❤

[@EK-ck2xf]

Man, that food dish looked delicious!

[@osmium2944]

You Are A Monster Bro ! GG

[@KingJellyfishII]

Wow, I don't know whether this inspires me like crazy or just makes me annoyed that I can't be this good at coding yet. Just saw a video on the other game you mentioned and it looks absolutely awesome.

[@TonsOfHunStudios]

You can to be good enough! I'd imagine it took him years to get to this point and a lot of hard work. Just keep pushing forward and getting better!

[@KingJellyfishII]

@@TonsOfHunStudios yeah, that's why I mentioned 'yet'. I imagine it does take a long, long time to become very good.

[@TonsOfHunStudios]

@@KingJellyfishII Yeah true!

[@guy1524]

Lol at that "lake" 😂. The same thing happened with me last weekend!

[@omarakhtar3075]

Loving your videos, very informative and inspirational for us aspiring game developers. If it's not too rude.... could you do a video on the marketing and finances of Equilinox. You know how much time you spent marketing, what kind of materials you used, which forums you used, which outlets you sold on, how many hours you spent developing the game, how many copies you sold, which platforms made you the most money (steam, itchio etc.). As always, looking forward to your next video. Good luck

[@TonsOfHunStudios]

I would also like to see a marketing video! I'd imagine a lot of it was from KZbin, but seeing the details would be great!

[@PhooGiSucky]

Really elegant constraint system. This video motivated me to implement something similar in a game I'm working on in C++. It's more tricky than this video lets on, both mathematically and from a software engineering perspective! Well, at least if you want to support constraints between elements with the same parent (e.g. constrain an element to have half the width of another element). The working solution I finally ended up with uses linear programming and dynamically builds and solves the linear programming problem upon resize.

[@AaronGrosch29]

Me this morning: "I feel like I've not seen a ThinMatrix devlog recently. That makes me sad." You: "Here! Don't be sad." Me: *Smile*

[@voxelrifts]

Thats what I thought!

[@adrianobonzanigo9253]

Woah, awesome devlog, I really enjoyed it! And, an idea that came to my mind, how about using cell shading in your game? PS: can you pleeeease play a little bit of piano in your next vid? That would be awesome! =)

[@warsin8641]

Dude I remember asking you to add in goats and you did in your other game❤️ thanks I lost your channel for a while

[@TonsOfHunStudios]

Yeah, he really listened to the community on Equilinox, and I expect him to do the same with this game as well!

[@TwinklyTanyaPlays]

I love how "the lake" was just a bunch of trees. 😂👌🏻

[@jmanindahizouse]

Recommendation: Perhaps post some videos dedicated to various algos used in game dev in a 3Blue1Brown-y style. Your relaxing, organized demeaner would be perfect for that kind of content. Plus, more tuts means more new subs!

[@wesleyjanse6600]

Quality content.

[@fixer8173]

This is impressive stuff for me as a webdev, we (as webedevs) don't need to worry about so many things as rounding corners or letter spacing, another thing is to put it in a valid/matching object structure to build reusable solution for later projects. Interesting stuff as always :)

[@nokinobi]

looks nice

[@btarg1]

I love the look of it so far! TMEngine is getting along nicely. (or whatever you call it, I just like TMengine lol)

[@Speiger]

The new UI looks epic. Far more advanced then I have wroten mine. (Also I totally see JavaSwing in there as inspiration) I might want to take some inspiration from you there if that is fine with you? Just 1 Tiny warning about shaders: If statements that are not using "Uniform" variables are basically BAD. Its the worst thing you can do. In general any "IF" inside of a shader is the worst thing you can do. (Like you have to avoid them at all costs unless something becomes impossible) For every single if that you put into a shader you 0.5x the performance of the shader itself. so 4 ifs make it at 0.125% of the total performance. Because the OpenGL shader basically duplicates the code for every possible if and runs it simulatiusly and then compares the results to select what to take. (General GPU Processors are streaming processors. So Logic in terms of "if" is not what they are good at. You have to convert these ifs into math equasions to get the result you want)

[@ThinMatrix]

Thanks! Of course you can take inspiration from it :) And about the if-statements, yeah I know they're not great - I've been trying to find a way to replace them but haven't managed to come up with a decent solution yet. Any ideas?

[@Kitulous]

Are GPUs good at comparing numbers (less than, greater or equal than, etc)?

[@peabrainiac6370]

It is true that branching can have quite a big performance impact on gpus, but I don't think it's as bad as you described it there. I've been writing some very heavy shaders in the past (often with like ifs in for-loops and stuff like that), and it just isn't true that the performance gets cut in half with **every** if-statement. As I understand it, when the gpu hits a branch it executes both possible paths there and only keeps the fitting result for each pixel, but it doesn't compute the whole shader twice. So using lots of ifs in sequence makes the shader about 2x slower in total, not per if.

[@superknife24]

@@ThinMatrix I think you've actually given yourself a pretty good hint. you mention how you test the radius before determining whether you color the pixel or not. perhaps instead of an if statement to determine that, you convert the entire thing into a transparency equation that is clamped at 0 (say if it exceeds the radius). if the pixel is inside the UI box plus the radius (depending on the direction, this might get complicated), that should somehow be greater than 0. also, in gpu programming (whether this works in shaders im not sure), you can mitigate the impact of branches by coalescing all similar results together (i.e., have as many true branches running simultaneously as possible) into thread blocks. this way branch prediction can help out more, and you'd only pay the real penalty at the end with the mismatched results.

[@Speiger]

@@ThinMatrix Thanks for that. Well what you could do is caclulate if the area is in the box and then mix the color with a constant "invisible" color. Basically your best friends here are "sign" "max" "min" "mix" I can show you my Grid shader code that does someting like that If you are interested. And if that does not help I can try to convert the shader logic into math logic if that is fine by you.

[@MoZenLen]

Still inspire me :)

[@DrOptix]

I think you convinced me to start what I considered for around 2 years, something similar just for the exploration of low level stuff. I'm a software engineer or developer... sometimes the difference is so thin, but I have nothing to do with game dev. For around a year I played with Unity, but Unity gives you almost everything for granted. Maybe the world streaming and AI coding may be left programming wise, other than that I think you must be more of an artist :D. I think you convinced me enough to start something similar, but with Vulkan, OpenAL and pondering between modern C++ or C# as those are my strong points or even something more exotic like Kotlin/Native :D.

[@ZariunM]

Hey ich finde es geil deine Games 😍. Ich liebe es bitte mach noch mehr