Godot Recipe: Minimap UI

welcome to judo recipes in this video we're going to look at how to make a mini-map or radar item for your UI displaying the interesting objects in your game as always you can see a written version of this on the Godot recipes website at the link in the description we've got a lot to do so let's get started here's a preview of what we're going for objects appear in the mini-map based on their positions in the world by the way another approach to this is to alert the player to nearby threats by drawing indicators on the edges of the screen game endeavour has done a video on exactly how to do that which I recommend you watch and if you're not subscribed to his channel you're really missing out so to begin I've made a simplistic 2d top-down game setup with a player and some mobs that run around and some crates you can pick up basically it looks like this you can walk around you can pick up the crates these are going to be some positive object you can look for and then there are mobs that wander around the map randomly there's no shooting there's no damage there's none of that stuff because I just wanted the basics here and if you don't know how to set up things like this I have some other tutorials on how to make a tile map to do your level how to do a top-down character and I'll link to those in the description below but this is the game that we want to add the mini map to so that I can see where these objects are even when they're off-screen all right we're gonna start by setting up the layout of our mini maps I'm going to open a new scene here and we want our mini map to play nice with whatever other UI elements you might have in your game you know a full game you're probably gonna have a health display or some kind of inventory or or some other UI elements that are also on the screen at the same time and so we're gonna set up our mini-map using containers so that we can place that into any other responsive UI that you've created for the rest of your game so let's start by creating a margin container so I don't want the whatever size we have our mini-map at I want to make sure all the elements of it stay inside with a little bit of buffer space around it so I'm going to set the custom constants of this to 5 on each side just to give us a little bit of space around it oops and with me let's rename this to mini-map and then we're going to save it alright now we want to add our frame in here for our mini-map and to do that we're going to use not a texture rect but a nine patch rect and I'll show you what that does in a second here so you see this texture region panel and up well if we drag our texture in here here's why we want to use an iPad trapped because if we used a regular texture and we resize the frame then our 128 by 128 image becomes stretched and ugly and I don't want that I want the frame to stay the same size and just enclose a different size space as we move it around now in the 9 Patrick you can go into the texture region box and you can draw out the region you want and you know set the margins and you see how they're changing but I sometimes find it easier to just enter the numbers in this case we want to put in 64 for all four margins and now what we will have is when we resize we see the frame borders stay the same size and they just stretch to enclose whatever area is inside okay so now we want to fill this inside part with our grid texture that's going to tile to cover everything but I don't want if I make it a child of the nine patch rect it's gonna tile the full area right and I want it to stay inside of the borders of the frame so as a another child of the mini-map so it's gonna be a sibling of the nine patch rect we're gonna add another margin container and why don't we go ahead and name the nine fat tract frame so we know what that's for so this margin container is gonna hold our grid and we just need to give it the margins that will ensure that it stays inside the frame and that is 20 pixels on all four sides and then as a child of that we will put the a texture rect which I'm going to name grid and drop the pattern blueprint pattern in there and set the stretch mode to tile and now we have an ice-filled image that will tile to cover however big or small we make our map but also you can see if i zoom in here the borders of the grid are inside the frame so I'm gonna leave the minute mini-map size to around 200 by 200 just as a starting size for us again it can it'll be flexible once we're finished so this is our node setup and has everything that we need in it for the appearance of our map now we can start writing the script that will make everything appear so let's add a script to this and the first thing that we want to display in the mini-map is a marker for the player at the center so as a child of the grid I'm gonna add a sprite node and in this sprite note I'm going to stick the texture for the player icon that's this little arrow now notice how it put it right in the top-left corner of the grid right which is because it's a child of the grid and a zero zero point of the grid is right there now the grids size is 150 by 150 right now that means our sprite node would be at the center if we put it at 75 75 and don't worry we'll do this automatically in the script but for right now this is a way to show you manually how we want to put the marker at the center of the grid now I'm gonna add two more markers so I'm going to duplicate this I'm gonna call this first one the player marker and then the second one I'm going to use this little red icon and this is going to be the mob marker we can put that over there and then this last one is going to be the alert marker this is just marked something that you want to pay attention to so we'll use a little yellow exclamation point so there's our three markers that we're going to have in the map but I'm going to go ahead and hide the mob and alert marker because we don't want them showing by default now at this point we have a decision to make and that decision kind of depends on how your game is set up overall and since we're using a simplistic you know simplified game as a demonstration the way that we do it in this example might not be the best for you or a particular game setup so keep that in mind if you're following along and adding this into your own game but what I'm going to do is I have right now two objects that need to appear on the map I have the mob and I have the crate and I'm just gonna put both of them in a group called mini-map objects and so any object that's in this group will appear on the mini-map and then the other thing I'm going to do is in the object itself I'm just gonna make a property called mini-map icon that tells me what icon to use or which marker to use to show this object in the map so now we can go over to our mini-map here and we look at our script and we're gonna start by adding a couple of variables here I'm gonna add a node path to the player since the player is going to appear at the center of the map but also the positions of all the other objects are going to be relative to this player all right since the player stays at the center so we want a link to the player we're also going to have a variable called zoom it's gonna be how much the map is zoomed in and out I'm going to set this to 1.5 right now and then we'll talk about at the end how we can vary that to change the effect and then I'm going to add some references to the various nodes that we're going to need to use in our script this for convenience and then we need a way to map those tags that we gave the objects the properties that we assigned to them to the actual objects that we want to attach to so I told the mob that its icon should be mob that's going to link to this mob marker and then the same thing for the alert one likes to be alert marker and then that needs to be on ready again because these are unready variables and then the last things we need is we need the grid scale this is the scale factor to go from the size of the world down to the size of the map and then we're going to also keep a list of markers so let's say there are 10 mobs on the map each mob is going to have one marker item assigned to it moving around on the in the map grid and so this markers dictionary is going to have the keys are gonna be the actual objects the actual mobs and crates and the values will be the markers that are assigned to them then in the ready we're going to Center the player marker I'll make sure it's at the center of the grid so we're going to set its position equal to the grids rect size divided by two and then we're also going to calculate that grid scale and what that's gonna be is I'm going to take the grid rect size how big our grid is I'm going to divide by the viewport wrecked which is the size of the screen dot size and then we're going to multiply by the zoom so what this means right now is that the grid size will represent 1.5 times the port size and then let's see how this is going we'll go down here and we'll do our process function and we'll set the player now if there's no player meaning I haven't assigned anything to this node path then then I want to return I don't want it I want to skip the process function if there's no player to track but if there is then we're going to take the player marker and we're instead its rotation equal to the player's rotation so we'll do a get node player rotation but the one thing to keep in mind is our player marker points upwards so that means it's not pointing down the x axis which is the zero rotation so we need to add PI over two so let's try this out we'll go over to our world scene we have a canvas layer already to hold our UI and we're gonna add an instance of the mini-map and we can place it why don't we place it in the bottom I'm gonna put it in the bottom right and let's hit play okay so that's where it is now notice it's not doing anything because we didn't assign the player so let's go over here to our inspector and assign the player object and now we should have there we go we should have a arrow the points in the same direction the player is pointing now let's make markers for each of the items on the map so we'll do this in the ready map objects equals get tree get nodes in Group mini-map objects so now we have an array of all of the mobs and crates and then we're going to go through each of them and we make a new marker for each one and we're gonna use the icons dictionary to get the items mini-map icon so now I've chosen whichever marker matches and I'm going to duplicate it so I have a duplicate of the mob marker or of the alert marker depending then we're gonna add it as a child of the grid and then we're gonna add it we're gonna make we got to make sure we show it because the the ones we're duplicating are hidden and we need to set our dictionary so that we have a link between the mob and the mobs marker or the crate and the crates marker and then in the process we can just use that to set all of their positions so for item and markers then we need to figure out the objects position so the objects position is the items position minus the players that's the vector from the player to the item and then we need to multiply that by the grid scale so that we scale it down to the grid size and then we need to add grid rec size over to because we need to shift it to the center of the grid and then we can place the object there so we take the marker and we said its position to that new position we calculated now if we run this here's what we're gonna see there's the mob you see it moving that let me run over here on the side and you see how them the mini-map icons are being drawn way outside the map right the the mob is this far away from the player at the map scale so it's being drawn that far away and so the positions are updating but we need to constrain them we need to keep them inside the map so right here before we set the position we're going to constrain it so we're gonna say object pause dot X and we're going to clamp that to between 0 and the grid rect size correct size X and then do the same thing for y and that way that no matter where the icon is calculated to be it'll stay inside the grid so now you can see all the ones that are off and far away are being drawn along the edges here now at this point we can decide kind of what we want to do about these icons that are off the edge all right we basically have two choices we could hide them so you can't see these ones that are really far away at all or we could change their appearance in some way if they're on the edge so I'm going to do the second one so before we clamp the position we're gonna check and see if grid oops get wrecked so we want to get the rectangle of the grid and just check if it has the point we're looking for which is the object position plus grid rect position the reason we have to do that grid rect position is there's a little bit of an offset right the grid because it's in at a margin container has a position of 2020 all right so if that point that the marker is being drawn at is inside the rectangle then we'll set the marker scale to 1:1 but if it's outside then we want to set the scale to a smaller value and so I'm going to use 0.75 and then this will update as they come in and out of that area all right so now we've got small ones around the edge and see how that one turns small when I went off the screen now as I go down here you see they turn big when they get closer now the last thing I wanted to add was to allow us to be able to change this zoom so I'm going to take this zoom and I'm at a set get to it so we'll have a function that gets called whenever it is changed so we'll define that here and we want to clamp this value so that doesn't get too big or too small because we're going to change it with the mouse wheel we clamp the value between 0.5 and 5 these are just arbitrary values that I've chosen to look pretty good you can adjust them how you like and then we're going to use that to set the grid scale which is the calculation we did here we want to change the value of that and then to make that take effect we need to connect the minimaps GUI input all right so this is called then we got an event so if the event is an input mouse mouse mouse button and it's pressed then we have two options either it was a wheel up or wheel down when we check that with the button index wheel up and then the other option is that it might be wheel down and then in both cases we're just going to change the zoom by 0.1 add it if we scrolled up on the wheel and we'll subtract it if we scroll down on the wheel and now if we run this again you should be able to see the difference I'll go over here where there's a bunch of items and then you see if I'm inside I'm scrolling the wheel in and out you can see how it changes the effect to show them as being closer to me even though these guys are pretty far away now so I'm zoomed out quite a bit there he is okay so that's the mini-map now one thing that we didn't talk about was what to do when an item disappears so if one of these mobs is killed or if the crate is picked up we want these market to disappear and conversely if you have a mob spawner or something like that you want them to appear when those things show up like right now if I go pick up this crate I'm gonna crash the game because it's not going to know what to do with that marker anymore no longer has a an item that it's attached to but that's okay we're not going to deal with that in this tutorial that's something where you'd want to tie that into your spawning system maybe have some signals that get sent out when a mob spawns or D spawns connect that signal to the mini-map and remove the marker when that happens you might want to have more marker types you just create more of these markers and link them to the units that you want to use them you could have you could have a picture of your map as the background instead of the grid here and scroll that around as you walk around your map so you see the walls as well a lot of different options so hopefully this helps you and you can adapt this to work with whatever project you're working on thanks for watching and I'll see you in the next video this tutorial is part of my new Godot recipes website the goal is to collect all the best tips and lessons to help make you a better at Godot developer if you liked this video I hope you'll go and check out the site and make sure to hit subscribe so you'll be notified whenever I release new videos thanks for watching

Channel: KidsCanCode

Views: 16,508

Keywords: programming, coding, tutorial, lesson, godot, godot engine, gamedev, game development

Id: -R1rasEyuqY

Length: 22min 51sec (1371 seconds)

Published: Sat Jan 11 2020