【消消大冒险】工程资源结构与解析

昨天 Shawn 在微店上出售了我在微信上线的小游戏《消消大冒险》，该游戏原本是我计划的收费视频教程的案例，但由于视频录的不太顺利，暂将源代码低价出售，目前已经有30多人购买，感谢大家的支持，在此还要特别感谢一位支持 Shawn 的老板一次购买了500份！

工程中没有附属有文档，下面我将工程结构介绍一下，可以帮助大家快速了解资源组织结构，以及我所理解的模块化设计思路，也欢迎你提出不同的意见。

一、整体结构

下图是整体目录结构。

按次序从上向下，依次说明一下：

1. animations: 动画资源目录，动画应该是与项目没关系的，独立了出来；
2. components: 组件脚本，里面都是 Creator 的组件代码，可以通用，后面有详细说明；
3. music：游戏音效资源，都是 mp3 不过多释解；
4. prefabs：预制体，这里面预制体都会有一个配套的控制脚本，后面说明；
5. scene：游戏场景，除了场景文件，还有该场景用到的专属组件脚本也在这里；
6. scripts：一些三方的脚本，这里主要是微信小游戏相关的；
7. textures：游戏中用到的图片资源、字体资源都在这里面，有子目录分类。

Shawn这里没有将脚本代码集中存放一个目录，而是跟着配套的预制体或场景文件在一起，保持三码合一：预制体文件名、预制体根节点名、脚本文件名。一是方便管理控件，二是在代码中可以减少硬编码，这也是我之前介绍的预制体控件(预制体+脚本=控件)的具体实施方案。

二、通用组件脚本

components 目录中的主要是通用脚本，可以挂载到任意节点，从名字应该能猜到他的作用，不过这里为了初学的伙伴，我为每个组件增加了中文说明，看下图：

GameEvent这里比较特殊，只能在当前项目中使用，我将它归类到了【奎特尔】消灭星星类别了。还有几个比如 LoginWx 是后来添加的，还未来的及将他归类到组件菜单上，具体做法如下：

cc.Class({
    extends: cc.Component,
    editor: {
        menu: '【奎特尔】通用组件/LoadScene(场景加载)', //设置组件菜单
    },
    ...
}

通过设置组件脚本 editor 属性下面的 menu 字段值就可以了，使用"/"设置菜单层级。

三、游戏控件

prefabs目录中的主要是与游戏逻辑相关的预制本+脚本，这里的文件有一个规律：一个预制体文件配合一个同名的专用组件脚本，有两种用法：

1. 直接将预制体拖动到场景编辑器，相当于一个控件
2. 使用通用组件 LoadPrefab 组件动态创建预制控件

比如这里点击主界面上的桃形排行榜按钮，将会弹出排行界面，看下图的组件配置：

还有一类控件，是在特定逻辑中创建的，比如过关后是否需要显示一个结算面板：

GameScene这组件里面有游戏场景的控制逻辑，为了复用它，同时又要区别双人模式、单人模式结算时弹出不同的预制体窗口，这里可以设置为 ResultDialog 或 ResoultLove7 这两个预制资源。

总的来说，为了方便游戏内容生产，尽量使 prefabs 里的预制控件拖拽即可使用，可单独运行、独立测试，不过有些预制体控件需要与其它控件配合才能工作，它们之间使用事件消息进行联系，这方面的内容我以后再单独介绍。

四、游戏场景

下面在介绍一下 scene 目录中的文件。

首页场景

HomeScene 是进入游戏的主界面，最早它是没有逻辑控制的，也就是说没有 HomeScene.js 这个脚本，后来增加了微信小游戏的控制逻辑，添加了这个脚本，功能是接收消息打开排行榜，现在来看，应该单独做一个组件更合适。

游戏场景

游戏有两种玩法，界面不同，因此提供了两个场景文件：

1. GameScene：经典单机模式
2. DoubleScene：七夕双人模式

DoubleScene.js 继承了 GameScene.js，代码很简单，只有个组件脚本的架子，没有逻辑代码，重写父类函数什么都不做，是为了在双人模式中不显示广告。

这里还有一个 GameAudio.js 组件，这里主要是将游戏的音效与游戏逻辑做了分离，通过事件来播放音效，因此单独做了个组件脚本，挂载到游戏场景任意节点就行。

五、小结

上面介绍了消消大冒险的主要目录资源，希望对你有所帮助，到国庆节当天在微店以1折2元出售，10月1日过后恢复原价，Shawn 以后面我还会介绍更多的代码解读，在此感谢你的支持。

H5版本在线体验地址：

http://game.ixuexie.com/creator-pop-star

如果你初学Cocos Creator 还不会写代码，也可以使用我提供的组件创造出不同的游戏玩法，请看下面视频

同时新版本 ShaderHelper2 在使用体验也再次升级，可自动枚举Shader参数，它是免费的，在微店里有Github仓库源码地址，有任何问题欢迎反馈！