cocos creator 视频交互游戏

前段时间刚参加完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愈来愈强大，愈来愈好用