commit ed399a1213d7cc468fc83a37491010c46e6cacab Author: JianMiau Date: Thu Mar 31 08:59:02 2022 +0800 [add] first diff --git a/README.md b/README.md new file mode 100644 index 0000000..6846297 --- /dev/null +++ b/README.md @@ -0,0 +1,60 @@ +# Cocos Creater OutputComponent + +## 插件 安裝方式 + +1. 安裝在 **項目** 底下 +> 把插件資料夾放到項目的packages(跟assets同層) + +2. 安裝在 **全局** 底下 +> 把插件資料夾放到C:\Users\%USERNAME%\.CocosCreator\packages + +## 插件稍微說明(都是搬過來的資料 XD) + +剩下沒寫的可以到參考資料裡面看看😀 + +1. 定義你的包描述文件：**package.json** +> **name** String - 定義了包的名字，包的名字是全局唯一的，他關係到你今後在官網服務器上登錄時的名字。 +> +> **version** String - 版本號，我們推薦使用semver格式管理你的包版本。 +> +> **description** String（可选） - 一句話描述你的包是做什麼的。 +> +> **author** String（可选） - 擴展包的作者 +> +> **main** String (可选) - 入口程序 +> +> **scene-script** String (可选) - 調用引擎API 和項目腳本 +> +> **main-menu** Object (可选) - 主菜單定義 +> +> **有要使用介面的話：** +> +> **panel** Object (可选) - 定義的面板在package裡的描述 +> +> **注意panel的type有兩種：** +> +> dockable：可停靠面板，打開該面板後，可以通過拖拽面板標籤到編輯器裡，實現擴展面板嵌入到編輯器中。下面我們介紹的面板入口程序都是按照可停靠面板的要求聲明的。 +> +> simple：簡單Web面板，不可停靠到編輯器主窗口，相當於一份通用的HTML前端頁面。詳細情況請見定義簡單面板。 +> +> 在simple-package文件夾下面創建一個panel文件夾,然後在panel文件夾下創建一個index.js或者一個html文件都可以 + +2. 入口程序：**main.js** + +3. 定義介面以及按鈕綁定的方法，和主進程的通信：**index.js** + +3. 可以使用包括全部引擎API 和用戶組件腳本里聲明的方法和屬性：**scene-obtain..js** +> 可以在擴展包中獲取到場景裡的Canvas根節點有多少子節點，當然還可以用來對場景節點進行更多的查詢和操作。 + +## 參考資料 + +* 你的第一個擴展包 +> https://docs.cocos.com/creator/manual/zh/extension/your-first-extension.html + +* CocosCreator拓展编辑器 +> https://blog.csdn.net/qq_34772097/category_9577457.html + +* Cocos Creator Editor 編輯器擴展API記錄 +> https://blog.csdn.net/kingbook928/article/details/108659319 +> https://blog.csdn.net/qq_17209641/article/details/106822296 +> https://forum.cocos.org/t/creator-api/92605 \ No newline at end of file diff --git a/main.js b/main.js new file mode 100644 index 0000000..6d36855 --- /dev/null +++ b/main.js @@ -0,0 +1,43 @@ +"use strict"; +let fs = require("fs"); +let path = require("path"); + +module.exports = { + load() { + this.init(); + }, + unload() { + // Editor.log("卸載執行"); + }, + /** 初始化 */ + init() { + // this.createDirectory(); + }, + /** 創建Spine節點 */ + SourceChange(...args) { + // Editor.log("文件0: " + JSON.stringify(args[0])); + // Editor.log("文件1: " + JSON.stringify(args[1]._value)); + // Editor.log("文件2: " + JSON.stringify(args[2]._value)); + Editor.Scene.callSceneScript("sourcechange", "get-asset-info", { args: args }, function (err, response) { + Editor.log("SourceChange: " + response); + }); + }, + messages: { + /** 打開面板 */ + "open-panel"() { + Editor.Panel.open("sourcechange"); + }, + /** 保存按鈕點擊 */ + "create-click"(event, ...args) { + this.SourceChange(...args); + }, + // /** 面板加載完成 */ + // "panel-load-finish"(evnet, ...args) { + // Editor.Scene.callSceneScript("sourcechange", "get-default-info", { args: args }, function (err, response) { + // // Editor.log("callSceneScript: " + response); + // Editor.Ipc.sendToPanel("sourcechange", "setDefault", response); + // }); + // }, + }, + +} \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 0000000..a301014 --- /dev/null +++ b/package.json @@ -0,0 +1,21 @@ +{ + "name": "sourcechange", + "version": "0.0.1", + "description": "Sample-Package", + "author": "Sample", + "main": "main.js", + "scene-script": "scene-obtain.js", + "engineSupport": true, + "main-menu": { + "扩展/Source Change": { + "message": "sourcechange:open-panel" + } + }, + "panel": { + "main": "panel/index.js", + "type": "dockable", + "title": "Source Change", + "width": 400, + "height": 350 + } +} \ No newline at end of file diff --git a/panel/index.js b/panel/index.js new file mode 100644 index 0000000..74d2b4e --- /dev/null +++ b/panel/index.js @@ -0,0 +1,82 @@ +let assetPath = ""; +let defaultPolygonPath = "assets/"; +let polygonNameHeader = "polygon_"; +let polygonName = ""; +Editor.Panel.extend({ + style: ` + :host { margin: 5px; } + h2 { color: #f90; } + .bottom { + height: 30px; + } + `, + + template: ` +

Source Change

+
+
+ 1. 把要輸出的節點拉進來
+ 2. 把來源編號跟目標標號輸入好 +
+
+
+ 要使用的Prefab + + +
+
+
+ 來源Game ID + +
+
+ 目標Game ID + +
+
+
+ 生成 +
+ `, + + $: { + /** Node */ + node: "#node", + /** 來源Game ID */ + self: "#self", + /** 目標Game */ + target: "#target", + /** 生成按鈕 */ + create: "#create", + }, + + ready() { + // Editor.Ipc.sendToMain("sourcechange:panel-load-finish"); + this.createBtnClick(); + + }, + /** 保存按鈕點擊事件 */ + createBtnClick() { + this.$create.addEventListener("confirm", () => { + if (!this.$node._value) { + Editor.error("請拖曳 Node 到視窗"); + return; + } else if (!this.$self._value) { + Editor.error("請輸入來源Game ID"); + return; + } else if (!this.$target._value) { + Editor.error("請輸入目標Game ID"); + return; + } + Editor.Ipc.sendToMain("sourcechange:create-click", this.$node, this.$self, this.$target); + }); + }, + messages: { + // "setDefault": function (event, ...agrs) { + // if (event.reply) { + // //if no error, the first argument should be null + // event.reply(null, "Fine, thank you!"); + // } + // } + } +}); \ No newline at end of file diff --git a/scene-obtain.js b/scene-obtain.js new file mode 100644 index 0000000..5c87c8c --- /dev/null +++ b/scene-obtain.js @@ -0,0 +1,162 @@ +"use strict"; +let fs = require("fs"); +let path = require("path"); + +module.exports = { + /** + * 獲取場景節點下的配置信息 + * @param event event + * @param data 這邊把panel的Node帶進來 + */ + "get-asset-info": function (event, request) { + let self = this; + let Canvas = cc.find("Canvas"); + var response = null; + var args = request.args; + let node = cc.find(args[0]._name); + if (!node) { + node = this.getAllChildByUuid(Canvas, args[0]._nodeID); + } + // Editor.log(`node: ${node.name}`); + this.setAllComponentByNode(node, args[1]._value, args[2]._value); + response = "OK"; + if (event.reply) { + event.reply(null, response); + } + }, + + /** + * 根據Node去尋找底下每個子節點有沒有符合的UUID + * @param Node 需要搜尋的節點 + * @param UUID 目標的UUID + */ + setAllComponentByNode(Node, MyID, TargetID) { + let self = this; + // Editor.log("Node: " + Node.name, "UUID: " + Node.uuid); + let Sprite = Node.getComponent(cc.Sprite); + let type = "cc.SpriteFrame"; + if (!Sprite) { + Sprite = Node.getComponent(cc.ParticleSystem); + } + let Label = Node.getComponent(cc.Label); + let Animation = Node.getComponent(cc.Animation); + // Editor.log("來源 Node: " + Node.name, "Sprite: " + (Sprite ? "true" : "false")); + if (Sprite) { + if (!Sprite.spriteFrame) { + Editor.warn(`${Node.name} 沒有spriteFrame`); + } else { + let uuid = ""; + try { + uuid = Sprite.spriteFrame._uuid; + } catch (error) { + Editor.log(`${Node.name} 沒有uuid, Error: ${error}`); + Editor.log(`${Node.name} ${JSON.stringify(Sprite.spriteFrame)}`); + } + let url = Editor.remote.assetdb.uuidToUrl(uuid); + if (url.indexOf(MyID) === -1) { + if (url.indexOf(TargetID) === -1) { + Editor.log(`${Node.name} 檔案非${MyID}: ${url}`); + } + } else { + // Editor.log("來源 uuid: " + uuid); + // Editor.log("來源 url: " + url); + // Editor.log(`MyID: ${MyID}, TargetID: ${TargetID}`); + let reg = `/${MyID}/g`; + let newurl = url.replace(eval(reg), TargetID); + // Editor.log(`newurl: ${newurl}`); + let newuuid = Editor.remote.assetdb.urlToUuid(newurl); + if (!newuuid) { + Editor.error(`${Node.name} 缺檔案: ${newurl}`); + } else { + // Editor.log(`newuuid: ${newuuid}`); + let newfspath = Editor.remote.assetdb.uuidToFspath(newuuid); + // Editor.log(`newfspath: ${newfspath}`); + newfspath = newfspath.substring(0, newfspath.length - Sprite.spriteFrame.name.length - 1); + // Editor.log(`newfspath: ${newfspath}`); + // Editor.log(`目標 spriteFrame: ${newfspath} ${Sprite.spriteFrame.name}`); + // Editor.log("uuid: " + uuid); + // Editor.log("Sprite.uuid: " + Sprite.uuid); + + Editor.Ipc.sendToPanel('scene', 'scene:set-property', { + id: Sprite.uuid, + path: "spriteFrame",//要修改的属性 + type: type, + value: { uuid: newuuid }, + isSubProp: false, + }); + } + } + } + } else if (Label) { + if (Label.useSystemFont) { + // Editor.log(`${Node.name} useSystemFont`); + } else { + let Font = Label.font; + if (Font.name.indexOf(MyID) !== -1) { + Editor.warn(`${Node.name} Font.name: ${Font.name} 請手動替換字體`); + } + // Editor.log(`${Node.name} Font.name: ${Font.name} Font._fontDefDictionary: ${JSON.stringify(Font._fontDefDictionary)}`); + // Editor.log(`${Node.name} Font.name: ${Font.name} Font.fntDataStr: ${Font.fntDataStr}`); + // Editor.log(`${Node.name} Font: ${Object.values(Font)}`); + // Editor.log(`${Node.name} Font._fontDefDictionary: ${Object.keys(Font._fontDefDictionary)}`); + // Editor.log(`${Node.name} Font._fontDefDictionary: ${Object.values(Font._fontDefDictionary)}`); + } + } else if (Animation) { + let defaultClip = Animation.defaultClip; + if (defaultClip) { + if (defaultClip.name.indexOf(MyID) !== -1) { + Editor.warn(`${Node.name} Font.name: ${defaultClip.name} 請手動替換字體`); + } + } + + let Clips = Animation.getClips(); + // Editor.log(`${Node.name} Clips.length: ${Clips.length}`); + if (Clips.length > 0) { + for (let i = 0; i < Clips.length; i++) { + let Clip = Clips[i]; + if (Clip.name.indexOf(MyID) !== -1) { + Editor.warn(`${Node.name} Font.name: ${Clip.name} 請手動替換字體`); + } + // Editor.log(`${Node.name} Clip.name: ${Clip.name} Clip.curveData: ${Clip.curveData}`); + // Editor.log(`${Node.name} Clip: ${Object.keys(Clip)}`); + // Editor.log(`${Node.name} Clip: ${Object.values(Clip)}`); + // Editor.log(`${Node.name} Clip.curveData.paths: ${Object.keys(Clip.curveData.paths)}`); + // Editor.log(`${Node.name} Clip.curveData.paths: ${Object.values(Clip.curveData.paths)}`); + } + } + } + for (let i = 0; i < Node.childrenCount; i++) { + this.setAllComponentByNode(Node.children[i], MyID, TargetID); + } + // Editor.log("Node: " + Node.children[1].childrenCount); + }, + + /** + * 根據Node去尋找底下每個子節點有沒有符合的UUID + * @param Node 需要搜尋的節點 + * @param UUID 目標的UUID + */ + getAllChildByUuid(Node, UUID) { + for (let i = 0; i < Node.childrenCount; i++) { + // Editor.log("Node: " + Node.name, "UUID: " + Node.uuid); + if (Node.uuid == UUID) { + // Editor.log("找到 Node: " + Node.name, "UUID: " + Node.uuid); + return Node; + } else { + // Editor.log("Node: " + Node.children[i].name, "UUID: " + Node.children[i].uuid); + if (Node.children[i].uuid == UUID) { + return Node.children[i]; + } + } + if (Node.children[i].childrenCount > 0) { + // Editor.log(Node.children[i].name + " childrenCount > 0"); + let getAllChildByUuid = this.getAllChildByUuid(Node.children[i], UUID); + if (getAllChildByUuid) { + return getAllChildByUuid; + } + } + } + // Editor.log("Node: " + Node.children[1].childrenCount); + return null; + }, +}; \ No newline at end of file