腾讯团队免费开源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，自动计算对象大小。
使用方法
通过 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 引擎官方、刀锋创意科技、竞技世界、网易易盾、百度安全、数数科技等知名游戏开发与相关服务厂商的重磅嘉宾即将全力开讲！点击文末【阅读原文】或扫描上方二维码即刻报名吧！
往期精彩