引言
哈喽大家好，我是亿元程序员，一位有着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() 里逐帧取数据、上传纹理：
踩坑实录：循环播放
第一版跑通播放后，笔者信心满满地加了循环逻辑：
typescript
// ❌ 错误方案
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年游戏行业经验的主程。在游戏开发中，希望能给到您帮助，也希望通过您能帮助到大家。
实不相瞒，想要个赞 和爱心 ！请把该文章分享给你觉得有需要的其他小伙伴。谢谢！
推荐文章：