commit ca949a2cdb6923ec740432f511c23e717edeadff Author: JianMiau Date: Thu Mar 31 08:58:55 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/Slot1501_EditMode.js b/Slot1501_EditMode.js new file mode 100644 index 0000000..153fb6b --- /dev/null +++ b/Slot1501_EditMode.js @@ -0,0 +1,51 @@ +let packageName = "slot1501-polygon"; +let fs = require("fire-fs"); +let path = require('fire-path'); + +let ActionEnum = cc.Enum({ + None: "None", + Scale: "Scale", + Blink: "Blink", + Shake: "Shake", + FadeIn: "FadeIn", + FadeOut: "FadeOut", + Move: "Move", +}); + +Vue.component('dialog-inspector', { + template: ` +
+ + + + + + + + + +
+
+ Preview +
+ `, + + props: { + target: { + twoWay: true, + type: Object, + } + }, + + methods: { + onBtnClickPreview() { + let time = new Date().getTime(); + Editor.Ipc.sendToPanel('scene', 'scene:set-property', { + id: this.target.uuid.value, + path: "preview", + type: "String", + value: time, + }); + }, + } +}); \ No newline at end of file diff --git a/Slot1501_EditMode.ts b/Slot1501_EditMode.ts new file mode 100644 index 0000000..2975730 --- /dev/null +++ b/Slot1501_EditMode.ts @@ -0,0 +1,43 @@ +const { ccclass, property, executeInEditMode, inspector, playOnFocus } = cc._decorator; + +@ccclass +@inspector("packages://slot1501-polygon/Slot1501_EditMode.js") +@playOnFocus +@executeInEditMode +export default class Slot1501_EditMode extends cc.Component { + + @property(String) + private Type: string = "1"; + + private _preview: string = ""; + + public get preview() { + return this._preview; + } + + public set preview(value: string) { + this._preview = value; + // cc.log("Type:" + this.Type); + switch (this.Type) { + case "1": + // cc.log("CreateWall"); + this.CreateWall(); + break; + + default: + cc.log("沒東西處理"); + break; + } + } + + //#region Create + + /** + * 生成Wall Group + */ + private CreateWall(): void { + cc.log("CreateWall"); + } + + //#endregion +} diff --git a/main.js b/main.js new file mode 100644 index 0000000..5540fff --- /dev/null +++ b/main.js @@ -0,0 +1,106 @@ +"use strict"; +let fs = require("fs"); +let path = require("path"); +// 默認路徑 +let defaultPolygonPath="assets/"; +module.exports={ + load() { + this.init(); + }, + unload() { + Editor.log("卸載執行"); + }, + /** 初始化 */ + init() { + this.createDirectory(); + }, + /** 創建初始文件夾 */ + createDirectory() { + if(fs.existsSync(path.join(Editor.Project.path, defaultPolygonPath))) { + Editor.log("resources exists!"); + }else { + // 插件加載後在項目根目錄自動創建指定文件夾 + fs.mkdirSync(path.join(Editor.Project.path, defaultPolygonPath)); + Editor.success("resources created!"); + } + }, + /** 創建文件 */ + createPolygonFile(filePath, node) { + let polygonPath = filePath + ".txt"; + if(fs.existsSync(path.join(Editor.Project.path, polygonPath))) { + // 覆蓋源文件 + this.coverTargetFile(polygonPath, node); + }else { + // 新建文件 + this.createNewFile(polygonPath, node); + } + }, + /** 覆蓋源文件 */ + coverTargetFile(filePath, node) { + Editor.Scene.callSceneScript("output-component", "get-scene-info", {node: node}, function (err, json) { + Editor.assetdb.saveExists( "db://" + filePath, json, function ( err, meta ) { + if(err) { + Editor.log("覆盖文件失败!!!"); + return; + } + Editor.log("覆盖文件成功!!!"); + }); + }); + }, + /** 創建一個新的文件 */ + createNewFile(filePath, node) { + Editor.Scene.callSceneScript("output-component", "get-scene-info", {node: node}, function (err, json) { + Editor.assetdb.create( "db://" + filePath, json, function ( err, results ) { + if(err) { + Editor.log("創建文件失敗!!!"); + return; + } + Editor.log("創建文件成功!!!"); + }); + }); + }, + /** 刪除文件 */ + deletePolygonFile(filePath) { + let polygonPath=filePath+".txt"; + if(fs.existsSync(path.join(Editor.Project.path, polygonPath))) { + Editor.assetdb.delete(["db://" + polygonPath], function (err, results) { + results.forEach(function (result) { + if(err) { + Editor.log("刪除文件失敗!!!"); + return; + } + Editor.log("刪除文件成功!!!"); + }); + }); + }else { + Editor.log("沒有可刪除的文件!!!"); + } + }, + messages: { + /** 打開面板 */ + "open-panel"() { + Editor.Panel.open("output-component"); + }, + /** 保存按鈕點擊 */ + "save-click"(event, ...args) { + const self = this; + self.createPolygonFile(args[0], args[1]); + }, + /** 設置路徑 */ + "set-path"(event,...args) { + if(args[0] && args != "") { + defaultPolygonPath = args[0]; + this.createDirectory(); + } + }, + /** 面板加載完成 */ + "panel-load-finish"(evnet,...args) { + Editor.Ipc.sendToPanel("output-component","setDefaultPath", defaultPolygonPath); + }, + /** 刪除按鈕點擊 */ + "delete-click"(event,...args) { + this.deletePolygonFile(args[0]); + } + }, + +} \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 0000000..4dd4934 --- /dev/null +++ b/package.json @@ -0,0 +1,22 @@ +{ + "name": "output-component", + "version": "0.0.1", + "description": "Sample-Package", + "author": "Sample", + "main": "main.js", + "scene-script": "scene-obtain.js", + + "main-menu": { + "Sample/輸出Component": { + "message": "output-component:open-panel" + } + }, + "panel": { + "main": "panel/index.js", + "type": "dockable", + "title": "輸出Component", + "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..388e6cc --- /dev/null +++ b/panel/index.js @@ -0,0 +1,138 @@ +let defaultPolygonPath = "assets/"; +let polygonNameHeader = "polygon_"; +let polygonName = ""; +Editor.Panel.extend({ + style: ` + :host { margin: 5px; } + h2 { color: #f90; } + .bottom { + height: 30px; + } + `, + + template: ` +

輸出Component

+
+
+ 這邊用PhysicsPolygonCollider的Points來做示範
+ 記得Component要掛，不然就會自動幫忙掛 +
+
+
+ 要輸出的Node + +
+
+
+ FilePath: + +
+
+
+ + +
+
+
+ 生成表 + 刪除表 + 刷新資源 +
+ `, + + $: { + /** 保存按鈕 */ + btn: "#btn", + /** 固定路徑前label */ + label: "#label", + /** 檔案名稱前label */ + polygonLabel:"#polygonLabel", + /** 固定路徑 */ + inputPath:"#inputPath", + /** 更改檔案名稱 */ + changePolygon:"#changePolygon", + /** 刪除按鈕 */ + deleteBtn:"#deleteBtn", + /** 刷新按鈕 */ + updateBtn:"#updateBtn", + /** Node */ + node:"#node" + }, + + ready () { + Editor.Ipc.sendToMain("output-component:panel-load-finish"); + this.init(); + this.saveBtnClick(); + this.setPolygonConfigurationDefaultPath(); + this.changePolygonEvent(); + this.deleteBtnClick(); + this.updateBtnClick(); + this.resetBtnClick(); + + }, + init() { + this.$label.innerText = "(默認文件路徑)"; + this.$polygonLabel.innerText = "(檔案名稱): " + polygonNameHeader; + this.$changePolygon.value = 1; + polygonName = polygonNameHeader + this.$changePolygon.value; + }, + /** 更改名稱事件 */ + changePolygonEvent() { + this.$changePolygon.addEventListener("change",() => { + polygonName = polygonNameHeader + this.$changePolygon.value; + }) + }, + /** 重置場景按鈕點擊 */ + resetBtnClick() { + this.$resetBtn.addEventListener("confirm",() => { + Editor.Scene.callSceneScript("output-component", "reset-scene", function (err, res) { + }); + }) + }, + /** 刷新按鈕點擊事件 */ + updateBtnClick() { + this.$updateBtn.addEventListener("confirm",() => { + Editor.assetdb.refresh("db://" + defaultPolygonPath, function (err, results) { + if(err) { + Editor.log("刷新文件目錄失敗！！！") + return; + } + Editor.log("刷新文件目錄成功！！！") + }); + }) + }, + /** 刪除按鈕點擊事件 */ + deleteBtnClick() { + this.$deleteBtn.addEventListener("confirm",() => { + Editor.Ipc.sendToMain("output-component:delete-click", defaultPolygonPath + polygonName); + }) + }, + /** 保存按鈕點擊事件 */ + saveBtnClick() { + this.$btn.addEventListener("confirm", () => { + Editor.Ipc.sendToMain("output-component:save-click", defaultPolygonPath + polygonName, this.$node); + }); + }, + /** 設置默認的配置路徑 */ + setPolygonConfigurationDefaultPath() { + this.$inputPath.addEventListener("confirm",() => { + defaultPolygonPath = this.$inputPath.value; + if(defaultPolygonPath === "") { + defaultPolygonPath = "assets/"; + } + Editor.Ipc.sendToMain("output-component:set-path", defaultPolygonPath); + }) + }, + messages : { + "setDefaultPath":function (event,...agrs) { + if(agrs[0] && agrs[0] != "") { + defaultPolygonPath = agrs[0]; + this.$inputPath.value = agrs[0]; + } + 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..cd9fe77 --- /dev/null +++ b/scene-obtain.js @@ -0,0 +1,89 @@ +"use strict"; + +module.exports = { + /** + * 獲取場景節點下的配置信息 + * @param event event + * @param data 這邊把panel的Node帶進來 + */ + "get-scene-info": function (event, data) { + var node = cc.find(data.node._name); + if (!node) { + var can = cc.find("Canvas"); + node = this.getAllChildByUuid(can, data.node._nodeID); + } + let objArray = []; + if (node) { + Editor.log("Node:" + node.name); + let singleInfo = this.setObjInfo(node, 0, can); + objArray = (singleInfo); + } else { + Editor.log("沒有找到節點"); + } + let json = JSON.stringify(objArray); + if (event.reply) { + event.reply(null, json); + } + }, + + /** + * 把節點需要輸出的資料設置到每個json + * @param Node 需要取得資料的節點 + */ + setObjInfo(Node) { + let PhysicsPolygonCollider = Node.getComponent(cc.PhysicsPolygonCollider); + let Points = JSON.parse("[]"); + let count = 0; + if (PhysicsPolygonCollider) { + for (let i = 0; i < PhysicsPolygonCollider.points.length; i++) { + Points[count] = JSON.parse("[]"); + Points[count][0] = PhysicsPolygonCollider.points[i].x; + Points[count][1] = PhysicsPolygonCollider.points[i].y; + count++; + } + Editor.log("Points: " + JSON.stringify(Points)); + } else { + Editor.log("沒有PhysicsPolygonCollider這個Component!!"); + Node.addComponent(cc.PhysicsPolygonCollider); + Editor.log("已增加PhysicsPolygonCollider!!"); + PhysicsPolygonCollider = Node.getComponent(cc.PhysicsPolygonCollider); + for (let i = 0; i < PhysicsPolygonCollider.points.length; i++) { + Points[count] = JSON.parse("[]"); + Points[count][0] = PhysicsPolygonCollider.points[i].x; + Points[count][1] = PhysicsPolygonCollider.points[i].y; + count++; + } + Editor.log("Points: " + JSON.stringify(Points)); + } + return Points; + }, + + /** + * 根據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 diff --git a/成果示意圖.png b/成果示意圖.png new file mode 100644 index 0000000..51e84db Binary files /dev/null and b/成果示意圖.png differ