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...