手寫指令碼程式碼太累！搞一個生成工具吧
阿新 • • 發佈：2020-08-01
# 前言
在遊戲開發中，我們的開發流程一般是
1. 製作預製體或者場景
2. 建立指令碼、宣告屬性
3. 拖拽節點設定屬性
4. 編寫邏輯
我開發了款半自動程式碼生成器工具主要是解決第2步的問題；之所以稱之為半自動，因為我覺得全自動程式碼生成器應該做到兩點：程式碼生成（第2步）+自動繫結（第3步）。自動繫結需要改動預製體檔案，由於所有人的使用方式不盡相同，出現的問題會比較多，我喜歡相對靈活，約束比較少的方式，所以我採用了拖拽設定和程式碼設定相結合的方式解決自動繫結的問題。
# 功能介紹
1. 匯出與預製體同名的類檔案
2. 宣告屬性
3. 如果屬性是無效值進行賦值
4. 如果屬性是按鈕，進行函式監聽,並生成監聽函式
5. 將生成的類匯出到指定目錄
6. 支援匯出指定預製體檔案或者目錄，自動實別目錄的子目錄。
7. 支援匯出Creator 和 Laya 的預製體
8. 使用TAG標記是否匯出指定名稱的屬性，帶有TAG標記符號的節點才會匯出，我TAG是$。如果TAG是無效字元，那麼會匯出所有名稱有效的節點。
9. creator匯出的屬性名稱後面帶有型別，button帶有sprite會同時輸出。
# 目錄說明
creator_export:creator檔案匯出目錄，這個目錄工具會建立並且可以放到其他地方。
creator_prefabs: creator檔案輸入目錄，一般會設定為專案的預製體資料夾。放到這裡只是測試使用。
laya_export 和 laya_prefabs ：同 creator資料夾。
creator_build.bat: window下的執行指令碼，實際上就是直行node 並傳遞兩個引數。如果是mac使用者可以自行寫一個sh指令碼。
creator_prefab.js: creator檔案匯出的核心程式碼。
creator_template.txt: creator匯出檔案的模板檔案，理論上就是字元替換。
file_util.js ： 檔案輔助類
laya_build.bat,laya_prefab.js,laya_template.txt: 同creator檔案。
# 完整程式碼
1. creator匯出檔案
```
import BaseView from "../../../cfw/mvc/BaseView";
const { ccclass, property } = cc._decorator;
@ccclass
export default class LoginView extends BaseView {
@property({type: cc.Sprite, displayName: "logointro$Sprite"})
logointro$Sprite: cc.Sprite = null;
@property({type: cc.Sprite, displayName: "btn_buy_big$Sprite"})
btn_buy_big$Sprite: cc.Sprite = null;
@property({type: cc.Button, displayName: "btn_buy_big$Button"})
btn_buy_big$Button: cc.Button = null;
onLoad() {
if(!this.logointro$Sprite){this.logointro$Sprite = this.findChild("logointro$").getComponent(cc.Sprite)}
if(!this.btn_buy_big$Sprite){this.btn_buy_big$Sprite = this.findChild("btn_buy_big$").getComponent(cc.Sprite)}
if(!this.btn_buy_big$Button){this.btn_buy_big$Button = this.findChild("btn_buy_big$").getComponent(cc.Button)}
this.registerButtonByNode(this.btn_buy_big$Button,this.onbtn_buy_big$ButtonClick)
}
onbtn_buy_big$ButtonClick(){
}
onDestroy(){
}
}
```
2. laya匯出檔案
```
import BaseView from "../../../cfw/mvc/BaseView";
export default class TestView extends BaseView {
/** @prop {name:normal, tips:"normal", type:Node, default:null}*/
public normal: Laya.Button = null;
/** @prop {name:double, tips:"double", type:Node, default:null}*/
public double: Laya.Button = null;
constructor() { super(); }
onAwake() {
super.onAwake()
if(!this.normal){this.normal = this.findChild("normal")}
this.registerButtonByNode(this.normal,this.onnormalClick)
if(!this.double){this.double = this.findChild("double")}
this.registerButtonByNode(this.double,this.ondoubleClick)
}
onEnable(): void {
}
onDisable(): void {
}
onnormalClick(){
}
ondoubleClick(){
}
}
```
# 注意事項
1. 節點的名稱不能有空格，橫線
2. 不能用引擎已經使用的變數名
# 結語
工具已上傳到框架倉庫中，有需要的自行拉取，如遇到問題可以微信找我溝通。
# 歡迎掃碼關注公眾號《微笑遊戲》，瀏覽更多內容。
歡迎掃碼關注公眾號《微笑遊戲》，瀏覽更多