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