编辑器扩展插件开发相关问题

Creator 3.x
#1

前言

cocos小白刚接触插件开发，目前采用的是HTML模式，以前没做过WEB相关，这两天看了下HTML、CSS还有扩展开发教程文档。

插件需求

打开面板，拖入带有Animation组件的Node，点击读取按钮，会展示Animation组件中所有clip名称，每个名称下对应有需要填入的配置信息。最后点击生成按钮保存一份配置文件。

当前问题

问题1：
image
怎么从ui-component获取真实的组件信息？我通过 this.$.anim 并没找到获取Animation组件的接口。

问题2
如何动态的增加和删除显示元素？
就如我需求中说的可以根据Animation组件信息显示不同的内容。
目前研究出的增加元素的方法如下，身边没有cocos大佬也不清楚用法对不对，还有就是这种方式生成的元素布局好像有问题。
image

问题3
每次修改完ts代码都需要手动执行 tsc -b 命令生成js代码吗？有没有更便捷的方法。
image

#2

就是appendchild 和 removeChild ，具体的你可以搜索html 元素增删查改，布局不同说明你append可能错了dom元素，获取节点的方法也很多，可以自行百度一下，就一个api方法

#3

有的，在package，json 中，你可以看到scripts对象有很多乱七八糟的东西，其中 watch 可以实时监听修改生成js代码，在你的终端中启用命令 npm run watch

#4

意思是我运行tsc -w就行了嘛？我看执行这个命令后像打了断点一样

#5

第一个问题怎么解决，老哥

#6

npm run watch会在代码更新自动执行 tsc -w

#7

没用过我也不知道 :sob:

#8

好，在插件目录下运行命令吗

#9

Yes,插件的根目录下运行，别的地方不行

#10

就看到了.head和.body，我这个应该在哪添加元素呢？我还以为是style布局的问题，需要自己配置布局参数。 :sweat:
image

#11

如果你希望和 ui-componet 并列，可以给它的父级div 给一个id或者class，获取到这个父级 再append

#12

谢了，给div加个id然后在这个布局下面添加就没问题了

#13

问题1有没有试过的大佬 :sob:

#14

（帖子被作者删除，如无标记将在 24 小时后自动删除）

#15

怎么通过 < ui-component id=“anim” droppable=“cc.Animation” >< /ui-component > 取得组件上的clips呢？

#16

@1226085293 @Knox @iwae @jare

#17

微信图片_20240507163234

首先打开 你的消息管理器 可以看到 查询组件 的消息是这样的

this.$.anim?.addEventListener(“change”, async (event: any) => {

        var info = await Editor.Message.request('scene', 'query-component', event.target.value);

        // @ts-ignore

        console.log(" ======== info =========", info.value?.clips);

    });

第一步 监听组件改变时候的值 获取 uuid
第二部 查询这个组件，根据uuid， 最后你就得到了数据
微信图片_20240507163435

#18

感谢大佬。不过好像取不到clip的名字呢，最后输出了个uuid。
image
image

#19

那你就拿着这个uuid再查一遍呗 :grimacing:
await Editor.Message.request(‘asset-db’, ‘query-asset-info’, urlOrUUIDOrPath);
去消息管理器里面 搜一搜 试一试

#20

懂了，感谢大佬。 :+1: