这是今年进入腾讯最后机会了！限12小时

插件介绍

rhubarb-lip-sync-ccc (简称 lipsync) 是一款专用于 Cocos Creator 的嘴型动画生成插件，它可以根据一段语音生成嘴型动画的Animation Clip 。适合用于制作游戏角色的说话动画，支持中英文语言。

rhubarb-lip-sync-ccc 基于 DanielSWolf /rhubarb-lip-sync，在他的基础上添加了对自动生成 Cocos Creator 的 Animation Clip的支持。

在 Cocos Creator 插件商店中搜索 lipsync 即可：

项目仓库

https://github.com/wzpan/rhubarb-lip-sync-ccc

Demo

• demo 视频：https://www.bilibili.com/video/BV1V5411G7cm

• 相关的示例仓库代码在：https://github.com/wzpan/lipsync-demo

使用方法

• 在 Cocos Creator 主菜单中，打开 【extensions】菜单 -> 【lipsync】-> 【launch】 ，开启 lipsync的面板。

• 将嘴型图拖拽到对应的嘴型槽中，完成嘴型绑定。其中，6种嘴型（A, B, C, D, E, F）是必须的；而 G，H，X 嘴型则为可选。但推荐都提供，这样最终生成的结果会更为自然。

• 从本地选择一个录音文件。如果是非英文语言，建议取消勾选【是英文音频？】的选项。（这个选项将决定使用不同的识别器。对于英文录音，我们使用 PocketSphinx ；而对于其他语音的录音，我们使用 Phonetic。）

• 创建一个空的Animation Clip ，并拖入目标 Animation Clip 槽位中。

完成以上四步之后，点击 【生成】 按钮，即开始生成动画。可以打开 Cocos Creator 的控制台面板，查看控制台日志：

isEnglish: true

extendedShapes: GHX

识别中...

f5e3f311-875c-4fba-a235-173a82141735

{"__type__":"cc.AnimationClip","_name":"happy_birthday","_objFlags":0,"_duration":1.32,"sample":100,"curveData":{"comps":{"cc.Sprite":{"spriteFrame":[{"frame":0,"value":{"__uuid__":"ac9ba9a0-efb8-4576-8d8a-6e9c4a178d2e"}},{"frame":0.04,"value":{"__uuid__":"a3aec0dc-fca3-4d4a-a93a-7e49a6f062a1"}},{"frame":0.22,"value":{"__uuid__":"d0778f9c-6403-42b6-9170-50783cdb777a"}},{"frame":0.3,"value":{"__uuid__":"e8474869-278a-4198-b6b9-3512bad62d54"}},{"frame":0.47,"value":{"__uuid__":"d0778f9c-6403-42b6-9170-50783cdb777a"}},{"frame":0.55,"value":{"__uuid__":"31364f93-705e-4cdb-b126-5acc5a5fd1c9"}},{"frame":0.79,"value":{"__uuid__":"dadaffea-9cc3-4082-b1b2-02d84200792b"}},{"frame":0.93,"value":{"__uuid__":"e8474869-278a-4198-b6b9-3512bad62d54"}},{"frame":1.21,"value":{"__uuid__":"ac9ba9a0-efb8-4576-8d8a-6e9c4a178d2e"}}]}}},"events":[],"speed":1,"wrapMode":1}

生成成功！

如果出现 “生成成功！” 的消息，说明生成已经成功。此时可以将该 Animation Clip拖动到嘴巴节点的 Animation组件上，看看效果。

温馨提示：如果发现虽然动画生成成功，但是该动画没有任何帧，可以重启 Cocos Creator 看看问题是否解决。

. .

常见问题

• 插件可以白嫖吗？

可以（您良心过意的去就好）。

• 支持 Windows 吗？

代码里是加入了 Windows 的支持，没实际测试过。欢迎当一把小白鼠，有问题跟我反馈就好。

• 支持 Mac M1 吗？

Cocos Creator 好像也还不支持吧？

• 为毛要收费 1 块钱？

写插件不为了赚钱，只为交个朋友（我写插件不用花时间吗？1 块钱都不给我 555）

• 支持 3D 吗？

贴图的嘴巴是 ok 的。3D 的嘴型的话，建议直接用 rhubarb-lip-sync生成每个时刻的嘴型数据，然后动态替换嘴型。

https://github.com/DanielSWolf/rhubarb-lip-sync#spine

• 支持 Spine 动画吗？

可以移步 DanielSWolf/rhubarb-lip-sync （主要是因为穷买不起 Spine）。

• 计划支持 3.0 吗？

有计划。先上了 2.0 的商店看看大家反馈，如果有 bug ，修一波再说。

如何获取帮助

目前只在 Mac 上测试过， Windows 上理论上也可以支持。

如果使用上遇到问题，请在项目仓库上提 issue 反馈。建议带上你的测试工程，方便我定位问题。

https://github.com/wzpan/rhubarb-lip-sync-ccc

结语

感谢来自腾讯在线教育部的 wzpan带来的插件分享，欢迎大家关注腾讯在线教育部技术博客，获取更多 Cocos Creator、Flutter、React Native 跨平台开发技术实践知识。

博客地址：https://oedx.github.io

招聘需求

10~15K /深圳 / 经验2年以上 / 本科及以上

招聘数量：3名

岗位职责：

1.负责在线教育部创新产品中心客户端模块开发和维护；

2.参与业务产品功能方案讨论及开发。

任职要求：

1.计算机或相关专业本科及以上学历；

2.有两年以上CocosCreator的相关项目开发经验；

3.扎实的 JavaScript ES6 / TypeScript 语言基础；

4.熟练掌握界面开发，动画、网络（TCP/IP、HTTP）、多线程、数据库等客户端开发技术；

5.较强的代码阅读能力，代码风格良好，能设计出高效、合理、易读、易于扩展的程序结构；

6.具备较强的团队精神、良好的表达和沟通能力，工作认真负责；

7.具有很强的新知识学习能力和错误调试排错能力。

联系方式：[email protected]

注：此岗位为腾讯旗下全资子公司编制岗位

见证社区的力量！
助力开发者技术挣钱
帮助客户省钱、省时、省力！

欢迎加入我们，共同成长！