最近在使用CocosCreator（以下简称CC）开发HTML5游戏的工作中，发现公司的很多游戏都有雷同的元素，比如倒计时栏、结算页等等在。在早期的开发中，我们没有找到复用的方法，只能在不同的游戏项目中从头开始编写。随着需求越来越大，重新发明轮子肯定不是什么好办法，那么对于CC项目来说，是否可以将这些可复用的游戏元素抽取出来做成组件包呢？经过一番摸索，终于找到了解决办法。什么是CC组件？以我们手Q上的“太鼓达人”小游戏为例。它的倒计时栏和结算页面在其他小游戏中也有，只是外观不同，但逻辑处理是一致的。这里的倒计时栏和结算页面可以理解为组件。两个组件的逻辑如下：倒计时条可以设置游戏时间，其填充长度在游戏时间的过程中不断减少；剩余时间将显示在倒计时栏的右侧；回调动作将在倒计时结束后执行。可在结算页面设置等级分，达到或超过特定等级分即可获得星星；星星将根据动画逻辑显示；分数将从0以下开始结算；回调动作将在结算完成后执行。通过这个例子不难理解，所谓的CC组件就是一个包含逻辑、图片、动画、音频等不同资源的游戏节点。在CC中，一个节点是这样的：可以看到，它的结构定义在编辑器的左边，具体体现在中间，它的相关属性在右边。如果我想在其他项目中复用这个定义的节点，怎么办？转为预制资源在CC中，预制资源是非常重要的一个部分，可以理解为节点模板。如果你想把一个现成的节点抽象成一个组件，将它变成一个预制资源是最合适的方式。当我们在CC编辑器中定义一个节点，并关联逻辑脚本和静态资源时，我们可以直接从编辑器的层级管理器中拖拽到资源管理器中，将其转化为预制资源。但是，由于CC中资源的关联是基于资源路径的，所以在抽象出一个CC组件之前，我们需要把该组件使用的所有资源都放在一起，方便以后复用，否则很可能在其他项目时被重用，会报找不到资源的错误。新建一个CC项目，清空assets/目录，然后在里面新建一个Components/目录，作为我们存放CC组件的目录。以游戏结果页面Result为例，按照如下目录结构进行初始化，放入必要的资源：.├──Resources#组件静态资源│├──score.png│└──star.png└──Result.ts#Componentscript然后在CC编辑器中，通过拖拽的方式给子节点添加图片，最后绑定逻辑脚本Result.ts：完成后，拖到资源的assets/Components/Result目录经理成为预制资源。为了方便其他用户使用这个组件，可以在里面添加一个demo，里面只包含这个组件的场景和场景需要的脚本。当用户需要了解这个组件时，只需要预览Demo场景，组件的一些方法也可以在Demo脚本中看到。最终目录结构如下：.├──Demo#组件使用Demo│├──Result.fire│└──ResultDemo.ts├──Resources#组件静态资源│├──score.png│└──star.png├──Result.prefab#组件节点└──Result.ts#组件脚本的使用方法简单来说就是将组件库项目的整个Components/目录复制到目标项目的assets/目录下，然后然后把预制好的资源节点拖到hierarchymanager中即可。当然，这样的手动操作还不够优雅，所以我们可以使用shell脚本来帮助我们简化这一步。在目标项目根目录新建download.sh脚本，写入如下内容：#!/bin/bash#Firstcleanupecho"Clearingworkbench..."rm-rf./cocos-componentsrm-rf。/assets/Components#直接克隆组件库项目，取出Components目录，然后删除组件库项目echo"Cloningproject..."gitclonehttp://git.xxx.com/cocos-components.gitcp-r./cocos-components/assets/Components./assetsrm-rf./cocos-componentsecho“完成！”之后只需要执行./download.sh就可以下载最新的组件库，非常方便。组件设计规范组件设计应遵循“黑盒”原则，不依赖于其他组件，也不影响其他组件。组件的状态由组件自己保存。如果你需要改变组件的状态或行为，你应该通过它暴露可配置项或接口（通过CocosCreator的属性检查器修改或导入组件的脚本实例）。以Progress组件为例。它提供了gameDuration配置项来定义倒计时的持续时间。此外，它还提供了一个setTimeoutCallback()方法来定义倒计时结束时的行为。前者可以在CocosCreator的属性检查器中直接修改，后者需要在游戏脚本中通过代码使用：importProgressfrom'../Components/Progress/Progress'@ccclassexportdefaultclassGameextendscc.Component{start(){Progress.instance.setTimeoutCallback(()=>{console.log('测试进度超时回调！')})}}在定义组件的脚本时，注意添加一个名为instance的脚本static脚本的属性用于脚本之间的调用：exportdefaultclassProgressextendscc.Component{staticinstance=nullconstructor(){super()Progress.instance=this}}另外一定要注意命名约定构建组件库，这样无论是开发者还是调用者，都可以省去很多麻烦。后续优化CC组件库项目也是一个完整的CC游戏。我们可以在这个游戏中添加一个组件菜单，点击菜单可以加载对应组件的场景，实时预览组件的效果。这个想法后面也会付诸实践，争取早日开源。
