commit b8c7b424d0653f8cfa6df423e2f60962c18bb2b0 Author: JianMiau Date: Thu Mar 31 08:58:47 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..a3bcb2c --- /dev/null +++ b/main.js @@ -0,0 +1,46 @@ +"use strict"; +let fs = require("fs"); +let path = require("path"); + +module.exports = { + load() { + this.init(); + }, + unload() { + // Editor.log("卸載執行"); + }, + /** 初始化 */ + init() { + // this.createDirectory(); + }, + /** 創建Spine節點 */ + setBlend(...args) { + // Editor.log("文件0: " + JSON.stringify(args[0])); + // Editor.log("文件1: " + JSON.stringify(args[1])); + // Editor.log("文件2: " + JSON.stringify(args[2])); + Editor.Scene.callSceneScript("blendset", "set-blend", { args: args }, function (err, response) { + Editor.log(response); + // let info = JSON.parse(response); + // let path = info.path; + // let url = info.url; + }); + }, + messages: { + /** 打開面板 */ + "open-panel"() { + Editor.Panel.open("blendset"); + }, + /** 保存按鈕點擊 */ + "set-click"(event, ...args) { + this.setBlend(...args); + }, + /** 面板加載完成 */ + "panel-load-finish"(evnet, ...args) { + Editor.Scene.callSceneScript("blendset", "get-default-info", { args: args }, function (err, response) { + // Editor.log("callSceneScript: " + response); + Editor.Ipc.sendToPanel("blendset", "setDefault", response); + }); + }, + }, + +} \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 0000000..27cf88b --- /dev/null +++ b/package.json @@ -0,0 +1,21 @@ +{ + "name": "blendset", + "version": "0.0.1", + "description": "Sample-Package", + "author": "Sample", + "main": "main.js", + "scene-script": "scene-obtain.js", + "engineSupport": true, + "main-menu": { + "扩展/Check Blend": { + "message": "blendset:open-panel" + } + }, + "panel": { + "main": "panel/index.js", + "type": "dockable", + "title": "Check Blend", + "width": 400, + "height": 400 + } +} \ No newline at end of file diff --git a/panel/index.js b/panel/index.js new file mode 100644 index 0000000..d2646e4 --- /dev/null +++ b/panel/index.js @@ -0,0 +1,133 @@ +let assetPath = ""; +let defaultPolygonPath = "assets/"; +let polygonNameHeader = "polygon_"; +let polygonName = ""; +Editor.Panel.extend({ + style: ` + :host { margin: 5px; } + h2 { color: #f90; } + .bottom { + height: 30px; + } + `, + + template: ` +

Auto Set Blend

+
+
+ 1. 把要檢查的節點拉進來(會連全部子節點一起掃描) +
+ 2. 會自動把Dst Blend是DST_ALPHA的改為ONE +
+
+
+ 要檢查的Node + +
+
+
+ Blend: + + + + +
+
+
+ Src Blend Factor
+ Old: + + + + + + + + + + + +
+ + New: + + + + + + + + + + + + +
+
+
+ 修改 +
+ `, + + $: { + /** Node */ + node: "#node", + /** 確定按鈕 */ + set: "#set", + /** */ + label_Blend_Factor: "#label_Blend_Factor", + /** */ + Blend: "#Blend", + /** */ + Blend_Factor_Old: "#Blend_Factor_Old", + Blend_Factor_New: "#Blend_Factor_New", + }, + + ready() { + Editor.Ipc.sendToMain("blendset:panel-load-finish"); + this.BtnClick(); + this.selectBlendChange(); + }, + /** 保存按鈕點擊事件 */ + BtnClick() { + this.$set.addEventListener("confirm", () => { + if (!this.$node._value) { + Editor.error("請拖曳 Node 到視窗"); + return; + } + Editor.Ipc.sendToMain("blendset:set-click", this.$node, this.$Blend.value, this.$Blend_Factor_Old.value, this.$Blend_Factor_New.value); + // Editor.Ipc.sendToMain("blendset:set-click", this.$asset); + }); + }, + selectBlendChange() { + // var selectedValue = event.detail.value; + // Editor.log(`selectedValue: ${selectedValue}`); + this.$Blend.addEventListener("confirm", () => { + // Editor.log(`Blend: ${this.$Blend.value}`); + switch (this.$Blend.value) { + case "srcBlendFactor": + this.$label_Blend_Factor.innerText = "Src Blend Factor"; + break; + + case "dstBlendFactor": + this.$label_Blend_Factor.innerText = "Dst Blend Factor"; + break; + } + }); + }, + messages: { + "setDefault": function (event, ...agrs) { + let Data = JSON.parse(agrs[0]); + let node_uuid = Data["node_uuid"]; + // Editor.log(`agrs: ${agrs[0]}`); + // Editor.log(`node_uuid: ${node_uuid}`); + if (node_uuid && node_uuid !== "") { + this.$node.value = node_uuid; + } + 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..47aef76 --- /dev/null +++ b/scene-obtain.js @@ -0,0 +1,109 @@ +"use strict"; +let fs = require("fs"); +let path = require("path"); +let count = 0; +let Name = []; + +module.exports = { + /** + * 獲取場景節點下的配置信息 + * @param event event + * @param data 這邊把panel的Node帶進來 + */ + "get-default-info": function (event, request) { + let self = this; + // Editor.log(`example: ${JSON.stringify(args[2])}`); + var response = null; + let node = cc.find("Canvas"); + let node_uuid = ""; + if (node) { + node_uuid = node.uuid; + } + response = JSON.stringify({ node_uuid: node_uuid }) + if (event.reply) { + event.reply(null, response); + } + }, + /** + * 獲取場景節點下的配置信息 + * @param event event + * @param data 這邊把panel的Node帶進來 + */ + "set-blend": function (event, request) { + 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); + } + let Blend = args[1]; + let Blend_Factor_Old = args[2]; + let Blend_Factor_New = args[3]; + // Editor.log(`node: ${node.name}`); + // Editor.log(`Blend: ${Blend}`); + // Editor.log(`Blend_Factor_Old: ${Blend_Factor_Old}`); + // Editor.log(`Blend_Factor_New: ${Blend_Factor_New}`); + + this.SetBlend(node, Blend, +Blend_Factor_Old, +Blend_Factor_New); + if (event.reply) { + response = `Auto Set Blend OK Count: ${count}, Name:\n`; + for (let i = 0; i < Name.length; i++) { + response += `${Name[i]}\n`; + } + count = 0; + Name = []; + event.reply(null, response); + } + }, + + /** + * 根據Node去尋找底下每個子節點有沒有符合的UUID + * @param Node 需要搜尋的節點 + */ + SetBlend(Node, Blend, Blend_Factor_Old, Blend_Factor_New) { + // Editor.log(`Node: ${Node.name}, childrenCount: ${Node.childrenCount}`); + let cc_Sprite = Node.getComponent(cc.Sprite); + if (cc_Sprite) { + // Editor.log(`Node: ${Node.name}, ${Blend}: ${cc_Sprite[Blend]}`); + } + if (cc_Sprite && cc_Sprite[Blend] === Blend_Factor_Old) { + // Editor.log(`Node: ${Node.name}, ${Blend}_Old: ${cc_Sprite[Blend]}, ${Blend}_New: ${Blend_Factor_New}`); + cc_Sprite[Blend] = Blend_Factor_New; + count++; + Name.push(Node.name); + } + for (let i = 0; i < Node.childrenCount; i++) { + this.SetBlend(Node.children[i], Blend, Blend_Factor_Old, Blend_Factor_New); + } + }, + + /** + * 根據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