Cocos Creator從1.0版本發(fā)布到現(xiàn)在也有一年多了，按理說(shuō)一些常見的問(wèn)題網(wǎng)上都有解決方案，例如"如何自定義首頁(yè)加載進(jìn)度條界面"這種普遍需求，應(yīng)該所有人都會(huì)遇到的，因此也有完善的解決方案才對(duì)。我在網(wǎng)上搜了一些文章，雖然也有討論的帖子，但是方案都不盡人意。因此只能再次自己動(dòng)手豐衣足食了，在此我總結(jié)一下我的思路和策略，分享給大家，希望后來(lái)的人少走彎路，另外這里的方案只針對(duì)H5游戲發(fā)布，其他平臺(tái)可以借鑒思路自己實(shí)現(xiàn)。

首頁(yè)加載的loading界面，官網(wǎng)的文檔并沒有提及，我是通過(guò)構(gòu)建發(fā)布后的代碼分析的。我的另一篇文章《Cocos Creator—優(yōu)化首頁(yè)打開速度》也講過(guò)Cocos Creator加載的策略，有興趣可以參考。其實(shí)Cocos的加載策略很簡(jiǎn)單，main.js作為加載邏輯和style-mobile.css實(shí)現(xiàn)加載ui，但是比較坑的是這兩個(gè)文件并沒有通過(guò)工程文件暴露出來(lái)，你只能在Cocos Creator的安裝目錄里面扒出源碼，網(wǎng)上有些解決方案是直接修改這兩個(gè)源文件，是可以達(dá)到目的，但有兩個(gè)弊端：

不利于Cocos Creator的更新，每次升級(jí)Cocos Creator到新版本，你都需要從新修改一次

不利于團(tuán)隊(duì)協(xié)作，團(tuán)隊(duì)每個(gè)人都需要修改一遍Cocos Creator安裝文件

這個(gè)方案一看就不靠譜，其實(shí)要徹底解決這個(gè)問(wèn)題很簡(jiǎn)單，讓Cocos Creator開發(fā)組把這兩個(gè)文件暴露到工程里面就行了，但不知道為什么這么久還沒有實(shí)現(xiàn)。

所以我的方案就是做開發(fā)組還沒有做的事情，自己把這兩個(gè)文件暴露到工程上，雖然不完美，但能避免上面兩個(gè)問(wèn)題。這個(gè)方案能實(shí)現(xiàn)以下功能：

可以在項(xiàng)目工程下面完美自定義loading界面

能動(dòng)態(tài)把自定義的loading界面代碼注入到構(gòu)建發(fā)布后的最終線上代碼

能在不修改源碼的條件下，通過(guò)覆蓋代碼的方式實(shí)現(xiàn)自己的首頁(yè)加載界面

這個(gè)方案好處在于即使Cocos Creator升級(jí)，也不影響工程的正常工作和發(fā)布。當(dāng)也不是很完美，例如Cocos Creator開發(fā)組把加載邏輯全改了，我們還是需要調(diào)整代碼，但這個(gè)幾率比較小，就算出現(xiàn)了，調(diào)整起來(lái)還是比較快捷的。

方案具體策略如下：

在工程目錄還原最終首頁(yè)加載代碼。在工程根目錄新建html文件夾，手動(dòng)把build/web-mobile/源文件里面的style-mobile.css，main.js，splash.png復(fù)制到html文件夾，新建loading.html文件，body標(biāo)簽的結(jié)構(gòu)保持跟最終構(gòu)建生成的index.html結(jié)構(gòu)一致。

定制自己的UI和加載邏輯。新建loading.css，新建loading.js，在loading.css實(shí)現(xiàn)新的加載界面UI，在loading.js上實(shí)現(xiàn)新增的加載邏輯，如果不需要，loading.js可以忽略不加。

通過(guò)gulp等構(gòu)建工具，動(dòng)態(tài)把loading.css合并到build/web-mobile/style-mobile.css，把loading.js合并到build/web-mobile/main.js。

步驟1是為了方便開發(fā)的UI能正常覆蓋原有的loading界面。如果Cocos Creator升級(jí)對(duì)相關(guān)的加載邏輯做了大幅度更新，影響最終的覆蓋，可以手動(dòng)同步一下style-mobile.css，main.js的代碼到最新。

gulp安裝請(qǐng)?jiān)L問(wèn)：https://gulpjs.com/
nodejs安裝請(qǐng)?jiān)L問(wèn)：http://nodejs.org/
另外需要安裝gulp相關(guān)插件：gulp-concat

gulpfile文件代碼：

gulp.task('concat-css', function(cb) {gulp.src(['./build/web-mobile/style-mobile.css', './html/loading.css']).pipe(concat('style-mobile.css')).pipe(gulp.dest('./build/web-mobile/').on('end', cb)); });

由于我沒有對(duì)main.js修改的需求，所以我這里只做了css的實(shí)現(xiàn)，有興趣的同學(xué)可以自己實(shí)現(xiàn)js的自定義邏輯。其實(shí)思路很簡(jiǎn)單，但挺實(shí)用的。

完整代碼可以訪問(wèn)：https://github.com/babyzone20...，這個(gè)示例包含了Cocos Creator圖片壓縮優(yōu)化，減少首次文件請(qǐng)求，html壓縮，動(dòng)態(tài)更新定制loading圖等功能哦。

ps：

我們團(tuán)隊(duì)正在招聘優(yōu)秀的H5游戲開發(fā)工程師，如果你符合以下條件：

白鷺引擎/Cocos2d-js/Layabox等H5相關(guān)的開發(fā)經(jīng)驗(yàn)

熱愛游戲，希望快速成長(zhǎng)，不甘平庸

請(qǐng)聯(lián)系我吧：babyzone2004@qq.com

更多信息請(qǐng)戳：https://www.lagou.com/jobs/30...

總結(jié)

以上是生活随笔為你收集整理的Cocos Creator—定制H5游戏首页loading界面的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。