Easy Minimap using UI Toolkit | Unity Tutorial

mini maps are something that require a little bit of trickery to get working correctly in this video we're going to see how I implemented this using UI toolkit in the free and open source micro game Chicken defense hey Chris you're from LOM Academy here to help you who me yes you make your Game Dev dream become a reality by helping you implement some magic into your game when I first started looking at implementing a mini map years and years ago I had no idea how it would work literally I had no idea I had to Google and get found out that we use render textures to achieve this which means it's luckily not super hard to do it just is a little bit of magic to understand the trickery behind the scenes that means that we don't have to do anything really different between UI toolkit and Yugi so essentially a mini map is just having a camera above the level looking down rendering the output of that camera to a texture that's why we call it a render texture that camera can exclude things like showing player models for examp sample and maybe you have some special things in your scene that only show up for that camera so you can get that nice mini map looking feel in Yugi you just slap a render texture onto an image and you're good to go UI toolkit works very similarly where we slap the render texture onto a visual element and we're good to go of course there are some gas along the way and we'll cover many of those in this video if you want to follow along you can download the full chicken defense project off from GitHub for free and you can of course play it on itch for free as well let's get let get started down here at the bottom left you can see we have a mini map where we can see the camera bounds all the units show up our enemy snake comes by we can see the trees and very importantly here we do not see the models we have instead of some kind of UI representation we come over to the scene View and come above the level we can see how that's happening above each unit we have some little UI thing we also have this line render showing where the camera is looking and if we look at that we see we have a layer called UI render only that means that if we look in our hierarchy find our main camera we have the ability to toggle on some layers that will be rendered and off some layers that will not that's via the coling mask so this main camera renders everything except UI render only that's why we don't see the line renderer and we also will never see these UI icons about the snake and the fox and eggs and whatever we also have this mini map camera and this configuration is going to be very important the calling mask we can see default some transparent effects some other stuff importantly floor and UI render only so we're not going to render any llamas chickens enemies camera clip anything like this we're only going to show a very small set of things now also notice that we're using a different renderer we're using the UR P performant renderer instead of the High Fidelity renderer so we're not going to use things like anti-aliasing we're not going to render Shadows let's actually go take a look at that if you created a project using the urp template you get all of these out of the box I have change the Shadows so it doesn't render Shadows only has one Cascade we've got a lot of stuff turned off like anti-aliasing you can also play with your render scale if you want to be more Alias look and we can also use a cheaper rendering p path like forward Plus instead of deferred the configuration of this isn't super duper important you can even get away using your same High Fidelity renderer it's just going to be more expensive so if you end up having some performance issues you may consider tweaking these I don't want to go into the whole how do you optimize your urp settings in this video if that is something you're interested let me know in the comments and maybe we can take a look at that so back to the camera we've got anti- aing turned off importantly we're using orthographic projection instead of perspective if you look at this little main camera preview we get a very different look for these the orthographic makes it where we have a square basically and we're rendering it to a texture so down here at the very bottom we have the output going to a mini map render texture and the settings that you set up on this texture will control the look of what's rendering here so this texture I have that 1024 x 1024 that's why it shows up as a square if we change this to like 2048 you'll see the preview changed now our camera is rendering a rectangle so depending on how you set up your render texture it'll change the output of that camera if you have never created a render texture before you can just right click create render texture all of this is pretty much the default we've got enable compatible format so that way Unity will choose a format that works on our Target platform we definitely want to be a 2d texture we've up the size to 1024 x 1024 we don't have any anti-aliasing and the rest of the stuff we don't really need to worry about too much our mini map camera is positioned high above the scene and then all these objects are rendering something above them that's getting rendered by that camera the level is larger than what the camera can see fact if we turn on gizmos you can see the box that's rendering and we just have basically a collider on the outside of the level that roughly corresponds to what the mini map camera can see I didn't do a great job at aligning those you can see there's some Gap here so there's a little bit of space where you can go outside of the bounds of the mini map camera that's really something I should bring those in to align perfectly with the bounds of the mini map camera so that's how we get something to display onto the UI we have a texture this is the key piece the key output that we get is this camera whatever it's seeing instead of rendering on screen we're rendering it to a texture now we can take that texture and display it here on our UI so I'm using UI toolkit and as I said earlier it works basically the same as using yugui we have a UI Builder I use the UI Builder instead of using just the U XML find it to be a little bit easier well less writing at least so on this we just have a mini map it's a simple visual element I gave it a little border two pixels of this orange color so we can see the bounds of it and just above the Border we have background and very importantly you set the image type to be render texture there's also texture Sprite and Vector you can't assign the texture if you don't call it render texture so that's very important and then you just clicked on this little Dot and your render texture will show up there White's probably what you want to show up so it doesn't ttin to at all that's really it to get your mini map camera showing but you know we don't only do the basics here you can actually interact with this mini map we can click and drag to move around on the mini map this is very common mini map behavior in games like RTS style games mobas basically anything that's not an FPS Style game you can usually click and drag and move around on the mini map so how do we do that in a runtime UI class which is really just like manager for how I show things on the Y which I'm going to cover in a different video so for anyone you watch that I may have a link in the description to how this is set up fully we're going to focus only on the mini map portion so we're going to have a reference to the mini map that's just the visual element so that's going to be thing that has a background we just looked at and we're going to have a boou is the mouse down on the mini map on awake we're going to set up a mini map click config we'll find the mini map by name mini map we're going to get a floor layer to be layer mask get mask from the floor because we're going to raycast from the camera only on the floor layer and the floor should be totally covering what the mini map camera can see we're then going to register callbacks on the visual element to handle when we click move let go and when we've moved the mouse out of this visual elements bounds this way we don't have to like pull every frame what's going on with the mouse we can just get the events when the mouse is already over this visual element that's really cool tool we go in order when we click down so that's when we've left clicked we're going to set mouth down on money map to be true and we're going to move the virtual camera Target based on this mouse position so the virtual camera Target is what our main camera is looking at we're going to move it based on the mouse position we're going to take the mini map camera scaled pixel width and height and divide that by the mini map layout width and height and we want to use the mini map camera scaled pixel width and height instead of green width and height because this mini map camera renders to a texture if you try to just pull the screen withd and height which is what we usually do when we're trying to convert from screen space to World space you get really bad results because it's not the full screen it's only that 1024 x 1024 texture that we're dealing with and that's what we get on these two values and we need to scale It Down based on the size of our visual elements with and height in this case uh I actually have a bug this should be also height since I happen to have a Square mini map it didn't really matter but if you have a non-square one you want to make sure you go by the height we then convert the mouse position by Mouse position x times the width multiplier and I'm using screen height here because we have this anchored to the bottom left and our Mouse position and our screen space positions are a little bit backwards the mouse position Y is tied to the top left it's in the bottom left so we need to take the full screen height since we have it bound to the bottom left and subtract out the mouse position y if you have your mini map in a different location on screen you're going to need to play with what you use for X and Y here we then get array from the mini map camera based on our converted Mouse position and then rast down from the camera to the floor using that floor layer and hopefully we find a hit point which if our level is constructed like this one where the Stay cast will always find a point beneath the mini map camera then this works perfect if we come back up then second point is if we move the mouse within the visual ual element for the mini map if we left clicking then we want to move that virtual camera Target and if we leave the bounds of the visual element or we let go of left Mouse button we're going to set Mouse down on Mini map to be false that gives us our ability to move around very easily by clicking on the mini map using the event callbacks that we get from UI toolkit it gives our players a lot of control and very easy panning around in the scene I hope seeing the full configuration of a mini map the camera the layers all the extra stuff you can put into the scene to make it look a little bit nicer really helps you with your game if you want to see more about how UI toolkit was used in this micro game let me know in the comments down below and I can take a look at making some of those videos if you got value out of this video or any of the videos in the series where I cover all of these different things from chicken defense make sure that you've liked and subscribed to show your support and help the videos reach more people there's a few other ways you can support if you're interested you can go to the L Academy merch store to get yourself some merch all of the shirt and hoodies there are made with organic materials minus one they didn't offer that one in organic material sadly and they're all sustainably sourced you can of course also donate on it if you getting a lot of value out of the game you can use the affiliate links down in the description for both Humble Bundle and the unity asset store both of those give me a small percentage of purchase price at no additional charge to you and of course you can become a patreon supporter YouTube member both of those will get your name up here on the screen at the end of every video you'll get access to a member exclusive Discord where we talk talk about things like how's your game going ask me questions about anything that's on your mind and some sneak peeks at some things I'm working on in the background if you choose to support at the awesome tier higher you'll get a shout out at the end of every video like these awesome folks Ivan iy obis Perry and Mustafa there's also all of these great supporters as well thank you all for your support I am so incredibly grateful

Channel: LlamAcademy

Views: 1,112

Keywords: Unity, Tutorial, How to, How to unity, unity how to, llamacademy, llama academy, video game development, development, ui toolkit, ui, minimap, mini map, ui toolkit minimap, minimap ui toolkit, mini map ui toolkit, uitk minimap, uitk mini map, ui toolkit mini map, minimap uitk, render texture, render, texture

Id: XJuqif5wdus

Length: 12min 33sec (753 seconds)

Published: Tue May 28 2024