从Cocos2d-js到Creator,一直以来都有模块裁剪的能力,可以将游戏中没有用到的功能代码,在编译输时移除,从而减少包体大小,这对H5游戏来说影响比较明显。Creator比Cocos2d-js做的更好,通过主菜单->项目设置->模块设置有一个图形化的界面,可以方便模块配置。
下面简单说一下各模块的功能和作用,以及对应的组件。
一、模块配置
在Creator的模块设置界面中,可以看到Core、Canvas、Sprite这三个模块是禁止编辑的,他们是构建Creator应用的基石,没有他们就没法构建游戏。
其实Core能不算是模块,而是一类模块的集合,里面包含了Canvas和Sprite,Label、Button等等,引擎提供的组件。
打开CocosCreator的安装路径有一个modules.json
/Applications/CocosCreator.app/Contents/Resources/engine/modules.json
此文件中描述了模块设计中界面信息,内容如下:
[ { "name": "Core", "locked": true, "entries": [] }, { "name": "Canvas", "locked": true, "entries": [ "./cocos2d/core/components/CCCanvas.js" ] }, { "name": "Sprite", "locked": true, "entries": [ "./cocos2d/core/components/CCSprite.js" ] }, { "name": "Label", "entries": [ "./cocos2d/core/components/CCLabel.js" ] }, ...
浏览这个文件,可以看到一个模块通常对应一个或多个js文件。
这里我编写了一个脚本代码,通过解析这些代码路径,简单统计了一下模块文件的大小、代码行数。而且你可由些找到Creator的组件源代码,了解组件实现的具体细节,通过学习源码是提高开发水平的重要途径。
二、Creator模块说明
根据module.json文件中的信息,我们大概了解一下CocosCreator有那些模块,这些模块提供了那些功能。
1. Core模块
功能:Core其实指的是CocosCreator下的engine/core目录,里面内容很丰富。
字节数: 0 代码行数: 0 文件名: []
2. Canvas模块
功能: 屏幕适配,作为UI根节点,为所有子节点提供视窗四边的位置信息以供对齐,另外提供屏幕适配策略接口,方便从编辑器设置。
字节数: 9059 代码行数: 285 文件名: CCCanvas.js
3. Sprite模块
功能:场景中渲染精灵,支持九宫、拉升、平铺、裁剪等功能。
字节数: 19825 代码行数: 650 文件名: CCSprite.js
4 Label模块
功能:文字标签组件,实现系统字体、fnt、艺术字的渲染。
字节数: 18686 代码行数: 599 文件名: CCLabel.js
5 Mask模块
功能:遮罩组件,为子节点提供遮罩裁剪能力支持圆形、椭圆、图像模版三种模式。
字节数: 11155 代码行数: 348 文件名: CCMask.js
6. CCSpriteDistortion模块
功能:扭曲效果组件,用于改变SIMPLE类型sprite的渲染,只有当sprite组件已经添加后,才能起作用.
字节数: 4268 代码行数: 118 文件名: CCSpriteDistortion.js
7. LabelOutline模块
功能:描边效果组件,用于字体描边,只能用于系统字体。
字节数: 3943 代码行数: 118 文件名: CCLabelOutline.js
8. ParticleSystem模块
功能:粒子系统组件。
字节数: 29961 代码行数: 1017 文件名: CCParticleSystem.js
9. TiledMap模块
功能:TileMap地图组件,渲染tmx格式的Tile Map。
字节数: 26241 代码行数: 885 文件名: CCTiledMap.js
10. Spine Skeleton模块
功能:Spine骨骼动画渲染模块