本文介绍如何在CocosCreator中自定义加载界面，包括创建新的UI元素、实现加载逻辑，以及使用gulp构建工具将自定义样式和脚本合并到项目中。
转载自：https://www.cnblogs.com/babyzone2004/p/7257974.html
方案具体策略如下：
-
在工程目录还原最终首页加载代码。在工程根目录新建html文件夹，手动把build/web-mobile/源文件里面的style-mobile.css，main.js，splash.png复制到html文件夹，新建loading.html文件，body标签的结构保持跟最终构建生成的index.html结构一致。
-
定制自己的UI和加载逻辑。新建loading.css，新建loading.js，在loading.css实现新的加载界面UI，在loading.js上实现新增的加载逻辑，如果不需要，loading.js可以忽略不加。
-
通过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));
});
扫一扫
4164
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
