[Tutorial] Implementing a Minimap in Unity

What does it take to create a mini-map for a Unity game? You most probably would be surprised to hear that it’s easier than you think, and that it does not even require any programming skills! Here I will try to explain how to make one step by step.

Basic minimap concepts

Minimap known from World of WarcraftMinimaps (or radars) are known for displaying information about our surroundings. First of all, mini-maps should be centered on main character. Secondly, it should use readable symbols instead of real models because minimaps are often quite small and the player wouldn’t recognize the information that the minimap is trying to present.

Most minimaps are circular, so we will also try to create one. Quite often you will find additional buttons and labels attached to it. That’s what we will try to recreate too.

Preparing the scene

Let’s start with adding something to the scene. I’ve created a new scene with Unity Chan (she will be the player) and two robots (as enemies).

desktop

Game view

Now let’s add a second camera. Just click on GameObject -> Camera and rename it to Minimap Camera. Then make this camera a child of Unity Chan model (so it will follow her) and move it 10 units above her head looking down.

Minimap Camera Setup

Minimap Camera Setup

For good effect set Transform position to 0, 10, 0 and rotation to 90, 0, 0. The camera should be seeing something like this:

minimap camera preview

OK, but that’s not a minimap yet. When you will launch your scene now, the picture from the camera above will be the only one rendered on the screen. We have to tell the game that we want the minimap to be a Unity UI element.

Rendering to Unity UI

To do that we will require a Render Texture. You can easily create one by choosing Assets -> Create -> Render Texture from the main menu. Create and rename it to Minimap Render Texture.

minimap render texture

Now select Minimap Camera and in the Inspector assign Minimap Render Texture to Target Texture field.

camera assign render texture minimap

If you will try to launch the scene you will notice that Minimap Camera picture is nowhere to be seen. The result image is now hidden in our newly created render texture.

Let’s now create a Canvas to add UI elements on it. Choose GameObject -> UI -> Canvas and you will be able to find one on your scene.

created canvas

Canvas would require a Raw Image to use Render Texture on it. Select GameObject -> UI -> Raw Image, rename it to Minimap Image and in its inspector assign Minimap Render Texture into a Texture field.

raw image render texture

It will result with a Unity UI element that now renders Minimap Camera image in it!

raw minimap unity ui

Now let’s make it round. For this purpose I made a simple mask texture:

minimap masl

Create a new Unity UI image, add Mask component to it, set our new mask texture to Source Image inspector field, and make Minimap Image a child of our Mask. (Tip: disable Mipmaps for mask textures to get a better visual effect).

minimap mask configuration

This setup will make our minimap look like this:

minimap masked circle

White minimap on white background will not look so good. Let’s add a border image over it:

minimap border

minimap with border

To make moving it around simpler, I’ve grouped everything under empty game object called Minimap.

minimap game object

Finally let’s move our new minimap to top-right corner of the screen.

minimap top-right corner

Looks nice, doesn’t it? But it is still not a valid minimap just, it’s a camera rendering game from the top. If you’re familiar with layers then most probably you know what I will do next!

Fun with layers

We will need at least one additional layer. Go to Edit -> Project Settings -> Tags and Layers and add a new layer caller Minimap.

layers minimap

Now lets create three spheres. One will be blue and should be located in the same place where Unity Chan is standing. The best would be to make this object a child of Unity Chan. Finally make sure to set its Layer to Minimap.

unity chan blue sphere

Do the similar for two Robots, but instead of blue sphere make them red!

robot red spheres

Now is the best part! Select the Main Camera and make sure than its Culling Mask has Minimap layer unset.

5b252849-280c-4322-9115-7e20fb71de52

Then select the Minimap Camera and do the opposite. Leave only Minimap set and disable all the rest.

minimap camera layers

Now you can see something that looks quite like a valid minimap!

3b117f6d-153f-4df6-a96c-51487c410209

Final touches

You may want to make few adjustments. First of all, let’s change Minimap Camera clear color to light-gray and Clear Flags to Solid Color, so the minimap background will do a better contrast with red and blue spheres.

minimap camera background color

Then you can add any other Unity UI element to stick with your minimap. I will add an example label. And here’s our final result!

minimap final result

Minimap is configured in a way that moving the character will update its position. If any other robot will move too, it will be immediately visible.

minimap position change

And this concludes the Unity mini-map tutorial! Feel free to ask any questions you may have in comments. Don’t forget to subscribe to our newsletter for the latest Unity tips & tricks.

How to Make a Custom Editor Window in Unity

Today we will cover creating custom Unity editor windows. They can be used in many different ways. Most probably you know them from 3rd party assets. Even if you’re not an asset developer, creating custom windows may help you greatly with your game development!

One of good examples of how the custom Unity editor window may be used is an implementation of in-editor cheat subsystem. Some time ago we created a cheat subsystem that is working within the actual game. Implementing some cheats using the editor windows has one significant advantage – it’s much, much easier to write and use! Read this article further on to learn how easy it can be!

Creating an editor window

First, we have to create a new window. In order to do that, we need a new class inside Editor folder (see Special Folder Names).

editor cheatswindow script

Then start with code like this:

Let’s explain:

  • At line 4 we have to make CheatsWindow class, a derived type of EditorWindow class
  • At line 6 we’re telling that the following method should have a Unity menu entry. It will be available at My Game/Cheats in this case.
  • At line 7 there’s a static method to create a window.
  • At line 9  a window is created (if does not exist) or focused (if exists) – see GetWindow documentation.

When the Unity compiles this code, you will notice a new menu entry.

cheats menu entry

Try clicking on it, and a new empty editor window will appear!

empty editor cheats window

Now let’s try to fill it with some content!

Adding content

To add content to our new editor window we have to implement OnGUI method just like for MonoBehaviour classes. The only difference is that you now have the access to EditorGUI and EditorGUILayout classes, but still you can use GUI and GUILayout classes as well! Let’s try it.

447e407b-2722-4b95-91ba-734c130bf7b7

That was easy! But as you might have noticed, you won’t be able to edit the data just then. GUI functions are returning a new value as a parameter and a current value should be passed as a second parameter to make it work. Let’s implement new Cheats class. This one will be located outside the Editor directory so the game script will be able to access it. Watch out, this is a big one!

OK, let’s split it to smaller parts.

#if and #endif are so-called preprocessor directives. The #if UNITY_EDITOR evaluates to true if UNITY_EDITOR symbol is defined. The Unity defines UNITY_EDITOR symbols when you’re working in the editor, but not when you’re building your game to the target platform. That way using UnityEditor; will be stripped-out when you build your game (see Platform Dependent Compilation). And this is necessary, because the Unity compiler will yield an error if you try to use the UnityEditor namespace inside game scripts without any environment check.

Next, we have a property:

And the getter:

This is working very similar to previous preprocessor construction, but here you also have an #else directive. The #else code block will be included if the #if condition evaluates to false. Simply talking, inside the Unity editor this code will get boolean value form EditorPrefs, and outside the Unity it will always return false.

Setter is very similar to getter, but here we don’t need an #else directive, because we don’t want it to set anything outside the Unity editor (there will be nothing to set it).

The rest of the file consists of two more properties with similar construction.

Now let’s modify our window code:

As you can see, since we made our cheats data this way, it’s really easy to read and save the persistent data. Now, even if you restart your Unity editor, the cheats will be still in effect!

Adding buttons

How about a reset button? That’s easy!

cheats reset button

But by default the reset button is quite big and located right below other fields. This makes our window look kind of unfinished. Let’s fix that using GUILayout.FlexibleSpace() before rendering our button.

cheats one flexible space

Now if you want your button to be smaller you have to play with EditorGUILayout.BeginHorizontal() and flexible space.

cheat window two flexible spaces

And maybe a final touch.

cheats window final touch

The package

As always you can download the unitypackage containing scripts described above. Feel free to download, modify and adjust it to your own needs!

How to create cheat codes for games in Unity

How to Implement a Game Cheats Subsystem Within Unity3D

When you’re creating a game, you have to play it again and again, repeat some scenarios or create new ones. Also, you have to do it fast, because if any kind of scenario requires from you playing your game or any level from the beginning just to get the desired result, you’re wasting your time doing so. To solve that issue, you should cheat. In a positive way of course! And to do that, you need a game cheats subsystem.

In-game cheats are very old aspect of many games out there on the market. These exist to help developers and testers to test the game and are left in the final production mostly because they can add value to the game. Removing already implemented cheats may compromise the product stability, because this requires another change in the code. There are also some cheats that were implemented as Easter eggs! The best known cheat code that is used as an Easter egg is the Konami Code. You can activate this one even on some websites!

konami code

Konami Code

Usually you won’t find out how to use cheats in the game’s manual, because the game authors don’t want you to play using the cheats from the very beginning. Yet you can find cheat codes in the paper magazines or on the Internet.

Implementing game cheats subsystem

Here we will talk about how to implement easy game cheats subsystem that will work on PC and mobile devices. The main requirement is that it should work without using a keyboard. We will treat touch and mouse inputs as equal to make things simpler. Then we have to create any type of GUI. For this task we will use old, but still usable IMGUI. So, let’s start!

Activating cheat codes list

Let’s make it easy to activate the cheat codes list, but not as something that can be done by accident. The list should be activated if you touch/click top-right screen corner 5 times within 2 seconds.

I know that this is quite a lot, but this is the basic implementation. It will:

  1. Listen for all clicks and touches
  2. Check if a click/touch has been done within the desired screen area.
  3. Check if last 5 clicks have been done within the desired timespan.

And it is configurable! Yet what is missing here, is the GUI code and the cheat activation code.

Now this is really simple. Game cheats are displayed as clickable buttons. If the button is pressed, the callback delegate is executed. The first cheat is a “cheat” that will close the game cheats list. Now, if you click 5 times in the top-right corner, the cheat list will become visible.

game cheats list

And if you were wondering if it works… 🙂

inverse gravity cheat

The package

Feel free to download, and use however you want, the package that includes the script from above and a test scene. The package has been prepared with Unity 5.3.0, so please be sure to import it using the mentioned Unity version or a newer one.

Rendering custom GUI on Scene view

If you’re using assets from the Asset Store then most probably you realized that some scripts introduce custom GUI elements inside the scene view. Custom GUI elements may be very helpful in many cases and they are also easy to implement! Today I’d like to show how to do this.

First, you need to know when custom GUI can be painted. It is done in Editor.OnSceneGUI() method. This means that you need to write a custom editor for any of your components. It should look like this:

This class inherits from Editor class thus let’s call it editor scriptPlease note that all editor scripts should be placed in special Editor directory. If you don’t have any, you can create it anywhere in your project. You can even have multiple Editor directories.

Handles

Handles can be the most useful GUI elements that can be painted on a scene. You will be able to use Unity standard handles like position handle, rotation handle, scale handle, and handle types that cannot be found anywhere else.

Let’s create handles fora  script that should draw a Bezier curve from point A to point B. All the drawing will be done in new editor script.

SceneGUIBezier.cs

SceneGUIBezierInspector.cs (should be placed in Editor directory)

And here’s how the Scene view will look like after this code is compiled and our script is selected:

handlez bezier curve

Tip: Editor script will not be included in your game. When the unity compiles the project it will intentionally ignore all the scripts inside the Editor directories. So don’t worry about additional or unoptimized code inside your editor scripts.

GUI Elements

You may be familiar with GUI and GUILayout functions. It’s a good method for quick and dirty GUI rendering (yet it is not recommended for production use). These and EditorGUI‘s methods are widely used when it comes to create custom inspector GUI, and it can be used to draw Scene GUI elements as well!

To show this, I will write a dummy script that displays Scene GUI to help to rotate object right and left. It will be dummy because all rotation logic is done in the editor script. It makes sense because this functionality will be useful only in the Unity editor and not in the game. Dummy script comes first:

SceneGUIRotate.cs

SceneGUIRotateInspector.cs (should be placed in Editor directory)

Code like this will display GUI elements on our scene when object containing this component is selected. To present this, I’ve created a stretched cube:

scene gui rotate

Unitypackage file

Of course, you can download all the scripts mentioned above (along with the example scenes) as unitypackage file from here. Double-click to import it into your project.