视频直播系统方案之视频交互游戏

转载

泰安云豹科技 2022-02-22 17:08:51 博主文章分类：直播源码

视频直播系统方案之视频交互游戏

先上个效果图

视频直播系统方案之视频交互游戏_ide

如果在视频上面实现游戏呢？

creator的控件都是渲染在canvas上的，如果直接在视频显示的位置放置creator的ui控件，控件是会被视频给盖住的。当然如果自己写button样式放到cc.game.container下虽然是能显示出来，不过这样会存在很多未知的问题。所以这个方式被kill了，现在的做法是：

首先.需要修改引擎的代码CCMacro.js下面的参数ENABLE_TRANSPARENT_CANVAS设置为true。下面是该参数的说明：

视频直播系统方案之视频交互游戏_播放视频_02

顺便说一下：creator2.0的引擎每次开启编辑器会重新编译引擎，所以修改代码后只需要重启就能实现效果哦！

其实.修改完引擎后我们还需要把canvas的透明度设置成透明，代码：

cc.Camera.main.backgroundColor = cc.color(0, 0, 0, 0);
复制代码

最后.再设置video与canvas的显示层级就可以了

let video0 = document.getElementsByClassName('cocosVideo')[0];
        video0.style.zIndex = 5;

        let gCanvas = document.getElementsByClassName('gameCanvas')[0];
        gCanvas.style.position = 'relative';
        gCanvas.style.zIndex = 10;
复制代码

现在你就可以在视频上面放置任何你想放置的ui并且可以对他们进行操作了。效果图：

视频直播系统方案之视频交互游戏_ide_03