Cocos视频拼图,拼图游戏的最后一块碎片,支持原生!

引言

哈喽大家好,我是亿元程序员,一位有着8年游戏行业经验的主程。

不知道大家还记不记得笔者之前出过的拼图系列:

  • 图片拼图
  • 图片拼图Mask版
  • 图片拼图Shader版
  • 3D拼模型
  • 3D方块拼图

居然有这么多,以至于小伙伴都看不下去了:

本来笔者已经暗暗发誓不再插手拼图游戏,但是前阵子又有小伙伴一起探讨拼视频游戏如何实现:

既然如此 ,我只好出手完成拼图游戏的最后一块碎片了!

言归正传,本期带大家一起来实战看看,在Cocos游戏开发中,如何提取视频纹理,完成拼图游戏,并且支持原生!

本文实战完整源码可在文末获取,小伙伴们自行前往,有体验链接。

显示视频有哪些方法?

既然我们要实现视频拼图游戏,那么我们第一步就是要在游戏中能够把视频显示出来。

相信 小伙伴们都比较苦恼,那在Cocos游戏中显示视频的方法有哪些?

我列举一下我知道的:

1.VideoPlayer组件

VideoPlayer是一种视频播放组件,可通过该组件播放本地和远程视频。

这是 官方提供的一个跨平台的视频播放组件,老粉应该还记得,笔者一战成名的就是利用VideoPlayer组件模仿《完蛋,我被美女包围了!》。

但是这个组件年久失修,多多少少有些问题,例如无法获取视频数据,原生层级问题等等。

2.视频转图片

正如笔者和小伙伴探讨的,有一个笨方法就是可以先把视频逐帧转成图片,然后在游戏里面再逐帧切换,形成视频效果。

这样能行吗? 笔者想了一天没头绪,我亲自去试了下这个方案,实测还真可以:

首先 笔者去安装了FFmpeg,然后通过命令行将视频拆分成图片:

将视频拆分得到:

然后 把图片都加载好,在update中逐帧替换:

确实可以实现效果:

这样有个好处就是支持跨平台,无论是网页、原生、小游戏都可以,只需要一套代码就能够顺利完成。

但是也有一些缺点 ,首先包体会增大,将视频拆分之后,大小受品质、fps和宽度影响,图片总大小会比原视频大很多:

其次就是图片一般来说会比较多,本地加载/网络加载次数会增多:

最终让我放弃这种方案的是,它在原生安卓环境会莫名其妙地加速,百思不得其姐,最终放弃。

3.通过原生方法

通过原生方法 的意思就是,利用原生提供的接口或者组件,间接地帮助我们在Cocos游戏中实现。


首先是web 环境,我们直接可以利用document接口拿到视频,然后通过视频拿到视频贴图:

一套流程行云流水,效果也很好,非常流畅:

但是事情并没有那么简单,原生安卓环境没有这玩意,直接就失效了。


万般无奈之下,笔者继续去寻找安卓原生的方案,庆幸找到了官方技术支持的仓库有示例工程:

不过 ,最后更新时间已经是3 years ago了,版本是3.7.3:

直接用 ,在3.8.7肯定是不行的,不过没关系,咱们动手能力强,魔改一个3.8.7的版本:

其实最主要 也是在原生利用了ffmpeg提供的库,将视频解码,拿到视频帧,后续完成拼图游戏,下面详细讲讲:

  • 启动时注册 JSB :首先在引擎启动时,调用register_all_video_experiment,把原生类注册到TS环境。

  • 真正挂到gfx.Video :这里obj可以理解为一个全局对象,确保先有一个gfx对象,然后调用js_register_video_Video

  • 注册Video类和方法 :就是把方法实现好暴露出去,方便Ts调用。

  • TS创建时实际new的是C++对象 :代码里的对象直接new就可以,现实可不行。

在了解 原生的流程之后,我们看下在Ts这边如何使用。

  • 先声明原生类长什么样 :首先是类型声明,原生暴露的gfx.Video有这些方法,和原生定义的一致。

  • 获取原生注册的对象 :判断原生类是否存在。

  • 创建原生Video对象

  • 监听原生事件和调用原生方法

其实 上面的所有操作的目的就是为了将视频帧上传到Texture2D,我们只要拿到了,后续全部都是原来拼图游戏的流程了:

下面就是安卓原生的最终效果,视频播放速度也正常了:

其他细节

1.核心流程

本文 核心是如何通过原生解码视频,提取纹理,显示到Sprite上,拼图游戏玩法可以直接沿用,小伙伴们可以看下源码,或者翻看旧的文章。

2.实战过程

实战全程 均由笔者和AI搭子真实完成,通过官方提供的例子进行魔改,如有不对还请指出。

3.组件整合

完整组件 已经包含在源码里面,小伙伴们只需要将native文件夹拷贝到项目根目录:

以及 VideoTexturePlayer脚本拷贝到项目调用对应方法即可完成对视频贴图的提取:

最终效果

拼图完成之后,我们就可以看到美术妹子啦!下课!

结语

本文实战完整源码 已集成到亿元Cocos小游戏实战合集2.0,内含体验链接,已经拥有的小伙伴可以直接更新。

那么问题来了,还有什么东西可以拼的吗?


我是"亿元程序员",一位有着8年游戏行业经验的主程。在游戏开发中,希望能给到您帮助, 也希望通过您能帮助到大家。

实不相瞒,想要个爱心 !请把该文章分享给你觉得有需要的其他小伙伴。谢谢!

推荐文章:

亿元Cocos小游戏实战合集1.0

老板说最近这款游戏很火让我抄,可是我连玩都玩不明白...

这款值68亿的游戏,你不实战一下吗?安排!

小伙伴说我的拼图游戏用Mask不能合批...

俄罗斯方块谁不会做......啊?流沙版?

最近很火的一个拼图游戏,老板让我用Cocos3.8做一个...

老板说拼图游戏太卷了,让我用Cocos做个3d版本的...

敢不敢挑战用Cocos3.8复刻曾经很火的割绳子游戏?

相关推荐
Rabbit_QL2 小时前
【前端工具链小白篇】前端工具链全景:Node、npm、Vite 各管什么
前端·npm·node.js
身如柳絮随风扬2 小时前
前端基础进阶:Node.js + ES6 + Axios + Vue 全面入门指南
前端·node.js·es6
byoass2 小时前
文件版本管理的设计与实现:解决协同编辑丢数据的核心方案
前端·javascript·网络·数据库·安全·云计算
yqcoder2 小时前
前端性能优化基石:深入解析 CSS 雪碧图 (CSS Sprites)
前端·css·性能优化
身如柳絮随风扬2 小时前
Vue项目搭建与实战:从vue-cli到vue-admin-template完整指南
前端·javascript·vue.js
最后一只小白2 小时前
封装form表单
前端·javascript·vue.js
魔士于安2 小时前
Unity类似博物馆场景
前端·unity·游戏引擎·贴图·模型
喜欢吃鱿鱼2 小时前
vue 数字转千分位js
前端·javascript·vue.js
吴声子夜歌2 小时前
Vue3——组件进阶
前端·javascript·vue.js