前言
程序員向的初探Cocos Creator結(jié)和FairyGUI的使用，會(huì)比較偏向FairyGUI一點(diǎn)，默認(rèn)各位讀者都熟練掌握Cocos Creator以及js/ts腳本編寫。
初探門徑，歡迎大佬指教，歡迎在評(píng)論區(qū)或私信與本人交流，謝謝！
下載和安裝
都不需要科學(xué)上網(wǎng)，非常友好。
- 下載fgui：https://www.fairygui.com/
- 下載Cocos Creator并安裝編輯器：https://www.cocos.com/creator-download
下下來后是一個(gè) Cocos Dashboard，在Dashboard里面可以安裝各個(gè)版本的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/
- 本文對(duì)應(yīng)demo：https://gitcode.net/qq_36286039/fgui_cocos_240 （這是我的個(gè)人倉(cāng)庫(kù)，還是推薦看官方的）
第一個(gè)fgui項(xiàng)目
1. 新建項(xiàng)目
在指定位置創(chuàng)建一個(gè)新的UI項(xiàng)目。
- 項(xiàng)目名稱： 項(xiàng)目名稱?？梢允褂弥形?，創(chuàng)建后也可以隨便修改。
- 項(xiàng)目位置： 項(xiàng)目位置。注意：請(qǐng)不要使用帶中文的路徑。
- 在此位置創(chuàng)建新目錄： 如果勾選，將在指定的路徑創(chuàng)建名稱為項(xiàng)目名稱的子目錄。如果不勾選，則在指定的路徑直接創(chuàng)建項(xiàng)目。
- 項(xiàng)目類型： UI項(xiàng)目類型，即UI實(shí)際運(yùn)行的平臺(tái)。不同的平臺(tái)在顯示效果、發(fā)布結(jié)果上有一定的差別。不過不需要擔(dān)心這里選擇錯(cuò)了項(xiàng)目類型，在項(xiàng)目創(chuàng)建后可以隨時(shí)調(diào)整UI項(xiàng)目類型，操作位置在菜單“文件->項(xiàng)目設(shè)置”里。
FairyGUI的項(xiàng)目在文件系統(tǒng)的結(jié)構(gòu)為：
-
assets： 包內(nèi)容放置目錄。 -
package1： 每個(gè)包一個(gè)目錄。目錄名就是包名。 -
assets_xx： 分支內(nèi)容放置目錄，xx是分支名稱。多個(gè)分支則存在多個(gè)類似名稱的目錄。 -
settings： 配置文件放置目錄。 -
.objs： 內(nèi)部數(shù)據(jù)目錄。注意：不要加入版本管理，因?yàn)檫@里的內(nèi)容是不需要共享的。 -
test.fairy： 項(xiàng)目標(biāo)識(shí)文件。文件名就是項(xiàng)目名稱，可以隨便修改。
2. 編輯器基礎(chǔ)
編輯器主界面由以下幾個(gè)部分組成：
- 主菜單。在Mac系統(tǒng)里，主菜單和Mac應(yīng)用程序菜單集成；在Windows系統(tǒng)里，主菜單顯示在主界面最上方。
- 主工具欄。常用的功能按鈕。
- 文檔視圖。包括已打開的文檔的列表，側(cè)工具欄和舞臺(tái)區(qū)域。
- 狀態(tài)欄。顯示控制臺(tái)輸出的最后一條信息。點(diǎn)擊可以打開控制臺(tái)。
- 各個(gè)功能視圖。用戶可以按使用習(xí)慣將它們拖動(dòng)到不同位置，也可以關(guān)閉。右鍵點(diǎn)擊面板的標(biāo)題欄，在右鍵菜單中選擇“關(guān)閉”即可。如果要重新打開，在“主菜單->視圖”里操作。
多余的描述我就不在這里贅述了，看fgui的官方文檔吧，相信各位都很快能夠明白每個(gè)按鈕的意義，不會(huì)的查下官方文檔，這篇文章只挑和Cocos比較不一樣的或需要注意的地方講。
3. 包
官方文檔：https://www.fairygui.com/docs/editor/package
fgui的包的定義和Cocos Creator里的subpackage的定義類似，因此做好包內(nèi)資源的管理是很重要的。
看一下fgui的demo里分的包：
在Cocos Creator里顯示的樣式：
在BasicsDemo.ts里調(diào)用的有關(guān)包的加載和卸載：
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. 制作第一個(gè)組件
新建fgui項(xiàng)目之后，改一下包名和組件的名字，引入一張圖片。
將畫布大小改為720*1600（也可以不改，按個(gè)人習(xí)慣來就好）
和Cocos Creator不同的是，fgui里錨點(diǎn)默認(rèn)在左上角，而不是正中心，如果想要錨點(diǎn)在中心，需要設(shè)置一下。
同樣，這里也是按照自己的習(xí)慣來就好，我還是比較習(xí)慣錨點(diǎn)在中心一點(diǎn)。
將圖片放入舞臺(tái)
使用九宮圖片
官方文檔：https://www.fairygui.com/docs/editor/image
雙擊圖片，進(jìn)入圖片編輯，選擇九宮格。
縮放圖片即可看見效果。
添加文本
在按鈕上添加文本
當(dāng)我們需要添加一個(gè)文本在按鈕上時(shí)，不能直接這么往上擺，需要讓他們有父子關(guān)系。觀察一下demo里的按鈕都是怎么做的：
button被單獨(dú)拎出來了，而且上面有一個(gè)title文本，我們也照做一個(gè)。
點(diǎn)擊上方
新建一個(gè)按鈕。
設(shè)置尺寸300*100
將原本的矩形換成我們自定義的圖片
在這里控制顯示樣式
在這里切換按鈕狀態(tài)查看按鈕樣式
做好后應(yīng)該這樣
ctrl+s保存，回到Main
將按鈕拖入，改一下位置，保存。
加一個(gè)簡(jiǎn)單的背景，這個(gè)場(chǎng)景就算做完了
發(fā)布
官方文檔：https://www.fairygui.com/docs/editor/publish
打開demo的發(fā)布設(shè)置看一眼，照葫蘆畫瓢填一下
坐等發(fā)布
發(fā)布后可以在相應(yīng)路徑看到
在Cocos里使用
官方文檔：https://www.fairygui.com/docs/sdk/creator
新建一個(gè)Cocos項(xiàng)目，按如下路徑導(dǎo)入資源，并新建一個(gè)場(chǎng)景。
這里建議新建一個(gè)Cocos 2.4.0的項(xiàng)目，以保證和demo一樣。
看demo知道，核心庫(kù)是fairygui.js，因此我們把它復(fù)制粘貼進(jìn)來。
新建一個(gè)常駐節(jié)點(diǎn)，編寫一個(gè)腳本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();
}
}
運(yùn)行，可以看到界面已經(jīng)出來了，且沒有報(bào)錯(cuò)，就是位置有點(diǎn)偏，因?yàn)槲覀儧]有設(shè)widget。
加了居中之后，我們的畫面居中了
加了寬高關(guān)聯(lián)之后，可以看到已經(jīng)鋪滿了
文章來源：http://www.zghlxwxcb.cn/news/detail-835580.html
結(jié)語(yǔ)
本教程到此結(jié)束，本人萌新一枚，由于能搜到的fgui×Cocos Creator的資料很少（大部分都是unity的），特分享學(xué)習(xí)經(jīng)驗(yàn)。如有這方面的大佬，歡迎與我討論技術(shù)~
至此，第一個(gè)場(chǎng)景以及做好，更多內(nèi)容，請(qǐng)自行閱讀官方提供的demo。文章來源地址http://www.zghlxwxcb.cn/news/detail-835580.html
到了這里，關(guān)于FariyGUI × Cocos Creator 入門的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
