[add] first

This commit is contained in:
建喵 2022-03-31 08:59:02 +08:00
commit ed399a1213
5 changed files with 368 additions and 0 deletions

60
README.md Normal file
View 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

43
main.js Normal file
View File

@ -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);
// });
// },
},
}

21
package.json Normal file
View File

@ -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
}
}

82
panel/index.js Normal file
View File

@ -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: `
<h2 style="text-align:center">Source Change</h2>
<hr />
<div>
1. 把要輸出的節點拉進來<br>
2. 把來源編號跟目標標號輸入好
</div>
<hr />
<div>
要使用的Prefab
<ui-node class="flex-1" type="cc.Node" typename="Node" droppable="node" id="node"></ui-node>
<!-- <ui-asset class="flex-1" type="prefab" typename="prefab" droppable="prefab" id="prefab"></ui-asset> -->
</div>
<hr />
<div>
來源Game ID
<ui-input placeholder="來源Game ID ex: 2003" id="self"></ui-input>
</div>
<div>
目標Game ID
<ui-input placeholder="目標Game ID ex: 2004" id="target"></ui-input>
</div>
<hr />
<div style="text-align:right">
<ui-button id="create" class="green">生成</ui-button>
</div>
`,
$: {
/** 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!");
// }
// }
}
});

162
scene-obtain.js Normal file
View File

@ -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;
},
};