cocos creator集成小游戏去掉背景

在游戏开发过程中,如果小游戏是集成到APP里面,就可能会需要,

把cocos本身自带背景给去掉,让玩家有一种,游戏浮在app上的视觉效果。

在这里提供分享一种方法,可能会给开发者带来帮助。

如果不加以处理,会默认成黑色。

首先将creator工程打包成H5项目后,在build文件夹下,找到打包后的h5文件夹,进入找到main.js,打开找到cc.game.run,在前面加上cc.macro.ENABLETRANSPARENT_CANVAS = true;

在main.js中加入如下两行即可让canvas变透明

cc.director.setClearColor(new cc.Color(0,0,0, 0));

cc.macro.ENABLE_TRANSPARENT_CANVAS = true;

添加的位置在:

 1  65         function setLoadingDisplay () {
 2  66             // Loading splash scene
 3  67             var splash = document.getElementById('splash');
 4  68             var progressBar = splash.querySelector('.progress-bar span');
 5  69             cc.loader.onProgress = function (completedCount, totalCount, item) {
 6  70                 var percent = 100 * completedCount / totalCount;
 7  71                 if (progressBar) {
 8  72                     progressBar.style.width = percent.toFixed(2) + '%';
 9  73                 }
10  74             };
11  75             splash.style.display = 'block';
12  76             progressBar.style.width = '0%';
13  77             cc.director.setClearColor(new cc.Color(0,0,0, 0));//插入设置透明色
14  78             cc.director.once(cc.Director.EVENT_AFTER_SCENE_LAUNCH, function () {
15  79                 splash.style.display = 'none';
16  80             });
17  81         }
18  82         cc.macro.ENABLE_TRANSPARENT_CANVAS = true;//修改状态属性
19  83         var onStart = function () {}

然后在同目录下修改style-mobile.js文件,将和颜色有关的background都改为transparent,这样,不管是loading页面还是游戏中的背景都会变为透明了。

另外在Cocos引擎中,Canvas的背景,其颜色也是默认为黑色的,需要修改:

参考文档:https://www.cnblogs.com/luorende/p/10750851.html

     https://blog.csdn.net/xw1110280055/article/details/84886411

 

posted @ 2021-02-02 20:41  饭桶大叔  阅读(466)  评论(0编辑  收藏  举报