[add] first
This commit is contained in:
commit
ca949a2cdb
60
README.md
Normal file
60
README.md
Normal file
@ -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
|
||||
51
Slot1501_EditMode.js
Normal file
51
Slot1501_EditMode.js
Normal file
@ -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: `
|
||||
<div>
|
||||
<ui-prop name="選擇模式" tooltip="現在要幹嘛">
|
||||
<ui-select class="flex-1" v-value="target.Type.value">
|
||||
<option value=1>Create Wall</option>
|
||||
<option value=2>Create Nail</option>
|
||||
<option value=3>New Wall</option>
|
||||
<option value=4>Set Wall</option>
|
||||
<option value=5>Set Nail</option>
|
||||
</ui-select>
|
||||
</ui-prop>
|
||||
</div>
|
||||
<div style="text-align:left">
|
||||
<ui-button class="blue" @confirm="onBtnClickPreview">Preview</ui-button>
|
||||
</div>
|
||||
`,
|
||||
|
||||
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,
|
||||
});
|
||||
},
|
||||
}
|
||||
});
|
||||
43
Slot1501_EditMode.ts
Normal file
43
Slot1501_EditMode.ts
Normal file
@ -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
|
||||
}
|
||||
106
main.js
Normal file
106
main.js
Normal file
@ -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]);
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
22
package.json
Normal file
22
package.json
Normal file
@ -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
|
||||
}
|
||||
|
||||
}
|
||||
138
panel/index.js
Normal file
138
panel/index.js
Normal file
@ -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: `
|
||||
<h2 style="text-align:center">輸出Component</h2>
|
||||
<hr />
|
||||
<div>
|
||||
這邊用PhysicsPolygonCollider的Points來做示範<br>
|
||||
記得Component要掛，不然就會自動幫忙掛
|
||||
</div>
|
||||
<hr />
|
||||
<div>
|
||||
要輸出的Node
|
||||
<ui-node class="flex-1" type="cc.Node" typename="Node" droppable="node" id="node"></ui-node>
|
||||
</div>
|
||||
<hr />
|
||||
<div>
|
||||
FilePath: <span id="label"></span>
|
||||
<ui-input value="path" id="inputPath"}></ui-input>
|
||||
</div>
|
||||
<hr />
|
||||
<div>
|
||||
<span id="polygonLabel"></span>
|
||||
<ui-num-input style="width: 130px;" step=1 min=1 id="changePolygon"></ui-num-input>
|
||||
</div>
|
||||
<hr />
|
||||
<div style="text-align:right">
|
||||
<ui-button id="btn" class="green">生成表</ui-button>
|
||||
<ui-button id="deleteBtn" class="red">刪除表</ui-button>
|
||||
<ui-button id="updateBtn" class="blue">刷新資源</ui-button>
|
||||
</div>
|
||||
`,
|
||||
|
||||
$: {
|
||||
/** 保存按鈕 */
|
||||
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!");
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
89
scene-obtain.js
Normal file
89
scene-obtain.js
Normal file
@ -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;
|
||||
},
|
||||
};
|
||||
Loading…
Reference in New Issue
Block a user