Cocos Creator—定制H5游戲首頁loading界面

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

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

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

2. 不利于團隊協作，團隊每個人都需要修改一遍Cocos Creator安裝文件

這個方案一看就不靠譜，其實要徹底解決這個問題很簡單，讓Cocos Creator開發組把這兩個文件暴露到工程里面就行了，但不知道為什么這么久還沒有實現。

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

1. 可以在項目工程下面完美自定義loading界面

2. 能動態把自定義的loading界面代碼注入到構建發布后的最終線上代碼

3. 能在不修改源碼的條件下，通過覆蓋代碼的方式實現自己的首頁加載界面

這個方案好處在于即使Cocos Creator升級，也不影響工程的正常工作和發布。當也不是很完美，例如Cocos Creator開發組把加載邏輯全改了，我們還是需要調整代碼，但這個幾率比較小，就算出現了，調整起來還是比較快捷的。

方案具體策略如下：

1. 在工程目錄還原最終首頁加載代碼。在工程根目錄新建html文件夾，手動把build/web-mobile/源文件里面的style-mobile.css，main.js，splash.png復制到html文件夾，新建loading.html文件，body標簽的結構保持跟最終構建生成的index.html結構一致。

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

3. 通過gulp等構建工具，動態把loading.css合并到build/web-mobile/style-mobile.css，把loading.js合并到build/web-mobile/main.js。

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

gulp安裝請訪問：https://gulpjs.com/
nodejs安裝請訪問：http://nodejs.org/
另外需要安裝gulp相關插件：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));
});

由于我沒有對main.js修改的需求，所以我這里只做了css的實現，有興趣的同學可以自己實現js的自定義邏輯。其實思路很簡單，但挺實用的。

完整代碼可以訪問：https://github.com/babyzone20...，這個示例包含了Cocos Creator圖片壓縮優化，減少首次文件請求，html壓縮，動態更新定制loading圖等功能哦。

ps：

我們團隊正在招聘優秀的H5游戲開發工程師，如果你符合以下條件：

1. 白鷺引擎/Cocos2d-js/Layabox等H5相關的開發經驗

2. 熱愛游戲，希望快速成長，不甘平庸

請聯系我吧：babyzone2004@qq.com

更多信息請戳：https://www.lagou.com/jobs/30...