拖挺好下次不许再拖了

摘要

CocosCreator的组件面板拖拽式对于游戏开发来说很方便，但是有时候面对数量过多的资源，拖拽就成了一件痛苦的事情！

正文

使用工具

CocosCreator 版本 3.4.0

故事从一张 Excel 讲起

小明刚来到游戏项目组，一切对于他来说都是陌生的，但是上一位同事走的匆忙，活也没干完，老板没给他时间熟悉。

这不，对接策划来了！策划给小明描述了他的宏大设想，然后解释了文档上的各个要点，最后甩给了他一个活与一张表，要将 CocosCreator 项目完善：

小明一看，哈哈，这活我熟，拖就完了！

这时小明一位菜菜同事路过，还给小明支了一招，你猜是啥？

原来是让拖拽时能近一些，妙啊~

偷懒! 使用消息系统代替拖入

第二天，小明带着黑眼圈来上班，步履蹒跚。阔阔看到了觉得很奇怪，便上前关心询问，原来是策划又做好了 500 个物品描述信息，让小明加上。好家伙，听小明说他硬生生拖了一整夜，我直接好家伙！

本着同事之间要互帮互助、团结友爱，我就帮小明搞了一下自动化。

先安装一下 npm i node-xlsx 库，这是一个解析 Excel 表格的库，然后将数据以 json 的形式抽离出来。

有了 json 数据，我们就还需要解决一个问题，如何找到 CocosCreator 内的资源？不同版本的 CocosCreator 会有不同的 IPC 通信 API，查询对应版本的文档，发现在 3.4 版本中可以使用 Editor.Message.request 与 Editor.Message.send 来进行消息通信。

官方文档链接：

https://docs.cocos.com/creator/manual/zh/editor/extension/messages.html

在 CocosCreator 中，菜单栏中 开发者 -> Export .d.ts 来导出 Ts 声明文件，开发者 -> 消息列表和消息调试工具 来帮助我们查看内部消息的通讯，拖入预制体资源会触发 set-property 这个核心消息（详见下图）：

发现核心消息 set-property 的参数是利用点进行参数拼接，数字代表的意思清晰明了。根据以上信息就可以配合 executeInEditMode 使得脚本在编辑器环境运行然后设置好属性（给出代码）：

import {
    
     _decorator, Component, Node, Prefab, CCInteger } from 'cc'
import {
    
     EDITOR } from 'cc/env'
const {
    
     ccclass, property, executeInEditMode } = _decorator

/** 一个物品信息包括一个预制体，数量 和 描述信息 */
@ccclass('ItemInfo')
class ItemInfo {
    
    
    @property(Prefab)
    prefab: Prefab = null

    @property(CCInteger)
    count: number = 0

    @property
    desc: string = ''
}

@ccclass('Root')
// 确保在编辑器内能运行，onLoad 会直接执行
@executeInEditMode(true)
export class Root extends Component {
    
    

    @property(ItemInfo)
    itemInfos: ItemInfo[] = []

    async onLoad() {
    
    
        // 这里可以拖入导出的 json 文件获得，我直接 copy 过来示意一下
        const data = [
            [ 'item-00', 3, '描述0号' ],
            [ 'item-01', 15, '描述1号' ],
            [ 'item-02', 27, '描述2号' ],
            [ 'item-03', 39, '描述3号' ],
            [ 'item-04', 5, '描述4号' ],
            [ 'item-05', 63, '描述5号' ],
            [ 'item-06', 75, '描述6号' ],
            [ 'item-07', 28, '描述7号' ],
            [ 'item-08', 99, '描述8号' ],
            [ 'item-09', 11, '描述9号' ],
            [ 'item-10', 64, '描述10号' ],
            [ 'item-11', 69, '描述11号' ],
            [ 'item-12', 5, '描述12号' ],
            [ 'item-13', 63, '描述13号' ],
            [ 'item-14', 75, '描述14号' ],
            [ 'item-15', 27, '描述15号' ],
            [ 'item-16', 1, '描述16号' ],
            [ 'item-17', 45, '描述17号' ],
            [ 'item-18', 7, '描述18号' ],
            [ 'item-19', 21, '描述19号' ]
        ]
        // 只在编辑器环境运行
        if (EDITOR) {
    
    
            // 查询 uuid
            for (let i = 0; i < data.length; ++i) {
    
    
                const queryPath = `db://assets//prefabs//item-${
      
      i < 10 ? '0' + i : i}.prefab`
                const prefabUuid = await Editor.Message.request('asset-db', 'query-uuid', queryPath)
                // 根据查询的信息进行预制体装入
                Editor.Message.send('scene', 'set-property',
                {
    
    
                    uuid: this.node.uuid,
                    path: `__comps__.0.itemInfos.${
      
      i}.prefab`,
                    dump: {
    
    
                        type: 'cc.Prefab',
                        value: {
    
    
                            uuid: prefabUuid
                        }
                    }
                })
                // 普通属性直接赋值即可
                this.itemInfos[i].count = data[i][1] as number
                this.itemInfos[i].desc = data[i][2] as string
            }
        }
    }

    start() {
    
    
    }
}

写好代码，测试一下：

插件化

核心逻辑其实就那两个 API，插件化也不过是创建一个插件面板。在插件中可以引入 node-xlsx，然后做个按钮调用打开 Excel 表，将转化 json 数据过程集成进来，关于插件面板，可以按照官方文档来搞一下，然后引入 Editor.Message.request 和 Editor.Message.send('scene', 'set-property', ... 即可！

https://docs.cocos.com/creator/manual/zh/editor/extension/readme.html

好了，小明同学终于可以不用拖一整夜了，帮他做好自动化后，临走，我跟他说：虽然拖挺好，但是下次不许再拖了！