Full Unity 2D Sport Tutorial 2019 – Making Mini Map Masks
On this part we shall be making the mini map after which utilizing a masks to form our mini map into one thing extra interesting then a giant rectangular on the display.
Full Unity 2D Sport Tutorial 2019 – Making Minor Modifications
Earlier than we begin with the mini map we’re going to extend the scale of our ships as they’re fairly small and might be tough to see on smaller screens. We wish this to be playable on many alternative display sizes so we’ll make it a bit simpler by doubling the ship sizes. To do this we’ll edit the spaceship sprite by clicking on it within the venture window. Then set the pixels per unit to 64 and click on apply to replace the sprites.
As quickly as you may have finished that you will note the spaceships are double their authentic measurement. That is solely the photographs although, the colliders are nonetheless the traditional measurement of 0.1. So we have to edit these as properly. Choose the participant object and edit the collider so it’s now 0.2 radius. Which is double the earlier worth of 0.1. Our participant is now finished so lets replace the enemies as properly. This time we’ll edit the enemy prefab. That’s it for the minor modifications.
Full Unity 2D Sport Tutorial 2019 – Mini Map Digital camera
To ensure that us to make a mini map we’d like a digicam which shall be used to create the picture used within the minimap. Consider it like a digicam excessive within the sky over our world. Including a digicam is similar as including every other sport object. Proper click on within the hierarchy view and choose digicam and voila! we’ve a digicam. The digicam will want some adjustment to work as a minimap digicam however the very first thing we’ll do is rename it to MapCam. Then we’ll set its projection methodology to Orthographic, its measurement to 7 and its default shade to black. Lastly we replace the culling masks and take away the default layer by clicking on it. This can imply our digicam will ignore something on the default layer and in our case simply draw the participant and enemies.
Full Unity 2D Sport Tutorial 2019 – Mini Map Render Texture
Our Digital camera remains to be working like a traditional digicam, we wish it to render its view to a picture as a substitute of to us the participant. As a way to try this we first must make a render texture. A render texture is a picture which shall be created solely at run-time and never saved as a file and might be created by proper clicking the venture window and clicking create > render texture.
Title our render texture to mpRenderTexture and drag it into our digicam’s goal texture. Now our render texture will all the time comprise the view from our digicam and we are able to use this texture to show on display with some UI parts.
Full Unity 2D Sport Tutorial 2019 – Mini Map UI
To show our new mini map render texture we shall be utilizing the canvas UI. Create an empty object known as MapContainer. This would be the container that holds our map and masks. Inside that create one other empty known as MapMask. This would be the masks which reveals or hides a part of our map based mostly on the alpha worth of the masks texture we’ll add. Create our third and last empty contained in the MapMask and name that MapTexture. This can show our render texture.
Replace the anchors, pos X, pos Y, width and top of our 3 new empty objects to match the photographs beneath.
Now that out UI parts are positioned properly we’ll add textures and masks to make them present the mini map. Add a Uncooked Picture part to our MapTexture and set the Texture to our mpRenderTexture. You need to now have the ability to see the mini map picture captured by our digicam within the scene and sport view. Nevertheless it’s a giant ugly plain rectangle.
Full Unity 2D Sport Tutorial 2019 – Mini Map Masks and Masking
Masking permits us to indicate solely a portion of a texture based mostly on the alpha worth of one other texture. For instance we’ve our mini map that could be a huge rectangle. We might use a masks to render that rectangle as a circle through the use of a picture of a circle surrounded by clear pixels and making use of it as a masks to our mini map texture.


Sadly the picture we shall be utilizing are plain white and won’t present up very properly on this website, nonetheless they’ve been captioned so you must have the ability to see the place they’re. Obtain these photos(or get them immediately from the github repository) as we shall be utilizing them for our masking. Now we all know what masking is lets add it to our venture. On our MapMask object add 2 new elements. An Picture part that may maintain our masks picture and a Masks (script) which is able to flip our picture right into a masks. Add the Mini Map Masks picture we downloaded to our venture by dragging it into our photos folder. Now add it as our supply picture and set the color to black.
You need to new have a masked mini map and it ought to look one thing just like the picture beneath:
That is higher however it might use a border to make it stand out a bit extra. On our map container add a brand new Picture part and set the the supply picture to the Mini Map Masks Border picture we downloaded earlier. Alter the colour to one thing you want. I used pure blue at 80 alpha and you must have a pleasant new mini map in your sport.
The ultimate step is to make the digicam observe the participant. That is made easy by the actual fact we already observe the participant on the principle digicam so all we have to do is so as to add the FollowPlayer script to the MapCam and drag the participant object to the participant object slot in our FollowPlayer script.
You need to now have one thing just like the picture above (I scaled the map up 2x to be clearer within the picture above)
The completed supply is on the market on github right here.
Views: 15,975