Official Overlays Developer Guide

That's awesome, waiting for the weekend to try this out. One question, if I may. That [Icon] Attribute, does it necessarily need a string path?

Will there be a mechanism to inherit from the IconAttribute class and implement your own custom icon? Somthing like this:

Code (CSharp):

1. public MyCustomIconAttribute : IconAttribute
2. {
3.     public override Texture iconTexture => GenerateMyCustomTexture();
4.  
5.     private Texture GenerateMyCustomTexture()
6.     {
7.         // custom code that generates a Texture, or loads it from somewhere.
8.     }
9. }

And use it like this

Code (CSharp):

1. [Overlay(typeof(SceneView), k_Id, "My Awesome Overlay")]
2. [MyCustomIcon]
3. class MyOverlay : Overlay
4. {
5.    const string k_Id = "my-custom-overlay";
6. }

The reason being that you don't always want to hard-code textures or maybe you want to generate them on the fly (based on whether Unity dark skin is on or off), among other reasons.

Anyway, I'm super excited about this new Overlays feature!

 

Sure! I guess it's a more personal reason, so I understand that's not something that would be widely used. But as an Asset Store developer, I try to have the least amount of textures inside each scripting package. The reason being that I don't want to pollute the user's project with textures he/she shouldn't be using (gizmos, Inspector icons, ...). Otherwise, when they click on any Texture field picker, they get hundreds of textures non-related to their game project.

For this reason, I'm moving all icons to a hardcoded byte[] array that is reconstructed whenever it's needed using the Texture2D.LoadRawTextureData(...) method. This has the advantage of not getting in the way of the user's texture organisation or naming convention.

Hope that makes sense, though as I said, as far as I know only Bolt and my (future) packages do it like this. I am more than happy to provide feedback if you have any questions to discuss

 

Thanks! So far it's working fantastic! I've been using this for a couple of months and there aren't any drawbacks so far. I've attached a screenshot showing how it looks. I wouldn't want to hijack this thread's topic So before doing so, let me know if you want me to give the implementation details here or somewhere else.

 

Sure! I've created this thread: https://forum.unity.com/threads/non-intrusive-textures-and-icons.1020469/ Cheers everyone!

 

@gabrielw_unity Can we use the new tooling system in a production project? We are 2021.1 Thanks, Marek.

 

We've been playing witht he Overlay system and it's awesome. It takes some time to get used to it and the contrast between toggles when they are on/off it's a bit too subtle, but overall it's great and a big step forward. More so knowing that can (or will? haven't tried this yet) be used in other EditorWindows.

One thing we haven't been able to do is to use the BuiltinToolsStrip visual element, along with the ToolButton, to create a chain of buttons that mimics the ones made by Unity.

@gabrielw_unity - I guess we can create our own stylizing, but I'm wondering whether these will be exposed soon, so we can leverage them in our own tools?

 

Quick question, is that the Icon attribute only looks for the path in the "Editor Default Resources" folder?

How should we go about in a situation that the icon is located in the Packages folder instead of the Assets folder?

Code (CSharp):

1. [Overlay(typeof(SceneView), k_OverlayID, k_DisplayName)]
2. [Icon("proarray-icon.png")]
3. internal class ProArrayOverlay : IMGUIOverlay
4. {
5. ...
6. }

 

It looks from the project root. So if you have a texture inside the Assets folder called "MyTexture.png" you use

Code (CSharp):

1. [Icon("Assets/MyTexture.png")]

If your texture is inside the Packages folder, use the "Packages/..." prefix

 

Thanks! Oh, no wonder, just also figured out the path for individual packages is with the package name instead of the actual folder name. It is working!

Code (CSharp):

1. [Overlay(typeof(SceneView), k_OverlayID, k_DisplayName)]
2. [Icon("Packages/com.bennykok.proarray/Editor/Icons/proarray-icon.png")]
3. internal class ProArrayOverlay : IMGUIOverlay
4. {
5.     ...
6. }

Now I'm wondering how to properly handle the icon if the package can be installed both in the Assets folder and Packages folder, after looking at @Catsoft-Studios 's previous reply about extending the IconAttribute, I end up doing something like this, and seems like its working.

Code (CSharp):

1. [AttributeUsage(AttributeTargets.Class, Inherited = true, AllowMultiple = false)]
2. [Conditional("UNITY_EDITOR")]
3. public class ProArrayIconAttribute : IconAttribute
4. {
5.     public ProArrayIconAttribute() : base(GetRelativeIconPath()) {}
6.     public static string GetRelativeIconPath(string asmdef = "BennyKok.ProArray.Editor")
7.     {
8.         var p = Path.GetDirectoryName(CompilationPipeline.GetAssemblyDefinitionFilePathFromAssemblyName(asmdef));
9.         return p + "/Icons/proarray-icon.png";
10.     }
11. }
12.  
13. [Overlay(typeof(SceneView), k_OverlayID, k_DisplayName)]
14. [ProArrayIcon]
15. internal class ProArrayOverlay : IMGUIOverlay
16. {
17. ...
18. }

 

there doesn't seem to be a userControlledVilsibility property as mentioned in the original post. if that property won't be available, another potential solution to my issue would be only allowing my overlay in my custom PreviewSceneStage somehow (implementing ISupportsOverlays and using it as the editor window type in the overlay attribute does not work).

having purpose-built overlays for custom PreviewSceneStage classes seems like a perfect match. it would be a powerful feature to add if it isn't already possible somehow.

 

@gabrielw_unity the new overlays seem to break an "old" way of drawing windows in the scene view (using GUILayout.Window) that I've been using in my tools. Is this on purpose?

To reproduce this, put the following script in an editor folder in Unity 2021.2(b13). Then click on "Window --> Start Test". Notice how no window is shown in the scene view. In the console, "GUILayout.Window() called" is shown and "Callback called" is not shown. Then execute the same script in Unity 2021.1 and notice how the window is drawn correctly.

Code (CSharp):

1.  
2. using UnityEngine;
3. using UnityEditor;
4.  
5. public class Test
6. {
7.     [MenuItem("Window/Start Test")]
8.     public static void MenuItemClicked()
9.     {
10.         SceneView.duringSceneGui += OnSceneGUI;
11.     }
12.  
13.     private static void OnSceneGUI(SceneView sceneView)
14.     {
15.         Handles.BeginGUI();
16.  
17.         Debug.Log("GUILayout.Window() called");
18.         GUILayout.Window(2, new Rect(sceneView.position.width - 110, sceneView.position.height - 130, 100, 100), WindowCallback, "Title");
19.  
20.         Handles.EndGUI();
21.     }
22.  
23.     private static void WindowCallback(int id)
24.     {
25.         Debug.Log("Callback called"); // <-- not called in Unity 2021.2b13
26.         GUILayout.Button("A Button");
27.     }
28. }
29.  

Is this behavior on purpose or is this a bug?

Thanks.

 

Ok great, thanks for looking into this. Btw. this is the related bug report ticket (guess you can eventually close this):1369148

 

Hey I've just started trying out Overlays in Unity 2021.2, but I'm having a hard time figuring out how to recreate the default toolbar behavior, where multiple toggles seem to be related, and only one can be pressed at one time. How would I go about recreating that?

 

Perhaps this is a starting point? https://docs.unity3d.com/2021.2/Documentation/ScriptReference/Overlays.ToolbarOverlay.html

 

Hey @kaarrrllll,
just wanted to let you know that even though the issue tracker (https://issuetracker.unity3d.com/product/unity/issues/guid/1358677) says that the bug I mentioned earlier is already fixed in Unity 2021.2.x, I can still reproduce it in Unity 2021.2.1f1 with the code example I've provided in my bug report (1369148).

Another Unity user is also seeing the same behavior (see comment in the issue tracker). May I ask you to please re-visit this bug and check what went wrong? Thank you very much.

 

Thank you so much for looking into this and for the explanation what happened behind the scenes. I can confirm that in Unity 2021.2.3f1 everything is functioning as expected again

 

Hello,

Not sure if this is the best place to ask, is there a way to check if any overlays are docked to the "side toolbars"?
I'm using HandleUtility.WorldToGUIPoint(transform.position) on OnDrawGizmo, but this gives inconsistent results with the overlays. is this a bug or intended?

Overlay OFF, correct result:


Overlays ON, the world to GUI point is missalligned


Thank you!

Edit: It seems that the overlays do not change the screen width or height when overlays are docked, so using those will result in some inconsistencies as well!

 

Look Blender 3.0 docking system, panels rearrange, header hide, panels minimize... abilities

They are amazing!
Wish Unity look into their solution and adopt as much as possible

 

I can confirm this bug. This has been happening with the SabreCSG and RealtimeCSG projects, the toolbars were all under the scene view. I found EditorWindow.position to return the wrong height when there is a docked toolbar overlay on the top of the scene view (it's there by default).

 

This has the potential to break som many things. I will do a bug report. The window size should scale with overlays accordingly. I'm using HandleUtility.WorldToGUIPoint(transform.position) and this doesn't take the docking into account.

Edit: For now I came up with this S***ty solution. Docking on the bottom or right side, doesn't change anything, so just checking if docked on top to the left is enough to add some offsets:

Code (CSharp):

1.  
2.         bool switchMode;
3.         int pixHeightPrev = 0;
4.         int pixHeightNext = 0;
5.         int pixWidthPrev = 0;
6.         int pixWidthNext = 0;
7.  
8. ...
9.  
10.         switchMode = !switchMode;
11.  
12.         if (switchMode)
13.         {
14.             pixHeightPrev = SceneView.currentDrawingSceneView.camera.pixelHeight;
15.             pixWidthPrev = SceneView.currentDrawingSceneView.camera.pixelWidth;
16.         }
17.         else
18.         {
19.             pixHeightNext = SceneView.currentDrawingSceneView.camera.pixelHeight;
20.             pixWidthNext = SceneView.currentDrawingSceneView.camera.pixelWidth;
21.         }
22.  
23.         if (pixHeightPrev - pixHeightNext == 26)
24.         {
25.             Debug.Log("undocked top bottom");
26.         }
27.  
28.         if (pixHeightNext - pixHeightPrev == 26)
29.         {
30.             Debug.Log("docked top bottom");
31.         }
32.  
33.         if (pixWidthPrev - pixWidthNext == 43)
34.         {
35.             Debug.Log("undocked side");
36.         }
37.  
38.         if (pixWidthNext - pixWidthPrev == 43)
39.         {
40.             Debug.Log("docked side");
41.         }

 

The reason for this is because it translates a position from world space in the scene to GUI on the editor window, not to the scene rect specifically.
It is the same for how GUIUtility.GUIToScreenPoint(..) takes a point in the editor window space, and translates it in to a point on the screen. You can also use HandleUtility.WorldToGUIPoint in other windows too iirc. For example if you have a PreviewScene rendering in your own window. Your change would completely break any tool that used this outside of the main SceneView.

 

Alright, but how would I use this correctly then. It all worked nicely until the overlays were added.
var labelPos2D = HandleUtility.WorldToGUIPoint(labelPosition.position);

 

Right now it looks like reflection is the only solution. Or to traverse the VisualElement tree of the SceneView window and check for

#overlay-toolbar__top

.

If the devs still watch this thread (which it seems you do). Can you please allow access to info of what overlays are currently open and where they are docked/positioned? This would be really nice to have and allow for more advanced and comprehensive tools/editor extensions.

 

I see, thanks! I'll see what I can do with my limited programming knowledge

 

Following up on the discussion above, another facet of this issue is that SceneView.position.width / .height is not reduced once an overlay is docked inside the scene view window, but the GUI position origin does get shifted accordingly (so that 0,0 is below the docked overlay).
I would find it more correct when the scene view's width/height gets updated accordingly to the actual view space i.e. minus the overlay docks. Or maybe add a new property that provides this information if you don't want to break compatibility with existing things.

 

Could somebody here help me with the bug that Overlays are neither stored with the Layouts, nor there is any way to apply them manually through a script after loading a Layout? I posted about this months ago, and it is still not fixed in 2021.3.0f1, but I need to ship a package which requires this to work...

https://forum.unity.com/threads/ove...n-saving-loading-layout-to-from-file.1240951/

 

Hey, is it possible to show an overlay from another script? (I have a toolbar button I'd like to display the overlay when pressed).

I see that the overlay.displayed property was mentioned, but first the overlay has to be created doesn't it? (And that does mean that the overlay must be created via the triple dots > overlays menu, doesn't it?)
Any help would be appreciated

 

What I do for that is to create a transient overlay. Transient overlays are not controlled by the user, they're instead shown when they return "true" for the visible bool. If you just forward that to a static value you control, you can control it's drawing through that.

Dummy example:

Code (csharp):

1. [Overlay(typeof(SceneView), "Example")]
2. public class ExampleOverlay : Overlay, ITransientOverlay {
3.  
4.     private static bool s_visible;
5.     public         bool visible => s_visible;
6.  
7.     [MenuItem("Example/Overlay")]
8.     public static void Toggle() {
9.         s_visible = !s_visible;
10.     }
11.  
12.     public override VisualElement CreatePanelContent() {
13.         return new Label("Example");
14.     }
15. }

 

Baste to the rescue as always! Thanks, I'll try that.

Edit: Works perfectly, just what I wanted

 

Hi,

I've just started to play around with Overlays and really liking it so far. I just have a couple questions:

1) How do I refresh the contents of an Overlay that is generated from

CreatePanelContent

?

2) What is the preferred way to create a "context" panel that is displayed under a ToolbarOverlay element? Similar to the one used for Gizmos (in attachment) when clicking on the dropdown. I'm currently using another Overlay to display when a toolbar element is toggled but it feels a bit clunky. The docs show a sample using Handles.BeginGUI() for displaying a color in the scene but I would prefer to use VisualElements and/or Overlays to handle the positioning if that is possible.

EDIT: You can ignore the first questions since I figured it out. It's super obvious now lol , I just need to update the bindings of the UIElements. My head was stuck in IMGUI land.

 

How did you refresh the content of the overlay?

 

When I create the VisualElement (in

CreatePanelContent

) I just save references to the elements i.e.

Code (CSharp):

1. m_StartType =  root.Q<EnumField>("start-type");
2. m_SpawnDelay = root.Q<FloatField>("spawn-delay");

I have two methods UnblindElements/RebindElements and I just call these whenever the target object for the Overlay changes.

For example in

RebindElements

Code (CSharp):

1. m_StartType.value = (EnemyWaveInfo.EnemyWaveStartType) serializedObject.FindProperty("m_StartType").intValue;
2.         m_StartType.BindProperty(serializedObject.FindProperty("m_StartType"));

 

As of 2021.3, userControlledVisibility is internal and cannot be set. The hacky-feeling workaround is to implement the

ITransientOverlay

interface and have the visible property always return true. This will create an overlay that cannot be closed by the user.

For what I was actually trying to accomplish, it would be nice to have a straightforward way to set default overlay visibility and positioning for custom tools.

 

Needed something similar to the camera overlay behavior which is shown only temporary , so i made this



Github [link] - This one will only become visible when the target component type is selected in the scene view

Code :

Code (CSharp):

1. using UnityEngine;
2. #if UNITY_EDITOR
3. using UnityEditor;
4. using UnityEditor.Overlays;
5. #endif
6.  
7. [DisallowMultipleComponent]
8. public class QuickOverlayExample : MonoBehaviour
9. {
10.  
11.     // normal mono stuff here
12.  
13. #if UNITY_EDITOR
14.     [Overlay(typeof(SceneView) , Title )]
15.     class QuickOverlay : IMGUIOverlay , ITransientOverlay
16.     {
17.         QuickOverlayExample target;
18.  
19.         void BurnToScreen() // some dummy ui
20.         {
21.             if ( GUILayout.Button("Action") ) { }
22.  
23.             GUILayout.Label("YO");
24.         }
25.  
26.         #region Transient Overlay
27.         const string Title = "Skinned Mesh Vertex";
28.         public override void OnGUI() { BurnToScreen(); Update(); }
29.         public override void OnCreated() { Selection.selectionChanged += Update; Update(); }
30.         public override void OnWillBeDestroyed() { Selection.selectionChanged -= Update; Update(); }
31.         public bool visible => isVisible;
32.         bool isVisible = false;
33.         void Update() {
34.             if( Selection.activeGameObject == null ) isVisible = ( false );
35.             else if( Selection.activeGameObject == ( target?.gameObject ?? null ) ) isVisible = ( true );
36.             else if ( ! Selection.activeGameObject.TryGetComponent( out target ) ) isVisible = ( false );
37.             else isVisible = ( true );
38.         }
39.         #endregion
40.     }
41.     #endif
42. }

Edit : removed hacks & implemented TransientOverlay

 

Just wanted to check - is there an update on this? currently struggling to draw things from OnDrawGizmos in the scene view without the toolbar offsets, and I can't find a nice way to detect the toolbar height in code

 

This is great! It's working, pixel-perfect, as easy as..

Code (CSharp):

1. Vector2 screenPosition = HandleUtility.GUIPointToScreenPixelCoordinate(Event.current.mousePosition);
2. screenPosition.y = SceneView.lastActiveSceneView.cameraViewport.height - screenPosition.y;

Thanks!

 

Hello! Are those overlays available only in SceneView? I'd like to use them in GameView or main toolbar (one with Enter Player Mode button) as well. Like, for example, put quick-save/quick-load buttons there. Those make no sense to put in SceneView.

 

Check the second point in the first post

 

I saw it, but.. GameView is internal class, so I can't assign it for attribute. And assigning EditorWindow does not seem to add anything anywhere other than in SceneView.