Unreal Engine 4 Tutorial - Minimap (Advanced) - Part 1

[Music] hey everyone and welcome back for another Unreal Engine 4 tutorial last time I done one of these I showed you how to do a mini-map with use of a camera and it was a very quick and simple way of making a mean map for a game however it's not the best way of doing it the reason being is that you're basically rendering the scene twice so if your game is resource intensive or it's the platform you're developing for just simply doesn't have the power to handle it you'll find some slowdown happening in your game the preferred method is to use a texture like this version so this is using a picture off the level and he's using that using that along with the players coordinates to move it around to whatever you want really and this is gonna be a multi-part series so this first part I'm going to show you it will handle what you see on the screen right now by a light episode we'll talk about how to add it so we can see the player icon and we start adding other points of interests onto the map too so let's get started shall we okay so here I am in my new project okay so nothing in here it's all completely empty and you can see I haven't got any map in it okay so the way it works is we first of all have to get a picture of our level now we could do it by hand and try and guess it but it's not very accurate we want our map to be very very accurate so what we're going to do is we're gonna set up a camera in here and take a picture of the level and take that out and put into Photoshop and draw over it so what we do is essentially take a camera put it above the level take a picture of it and export it out so to do that we're going to go into our modes panel over on the left here and searching the classes for a capture scene capture component and drag that into your scene and you want to make sure that it's exon wire location are set at 0 so 0 that and so that and I like to put these Z value or Z value at certain height talking easy see it but it hasn't mattered too much there we go and as you can see it's not pointing downwards yet so we need to make it point down so on the rotation in the Y you want to change that to minus 90 and it should be facing downwards okay so we use one of these last time it's busy the same method so we have to make a render target which is basically a canvas for this camera to take a picture on off the level so to do that we're going to go add new materials and textures render target and I'm gonna name it mini-map target and with the camera selected scroll down in the details panel until you see text your target should say none and you'll drag that mini-map going to target to there and your scenes that leave the thumbnail change but it'll change a few settings first to make it usable so first thing to do is change it from where it says perspective here which is just above the scene capture area change that to orthographic and that'll make it a flatter image rather than using perspective sorry perspective and then we have to change the auto width and although width it's basically how much of the scene are we gonna get in and you're basically typing a number to guess how big your world is and you want to try and get the whole world in to the thumbnail of your render target so if I type in five thousand you can clearly see the whole level is now in my minimap target okay with that now done we're going to export this so right-click on your mini-map target in the content browser go to actions export and you let choose someone to export it do and you will open up Photoshop or ever an image editing software and create a picture for it okay so here I've opened up Photoshop and I've now put in the open up the render and originally it's a HDR image type which means that it's 32-bit and for us to properly edit this we're going to change its mode from 32-bit down to eight or six teens up to you I'm going to choose 8 make it nice a simple image and I'm going to create a new layer and fill it in white hide it another layer it's black paint brush out and I'm going to click around and GWAR the boundaries on my level so you could do this any software will do illustrator is usually a good one to do maps in because then you can do various sizes with various detail we'll just do a quick crude outline of our level and it's geometry daddy so I'm gonna turn on the white background and we're going to export that so save as JPEG mini map texture save okay and next thing we will do is import that into unreal so click on import mini map texture open and it's now there we now we don't need our target or I come anymore so we can delete the target and we can delete the camera don't need us now and what we have here is a texture for our level it's two five six by two five six if we need bigger than that you just increase resolution in Photoshop first so next step is we're going to create a material from our mini map texture and the material is then gonna be put onto a widget we shoulda known can make it show on the viewport so let's grab material so right click on your mini-map text new map texture and click on create material and mini-map school and this is where it gets a bit more heavy so I hope you like maths and I'll try my best to explain the equations and how it works but forgive me if I can't explain it too well but I'll do my best so the first thing we need to do is change the output node from the surface domain so on the left here to sit for two of the main change it from surface to user interface but that's going to be on now user interface and we'll drag this to final color so you can see it and so the way this works is a texture sample and it takes in some UV is now UVs are coordinates used in texture spaces and they go from zero which is on the left to one which is on the right and zeros on the top as well and ones on the bottom as well that's by default so that UV default UV is 0 to 1 which is the whole thing basically so we're going to need to do some things here to make it zoom in and move around to follow the play off so to do this we're going to use a parameter collection so we're going to minimize this go to add new materials and textures material parameter collection and I'm gonna call it mini-map underscore data and this is a collection of data that will be stored and can be used across the whole entire level of your game and it can store scale our parameters and vector parameters so scaler we're going to need first one to be X second one to be Y set default to zero next one it can be zoom and default value is going to be naught to 0.5 and the next one is going to be dimensions and default we'll leave it zero as well okay close that so those are the four parameters we need and to access them all you do is right-click on here in space and type in parameter and you'll see collection parameter click on this and we don't need a preview window so you can hide that little arrow and you will make sure that mini-map data is the collection you've chosen and the drop-down for parameter name should now display those four that we entered so we need first of all soom okay we should have the default of null point five remember and we want to get also the texture coordinates so typing texture coordinate' you'll get this text chord input so red ones are inputs and this is the input of the UVs and by default it's just a zero to one and you can see your tiling one is there zero is the coordinate index so basic texture and what we need to do is multiply these together okay so zoom and we'll change the values here by 0.5 so good to multiply and hook them both together so this now essentially halves these values okay so that's now going to show Norton or point five rather than not two one go to Harvard one point five okay and after that that will get as soon after that we want to get the offset so to get to follow the player we need to change its offset and to see this working here I'll just drag over here and you can see it working you go see and pay off now don't do that just yet and we need to make an offset so as you saw this defaults to 0 and 0.5 and 0.5 obviously I apply it is in there it could be any way in the level we need to change that starting position zero to match where the players doing okay and we keep the player in the center as much as possible so what I'm gonna do next is create the offset so try follow along so from the zoom which is been--all point five by default you drag out of here and do divide and you'll divide by two which it should be by default so this and 0.5 is now divided by 2 giving you your point two five then we want to do subtract but we want to plug that in to be not a and the a value we want to be naught point five so this refers to the central point of the map so we want to keep it central and this basically means we need to get the half of the offset away so it keeps the player in the center of the texture when it's rolling around it's very hard to explain without seeing it but you'll see in soon and once we've got this offset we can now add this to our coordinates so this vessel to get coordinates so right click here then get the parameter collection and we'll choose Y hide that again I'm so going to copy and paste this out and get X and whilst we're here we'll also need dimensions like so and put dimensions in between them two so the X and the y the the way this works is we're going to plug in the player's coordinates into these parameters okay in the widget later on now the trick now is to get the players causing that's converted over to texture coordinates now remember texture coordinates go between Norton one whereas in the world it could be well anything between minus three five three thousand two positive three thousand we don't know so we need to get the ratio between the world space and the texture space and it sounds fake off using boat really isn't all you do it divided the smaller number by the larger number so if I take the wire and go divided and dimensions into the bottom one dimensions will be quite a large number this is the size of the map okay so that remember all four graphic camera we put in that's the size of its width then we put so this had been essentially 5,000 and why will be for example let's say if it's 2,500 2,500 divided by 5,000 we'll get you know point five okay so it keeps it in between 0 & 1 we'll do the same again here so divide X by dimensions and then we want to add these on to the subtract here so we're going to go add and drag that into there let's move these closer and we get another add do exactly the same but for the other coordinate and this will get your x and y so this gets the x and y in texture space and this adds the offset onto it so now we've got the offset correct coordinates we want to append these together to make a vector so drag these up type in hend vector and this case a vector out of these two values which makes us a new UV basically a new UV coordinate and what we do is we add this value on to this value so from the multiply dragged out to an ad and connect append to point B and the last thing we do is going to clamp this before we put into UV is no clamping it's a safe measure that we're going to put in to make sure that the values of UV do not exceed to 0 or 1 otherwise your map will start tiling so we don't want that to happen so if the player walks off the map somehow the map won't tile it'll just look like you've gone off the texture so we will drag this off and hook up to UV now okay now it's gone white that's because our dimensions is inputting 0 remember rightly so you're dividing anything by 0 therefore this isn't going to work ok it will only work when we put in a value in two dimensions so we're going to come out there apply it save it and Camille and we're now going to create the widget so we can enter that information so go add new user interface widget blueprint and win aqueous mini-map widget and turn it up and I'm going to delete the canvas panel cuz I don't want that I want this to be a sub component of the HUD widget which will make later so we don't need a canvas panel for this and all we need is the image itself so type in image and drag it onto the hierarchy is and the image you want is your mini-map so going over to the brush if it's a really expanded expect open an image change from none to mini-map material oh pardon me forgot one thing let's get back here don't let music number two we will make an instance of this material so right-click on their material and create material instance and mini-map underscore instance there we go so that's the one we want to use not the material go back to the widget and change this to mini-map instance sorry about that okay so I'm just gonna name this map much what is variable with ticket on and go to graph and the graph was going to clear these it doesn't it messy I'm going to add a couple of variables so we're gonna add dimensions and add zoom and add image so dimensions is going to be a float zoom is going to be a float and the image is going to be a material no texture site texture texture okay and you want all of these to be instance editable and expose on spawn and click compile this allows us when we create the widget to set up the mini-map who certain settings that we like okay so I mention zero zoom is no no wait a moment let's change that to 0.5 compile and so we're gonna make these a show up when we create the widget and we have to edit it in the code whenever we like so if we got multiple levels in the world this allows you to swap out what map you show in your mini map so I'm going to do a construct event construct so as soon as the AMIA the widget is created this triggers and we're going to we're going to create thankful doo-doo and brilliance mmm come over there and I'm missing something I'm a missing mouth complaint set scalar parameter value there we go and it's a collection you want choose mini-map data name you want its dimensions and your drag dimensions into relative value and zoom in for zoom set scalar parameter choose oh she's a mini map data zoom and you want to drag the zoom onto that - okay so when it's created we'll set the dimensions to that collection of data and the zoom to a collection of data and next we're going to do is tick tick and we want this to grab the players quarters and plug it into our data collection so right here set scalar parameter and choose new map data X and copy and paste that before Y and win a copy and paste it again for zoom so it allows us if we want to change soom mid-game we can do just plug that into there like so so we now need to insert the parameter values for x and y we get that from the players coordinate so type in get player character now get the actor the characters the couch the players currently planers come off of here get location location and right click on the return value and choose split struct a pin and it gives you those three values instead of the vector so you plug x into x and y into y and click compile okie dokie right sponsor the net we're going to close this and we're gonna create a new widget for our HUD so good widget blueprint HUD and score legit and in there we should see on the palette user created mini map widget and you can drag that into your canvas panel and place it wherever you like so here let's change its size is 300 by 300 and you can see here where we created the instance of the mini map widget I can type in dimensions zoom and an image which we can assign in a second so dimensions we want it to be 5000 it has to match what you set the cameras and zoom we want a null point fire so we leave it at 0.5 and the image we haven't hooked up yet so we'll leave it as is we'll come back to that in a second click compile and close that now we need to make the HUD appear so I like to do this on the game mode so if we go to blueprints find the game mode I've been for blueprint editor and in here I'm gonna do begin play and then I'm going to just do create widgets choose the HUD widget in player get player controller and we're going to promote this to a variable to save it save its reference as HUD widget I guess so and then we're gonna add this to viewport and to people okie-dokie compile and let's see if this is what probably missed a bit so let's have a look so there's the map and if I walk up it moves walk left right it moves now you noticed something wrong is that when I walk up you can see the map is going the wrong way okay this is just the way the coordinates work so we can quickly fix that by multiplying it by minus 1 okay so we're going to go back to our the mini-map material and I believe we the one we need to do is the X doing so if we need to multiply by minus one and chop that into the ad okay let's just spit this out a bit so x XR basically flips it and plate now go up down right left it looks as though the maps working so you can see if I got just corner the corner is appearing in the middle of the map so good way to test it okay and that's the basic mini map we're going to do some settings now to make it a little bit more fancy and before we close out this video so we go back to our widget and our graph and this image that we set up this is going to allow us so on our HUD hard widget when we create an instance with the moon map we can set what image is and we could change that mid-game if we like so if the player side goes into a building we can swap out the image of the world to the building texture instead so the way we do that and make it apply to the the material it will go back to the material and the texture sample we got here we wanted to delete that and we want to put in a typing parameter and you will see texture sampled parameter 2d click on this and plug that into final color so this we need to give it a name so here we're going to change it map image and leave that so and that means it's now available to the instance that's why we need to make the instance earlier so going on to the instance here you can see I can change its map image yeah so now when we create a HUD we can change what image it uses from here so I could change it for net click compile and it should well now we have a hotel yep so go back to the mini-map widget so we've got the HUD various signs the mini-map texture go back to mini-map widget this thing and in the construct you want to link this variable to the map parameter so we have to get the material first so let's go so drag on map here and on here we go get dynamic material okay and that effect is the material of that image okay and from that we're going to point this to verbal why the hell not and store this as map image don't map instance nope and from that we are going to change its parameter so from here I can actually select a parameter for it so go set parameter you see set texture parameter value so the name of it shouldn't matter match the name of the image we typed in earlier and the value will be this rebel that we dragged in earlier like so so now with the HUDs word is selected here this should now work in the game hey see so now you can change that mini-map in game whenever you like by accessing that variable in the widget so next thing we do is we'll make it look a bit fancier we make it round so we go into material and we're going to make it round first so let's have a look at the pasty Marceau to make their pati mask work we need to change this from a pike in the details panel to masked and it allows us to access the pasty mask and we're going to use a sphere mask for this so type in sphere mask and hook that into pasty mask so we need to values here the first value is a texture coordinate texture coordinate and the next one is a 2 vector vector constant 2 vector and the values we want is not 0.5 right not 0.5 and this basically refers to the center point of the circle okay so where is the circle going to start at beep sorry where's its center going to be in want it to be in 0.5 and 0.5 of the texture coordinate so basically judge one right in the middle we want that big circle to be okay click on your sphere mask and you wanna change its radius from - 5 6 - what would be a good one not 0.5 then you see it nice and around now amazing isn't it if you expand this out you can actually see the Alpha mask here so it's crate so now for masks and anything white remains seen anything black gets hidden okay so apply that go into my world and there's our circle texture magic and last thing we do it's going like a border for it a nice neat little border and for that we are going up here that's first of all let's copy this because we're gonna do exactly the same thing again just up here it's that and this is going to go into subtract and we don't want to subtract it from a want to go that into B and a to be 1 so if I show you this so this is remember F and white is seen everything black is hidden so the white here is seen subtract from one but he reverses it so it will keep everything in the white now its border and moment matches exactly this mask here so you actually see anything because remember it would be black so be hidden so what you want is it to be a little bit smaller okay the circle be a little bit smaller so on here on the sphere mask will change from no point five to say in 0.45 you see this circle is a little bit smaller now meaning that whatever color we put in this white area we will see now on our picture or overlay it so to do that we're gonna loop it with a linear interpolation so type in linear interpolate and now what this does basically says choose between the color between A or B based on the an alpha mask so we're going to go from A to B like so and then we're going to go into B it's going to be a color and this would be constant V vector this is the color of your ball you want so for example make it nice and red City nothing clear and the Alpha will be this map image okay and we'll drag that into so not not into that so this mapping which goes into a so eye color goes into B and this alpha goes into so if I expand that out you can see the red outline and that's what you want because now if i plug that into the final color your pasty mask and this will work together and then you will only see the nice red border apply go back into your game push play and there is our nice little mini map and now to do for this episode next episode we'll look at how to add the player icon in the middle of the map so you can see it's spinning around and show its orientation on the mini-map thank you for watching hopefully you followed along okay and then get to lost if you did get lost and have any questions please feel free to leave a kind and like and share this video and subscribe for future and will for tutorials thank you and goodbye [Music]

Channel: Ryan Laley

Views: 107,658

Keywords: UE4, Unreal Engine 4, Unreal, Games Development, Guide, How-to, Tutorial, Simple, Quick, Easy to Follow, Minimap, Map, Scene Capture Component 2D, Render Target, UI, Widget, Beginner, Advanced, Texture, Picture, Optimised, Interactive, Zoom, Scrolling

Id: Z6qzaT4ZOh0

Length: 32min 23sec (1943 seconds)

Published: Fri Jan 26 2018