Procedurally Generating Icons for my Farming Game

hello everyone and welcome to another dead Blog video for homegrown in this video I'm going to be showing you a really interesting update that I've been working on recently which is procedurally generating the icons for the tools in homegrown the reason I wanted to do this is because the tool upgrade system in the game which allows you to upgrade the stats of your tools has always felt a little bit underwhelming because no matter how much you upgraded the tool the icon never visually changed in any way and what I really wanted was for every upgrade to have some visual impact on some aspect of the icon there were obviously way too many stack combinations though for me to manually make the icon for every single possibility so instead I decided to go down the procedural generation route I filmed the whole thing as I was going along as always so let me now take you back to 3 weeks ago where it all started so it is Wednesday the 17th of April I just made the final touches to the shop system yesterday so today I'm ready to get started with a new feature that I'm very excited about the icon generation system uh this is going to be really fun it's a brand new system that I get to design and build from scratch it's going to involve lots of different topics from maths and logic to procedural generation uh 3D rendering Shader effects some postprocessing as well so can't wait to get started and I'm going to begin today by planning out and designing the whole [Music] system so planning session done I've got a pretty good idea of how this is all going to work now and the general idea is pretty simple so I'm going to break all of the tools down into individual parts and for each of those parts I'm going to create multiple model variations and then during the generation the first part is going to assemble um the full 3d model by choosing the relevant parts and coloring them appropriately depending on the item stats so that will create a unique 3D model which will then go into the icon renderer which is essentially just going to take a picture of the model apply some filters add a nice outline around it make it look like an icon and that will spit out a texture which can then be used as the items icon so that's the plan and I'm going to get into the programming now and I'm going to start off with the renderer so that I can see what I'm [Music] doing so when I'm setting up a new rendering system my first task is always just to get anything rendered as quickly as possible just so that I have a a visual starting point to build up from so I've just created a super simple render process here using fbos to allow me to render to a tech texture instead of to the screen and after a bit of trouble I've managed to get it working here I'm rendering the turnip model and I'm rendering it to this texture which I can now use just like any other texture in my UI just been doing some more work on the renderer so it's now able to render these item models which are the assembled 3D models from this diagram so to test this I've just created these three simple model parts for a spade and then in the code here you can see that I'm assembling those three parts into a single model I then set the color of each of those parts individually and the assembled model then gets sent off to be rendered and in the game you can see that that has been rendered without any problems so that's actually all I want to do with the renderer for now um I'll come back to it at the end and do all the Shader effects to make these renders look a bit more like icons but for now I want to get started on actually generating and assembling the 3D models for the items so last bit of progress for this afternoon the items can now use generated icons and to do this I have to give them the icon Creator component which I've just been programming this allows me to specify Which models should be used for the items icon and then when the game loads that all gets loaded up into one of those item models which can can be sent off to the icon renderer and the resulting texture then gets set as the items icon so in the game can you guess which of these items I've been testing it on that's right it's the weird little upside down one but don't worry about that too much right now uh the main thing is that the items are now able to have their icons generated in the code just before I start with programming today I want to do a very quick bit of planting I haven't really had time to do it recently and these lettuces are getting a little bit too big for their pots so I'm just going to get them in the ground [Music] [Music] quickly so getting back to work on the icons I've been making some good progress already what I can do now is I can list multiple model options for each part of the Spade so in blender you can see I've created three options for the handle for the stick bit and for the uh Diggy bit and then in the game all of that gets loaded up into an item model so what I can do with the item model is for any part of the Spade so for example for the handle I can now choose which of those models it should use and I can choose what color it should be that part should be um obviously that information is going to be determined by the item stats in the future for now you can see I've just randomized it so in the game here is an example of that a spade that's been randomly generated by taking from all of those available model parts and coloring them randomly and the cool thing is I can randomize it while the game's running so this randomizes those variables reeners the icon and I get a different Spade icon every time [Applause] [Music] time lunch time now and it's all coming along really nicely I've just been connecting it all up with the upgrade system so now in the info file I can specify which stats affect Which models and colors um so I can give you an example of this in the game with the Spade here if I upgrade the area stat that changes the head of the spade and if if I upgrade the speed stat you can see that it changes the model for the handle I've been doing a bit of work on color next up until now all of the parts could only specify their own individual color um but sometimes I might want the whole item to have the same material so I've just introduced the concept of the main color which is the same for the entire item and then the individual Parts can if they want just reference that main color instead of specifying the their own color and then the main color itself can be controlled by some upgrade so I'll just give you a quick example of this in the game so this upgrade here controls the Diggy part of the Spade this upgrade upgrades the handle of the spade and then this upgrade upgrades that main color value and because all of the parts in this example a referencing that main color it changes basically the material for the whole Spade [Music] lastly today I've just been working on ensuring that all the different parts of the model always line up so just to give you an extreme example if I was making different models for the stick part of the spade and I made one like this um then obviously when I'm using this curvy stick the other parts of the Spade would no longer line up uh correctly so if I show you this in the game I'll upgrade the stick and when it goes to the curvy stick um obviously the head and the handle are no longer in the correct position so to fix this I've now made it possible for the mesh options to specify where the attachment points are for their child parts and then with a bit of vector maths I can make sure that everything is still positioned correctly so let me just show you this working in the game I can upgrade to that curvy stick and you can see the other parts of the Spade move to the attachment points so that everything still lines up [Music] [Music] nicely so it's Monday morning start of a new week Monday the 22nd if you're keeping track and uh this week it's going to be all about the rendering again so last week I set up that super simple renderer which takes the 3D model of the item and renders it to a 2d texture um this morning I'm setting up a postprocessing pipeline which basically takes that 2D texture puts it onto a 2d quad and then renders that to another texture um which might seem a bit pointless but the benefit of doing this is that during that second render pass I have access to all of the pixels in the texture and that basically allows me to do some image processing on it and I'm going to be making use of that today to add the outline to the icon this morning I've been working on a very simple little post-processing effect to generate the item outlines so the way this works is that for every pixel in the texture I test is that pixel on the icon and if it is then I just return the icon color if the pixel isn't on the icon then I check all of the pixels within a certain range and if any of them are on the icon then I output the color black or whatever I want the outline color to be but if I check in that range and I don't find any icon pixels then that pixel gets set to be transparent and if I do that for all of the pixels then I end up with something like this a nice outline is generated and this is how it looks in the game so obviously these are looking a little bit more like actual icons now so I'm getting pretty close to finishing this whole system now I've just been trying out some cell shading which I think looks quite nice and I also added some saturation and brightness controls so that I can tweak how they look a bit and I was just testing the system on some other items as well and generating their icons um but obviously the big thing that I still need to work on is POS positioning all of the item models are different shapes and sizes so I need to come up with some sort of system that's going to automatically scale and position the models to make sure that they're perfectly in frame before they get rendered to the icon so that they're nicely positioned in the picture I've been working for quite a while on this whole positioning thing it's turning out to be a little bit more more difficult than I was expecting I had quite a few ideas of how I was going to do it but I've ended up deciding on an idea that involves a lot of bounding boxes and that's what you can see in the game here surrounding the Spade um so the way that this works is that after assembling and rotating the model I then surround it in or I generate a bounding box to tightly surround it um it is a 3D box I know it only looks 2D here but that's because import L it's perfectly lined up with the camera and what that means is that now what I can do and what I'm working on at the moment is if this is the camera and it's view frustum I can choose some arbitrary points in the center of the frustum where I want the models to be rendered and with a bit of trigonometry I can work out the width of the frustum at that point and then because I know the center and the width and the size of the bounding box I can then work out a transform that will move it to that render point and scale it down so that it perfectly fits the width of the frustum and therefore obviously the item the the model that it contains will then also perfectly fit in the frame the positioning is working 100% now and I'm really happy with it you can see the the bounding boxes are now calculated to perfectly contain the model and then I can position and scale those bounding boxes perfectly to fit the camera's frame and that means of course that the models also perfectly in frame when they get rendered I also made it possible to add a custom rotation to models before they get rendered um so that allows me to do things like have all of the tools rotated in the same way like this and then obviously the positioning calculations take that extra rotation into account and then I've just been going through all of the vegetables in the game and making the model for each one and they now get converted automatically into icons when the game loads and here they all are looking very cute I'm I'm really really happy with how this has all turned out it's a lot better than I was expecting so over the last few days I've been doing a lot of work on creating more of the icons for the items in the game and I also made this quick little Dev Tool uh which allows me to generate the icons in advance for any items that aren't going to have the procedural Generation Um so not for the tools and then I can export the icons and that just um exports them as normal textures saves it in the the game files and then the game can load the icon from there instead of having to generate all of the icons every single time the game loads also if I ever want to change the way that the icons are rendered so for example if I ever want them to have a thicker outline for example then all I have to do to update the icon textures is to run this program select them all export them all and that updates the textures in the game files and so whenever I run the game next all of the icons would have being [Music] updated finally this week I've been using the icon system for what I originally designed it for which is for upgrading the tool icons the only one I've done fully so far is the watering can so let me demonstrate it for you in the game so when you first get a watering can you start off with this pretty basic looking thing um so let's upgrade it a bit if I upgrade the area stat that upgrades the spout so you can see it getting bigger and more impressive every upgrade um if I upgrade the speed that just upgrades the material and if I upgrade the capacity that upgrades the container so you can see the container getting bigger although I had a bit of trouble here because it's quite hard to make something look like it's getting bigger when the icon always scales to fill the frame anyway so halfway through I realized that I need to make it kind of look more bulging uh if I want to make it look bigger so that's what I did for the next few upgrades um I'll upgrade the spout a few more times you can see I started to run out of ideas here because now it becomes this double spout and then eventually it becomes this one giant sprinkler it's quite hard to come up with ideas for 10 different watering can spouts if I upgrade the container one more time you see it gets this side tank anyway this was just my first attempt I'm sure I'll be able to be more creative in the future but hopefully this gives you an idea of the potential of this system I also just started making some of the models for the Spade as well so let me just quickly show you that uh you start off with this pretty rubbish broken looking spade and then I can upgrade the head of the Spade which increases the area stat and I can upgrade the hands of the spade for a better speed stat so that is going to be it for this week it has been so much fun working on this update it's been really nice to take a break from all of the UI stuff that I've been kind of struggling with over the last few months um UI update is almost finished now really really close there's just one more UI that I need to do and that is actually the upgrade UI I've got a few things that I want to improve for that and then it will be done and then I'll finally be back to game play and uh I cannot wait before I finish I want to give a massive thank you to the top patreon supporters from last month who were Peter West haasen Daniel surv Ingo Moore helan veras Andrew Roman maray shadeless Fox Kimo tamio Koda the Tyler Ross from two-minute tabletop Nick at azada zenil ambar Atomic code Walden Yan me the pig Chris naith Alan Lance woff daa Riner Harry Chung John needam kristofh herpo haran vingard Matthew Conan Andrew wit marrick melic sha mcra caffeine Koda Timothy Gibbons Alexander Chavez and Neil Blakey Milner so a massive thank you to you guys and of course to everyone else supporting me over on patreon for this week though that is it so thank you all very much for watching and I'll see you all again next time

Channel: ThinMatrix

Views: 115,075

Keywords: thinmatrix, farm game, gamedev, devlog, indie game, day in the life, game development, java, opengl, programming, home grown, indie dev, homegrown, indie game dev, low poly game, graphics, game engine, 3d, town, modelling, 3d graphics, farm, inventory

Id: NZfgKd5QeGc

Length: 18min 50sec (1130 seconds)

Published: Sun May 05 2024