前言
程序員向的初探Cocos Creator結和FairyGUI的使用，會比較偏向FairyGUI一點，默認各位讀者都熟練掌握Cocos Creator以及js/ts腳本編寫。
初探門徑，歡迎大佬指教，歡迎在評論區或私信與本人交流，謝謝！
下載和安裝
都不需要科學上網，非常友好。
- 下載fgui：https://www.fairygui.com/
- 下載Cocos Creator并安裝編輯器：https://www.cocos.com/creator-download
下下來后是一個 Cocos Dashboard，在Dashboard里面可以安裝各個版本的Cocos Creator編輯器。
- fgui自帶文檔：https://www.fairygui.com/docs/editor
fgui自帶demo（雖然沒有在文檔里直接給出鏈接，但是在github上搜索fariygui即可搜到）https://github.com/fairygui/FairyGUI-cocoscreator - Cocos Creator自帶文檔：https://docs.cocos.com/creator/manual/zh/
- 本文對應demo：https://gitcode.net/qq_36286039/fgui_cocos_240 （這是我的個人倉庫，還是推薦看官方的）
第一個fgui項目
1. 新建項目
在指定位置創建一個新的UI項目。
- 項目名稱： 項目名稱。可以使用中文，創建后也可以隨便修改。
- 項目位置： 項目位置。注意：請不要使用帶中文的路徑。
- 在此位置創建新目錄： 如果勾選，將在指定的路徑創建名稱為項目名稱的子目錄。如果不勾選，則在指定的路徑直接創建項目。
- 項目類型： UI項目類型，即UI實際運行的平臺。不同的平臺在顯示效果、發布結果上有一定的差別。不過不需要擔心這里選擇錯了項目類型，在項目創建后可以隨時調整UI項目類型，操作位置在菜單“文件->項目設置”里。
FairyGUI的項目在文件系統的結構為：
assets： 包內容放置目錄。package1： 每個包一個目錄。目錄名就是包名。assets_xx： 分支內容放置目錄，xx是分支名稱。多個分支則存在多個類似名稱的目錄。settings： 配置文件放置目錄。.objs： 內部數據目錄。注意：不要加入版本管理，因為這里的內容是不需要共享的。test.fairy： 項目標識文件。文件名就是項目名稱，可以隨便修改。
2. 編輯器基礎
編輯器主界面由以下幾個部分組成：
- 主菜單。在Mac系統里，主菜單和Mac應用程序菜單集成；在Windows系統里，主菜單顯示在主界面最上方。
- 主工具欄。常用的功能按鈕。
- 文檔視圖。包括已打開的文檔的列表，側工具欄和舞臺區域。
- 狀態欄。顯示控制臺輸出的最后一條信息。點擊可以打開控制臺。
- 各個功能視圖。用戶可以按使用習慣將它們拖動到不同位置，也可以關閉。右鍵點擊面板的標題欄，在右鍵菜單中選擇“關閉”即可。如果要重新打開，在“主菜單->視圖”里操作。
多余的描述我就不在這里贅述了，看fgui的官方文檔吧，相信各位都很快能夠明白每個按鈕的意義，不會的查下官方文檔，這篇文章只挑和Cocos比較不一樣的或需要注意的地方講。
3. 包
官方文檔：https://www.fairygui.com/docs/editor/package
fgui的包的定義和Cocos Creator里的subpackage的定義類似，因此做好包內資源的管理是很重要的。
看一下fgui的demo里分的包：
在Cocos Creator里顯示的樣式：
在BasicsDemo.ts里調用的有關包的加載和卸載：
onLoad() {//......fgui.UIPackage.loadPackage("UI/Basics", this.onUILoaded.bind(this));
}
onUILoaded() {this._view = fgui.UIPackage.createObject("Basics", "Main").asCom;//......
}
onDestroy() {//......fgui.UIPackage.removePackage("Basics");
}
4. 制作第一個組件
新建fgui項目之后，改一下包名和組件的名字，引入一張圖片。
將畫布大小改為720*1600（也可以不改，按個人習慣來就好）
和Cocos Creator不同的是，fgui里錨點默認在左上角，而不是正中心，如果想要錨點在中心，需要設置一下。
同樣，這里也是按照自己的習慣來就好，我還是比較習慣錨點在中心一點。
將圖片放入舞臺
使用九宮圖片
官方文檔：https://www.fairygui.com/docs/editor/image
雙擊圖片，進入圖片編輯，選擇九宮格。
縮放圖片即可看見效果。
添加文本
在按鈕上添加文本
當我們需要添加一個文本在按鈕上時，不能直接這么往上擺，需要讓他們有父子關系。觀察一下demo里的按鈕都是怎么做的：
button被單獨拎出來了，而且上面有一個title文本，我們也照做一個。
點擊上方
新建一個按鈕。
設置尺寸300*100
將原本的矩形換成我們自定義的圖片
在這里控制顯示樣式
在這里切換按鈕狀態查看按鈕樣式
做好后應該這樣
ctrl+s保存，回到Main
將按鈕拖入，改一下位置，保存。
加一個簡單的背景，這個場景就算做完了
發布
官方文檔：https://www.fairygui.com/docs/editor/publish
打開demo的發布設置看一眼，照葫蘆畫瓢填一下
坐等發布
發布后可以在相應路徑看到
在Cocos里使用
官方文檔：https://www.fairygui.com/docs/sdk/creator
新建一個Cocos項目，按如下路徑導入資源，并新建一個場景。
這里建議新建一個Cocos 2.4.0的項目，以保證和demo一樣。
看demo知道，核心庫是fairygui.js，因此我們把它復制粘貼進來。
新建一個常駐節點，編寫一個腳本Main.ts
const { ccclass, property } = cc._decorator;@ccclass
export default class Main extends cc.Component {private _view: fgui.GComponent;onLoad() {fgui.GRoot.create();fgui.UIPackage.loadPackage("UI/MainPkg", this.onUILoaded.bind(this));}onUILoaded() {fgui.UIPackage.addPackage("UI/MainPkg");this._view = fgui.UIPackage.createObject("MainPkg", "Main").asCom;this._view.makeFullScreen();fgui.GRoot.inst.addChild(this._view);}onDestroy() {this._view.dispose();}}運行，可以看到界面已經出來了，且沒有報錯，就是位置有點偏，因為我們沒有設widget。
加了居中之后，我們的畫面居中了
加了寬高關聯之后，可以看到已經鋪滿了
結語
本教程到此結束，本人萌新一枚，由于能搜到的fgui×Cocos Creator的資料很少（大部分都是unity的），特分享學習經驗。如有這方面的大佬，歡迎與我討論技術~
至此，第一個場景以及做好，更多內容，請自行閱讀官方提供的demo。
