cocos2d-js游戏背景(canvas)透明

需求背景

现需要开发一款H5小游戏，植入到直播类app里面，让用户看直播的同时可以玩H5小游戏。游戏场景只占用手机屏幕的半个屏（下半屏）。引擎版本cocoscreator v2.1.2

实现步骤

1、首先设置主场景摄像机用于清屏的背景色为透明，在主场景所挂载脚本的onLoad()方法中加入该段代码：

onLoad () {cc.Camera.main.backgroundColor = new cc.Color(0, 0, 0, 0);
}

2、发布web包成功后，修改main.js和style-mobile.css文件。
main.js修改如下：
在cc.game.run(option, onStart)代码之前加入cc.macro.ENABLE_TRANSPARENT_CANVAS=true;引擎官方文档解释为：用于设置 Canvas 背景是否支持 alpha 通道，默认为 false，这样可以有更高的性能表现。如果你希望 Canvas 背景是透明的，并显示背后的其他 DOM 元素，你可以在 cc.game.run 之前将这个值设为 true。仅支持 Web。

	//在cc.game.run方法之前加入该行代码cc.macro.ENABLE_TRANSPARENT_CANVAS = true;cc.game.run(option, onStart);

style-mobile.css修改如下：
找到body样式设置里面的background-color将其由#333改为transparent透明具体如下。

body {position: absolute;top: 0;left: 0;width: 100%;height: 100%;padding: 0;border: 0;margin: 0;cursor: default;color: #888;background-color: transparent;//该边该字段的值为transparenttext-align: center;font-family: Helvetica, Verdana, Arial, sans-serif;display: flex;flex-direction: column;/* fix bug: https://github.com/cocos-creator/2d-tasks/issues/791 *//* overflow cannot be applied in Cocos2dGameContainer, otherwise child elements will be hidden when Cocos2dGameContainer rotated 90 deg */overflow: hidden;
}

至此，游戏进入主场景后未使用的canvas画布的区域就变成了透明状态，可以透过游戏场景直接看到下方的原生原素。截图如下：

引擎资源默认加载页修改为透明

完成以上步骤后游戏主场景已经设置透明成功，但cocoscreator默认引擎资源加载页面仍存在，为了更好地用户体验，我们需要将该页面也设置为透明，方法如下：
1、index.html文件修改如下：
2、main.js文件修改如下：

至此，游戏从加载到主场景的背景都设置为透明完毕。

补充

至于，canvas透明调整成功后，所造成的的图片失真、附带透明、以及给图片调整透明度时造成游戏透明可看到原生或游戏下层原素的问题，请参考官方论坛解决方法(属于官方引擎bug):设置canvas透明导致正常节点透明度设置异常

爬坑不易 请勿白嫖 如果该篇文档对你有所帮助，请在方便的情况下给予一份鼓励。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！