博客

前段时间刚参加完cocos开发者沙龙-杭州站，听完cocos技术总监panda对creator 2.0框架升级·性能优化·2.1版本3d渲染的介绍后，感觉creator的未来还是非常不错的。今天就给大家分享下最近做的一个视频与游戏相结合的教育类游戏。 如果对cocos creator不是很了解的可以访问引擎的

官方网站

,

api

,

论坛

先上个效果图

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

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

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

顺便说一下：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并且可以对他们进行操作了。效果图：

遇到的问题

目前这种方式仅支持 Web，不同的浏览器内核播放视频会有不同的效果，比如x5在播放视频前会黑屏一会，所以如果在播放视频的过程中需要切换视频的话，效果会比较差，目前的做法是把视频拼接成一个视频，通过设置播放进度的方式让视频播放流畅。目前没有找到好的处理方式。

最后

最后感谢cocos官方人员panda.pp_pro的帮助,希望creator越来越强大，越来越好用