GTA MINIMAP Tutorial - Unreal Engine Blueprints

[Music] hello everybody today I'll show you how to make a mini-map in GTA Style most Unreal Engine tutorials that show you how to make a minimap use just a scene capture component over your character and call it a day this method isn't really good because you're rendering the scene both from the perspective of your camera and from the perspective of the scene capture component it's better to make your mini-map with an image that's how it's done in GTA as well as you can see I have a rendered image of my map and I have another example similar to the racing games let me change a couple of options here now let me show you the other minimap this is more like a type of minimap that you get in racing games that it only shows the road that you're driving on they're both done in the same way you're using an image and some mud to calculate where to place the image and how to rotate it I'll show you how to make both of them it's really simple and it doesn't use additional resources to render the scene like the method shown in most of the other tutorials okay let's start I'll delete everything and recreate it I'll just leave the images that I imported let me just clear also the level blueprint and now you can see that we are starting without a mini map and we'll recreate everything that you saw before you need to start by creating a scene capture component just to capture a reference image to draw your map on in Photoshop so click on the add to the project button and start typing scene capture and choose scene capture to denote here place it on 0 0 location and for the Z value and choose a High number that's higher than everything on your map choose orthographic View and the width will set later when we have the texture to see how much of the map it we are currently seeing next step is create the brand or Target it doesn't really matter how you call it because we'll delete it anyway drag it to the texture Target of the scene capture component and if I open it you'll see that the scene is being rendered inside I'll increase the Earth width for this project I know that 185 000. it's a good value I forgot to rotate the camera minus 90 degrees in the y-axis to look down now you can see that the full map is visible in the render Target image we can increase the resolution too okay in order to have more detailed map let's save this and now what happens if you don't have the Z value high enough if I put it on 100 you'll see that everything on the map that's above 100 units it's now being cut from the render so make sure this value is high enough to show everything on your image and now you can export this render Target image by right clicking on it as detections and then export it will prompt you to save the image as a file save it I already have it then open it in Photoshop and you can draw your map on top of it I have one image that is just the render of the map and one image that I traced all the paths in white this will be used for the opacity map for the racing style minimap that I showed you earlier and the other one will be the more realistic rendered map you can have any image that you want you can have simplistic representation with just shapes or rendered or you can draw anything additional on its name of towns anything you want on your map to be shown doesn't really matter the important thing is that you have an image at the end that you want to use let's continue in Unreal Engine I have imported bolts of my maps I also created one Circle that I will use to as a border around the map with a cutout on top that I'll place the north sign as you have in GTA and one arrow that will represent the player position on the map that's everything you need to start doing the minimap first thing that we will do is a material parameter collection that will know we'll use to drive the position of our minimap so go to materials and choose material parameter collage collection call it material parameter collection minimap and inside you will need Force cover parameters the first two will be the X and Y coordinates the third one will be the zoom level and the final one will be the dimensions of the map this will be the same number that you put in your scene capture component now you can see that it's 185 000 put the same number here and for the zoom let's start with 0.1 the X and Y will default to zero and we'll change them based on the character movement this everything you need in the material parameter collection now create the material that will show the minimap so create a new material call it m minimap inside the material change the type 2 user interface and I'm using a translucent material to have the opacity you'll need the material parameter collection here and you start with the zoom you multiply the Zoom by the texture coordinate this will control the scale of our texture so multiply then for the mat that will drive down the location of our character you'll need to follow the steps because it's really hard to show what every note is doing here but I'll try to explain why we are doing it you use the Y and the x coordinates to change the position of the texture but you need the value to be between 0 and 1. that's the coordinate space for all textures so divide the position by the dimensions we'll do the same for the x coordinate and this will give you a value between 0 and 1. for each of the coordinates for the x value we'll actually need to invert the position because moving on the map and moving on the UI screen or the inverted positions so we'll multiply this by -1 will divide by two our zoom level as I said it's a little bit hard to explain now why we are doing this math but it will be easier when we have everything connected to see what it's doing we'll divide our zoom level by two and then we'll subtract it from 0.5 in order to Center hour position will add our coordinates to this Center position and then we'll append vector these two positions in one vector which we'll need to use with this result of the multiplication of the texture coordinates in the zoom level and this will determine the position of our texture let's put our texture here this will be the rendered map we'll start with it you don't need the scene capture component anymore I can delete it you don't really need the render Target as well we only used it to get the reference image so let's clean everything up now and now we can add the results of our calculations here and use it for the position of the texture sample if I disconnect it you'll see that when it's connected the map is centered and we start at the 0 0 coordinates because this is what we have for the X and the Y I'll just show you in Photoshop if you use the rowers to show the zero position of the map you can see it's just on this Lake and you'll see that this position is represented here on the center of the leg and the zoom level is applied correctly that's why we have the map zoned here now connect this to the final color and you can see that our minimap is showing here to make it more interesting I decided to have it in a circle to make the opacity mask for the circle use sphere mask put the radius to 0.5 the hardness let's say to 90. let's have a little bit of fall off at the end use the same texture coordinate note here and we need a two vectors so hold two click anywhere and our Vector will be 0.5.5 will connect it here and now if I connect it to the opacity you can see that it's masking our map in the circle [Music] for now let's have it that way to start with this type of rendered map and later I'll show you how to change it for to the other type if you want to this everything for the material for the first type of the map now we will create the widget to put the minimap in so create a user widget call it widget minimap now in the widget I'll stack a couple of components let's change from from field screen to custom and put 250 to 250. that's that will be the size of our minimap put first one canvas panel inside our canvas panel will have an image put the anchors to all the Four Corners change the offsets to zero and change the brush to our M underscore minimap material and you see that our minimap is already shown here let's add a text block we'll use this for the North indication so change the anchors to top middle change the position to zero change the alignment in X to 0.5 that will align it by the center of the text and we'll put Justin N for North will choose the font size of 20 and we'll Center the text in the middle this should be fine and now let's put our Circle as well we'll change also the anchors to the four sides and we'll remove the offsets this way it will always fit in the size of the canvas panel now let's rename our canvas panel to some better name so let's call it a panel Mark is variable we'll use that to rotate our panel based on the character rotation you will see that here we have the transform angle parameter which will rotate our minimap the last component that we need is this Arrow but we'll place it in the other widget that will hold our minimap inside in the heads of display widget so compile and save this and let's create the other widget let's make another user widget call it widget heads-up display and inside this widget create again canvas panel then in the user created find our minimap place it inside change the size to 250 250 change the anchors to where you want your map to be and the position offset to the position that you want your mapped stay on let's say I want it here and then place our Arrow choose the same anchor that you have the minimap or our Arrow bottom left for me the position will be set for the center of the arrow and I'll have 175 for my arrow to be in the middle I'll reduce my size X do I like it I think that's fine 20 by 25. this should be fine compile and Save and now into our level blueprint wheel create Widget the type of widget will be W underscore HUD for heads up display and after we create the widget We'll add to viewport and we'll connect this for the Target we'll need the owning player connected here get the player controller this everything you need to add your widget to the viewport and if I press play you'll see that our minimap is now on the screen it's not showing our position it's not moving and it's not rotating because we didn't create still the logic for this but this is quite easy enter in our minimap widget change to the graph view instead of the designer and on the event tick we need to update our X and Y position and also to rotate our widget to do that set scour parameter value we use our material parameter collection for the minimap and the parameter X and also the parameter why and to set those we use the get player character then get actor location let's split this pin and put the location for X and Y to the corresponding parameter value and next we'll get the actor rotation will split this pin and we'll use it to rotate our panel let's use the set render transform angle function and we use the Z the value from our player character rotation let's compile and save this and if you play your game now you'll see that you have the position updated actually the map is rotating the wrong way now let's change that here we need to multiply our Rotation by minus one and that should be what we need to properly reposition and rotate the map okay this is great it works as expected this image as I said you can have whatever you want here you can do everything you want in Photoshop just save it as an image in the end in my case I have the other type of map that I like for racing games for example let me show you what you need to change in the material you use the other image as a mask in order to have also the sphere mask you just multiply the two together let's just use one of the channels and for the cover you will use the three vectors so hold three put one for each value to have the white cover and you don't need this texture I'm using the other texture as an opacity and my color is solid you can have image as well for the cover just this image is not really suitable because it will blend too much with the background so make a better image where you cover the different parts in different cores for example whatever you want but put your image into the final core and go positive map can be a different image and this will be the other type of the minimap let's check now if we hit play okay it seems that it works fine for this type of minimap I actually like this harness to be War so let's set it to 50. and you'll see that now the now the map is fading a little bit more in the ends and you can see better the north side you can change the zoom level in the material parameter collection if you make the number bigger the map will zoom out if I have it to one it will show the form up inside the widget it will not be zoomed at all you can see that this is the full image that we created so it's not really useful for such a big map to have such a small image and if I have it really low like points zero one you have the map really zoomed in and again it's not so useful you don't really see where you can go depending on the size of your map this will be a different zoom level for me 0.1 seems to work fine now and this basically everything for this minimap tutorial it doesn't re-render your scene all the time like if you're just using a scene capture component so it's really better for the performance and also you have the option to have different styles of minimap depending on the image you create or the material that you set here this will be everything for this tutorial if you have any questions please write in the comments you can subscribe and like for more tutorials like this I'll try to make the next one sooner if you have any requests please write in the comments and see you next time [Music]

Channel: DK 3D

Views: 11,200

Keywords:

Id: vRQua4II4MQ

Length: 25min 2sec (1502 seconds)

Published: Thu Jan 12 2023