点击上方<font color=blue>亿元程序员</font>+关注和<font color=orange>★</font>星标
引言
大家好，我是亿元程序员，一位有着8年游戏行业经验的主程。
近期，国产真人恋爱影视游戏《完蛋！我被美女包围了》连续多日荣登Steam国区畅销榜首。这款游戏力压了一众热门免费游戏，如《PUBG》、《CS2》和《Apex》，稳居国区畅销榜首。
想体验一下游戏，但是花钱是不可能花钱的，于是我用Cocos做了一个Demo实现真人互动影像游戏。
本文源码和源工程在文末获取，小伙伴们自行前往。仅供学习与交流，请勿用作其他用途。
1.准备素材
1.首先我们录制一下游戏中分蛋糕的名场面。
2.然后把游戏录屏拆分成几个小片段。
其中包括:
1.将蛋糕拿起来片段。
2.选择人物片段。
3.分别递给3个人物蛋糕的片段。
下面我们先看看实现原理
2.实现原理
1.组件
要想用Cocos实现真人互动影像游戏，我们可以利用Cocos的cc.VideoPlayer组件。然后通过在上面添加点击事件去做一些逻辑响应。
2.遇到问题
无论我们怎么调整节点位置，发现cc.VideoPlayer组件都是在界面的最上层，包括修改节点的zIndex。这样没办法在视频上方添加UI或者一些局部点击事件。
3.解决办法
首先要勾选cc.VideoPlayer组件中的StayOnBottom，这个设置是保证cc.VideoPlayer组件置于最底部。
然后Cocos2.X版本需要在Cocos安装目录中搜索boot.js，找到resources\static\preview-templates目录下的boot.js文件。
打开boot.js文件并且在cc.game.run之前添加cc.macro.ENABLE_TRANSPARENT_CANVAS = true;开启支持全透明。
Cocos3.X版本可以直接在项目设置-MarcoConfigurations中勾选ENABLE_TRANSPARENT_CANVAS。
最后修改主摄像机Main Camera中BackgroundColor的透明度为0。
这样就可以实现在cc.VideoPlayer组件之上添加UI或者局部点击事件了。
2.编写代码
创建一个VideoGame组件继承cc.VideoPlayer。同时创建一个cc.VideoClip[]数据用于获取视频片段。
1.核心属性包括：
1.resourceType:视频来源：REMOTE 表示远程视频 URL，LOCAL 表示本地视频地址。
2.remoteURL:远程视频的 URL，resourceType选择REMOTE时生效。
3.clip:本地视频剪辑，resourceType选择LOCAL时生效。
4.videoPlayerEvent:视频播放回调函数，该回调函数会在特定情况被触发，比如播放中，暂时，停止和完成播放。
5.其他的一些属性大家可以自行查阅。
2.核心方法包括：
1.play():如果视频被暂停播放了，调用这个接口可以继续播放。如果视频被停止播放了，调用这个接口可以从头开始播放。
2.isPlaying():判断当前视频是否处于播放状态 。
3.stop():如果一个视频正在播放，调用这个接口可以立马停止播放。
4.其他的一些方法大家可以自行查阅。
3.编辑UI
1.创建节点
首先我们先创建个VideoGame节点，然后添加一个子节点videoBtnNode和它的三个子节点video1、video2、video3。
其中VideoGame节点用于添加cc.VideoPlayer组件，三个子节点video1、video2、video3用于点击选择人物。
2.添加组件
首先给VideoGame节点添加编写好的VideoGame组件。勾选StayOnBottom，添加选择videoPlayerEvent事件，添加VideoClips视频片段。
给参与点击的三个子节点video1、video2、video3添加BlockInputEvents用于拦截事件，防止向下传递。
3.效果演示
点击开始播放拿蛋糕画面。
然后切换到人物选择画面。
给蛋糕郑梓妍。
给蛋糕肖鹿。
给蛋糕李云思。
结语
本文仅供娱乐参考学习，生活虽苦，但是也要时常整活。
在哪里可以看到如此清晰的思路，快跟上我的节奏！关注我，和我一起了解游戏行业最新动态，学习游戏开发技巧。
我是"亿元程序员"，一位有着8年游戏行业经验的主程。在游戏开发中，希望能给到您帮助, 也希望通过您能帮助到大家。
AD:笔者线上的小游戏《贪吃蛇掌机经典》《填色之旅》《重力迷宫球》大家可以自行点击搜索体验。
实不相瞒，想要个赞和在看！请把该文章分享给你觉得有需要的其他小伙伴。谢谢！
推荐专栏：
本文源码和源工程可通过阅读原文获取
点击下方<font color=green>绿色按钮</font>+关注
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。