引言
哈喽大家好 ，我是亿元程序员，一位有着8年游戏行业经验的主程。
不知道 大家还记不记得笔者上一期出的《Cocos视频拼图，拼图游戏的最后一块碎片，支持原生！》，当时我们搞定了 Web 和 Android 原生 两端的视频纹理提取，拼图玩法直接复用，效果杠杠的。
但是 ，文章发出去没多久，评论区和私信就被同一个问题刷屏了：
既然如此 ，笔者只好再次出手，把拼图游戏在 Cocos 里的 最后一块平台碎片 也补上—— 微信小游戏 ！
言归正传 ，本期带大家实战看看： 在微信小游戏里如何解码视频、提取纹理、完成拼图游戏，并且和Web/原生共用一套业务代码 。
本文实战完整源码可在文末获取，已经拥有合集的小伙伴可以直接更新。
上期回顾：Web 和原生怎么做的？
简单回顾 一下，上期我们已经跑通了两条路：
1. Web 环境
利用
document.createElement('video')创建视频标签，每帧把画面drawImage到 Canvas，再uploadData到Texture2D。
2. Android 原生
魔改 官方
Creator3.7.3_VideoTexture示例，通过window.gfx.Video+FFmpeg解码mp4，在frame_update回调里上传纹理。
拼图核心 （ Board 、 Piece 、 Shader 切块）完全不用动，变的只是「视频怎么变成一张动态纹理」。
那么 ，微信小游戏既没有 document ，也没有我们自定义的 gfx.Video ， 怎么办？
微信小游戏为什么难？
相信 做过互动影游小游戏的同学都有体会：微信环境里，想拿视频像素数据，选择并不多。
我列举一下 当时评估过的方案：
1. VideoPlayer 组件
和 Web / 原生一样的问题—— 拿不到视频帧数据 ，还有原生层级遮挡等老毛病。
拼图 需要采样纹理，直接排除。
2. 视频转图片逐帧播放
上期 笔者已经实测过：包体暴涨、加载次数多、原生还会莫名加速。
小游戏 当然也扛不住， 排除 。
3. wx.createVideoDecoder
微信 提供的 底层视频解码器 ，可以
getFrameData()拿到RGBA帧数据，再上传到Cocos的Texture2D—— 本期选用 。
| 方案 | 微信可行性 | 结论 |
|---|---|---|
| VideoPlayer 组件 | 无法取纹理、层级问题 | 排除 |
| 视频转图片逐帧 | 包体暴涨 | 排除 |
| wx.createVideoDecoder | 可取帧数据 | 本期选用 |
其实 思路和上期一脉相承： 解码视频 → 上传 Texture2D → 拼图 Shader 切块显示 。变的只是解码方式。
核心实战：微信小游戏视频纹理
1. 平台分流：一套代码，三端运行
首先 在 VideoTexturePlayer 里做平台判断。微信小游戏用 MINIGAME 宏，优先级高于原生 JSB ：
对外 API 不变 ， GameManager 只管调 videoPlayer.load() ， Board 拿到 Texture2D 就开始切拼图。
2. 创建解码器，逐帧上传纹理
核心流程 就四步：
第一步 ，创建微信视频解码器：
第二步 ，监听 start 事件，拿到视频宽高，创建 Texture2D ：
第三步 ，启动解码：
第四步 ，在 update() 里逐帧取数据、上传纹理：
踩坑实录：循环播放
第一版 跑通播放后，笔者信心满满地加了循环逻辑：
// ❌ 错误方案
decoder.on('stop', () => {
this.wechatDecoder.seek(0);
});
万万没料到 ，视频自然播完触发的不是 stop ，而是 ended ！
更坑的是 ：单独 seek(0) 无法恢复解码 ，画面直接卡住，拼图拼完了视频也不动了：
正确做法 ：
- 监听
ended事件，而不是stop - 调用
decoder.stop()，再decoder.start({ source })重新解码 - 用
wechatLooping防止重入，wechatDestroying防止销毁时竞态 -
stop().then(start)失败时，才fallback到seek(0)
这一刀 ，拼图完成后视频才能丝滑循环，美术妹子才不会“ 定住 ”。
其他细节
1. 核心流程
本文 核心依然是： 微信端解码视频 → 提取纹理 → 显示到拼图块上 。
拼图玩法 直接沿用上期， Board 通过 Shader 参数切同一张动态纹理的不同区域，小伙伴们可以翻看旧文或源码。
2. 组件整合
完整组件 已经包含在合集源码里。
上期 的 native 文件夹（ Android 原生解码）照旧保留；
本期 微信端 不需要额外 native 插件 ，只需确保 VideoTexturePlayer 脚本和 types/wx.d.ts 在项目中，调用 load() 即可：
3. 一套代码三端运行
VideoTexturePlayer 封装了 Web / 原生 / 微信 三条路径， GameManager 、 Board 、拼图 Shader 完全不用改。
最终效果
拼图完成之后 ，视频循环播放，美术妹子动起来啦！
3*3狗狗拼图：
10*10美术妹子拼图:
结语
本文 实战完整源码 已集成到亿元Cocos小游戏实战合集2.0，已经拥有的小伙伴可以直接更新。
我是"亿元程序员"，一位有着8年游戏行业经验的主程。在游戏开发中，希望能给到您帮助，也希望通过您能帮助到大家。
实不相瞒，想要个 赞 和 爱心 ！请把该文章 分享 给你觉得有需要的其他小伙伴。谢谢！
推荐文章：
