騰訊團隊免費開源Cocos Creator公用組件框架cocomat！Cocos ICE率先集成重要功能
近日，由騰訊近20名研發(fā)人員共同開發(fā)的一套可在多個業(yè)務(wù)間復(fù)用的高性能、高效能的 Cocos Creator 公用組件框架 cocomat，正式向社區(qū)發(fā)布并免費開源，旨在幫助開發(fā)者們提升開發(fā)效率，更專注于業(yè)務(wù)開發(fā)。
cocomat
cocomat 目前主要包括：
一系列 UI 組件，如 Toast、Loading、BackBtn 等；
一系列工具組件，如場景管理、截圖工具、音頻播放、View 管理、內(nèi)存管理、視力保護等；
一套自研無層級視頻播放器。
目前，Cocos ICE 率先集成了 cocomat 漢字組件、視頻組件、節(jié)點自適應(yīng)適配功能等重要能力與特性，讓老師能更輕松地制作高質(zhì)量互動課件。同時，有需要的小伙伴也可以前往 cocomat 官網(wǎng)自行取用。
cocomat 下載地址：
https://github.com/cocos/cocomat
關(guān)于 cocomat
cocomat 因何而起？開發(fā)者能使用 cocomat 做些什么？我們邀請到了 cocomat 的貢獻者之一 wzpan（潘偉洲），請他聊一聊這個開源組件框架與 Cocos 的淵源。
和大家分享一下你跟 Cocos 是如何結(jié)識的吧！
wzpan（潘偉洲）：2017年的時候我們立項開發(fā)一款應(yīng)用，當(dāng)時圍繞跨平臺、性能、效率、表現(xiàn)力、社區(qū)支持等幾個角度進行技術(shù)選型，最終選擇用 Cocos Creator 進行開發(fā)。后來這個項目進展很順利，引擎的跨平臺能力給我們留下了深刻的印象，我們也在這個過程中積累了比較多的開發(fā)經(jīng)驗。
隨著和 Cocos 引擎團隊的深入交流，我們彼此之間也建立了良好的合作關(guān)系。2018年我們在 GMTC 上分享了如何使用 Cocos 開發(fā)出高性能的跨平臺應(yīng)用，還給 Cocos 編寫了 JSB 手動綁定和自動綁定教程——這兩篇文章被收錄到了 Cocos Creator 的官方文檔里。另外我們還給社區(qū)貢獻過 ccc-devtools、JSC 加解密工具 cocos-jsc-endecryptor、2D 嘴型動畫生成工具 rhubarb-lip-sync-ccc 等插件和工具。
當(dāng)初為什么會想到開發(fā) cocomat？
wzpan（潘偉洲）：在騰訊，我建了一個內(nèi)部的 Cocos 技術(shù)交流小群「鵝廠 Cocos 開發(fā)圈」。在平時的交流中我們發(fā)現(xiàn)，雖然群里的同事來自不同的事業(yè)群、產(chǎn)品線，但是大家在日常開發(fā)過程中都會遇到一些相似的問題。
有一天我們這個小群線下組織了一場面基，在聊到各自的業(yè)務(wù)痛點后，我們決定一起做一件事情：我們希望能開發(fā)一套可復(fù)用、高性能、高效能的 Cocos Creator 公共組件框架，解決一些大家常會遇到的問題，幫助 Cocos Creator 開發(fā)者提升開發(fā)效率。cocomat 由此而生。
「cocomat」這個名字有什么含義嗎？
wzpan（潘偉洲）：我們?nèi)∶竎ocomat」，就是「Cocos Mate（伙伴）」的含義，從開發(fā)之初就是想要貢獻給社區(qū)，希望可以幫助到更多的 Cocos 開發(fā)者。
使用方法
準備工作
使用 Cocos Creator 2.4.7 創(chuàng)建一個新的 demo 工程。
打開 cocomat 項目工程，找到項目 packages 目錄里頭 cocomat 相關(guān)的插件。
將擴展插件 cocomat 和 cocomat-util 文件夾拷貝到 demo 工程里的 packages 目錄下。
打開 demo 工程，此時在 Cocos Creator 菜單欄 Extension 下就有了 cocomat 輔助和 cocomat 相關(guān)的插件。
安裝 cocomat 組件庫
在完成了使用前的準備工作后，從菜單欄 --> Extension --> cocomat --> 安裝，安裝后項目工程就會多出 coco-mat 的文件夾，同時 assets/resources 下也會多出 cocomat 資源文件夾用于存放 coco-mat 組件庫用到的資源文件。
從菜單欄 --> Extension --> cocomat --> 還原，可以移除導(dǎo)入的 coco-mat 組件庫和 cocomat 資源文件。
從菜單欄 --> Extension --> cocomat --> 設(shè)置，可以打開模塊設(shè)置界面。在這個界面下可以對不需要的模塊進行剔除，如果將項目正在使用的模塊剔除會引起編輯器報錯。
擴展 cocomat 組件庫
如果后續(xù)有需要修改 cocomat 組件代碼和資源，或者添加新的組件到 cocomat 組件庫，可以直接在 coco-mat/lib 找到相應(yīng)的組件進行修改，或則添加新的組件，然后從菜單欄 --> Extension --> cocomat輔助 --> 將代碼和資源同步到插件包，控制臺輸出同步完成日志，這樣項目工程目錄 packages/cocomat 下的插件包就同步了新的修改，擴展同步完成后，就可以分享你的插件包給其他人使用。
Cocos ICE & cocomat
Cocos ICE 是由 Cocos 引擎推出的一個面向教育從業(yè)者的互動課件制作工具，推出后迅速得到了騰訊、金茂教育、領(lǐng)格等知名企業(yè)青睞。老師們可以輕松使用 Cocos ICE 零代碼快速構(gòu)建高質(zhì)量互動課件，強大的跨平臺能力和兼容性、可定制化的特點，讓不同企業(yè)、機構(gòu)對各種功能擴展的個性化需求得到滿足。
本次集成 cocomat 部分重要功能，進一步完善了 Cocos ICE 的能力與特性，促進互動課件制作效率提升。
cocomat 漢字組件
效果預(yù)覽
Cocos ICE 現(xiàn)已集成 cocomat 漢字組件，該組件適用于制作漢字書寫/認字識字的內(nèi)容，能夠根據(jù)用戶筆畫書寫的正確與否，進行相應(yīng)的反饋行為，例如書寫錯誤時將有提示錯誤的顏色閃爍，書寫正確時筆畫會自動填充，完成書寫后播放書寫成功動效等。
組件特性
動態(tài)更替內(nèi)容字，動態(tài)刷新 Options。
繪制田字格，可自定義線寬和顏色。
可對象控制：字、筆畫、書寫器。
支持網(wǎng)絡(luò)數(shù)據(jù)源，可配置數(shù)據(jù)路徑 url。
自適應(yīng)目標 cc.Graphics，自動計算對象大小。
使用方法
通過 Cocos ICE 研發(fā)模式導(dǎo)入 cocomat 漢字組件庫用到的代碼和資源，根據(jù)制課老師的需求做自定義屬性配置，然后將 EduElement 腳本添加到節(jié)點上，屬性面板便會默認將 EduElement 的 attribute 屬性顯示在排版中。
修改組件屬性
完成配置后，老師就可以在 Cocos ICE 的互動課件制作模式下，通過「屬性設(shè)置」面板修改組件屬性，例如替換組件背景圖、修改書寫的漢字內(nèi)容、修改書寫的線寬和顏色、修改田字格的線寬和顏色等。
cocomat 視頻組件
效果預(yù)覽
在互動課件與互動視頻的制作中，常會需要插入視頻作為素材。Cocos ICE 通過集成 cocomat 視頻組件，實現(xiàn)支持高幀率（60fps）、高分辨率（1080p）的在線視頻和本地視頻的播放，大幅提升課件中的視頻播放質(zhì)量。
組件特性
無層級限制。
移動端邊下邊播。
移動端 YUV 渲染。
支持高幀率（60fps）、高分辨率（1080p）資源播放。
使用方法
導(dǎo)入 CCMVideo 播放器的相關(guān)代碼和資源后，可以在屬性設(shè)置配置視頻播放器的本地視頻和在線視頻，配置完成后，視頻播放器便可以加載本地和在線的視頻資源。
編輯界面
制作課件的過程中，老師可隨時點擊 Cocos ICE 的「預(yù)覽」按鍵，預(yù)覽配置好的多個視頻。
cocomat
節(jié)點自適應(yīng)適配功能
過去，在 Cocos ICE 的課件預(yù)覽界面中，無法對課件內(nèi)對象的顯示大小進行調(diào)整，這導(dǎo)致用戶在制作課件時需要精確地設(shè)計各個對象的大小和位置，尤其對于題型、游戲模板來說，這將會占據(jù)一個非常大的顯示區(qū)域。
為了解決這個痛點，Cocos ICE 引入了 cocomat 節(jié)點自適應(yīng)適配功能，用戶現(xiàn)在可以在 Cocos ICE 的預(yù)覽窗口下，自由調(diào)整各個對象的大小，從而顯示更多的場景內(nèi)容。
適配模式定義
適配模式「FitInParent」演示
以適配模式「FitInParent」為例，在預(yù)覽時，可以拖動右下角的按鈕來動態(tài)更改「比大小」游戲的寬高。
感謝開發(fā)者們對 Cocos 的支持與關(guān)注，以及對生態(tài)建設(shè)的積極參與！未來，Cocos 在持續(xù)打磨引擎技術(shù)的同時，也將同步推進生態(tài)建設(shè)，讓廣大開發(fā)者能更簡易地使用到更多優(yōu)質(zhì)插件、開發(fā)框架、各類服務(wù)和內(nèi)容創(chuàng)作工具等。
Cocos 開發(fā)者沙龍「成都站」將于7月10日（本周日）舉行。來自 Cocos 引擎官方、刀鋒創(chuàng)意科技、競技世界、網(wǎng)易易盾、百度安全、數(shù)數(shù)科技等知名游戲開發(fā)與相關(guān)服務(wù)廠商的重磅嘉賓即將全力開講！點擊文末【閱讀原文】或掃描上方二維碼即刻報名吧！
往期精彩
