CocosCreator3D插件教程(6)：给插件添加UI面板

xu_yanfeng

已于 2024-09-08 11:13:18 修改

阅读量692

点赞数

分类专栏： CocosCreator3D插件教程文章标签： cocos-creator plugin

于 2020-11-14 15:13:32 首次发布

本文链接：https://blog.youkuaiyun.com/xx774177933xx/article/details/109691283

版权

CocosCreator3D插件教程专栏收录该内容

23 篇文章

订阅专栏

本文介绍了如何在CocosCreator3D插件中添加UI面板，包括配置面板、设置打开入口及在编辑器中测试。通过定义面板类型和逻辑入口，以及使用Editor.Panel.open()接口，可以实现面板的创建和打开，让插件功能更直观易用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有时我们的插件需要UI面板，进行一些简单的人机交互，使插件的使用更加简单、方便。

那么在creator3D插件中，如何添加UI面板呢？

1.配置插件UI面板

如下所示，修改package.json文件，插件的所有面板，都是在panels字段定义：

{
	 // ...
   "panels": {
    "default": {
      "title": "UI面板",
      "type": "dockable",
      "main": "./panel.js"
    }
  }
}

type：定义了插件面板类型，dockable类型就是可悬浮停靠，creator3d编辑器内置的面板就是这种类型。
main：UI面板的逻辑入口。

2.给UI面板添加打开入口

在第一步中，已经定义了一个UI面板，我们需要提供一个打开面板的入口，还记得之前的插件菜单么？

在package.json增加一个打开面板菜单：

{
  // ...
  "main": "./main.js",
	"contributions": {
		"menu": [
      // ...
      {
        "path": "插件",
        "label": "打开面板",
        "message": "openPanel"
      }
    ],
    "messages":{
      // ...
      "openPanel": {
        "methods": [
          "openPanel"
        ]
      }
    }
	}
}

在main.js中实现openPanel消息，通过调用Editor.Panel.open("插件名字.面板名字")接口来打开面板：

exports.methods={
		// ...
	  openPanel () {
        Editor.Panel.open('hello-world');
    }
}

Editor.Panel.open(‘hello-world’)，默认会打开配置的"default"面板。

如果要打开配置的其他面板，比如配置了"game"面板，需要Editor.Panel.open(“hello-world.game”)来打开"game"面板。

3. 编辑器中测试下

回到编辑器中，和之前一样，我们需要在扩展面板中重启并启用下插件(必要情况下，可能得重启下编辑器)。

我们点击菜单栏的插件/打开面板

编辑器就会打开一个新的面板

我们也可以将该UI面板拖拽到编辑器主窗口中：

请注意拖拽部位，拖拽的不是窗口的标题栏，而是窗口内的tap栏，也就是"UI面板"的部位

现在我们插件的UI面板中还没有任何UI元素，接下来，就让我们给界面添加一些按钮、文本吧