Overhauling the UI in my Farming Game (still)

Devlog video about "Homegrown", a casual farming game I'm creating using my own engine.
More progress on the UI this week - tile examining, better icons, lighter inventory, buff tool-tips, and stripy health bars!
A big thanks to twistedcatcc for creating the fantastic designs: linktr.ee/twistedcat/
Support the channel on Patreon and get access to the game & code for Homegrown, the city-builder, and Equilinox:
/ thinmatrix
Play my previous game "Equilinox":
store.steampowered.com/app/85...
You can follow the progress of the game on my social media:
Twitter: / thinmatrix
Instagram: / thinmatrix
Facebook: / thinmatrix
Trello: trello.com/b/W3zkIJTM/farm
Email: [e-mail]
Background music by Jamal Green:
open.spotify.com/artist/50jTM...
Equipment (Amazon Affiliate Links):
Camera: amzn.to/491ayFZ
Desk Microphone: amzn.to/48Hs5mP
Camera Mic: amzn.to/48ZcRcE
Mouse: amzn.to/3Sn0v8J
Quick and easy bread recipe: • The 5 minute baguette
#devlog #Homegrown

[@maindepth8830]

I must say i really love the cozy vloggy vibes of this channel

[@alvin_row]

I really loved the examples sent by twistedcatcc! The idea of some UI having little vegetable/flowers is super cute. If you think they might be too obtrusive for general information panels, maybe you could incorporate them to special places like the shop UI.

[@Hoowwwww]

need some wild life - birds, butterflies, bees, bunnies, little bugs and cats idea: Cloud's shadow drop on the terrain, this effect will give life to your map

[@ThinMatrix]

Wildlife will definitely be coming at some point!

[@DanielMSantoss]

The cloud shadow idea sounds so cool, giving a sense of "motion" to the map thats amazing

[@Lewitje]

And wind!

[@rutchjohnson]

Yeah cloud shadows feel necessary. Even some wind streaks now and then when the weather gets blustery.

[@GamerMickey87]

I love this suggestion! Also, if you can have lakes or water ponds, the clouds could reflect there, which gives a very cozy ambient.

[@stysner4580]

For a very casual game maybe "bonuses" is a better term than "buffs"? Looking great!

[@simoncodrington]

Having a simple UI to showcase the main aspects of a tile is a good start, but having a secondary button (like pressing alt) or some other button to expand the UI to show advanced stats would be super handy. Having it like that means you can put your most important bits front and center but still give people the option of a more detailed look. While you can see the "weeds" and "water" on the tile, that's only a surface level look, when you have plants all clumped together with lots of things going on it's going to be hard to see exactly what that "single" plant you're looking at is doing. Another great vid mate, can't wait to see how it progresses

[@yowza9638]

Wanted to second this! It's good practice to have an audience in mind ("casual, cozy gamers"), but inevitably you'll get some minimaxers to whom you may be able to throw a bone or two

[@Tylru]

Could I recommend that when you're hovering over a tile in a certain view mode, it highlights (colours) the neighbouring tiles which the hovered tile provides buffs/debuffs to. That way when you're about to edit something you can tell whether it'll gain or lose you some bonuses nearby. Equally, the opposite could be true, mousing over something with buffs highlights the tiles that gives it buffs/debuffs.

[@MarsCBG]

Getting back into the sims (and it's modding community) recently and seeing twistedcat here was a nice coincidence. She makes some amazing stuff so taking inspiration from her is always bound to turn out well. The game is coming along wonderfully and the devlogs are always a nice relaxing treat!

[@OliviaTheVampyr]

Related to the content bars I would do is suggest is having different patterns for each color, thinking about accessibility

[@ThinMatrix]

Thanks, that's something worth considering. Although I think in the case of the fertilizers it's probably not necessary as the fertilizer/buff icon and name is shown right by it, so the colour isn't required to identify it.

[@SafalGaudel]

Always get a motivation after watching the video.

[@RedVelocityTV]

It would create more confusion and loses cohesion if anything

[@embeddedbastler6406]

What I would change in the tooltip of the gardening tools is to replace the size of the affected area, eg. 4x3, by a visual representation of squares. This makes it visually more pleasing to look at and easier to grasp.

[@hermitdude1921]

Great video as always! One thing for the inventory bar, if it isn't already implemented, make sure you can choose tool and item from the bar with key presses.

[@lucbloom]

Yea same with the “focused” tile. I expect esc would de-select.

[@ThinMatrix]

Thanks, will do!

[@Agent-oz9zu]

It's always a bloody good day when you upload

[@wadiegg]

Love your videos - always a good day when there is a new video 🙂

[@zekenebel]

A smile always pops whenever I see a new upload, In a sea of game devs that started a youtube channel for game dev to sell courses before even writing a single line of code. You really do stand out. Big inspiration for me to keep making games even after all these years. Keep up the good work !!!

[@GuilhermeGomes-rd8zm]

Let me start saying that I love your videos... very cozy and at the same time full of life (meaning nature and plants)

[@eboatwright_]

Looks amazing! Also AHHHHHH THIS IS SO CUTE 10:55

[@swiftdeath007]

What you can do if people want more info and stats, is give an option somewhere in the menu. Call it nerd stats or something like that, completely optional and gives players the ability to choose if they wanna see a bunch of stats and numbers, or the minimal style you're going for.

[@aryavatan]

I love the chill cozy vibes of your devlogs, and your progress every time really pushes me to stay as committed and productive for my project.

[@the-voracious-reader]

Your devlogs are always a treat to watch. Well annotated and calm vibes always. ✨

[@fbob987]

6:43 Quacks!

[@Frizzku]

yessss that game is very good!

[@petesies1856]

Loving watching this get developed! I would love to get into something like this once I am done with my studies and your videos are a constant (and cosy) source of inspiration :)

[@alangregoryvitek]

Love the UI updates to the toolbar! I think you have a nice balance of your style (with the playful shapes) and the cohesive lighter palette/icons from the fan’s mockups. Great work :)

[@diana_just_existing]

I so much like your vlogs! They are so cozy and warm and motivating to work and create!☺

[@fitemilkhero]

Love the vibes of these man, and am a big fan of your desk setup. Going to use this as a spark of inspiration when I redesign my office (:

[@johnosei826]

Keep going. you're really just too good at your craft!

[@NoVIcE_Source]

omg the artstyle is coming along really nicely

[@atakansss]

Thank you for providing us with good content mixed with vlog! I hope more videos will come more often.

[@marred2277]

The eye dropper icon really doesn't match the function of inspection. The magnifying glass as pictured in @twistedcatcc's design is much more fitting, although the one pictured in the video is flat, and needs more detail. The eye dropper usually means "pick some of this" for use elsewhere. edit: great video as always, and it's always fun to see Rufus, he couldn't be any more adorable

[@ThinMatrix]

That's true. I'm hoping to completely change that icon at some point though - to something that somehow shows that it relates to the terrain. I've failed so far in my attempts to create an icon that shows that though!

[@marred2277]

@@ThinMatrix only thing I can think of is either a magnifying glass over the "4 corner" tile selection cursor, or instead of a magnifying glass, an eye (again, with the selection cursor behind it). As in "looking closer at a tile"

[@JimmyForresterFellowes]

How about an information icon? Might fit well with an inspector tool. Quacks looked fun- me and my partner love that game too!

[@DigiBanks]

It is amazing how far this game has come over the last couple of years. You are such an inspiration to me.

[@fernandes_L]

Your art style is so good. Some time ago I also started a farming game very similar to yours, to practice what I've learned. It was very hard to make it look good, you did a great job

[@sebastianbrown7323]

Love the dev log updates! Really enjoy the food with friends!

[@quentingrignet4483]

Great work! Real nice and cozy devlog, love it! Keep up the good work!

[@ThinMatrix]

Thanks!

[@LifeOfMohammed]

I love that you are mixing up the shots a lot more with real life really adds to the videos! Like a little vlog of your life and the game dev stuff but yeah also the game dev stuff is looking awesome!

[@arseneleclerc3707]

Looks great, can't wait to see everything else!

[@Skeffles]

I'm really liking the style of this new UI, especially those striped content bars.

[@danielpadmore1429]

I love watching this game progress! I had a thought though about adding weather into the game. Weather could provide buffs and nerfs to different plants like watering tiles for you and such. Keep up the great work!

[@MxzStudio]

Beautiful ! Love it , nice video

[@williamist]

you're so talented man

[@dvnim0045]

I must say, YOU ARE MY INSPIRATION! ever since i came across your 10 years game dev journey video, i said to myself that "hey he started at my age, and he learn java in college just like me,". and since that moment i deleted my mindset which is "Java is bad" cuz that is what i hear from lots of developer and it makes me feels insecure. watching your video always makes me feel i have to be like him. and from that moment i tried to find lots of lwjgl tutorial and open gl and trying to polish my math skills. but there are no good tutorial well at least for me. but then i decided that screw it i dont care if its latest tutorial or not imma follow it. and i followed your tutorial. i'm at the fog tutorial for now and you explained it so well. when im feeling down and ever wanted to give up ill watch your socuwan devlog and think to myself that i cant give up yet. watching your socuwan devlog always makes me feel like "am i learning the right way? my maths skill is bad. i have to improve my problem solving skills." etc. and it kept me going. I've always wanted to know how can i approach learning stuff like this (math, problem solving, and advance concept) as a programmer and my mindset is always i want to be like you. point is i just wanted to say THANK YOU FOR BEING SUCH A GREAT TEACHER AND INSPIRATION FOR ME AND ALL OF US DEV OUT THERE.

[@ttextinction7273]

OMG. The game looks so clean and smooth and minimal. I love it.

[@ShadowDrakken]

The game is looking beautiful, and the stripy bars really helped give it a bit of polish

[@AudioCorrupted]

Great work!

[@phillipsmith5234]

This might be difficult to implement, but having little creeks or rivers that you can build bridges over and that water your plants would be so cute and fun. On a smaller scale, maybe you were already planning on doing this, but making the content bars rounded on both ends even when it isn't fully filled would look nice. I love how the game is looking!

[@bazyt1]

The UI tweaks all look excellent, imo 👍

[@ElianeGameDev]

As always, great progress and great video!

[@ThinMatrix]

Thank you!

[@gortilla]

Looks really good

[@WestVideoProduction]

You are living my dreamed life, I wish you the best !

[@BrandtEC07]

The UI is so visually satisfying to look at

[@nicolo.lazzaro]

The UI is coming along great! You could make it that clicking on the tile locks in place and extend the info panel to have best of both worlds

[@pvandekuijt]

Awesome update as always! You could animate the stripes of the bars slowly to indicate them depleting / actively changing? Also, the straight cut off looks a bit 'hard' for the game's style, so having a rounded right 'end cap' would look even better. That gives issues with continuing the pattern, you could fix it by scaling a mask or overlaying graphic on top of the bar instead of the bar itself!

[@bluesillybeard]

Screen space texturing might be a good option for that, since it's a UI.

[@pvandekuijt]

@@bluesillybeard how didn't I think of that. Great suggestion!

[@Jorge_Pronto]

I second this opinion!

[@cassandras.6369]

aside from coming back every video for the beautiful game development i just wanted to say that you actually inspired me to get houseplants for my own apartment! it really changed the space, keep up the good work bro 👍🏼

[@lags_a_lot_nl]

Great devlog as always! Another way I like getting more info on the moused over tile, would be to use ctrl, alt or shift for example. Desynced does this really well. Mousover would then give minimal info and with holding a keyboard button you expand the info. That way you would not need to click and click away from the tile. Just a thought ofcourse!

[@manumanu42250]

Hey 👋 I am working on a, totally unrelated, 3D-based user interface for a Home Automation project of mine. I had a hard time aligning actual user controls with the 3D model. I even decided to use a hacky workaround some time ago, and let the topic rest. However, after your last video, where you implemented the screenspace projection for your UI containers, that concept finally "clicked" with me and I was able to resolve the element positioning in my project, too. I still have that screenshot of your implementation in the todo of my Kanban 😆 Thx for the (unintended 🙈) nudge and keep on with your great work here 🙏Always curious what you work on next. Cheers!

[@MrOmega-cz9yo]

Hi ThinMatrix! Game is looking good! Your comment about having to type things out gave me a flashback to my DOS days. Heh. 😜

[@jumpkut]

UI’s really coming together nicely. Great work

[@ThinMatrix]

Thanks!

[@Dean_Irwin]

Even though the information is visible (such as the amount of weeds on the tile), I still think it would be nice to highlight this in the inspect panel, as a second form of confirmation there is an action that needs to be taken. This helps to reduce confusion I think. It doesn't have to be a large section, probably could just be one line of text. I also would add an alt-key or command-key that allows someone to quickly see an inspect panel for the hovered tile, just in case the player needs to do a quick check. The player can get a permanent tile-overview by clicking the inspect view, or press down one of the hotkeys and the panel pops up, and when they release the key, it goes away. I appreciate when simulation games have that feature.

[@jurikiin]

UI is one of the hardest part of game development for me. It always takes 10x longer than you think it will.. and even then it might not look amazing! It's impressive how much effort you're putting into it. UI can make or break a game, and is such an under appreciated aspect of video games. hoping to get better with my own UI design skills.

[@playerthree38]

that click-hold is magnificent. wish that was in more applications

[@mohammadpiramun5913]

man i truly love this kind a games such good video tnx ... im web developer and love know how to create game like this cute UI i loved good job

[@owdoogames]

Man, I need to get some more plants in my workspace. Game and UI is looking great, BTW!

[@arxci9402]

Looking good breh

[@Gmoceanx]

This is just a thought, I know you want to keep the UI minimal, but for things like Water or Weeds growing etc... Perhaps changing the way the panel looks itself. For instance, use the default UI window if the land plot is dry. If it's wet, maybe a blue-ish tint, or a blue border. For weeds, maybe along the edges of the panel have weeds growing out the side of it. Either way, I like the way everything looks.

[@larryd9577]

Die Quacksalber von Quedlingburg is a great game. Btw. the game is named after the very idyllic town Quedlingburg in the Harz.

[@_Spectre]

I love your content mate, keep it up! I’m the type of player that enjoys expanded tooltip’s in a game but understand why you’re implementing simplicity, so thought I’d make a suggestion; have you considered extended hovering providing more tooltip detail? Perhaps 5 seconds, then you provide the player all of the additional juicy detail.

[@JhonataCosmo]

The minimalist UI by twistedcat is realy great

[@roei7111999]

wow please add this amazing gaussian blur effect from her sketch to the panels, it is so pretty

[@gavin.d.m]

Looks good.

[@evan_game_dev]

For the connected to house bonus, you could use some sort of simple pathfinding algorithm from the bed to the house, figure out maybe the most common path tile used, and depending on the path tile, give it a different bonus (stone gives 2 buy dirt gives 1, for example)

[@kaiseraugustus1393]

I like to watch more of coding sections, which this video series is all about, developing and programming a game, rather the seeing you cooking or you doing garden stuff, or you being outside or your dog or whatever unnessecarily....This series has become more and more of a self presentation than logging the (game) development - hence devlog !!!!

[@jeffmiller8433]

I’ve been watching your videos for ever, and really love your content. Thank you! I have a couple of small ideas regarding subtle UI animations in 2 areas that you’ve shown here if you’re up for hearing them? Firstly the textured fertiliser bars that you showed off towards the end of the video. Instead of having arrows beneath them pointing left or right to indicate whether the resource is increasing or decreasing, why not animate the stripped bar texture either left or right. You’ll save some vertical space in the tooltip and convey the same information with just the bar itself. Secondly, the hover state on the toolbar items at the bottom: instead of scaling the entire UI element as one (background, stack number and item icon), I think it would look nicer to only scale the item icon and then just slightly increase the opacity of the background square so that it’s slightly more solid, leaving the stack number as is. I think the new UI looks fantastic, it gives me Nintendo wii vibes which hits a cozy nostalgia vibe for me. I also really love the sound design of click sound when you select the inspect tool. Keep doing what you’re doing! :)

[@MrCalls1]

8:12 I must say I like the market town symbol alot. I’m not attached to it, but I think it’s good as is.

[@michal_havlicek]

Great job as always! I think that a magnifying glass would be a good icon for the "examine" button :)

[@GamesBySaul]

Lovely devlog as always! You answered my concern as I was thinking it, about how you'll show the tooltips with your investigate/magnify tool, your method for that seems perfect really :P And also as always, your food looks fantastic, cookbook/cooking channel when! :D

[@devlayton]

I really woukd love a modern up to date java game development tutorial like this one.

[@averysmith8662]

Looks amazing! If you still are interested in offering more detail without overloading the hover ui, perhaps either a hold or toggle of ALT would expand more info that the casual gamer may not care about.

[@deepthoughts169]

U can add water levels of plant as vertical progress bar on either of the sides. Example: water bar on left and fertility bar on right

[@Hossimo]

I like the idea of holding a modifier to get more detailed information

[@perajarac]

3:55 idea: you can keep ui minimal but you can add some examine option to see how much for exmp compose there are or wet etc.that willl keep ui minimal but still give option to examine details

[@hamzahgamedev]

Your every video in itself is a masterclass for people like me who wants to learn game dev, devlog making, script writing and video editing. All the best for Home Grown. It looks super cute and cozy! ❣

[@OceanShark384]

I miss watching your videos!

[@DerekStobbe]

Quacks of Quedlinburg, love to see it!

[@bluemond100]

One subtle piece that may not matter much, but I kind of agree with what the person who gave the reference ui was doing. A magnifying glass seems better suited for your inspect button icon rather than an eyedropper. It's a bit more intuitive to the function, especially because an eyedropper usually implies selecting an object in the world as the item you want to use/place further

[@NoVIcE_Source]

I love your videos!

[@gooseberry41]

I think showing name of the plant in the infobox is a must. It's far from self evident, especially for people who are not very famiiar with the crops themselves. People might the whole live in urban area and not know how these crops looks, or they might be from a comletely different region with different native plants. And when a crop is not fully grown, and it looks like a stem and a copule of leaves, it's even harder to identify it. It will also be handy to have a faster way to call the infobox. Either by right mouse button click, or by holding a key (e.g. alt), like it's done in RimWorld.

[@ThinMatrix]

Yep, totally agree, the plant name will be shown in the info box. And right-clicking does instantly bring up the info box, and holding ctrl also puts you temporarily in inspect mode without having to unequip your current tool.

[@lukeb8349]

You should add an accessibility option to include all the "visual" info in the tile information tool so low visibility players can still get the information

[@JoshuaBarretto]

Nice video, I always enjoy these. I'm having a bit of a tough time discerning depth given the block-colour nature of the assets: I think a little bit of subtle ambient occlusion would go a long way toward helping with that.

[@andrediego6131]

I think you should definetly add seasons! Doing something similar to Stardew Valley would be awesome

[@finnwillow]

It might be a good idea to make the mouse over popups in the inspector tool buttons. That way you're not spammed with popups if you randomly move your mouse over them. The same can be done for the inventory but that's fine since you want easily accessible info when you open up the inventory. Also, for the bars, to get that rounded end, what you can do is take the color behind the bar and make a cutout of just the rounded end portion of the bar plus a little bit of leeway, and make it the color that I told you about. Then all you have to do is to draw it at the end of the bar, and make sure to apply the same cut thing on it. I love the game and can't wait to play it. Good luck m8!

[@DrunkGeko]

I think it would be very cool if the striped design on the bars actually moved according to the current state of that bar. To either replace or complement the arrows that show if the bar is increasing or decreasing

[@lucbloom]

I’m working un Unity and I WISH we had to program the UI. The constant switching between visual layout snd implementation is giving me a headache. Plus if you wat to know for instance, “list all labels that are center aligned?”… good luck. Even using prefabs, it feels like writing HTML without CSS. In my previous projects (own engine ❤️) UI was script driven. F5 and in 1/2 sec you saw the change. Monitor for file changes and reload only when the script compiles… heaven.

[@naturalevo180]

Yay new vid :D

[@jeanmanguy7900]

very nice to see the progress over the year! Why not add an object (like glasses or a book) to allow to display more stats? It never hurts to have an additional source of information, it might help colorblind people or people with not the best eyesight

[@Mikaminei]

Holy ****, he has uploaded!

[@iplayminecraft2248]

I feel like one way to have people be able to tell the specifics on visual detriments/bonuses without overfilling the examine menu is to have multiple examine tools. My idea is that you can click on the examine tool and it would open a drop down menu (or drop up or just a horizontal menu) and you can select a weed examiner or a bonus examiner

[@RosemaryWilliams49fruits]

I really love seeing your progress every time you update this game it's really inspiring and helpful for how to think about implementing systems and functionality when making a game, something I'm just starting to learn about how to do so I really enjoy and appreciate your videos. The inventory update looks much nicer, and I think your shop icon is very cute, though definitely the outlines need adjusting to better fit with the rest of your UI elements. As for the status bars and that texture, currently your graphics have very soft and rounded shapes, so I was thinking maybe using a gradient might compliment the rest of your game a bit more as far as visual language is concerned. Your menus/pop ups are all very soft in color, shape, and often include transparency elements it seems like, so perhaps trying to unify your design more by making the status bars follow those trends a bit more closely could nicely fit in with the rest of your design language? As for the texture you implemented here, it might just be me, but they remind me of cheap mobile games that get advertised to me when I'm trying to watch KZbin with the exception of the purple one which I like, but it feels out of place with the rest of your game to me.

[@ThinMatrix]

Thanks a lot for the feedback! I'll definitely try using a gradient, maybe that would make more sense than the stripes.

[@mihai.13]

For anyone wondering the boardgame is called The Quacks of Quedlinburg.

[@unalive_me]

So vibey, this is how I aspire to be when programming 😂

[@kannpai]

Cooking devlog next? It looks amazing 😮

[@R4ngeR4pidz]

Looks great! Just as a general bit of feedback, the first impression I would have of the eyedropper icon is that I can select a crop to plant, essentially quick-selecting it, without having to browse through the list of available crops. The inspection feature it offers I would expect from a magnifying glass icon :) For the portion about locking the examine information on a specific tile, it might also be an idea to allow the user to press and hold a button to keep the examine window of the current tile open, allowing the mouse to move around freely - inspecting the buffs in the examine window

[@ThinMatrix]

Thanks for the feedback, both good ideas!

[@MyWebhack]

nice. Thanks for the video. For the inspect tool will be great to have it in a shortcut like shit or ctrl

[@mikietonon]

YES

[@Draconicrose]

Wonderful as always. Kinda wish the progress bars still had their rounded edge but I'm not sure if the openGL workaround can do that.