cocos creator 视频交互游戏

  • Post author:
  • Post category:其他


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