金融网站cms,企业网站优化内容,泛华建设集团网站,龙岩网站改版较好的公司介绍 文档中会进行SceneView的自定义扩展#xff0c;实现显示常驻GUI和添加自定义叠加层#xff08;Custom Overlay#xff09;。 最近项目开发用回了原生的Unity UI相关内容。对于之前常用的FairyGUI来说#xff0c;原生的UGUI对于UI同学来讲有些不太方便。再加上这次会…介绍 文档中会进行SceneView的自定义扩展实现显示常驻GUI和添加自定义叠加层Custom Overlay。 最近项目开发用回了原生的Unity UI相关内容。对于之前常用的FairyGUI来说原生的UGUI对于UI同学来讲有些不太方便。再加上这次会进行一些固定的脚本绑定想在UI制作时直接加进到组件上所以有了这篇文章。 这篇文章是在制作完工具后进行的提炼偏向代码方面。 在制作相关工具时根据UI同学来讲想做到在场景中能够直接点击创建对应的UI组件切换、编辑和预览等操作时工具不会消失。在此基础上又需要加上创建对应UI组件时直接添加好对应的脚本。 之前虽然也写过一些编辑器的扩展但对于Scene界面涉及的不多。故我直接在网上找了一篇比较符合工具的文章根据这篇文章做出了第一版的界面工具。引用unity Scene View扩展之显示常驻GUI - 知乎 (zhihu.com)https://zhuanlan.zhihu.com/p/124269658 准备 找一些功能图标方便更直观的查看功能推荐网站iconfont-阿里巴巴矢量图标库 将准备好的图标拷贝到当前工程的编辑器默认资源路径下。示例我准备的按钮图标Assets/Editor Default Resources/UITools/icon_button.png 设置图标的属性为Editor GUI and Legacy GUI 制作Scene常驻GUI 脚本中涉及到 1.场景每次调用 OnGUI 方法时接收回调 SceneView.duringSceneGui 2.脚本重新编译后自动执行指定的操作 [DidReloadScripts] 3.编辑器模式下照常执行当前脚本 [ExecuteInEditMode] 4.编辑器执行指定菜单 EditorApplication.ExecuteMenuItem(已经存在的菜单项路径) // 例子:创建UI按钮 // EditorApplication.ExecuteMenuItem(GameObject/UI/Legacy/Button); 1、添加GUI窗口 using UnityEditor; using UnityEditor.Callbacks; using UnityEngine; public class SceneTools1 : MonoBehaviour {private Rect _initPosition new Rect(50, 50, 0, 0);private readonly GUILayoutOption _winWidth GUILayout.Width(120);private void Awake(){ #if UNITY_2019_1_OR_NEWERSceneView.duringSceneGui - OnSceneViewGui;SceneView.duringSceneGui OnSceneViewGui; #elseSceneView.onSceneGUIDelegate - OnSceneViewGui;SceneView.onSceneGUIDelegate OnSceneViewGui; #endif}private void OnSceneViewGui(SceneView obj){Handles.BeginGUI();_initPosition GUILayout.Window(1, _initPosition, WindowContentFunc, UI Tools, _winWidth);Handles.EndGUI();}private void WindowContentFunc(int id){GUILayout.Label(当前选中项);EditorGUI.BeginDisabledGroup(true);EditorGUILayout.ObjectField(Selection.activeTransform, typeof(Transform), true);EditorGUI.EndDisabledGroup();GUI.DragWindow();}private void OnDestroy(){ #if UNITY_2019_1_OR_NEWERSceneView.duringSceneGui - OnSceneViewGui; #elseSceneView.onSceneGUIDelegate - OnSceneViewGui; #endif}[DidReloadScripts]private static void Reload(){var canvas FindObjectOfTypeSceneTools1();if (canvas ! null){canvas.Awake();}} } 2、添加GUI按钮 // 添加按钮创建功能 var uiContent EditorGUIUtility.TrTextContent(按钮, 点击后会创建一个按钮对象, $Assets/Editor Default Resources/UITools/icon_button.png); if (GUILayout.Button(uiContent)) {Debug.LogError(创建按钮被点击);// 执行菜单 按钮创建EditorApplication.ExecuteMenuItem(GameObject/UI/Legacy/Button); }注1可以通过修改GUI按钮风格来达到自己的想要的表现效果详细的UI菜单执行方法可以在UI包的MenuOptions.cs中查看。 完整代码 using UnityEditor; using UnityEditor.Callbacks; using UnityEngine; public class SceneTools1 : MonoBehaviour {private Rect _initPosition new Rect(50, 50, 0, 0);private readonly GUILayoutOption _winWidth GUILayout.Width(120);private void Awake(){ #if UNITY_2019_1_OR_NEWERSceneView.duringSceneGui - OnSceneViewGui;SceneView.duringSceneGui OnSceneViewGui; #elseSceneView.onSceneGUIDelegate - OnSceneViewGui;SceneView.onSceneGUIDelegate OnSceneViewGui; #endif}private void OnSceneViewGui(SceneView obj){Handles.BeginGUI();_initPosition GUILayout.Window(1, _initPosition, WindowContentFunc, UI Tools, _winWidth);Handles.EndGUI();}private void WindowContentFunc(int id){GUILayout.Label(当前选中项);EditorGUI.BeginDisabledGroup(true);EditorGUILayout.ObjectField(Selection.activeTransform, typeof(Transform), true);EditorGUI.EndDisabledGroup();var uiContent EditorGUIUtility.TrTextContent(按钮, 点击后会创建一个按钮对象, $Assets/Editor Default Resources/UITools/icon_button.png);if (GUILayout.Button(uiContent)){Debug.LogError(创建按钮被点击);// 执行菜单 按钮创建EditorApplication.ExecuteMenuItem(GameObject/UI/Legacy/Button);}GUI.DragWindow();}private void OnDestroy(){ #if UNITY_2019_1_OR_NEWERSceneView.duringSceneGui - OnSceneViewGui; #elseSceneView.onSceneGUIDelegate - OnSceneViewGui; #endif}[DidReloadScripts]private static void Reload(){var canvas FindObjectOfTypeSceneTools1();if (canvas ! null){canvas.Awake();}} }结果 当具体的功能实现以及同步到UI同学后在使用的过程中发现了一些小问题。常见的有以下这些 1、工具跟着场景走如果想要预览和编辑都有工具需要在预览场景中和UI制作场景中都挂载当前脚本。 2、工具位置不会跟着窗口大小调整如果调整了Scene窗口的大小可能会导致工具找不到。 3、如果在UI编辑场景中双击预览会导致工具异常。 制作Scene叠加层 为了解决上面的问题我更换了扩展方案要创建类似Scene中工具条的那种扩展。经过一番查找终于在官方手册中找到想要的扩展功能Create your own overlay - Unity 手册 (unity3d.com)https://docs.unity3d.com/cn/current/Manual/overlays-custom.html 跟着手册的操作执行下来我如愿的创建了自己的工具条和面板。如图 如果界面中没有出现上面的示意图在确保代码没有出错以及代码位置正确的情况下通过点击右上角的三个点或者右键点击Scene标签弹出工具条相关的菜单选中自己自定义的菜单名即可。如图 1、创建自定义工具条 在Editor目录下新建脚本并修改继承类手册中的示例已经很详细了这里将手册中的代码给贴了过来方便查看。 using UnityEditor; using UnityEditor.Overlays; using UnityEditor.Toolbars; using UnityEngine; using UnityEngine.UIElements; namespace Game.Editor {[Overlay(typeof(SceneView), 工具条例子)]public class EditorToolbarExample : ToolbarOverlay{[EditorToolbarElement(id, typeof(SceneView))]class DropdownExample : EditorToolbarDropdown{public const string id ExampleToolbar/Dropdown;static string dropChoice null;public DropdownExample(){text Axis;clicked ShowDropdown;}void ShowDropdown(){var menu new GenericMenu();menu.AddItem(new GUIContent(X), dropChoice X, () {text X;dropChoice X;});menu.AddItem(new GUIContent(Y), dropChoice Y, () {text Y;dropChoice Y;});menu.AddItem(new GUIContent(Z), dropChoice Z, () {text Z;dropChoice Z;});menu.ShowAsContext();}}[EditorToolbarElement(id, typeof(SceneView))]class ToggleExample : EditorToolbarToggle{public const string id ExampleToolbar/Toggle;public ToggleExample(){text Toggle OFF;this.RegisterValueChangedCallback(Test);}void Test(ChangeEventbool evt){if (evt.newValue){Debug.Log(ON);text Toggle ON;}else{Debug.Log(OFF);text Toggle OFF;}}}[EditorToolbarElement(id, typeof(SceneView))]class DropdownToggleExample : EditorToolbarDropdownToggle, IAccessContainerWindow{public const string id ExampleToolbar/DropdownToggle;public EditorWindow containerWindow { get; set; }static int colorIndex 0;static readonly Color[] colors new Color[] { Color.red, Color.green, Color.cyan };public DropdownToggleExample(){text Color Bar;tooltip Display a color rectangle in the top left of the Scene view. Toggle on or off, and open the dropdown to change the color.;dropdownClicked ShowColorMenu;SceneView.duringSceneGui DrawColorSwatch;}void DrawColorSwatch(SceneView view){if (view ! containerWindow || !value){return;}Handles.BeginGUI();GUI.color colors[colorIndex];GUI.DrawTexture(new Rect(8, 8, 120, 24), Texture2D.whiteTexture);GUI.color Color.white;Handles.EndGUI();}void ShowColorMenu(){var menu new GenericMenu();menu.AddItem(new GUIContent(Red), colorIndex 0, () colorIndex 0);menu.AddItem(new GUIContent(Green), colorIndex 1, () colorIndex 1);menu.AddItem(new GUIContent(Blue), colorIndex 2, () colorIndex 2);menu.ShowAsContext();}}[EditorToolbarElement(id, typeof(SceneView))]class CreateCube : EditorToolbarButton //, IAccessContainerWindow{public const string id ExampleToolbar/Button;public CreateCube(){text Create Cube;icon AssetDatabase.LoadAssetAtPathTexture2D(Assets/CreateCubeIcon.png);tooltip Instantiate a cube in the scene.;clicked OnClick;}void OnClick(){var newObj GameObject.CreatePrimitive(PrimitiveType.Cube).transform;Undo.RegisterCreatedObjectUndo(newObj.gameObject, Create Cube);}}EditorToolbarExample() : base(CreateCube.id,ToggleExample.id,DropdownExample.id,DropdownToggleExample.id){}} }2、创建自定义面板 创建自定义面板给的例子比较简单只是显示个标签。接下来我会贴出之前在使用过程中的一些修改比如 单行显示空间组合等等。 先贴上手册中的代码 using UnityEditor; using UnityEditor.Overlays; using UnityEngine.UIElements; [Overlay(typeof(SceneView), 面板自绘例子, true)] public class MyToolButtonOverlay : Overlay {public override VisualElement CreatePanelContent(){var root new VisualElement() { name UI工具面板 };root.Add(new Label() { text 这是个自定义面板 });return root;} }接下来将之前的按钮创建在这个面板中 using UnityEngine; using UnityEditor.Toolbars; using UnityEditor.Overlays; using UnityEngine.UIElements; using UnityEditor; [Overlay(typeof(SceneView), 面板自绘例子, true)] public class MyToolButtonOverlay : Overlay {public override VisualElement CreatePanelContent(){var root new VisualElement() { name UI工具面板 };var btn1 new EditorToolbarButton(){text 按钮,icon (Texture2D)EditorGUIUtility.LoadRequired($Assets/Editor Default Resources/UITools/icon_button.png),tooltip 点击后会创建一个按钮对象,clickable new Clickable(() {Debug.LogError(创建按钮被点击);// 执行菜单 按钮创建EditorApplication.ExecuteMenuItem(GameObject/UI/Legacy/Button);}),};root.Add(btn1);return root;} } 效果图预览 可以看到这个外观尺寸和布局都不太合适尤其在有多个按钮时可以想想会有多不方便。这时可以通过修改当前按钮的风格来美化组件。总结了些常用的风格如下 style {color Color.white, // 修改颜色height 32, // 修改高度width 120, // 修改宽度marginLeft 4, // 修改左边距marginRight 4, // 修改右边距marginBottom 2, // 修改下边距marginTop 2, // 修改上边距borderBottomLeftRadius 4, // 修改左下角圆角borderBottomRightRadius 4, // 修改右下角圆角borderTopLeftRadius 4, // 修改左上角圆角unityTextAlign TextAnchor.MiddleLeft, // 修改文本对齐方式flexDirection FlexDirection.Row, // 修改图文混排的布局方式显示 }添加风格后的按钮示意图如下 如果要单独修改按钮上的某个元素的风格时可以通过方法 ElementAt 传入下标获取到对应的元素组件。比如将图片对齐到按钮左边等等。 var imgBtn1 btn1.ElementAt(0); var imgStyle1 imgBtn1.style; imgStyle1.width 32; imgStyle1.height 32; imgStyle1.alignSelf Align.Center; 改后的效果图 当一个按钮风格配置好后如果想要通用当前的按钮需要扩展当前的按钮类。 private class MyToolbarButton : EditorToolbarButton {public MyToolbarButton(string name,string iconPath,string tooltip,Action onClick){this.text name;this.icon (Texture2D)EditorGUIUtility.LoadRequired(iconPath);this.tooltip tooltip;this.clicked onClick;var btnStyle this.style;btnStyle.color Color.white;btnStyle.height 32;btnStyle.width 120;btnStyle.marginLeft 4;btnStyle.marginRight 4;btnStyle.marginBottom 2;btnStyle.marginTop 2;btnStyle.borderBottomLeftRadius 4;btnStyle.borderBottomRightRadius 4;btnStyle.borderTopLeftRadius 4;btnStyle.borderTopRightRadius 4;btnStyle.unityTextAlign TextAnchor.MiddleLeft;btnStyle.flexDirection FlexDirection.Row;var imgBtn1 this.ElementAt(0);var imgStyle1 imgBtn1.style;imgStyle1.width 32;imgStyle1.height 32;imgStyle1.alignSelf Align.Center;} }修改之前的添加按钮代码改成封装后的按钮并再添加一个看看效果。 var btn1 new MyToolbarButton(按钮, Assets/Editor Default Resources/UITools/icon_button.png, 创建文本对象,() {EditorApplication.ExecuteMenuItem(GameObject/UI/Legacy/Button);}); var btn2 new MyToolbarButton(文本, Assets/Editor Default Resources/UITools/icon_text.png, 创建文本对象,() {EditorApplication.ExecuteMenuItem(GameObject/UI/Legacy/Text);}); root.Add(btn1); root.Add(btn2);效果图 效果出来了但这时候会发现不管添加多少按钮组件都是垂直向下添加的。如果想让某些组件进行水平显示又不影响现有布局的情况下我们可以这样做 1、创建一个新的VisualElement加入到根节点并修改风格中的布局方向 flexDirection FlexDirection.Row 2、将需要重新布局的组件添加到当前新的节点中 var layer new VisualElement() {style {flexDirection FlexDirection.Row, // 水平marginLeft 4,marginRight 4,marginTop 2,marginBottom 2,} }; var btn3 new MyToolbarButton(图片, Assets/Editor Default Resources/UITools/icon_image.png, 创建图片对象,() {EditorApplication.ExecuteMenuItem(GameObject/UI/Legacy/Image);}); btn3.style.width 75; var btn4 new MyToolbarButton(原图, Assets/Editor Default Resources/UITools/icon_image.png, 创建Raw Image对象,() {EditorApplication.ExecuteMenuItem(GameObject/UI/Legacy/Raw Image);}); btn4.style.width 75; layer.Add(btn3); layer.Add(btn4); root.Add(layer);示意图查看 注如果需要更复杂的布局可以进行布局嵌套实现。 完整代码 using System; using UnityEngine; using UnityEditor.Toolbars; using UnityEditor.Overlays; using UnityEngine.UIElements; using UnityEditor; using UnityEditor.Experimental.GraphView; [Overlay(typeof(SceneView), 面板自绘例子, true)] public class MyToolButtonOverlay : Overlay {private class MyToolbarButton : EditorToolbarButton{public MyToolbarButton(string name,string iconPath,string tooltip,Action onClick){this.text name;this.icon (Texture2D)EditorGUIUtility.LoadRequired(iconPath);this.tooltip tooltip;this.clicked onClick;var btnStyle this.style;btnStyle.color Color.white;btnStyle.height 32;btnStyle.width 120;btnStyle.marginLeft 4;btnStyle.marginRight 4;btnStyle.marginBottom 2;btnStyle.marginTop 2;btnStyle.borderBottomLeftRadius 4;btnStyle.borderBottomRightRadius 4;btnStyle.borderTopLeftRadius 4;btnStyle.borderTopRightRadius 4;btnStyle.unityTextAlign TextAnchor.MiddleLeft;btnStyle.flexDirection FlexDirection.Row;var imgBtn1 this.ElementAt(0);var imgStyle1 imgBtn1.style;imgStyle1.width 32;imgStyle1.height 32;imgStyle1.alignSelf Align.Center;}}public override VisualElement CreatePanelContent(){var root new VisualElement() { name UI工具面板 };var btn1 new MyToolbarButton(按钮, Assets/Editor Default Resources/UITools/icon_button.png, 创建文本对象,() {EditorApplication.ExecuteMenuItem(GameObject/UI/Legacy/Button);});var btn2 new MyToolbarButton(文本, Assets/Editor Default Resources/UITools/icon_text.png, 创建文本对象,() {EditorApplication.ExecuteMenuItem(GameObject/UI/Legacy/Text);});root.Add(btn1);root.Add(btn2);var layer new VisualElement(){style {flexDirection FlexDirection.Row, // 水平marginLeft 4,marginRight 4,marginTop 2,marginBottom 2,}};var btn3 new MyToolbarButton(图片, Assets/Editor Default Resources/UITools/icon_image.png, 创建图片对象,() {EditorApplication.ExecuteMenuItem(GameObject/UI/Legacy/Image);});btn3.style.width 75;var btn4 new MyToolbarButton(原图, Assets/Editor Default Resources/UITools/icon_image.png, 创建Raw Image对象,() {EditorApplication.ExecuteMenuItem(GameObject/UI/Legacy/Raw Image);});btn4.style.width 75;layer.Add(btn3);layer.Add(btn4);root.Add(layer);return root;} }Overlay的相关知识就分享到这了如果后续有新的使用经验会同步到当前文档中。 引用参考 1、unity Scene View扩展之显示常驻GUI - 知乎 (zhihu.com) 2、Create your own overlay - Unity 手册 (unity3d.com)