腾讯团队免费开源Cocos Creator公用组件框架cocomat！Cocos ICE率先集成重要功能

近日，由腾讯近20名研发人员共同开发的一套可在多个业务间复用的高性能、高效能的 Cocos Creator 公用组件框架 cocomat，正式向社区发布并免费开源，旨在帮助开发者们提升开发效率，更专注于业务开发。

cocomat

cocomat 目前主要包括：

• 一系列 UI 组件，如 Toast、Loading、BackBtn 等；

• 一系列工具组件，如场景管理、截图工具、音频播放、View 管理、内存管理、视力保护等；

• 一套自研无层级视频播放器。

目前，Cocos ICE 率先集成了 cocomat 汉字组件、视频组件、节点自适应适配功能等重要能力与特性，让老师能更轻松地制作高质量互动课件。同时，有需要的小伙伴也可以前往 cocomat 官网自行取用。

cocomat 下载地址：

https://github.com/cocos/cocomat

关于 cocomat

cocomat 因何而起？开发者能使用 cocomat 做些什么？我们邀请到了 cocomat 的贡献者之一 wzpan（潘伟洲），请他聊一聊这个开源组件框架与 Cocos 的渊源。

和大家分享一下你跟 Cocos 是如何结识的吧！

wzpan（潘伟洲）：2017年的时候我们立项开发一款应用，当时围绕跨平台、性能、效率、表现力、社区支持等几个角度进行技术选型，最终选择用 Cocos Creator 进行开发。后来这个项目进展很顺利，引擎的跨平台能力给我们留下了深刻的印象，我们也在这个过程中积累了比较多的开发经验。

随着和 Cocos 引擎团队的深入交流，我们彼此之间也建立了良好的合作关系。2018年我们在 GMTC 上分享了如何使用 Cocos 开发出高性能的跨平台应用，还给 Cocos 编写了 JSB 手动绑定和自动绑定教程——这两篇文章被收录到了 Cocos Creator 的官方文档里。另外我们还给社区贡献过 ccc-devtools、JSC 加解密工具 cocos-jsc-endecryptor、2D 嘴型动画生成工具 rhubarb-lip-sync-ccc 等插件和工具。

当初为什么会想到开发 cocomat？

wzpan（潘伟洲）：在腾讯，我建了一个内部的 Cocos 技术交流小群「鹅厂 Cocos 开发圈」。在平时的交流中我们发现，虽然群里的同事来自不同的事业群、产品线，但是大家在日常开发过程中都会遇到一些相似的问题。

有一天我们这个小群线下组织了一场面基，在聊到各自的业务痛点后，我们决定一起做一件事情：我们希望能开发一套可复用、高性能、高效能的 Cocos Creator 公共组件框架，解决一些大家常会遇到的问题，帮助 Cocos Creator 开发者提升开发效率。cocomat 由此而生。

「cocomat」这个名字有什么含义吗？

wzpan（潘伟洲）：我们取名「cocomat」，就是「Cocos Mate（伙伴）」的含义，从开发之初就是想要贡献给社区，希望可以帮助到更多的 Cocos 开发者。

使用方法

准备工作

• 使用 Cocos Creator 2.4.7 创建一个新的 demo 工程。

• 打开 cocomat 项目工程，找到项目 packages 目录里头 cocomat 相关的插件。

• 将扩展插件 cocomat 和 cocomat-util 文件夹拷贝到 demo 工程里的 packages 目录下。

• 打开 demo 工程，此时在 Cocos Creator 菜单栏 Extension 下就有了 cocomat 辅助和 cocomat 相关的插件。

安装 cocomat 组件库

• 在完成了使用前的准备工作后，从菜单栏 --> Extension --> cocomat --> 安装，安装后项目工程就会多出 coco-mat 的文件夹，同时 assets/resources 下也会多出 cocomat 资源文件夹用于存放 coco-mat 组件库用到的资源文件。

• 从菜单栏 --> Extension --> cocomat --> 还原，可以移除导入的 coco-mat 组件库和 cocomat 资源文件。

• 从菜单栏 --> Extension --> cocomat --> 设置，可以打开模块设置界面。在这个界面下可以对不需要的模块进行剔除，如果将项目正在使用的模块剔除会引起编辑器报错。

扩展 cocomat 组件库

如果后续有需要修改 cocomat 组件代码和资源，或者添加新的组件到 cocomat 组件库，可以直接在 coco-mat/lib 找到相应的组件进行修改，或则添加新的组件，然后从菜单栏 --> Extension --> cocomat辅助 --> 将代码和资源同步到插件包，控制台输出同步完成日志，这样项目工程目录 packages/cocomat 下的插件包就同步了新的修改，扩展同步完成后，就可以分享你的插件包给其他人使用。

Cocos ICE & cocomat

Cocos ICE 是由 Cocos 引擎推出的一个面向教育从业者的互动课件制作工具，推出后迅速得到了腾讯、金茂教育、领格等知名企业青睐。老师们可以轻松使用 Cocos ICE 零代码快速构建高质量互动课件，强大的跨平台能力和兼容性、可定制化的特点，让不同企业、机构对各种功能扩展的个性化需求得到满足。

本次集成 cocomat 部分重要功能，进一步完善了 Cocos ICE 的能力与特性，促进互动课件制作效率提升。

cocomat 汉字组件

效果预览

Cocos ICE 现已集成 cocomat 汉字组件，该组件适用于制作汉字书写/认字识字的内容，能够根据用户笔画书写的正确与否，进行相应的反馈行为，例如书写错误时将有提示错误的颜色闪烁，书写正确时笔画会自动填充，完成书写后播放书写成功动效等。

组件特性

• 动态更替内容字，动态刷新 Options。

• 绘制田字格，可自定义线宽和颜色。

• 可对象控制：字、笔画、书写器。

• 支持网络数据源，可配置数据路径 url。

• 自适应目标 cc.Graphics，自动计算对象大小。

使用方法

在 ICE 研发模式下，

给组件添加属性面板脚本

通过 Cocos ICE 研发模式导入 cocomat 汉字组件库用到的代码和资源，根据制课老师的需求做自定义属性配置，然后将 EduElement 脚本添加到节点上，属性面板便会默认将 EduElement 的 attribute 属性显示在排版中。

修改组件属性

完成配置后，老师就可以在 Cocos ICE 的互动课件制作模式下，通过「属性设置」面板修改组件属性，例如替换组件背景图、修改书写的汉字内容、修改书写的线宽和颜色、修改田字格的线宽和颜色等。

cocomat 视频组件

效果预览

在互动课件与互动视频的制作中，常会需要插入视频作为素材。Cocos ICE 通过集成 cocomat 视频组件，实现支持高帧率（60fps）、高分辨率（1080p）的在线视频和本地视频的播放，大幅提升课件中的视频播放质量。

组件特性

• 无层级限制。

• 移动端边下边播。

• 移动端 YUV 渲染。

• 支持高帧率（60fps）、高分辨率（1080p）资源播放。

使用方法

导入 CCMVideo 播放器的相关代码和资源后，可以在属性设置配置视频播放器的本地视频和在线视频，配置完成后，视频播放器便可以加载本地和在线的视频资源。

编辑界面

制作课件的过程中，老师可随时点击 Cocos ICE 的「预览」按键，预览配置好的多个视频。

cocomat

节点自适应适配功能

过去，在 Cocos ICE 的课件预览界面中，无法对课件内对象的显示大小进行调整，这导致用户在制作课件时需要精确地设计各个对象的大小和位置，尤其对于题型、游戏模板来说，这将会占据一个非常大的显示区域。

为了解决这个痛点，Cocos ICE 引入了 cocomat 节点自适应适配功能，用户现在可以在 Cocos ICE 的预览窗口下，自由调整各个对象的大小，从而显示更多的场景内容。

适配模式定义

适配模式「FitInParent」演示

以适配模式「FitInParent」为例，在预览时，可以拖动右下角的按钮来动态更改「比大小」游戏的宽高。

---

感谢开发者们对 Cocos 的支持与关注，以及对生态建设的积极参与！未来，Cocos 在持续打磨引擎技术的同时，也将同步推进生态建设，让广大开发者能更简易地使用到更多优质插件、开发框架、各类服务和内容创作工具等。

Cocos 开发者沙龙「成都站」将于7月10日（本周日）举行。来自 Cocos 引擎官方、刀锋创意科技、竞技世界、网易易盾、百度安全、数数科技等知名游戏开发与相关服务厂商的重磅嘉宾即将全力开讲！点击文末【阅读原文】或扫描上方二维码即刻报名吧！

往期精彩