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

【消消大冒险】工程资源结构与解析_视频教程

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

【消消大冒险】工程资源结构与解析_小游戏_02

按次序从上向下,依次说明一下:
  1. animations: 动画资源目录,动画应该是与项目没关系的,独立了出来;

  2. components: 组件脚本,里面都是 Creator 的组件代码,可以通用,后面有详细说明;

  3. music:游戏音效资源,都是 mp3 不过多释解;

  4. prefabs:预制体,这里面预制体都会有一个配套的控制脚本,后面说明;

  5. scene:游戏场景,除了场景文件,还有该场景用到的专属组件脚本也在这里;

  6. scripts:一些三方的脚本,这里主要是微信小游戏相关的;

  7. textures:游戏中用到的图片资源、字体资源都在这里面,有子目录分类。

 

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

【消消大冒险】工程资源结构与解析_视频教程_03

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

【消消大冒险】工程资源结构与解析_视频教程_04

GameEvent这里比较特殊,只能在当前项目中使用,我将它归类到了【奎特尔】消灭星星类别了。还有几个比如 LoginWx 是后来添加的,还未来的及将他归类到组件菜单上,具体做法如下:cc.Class({
extends: cc.Component,
editor: {
menu: '【奎特尔】通用组件/LoadScene(场景加载)', //设置组件菜单
},
...
}通过设置组件脚本 editor 属性下面的 menu 字段值就可以了,使用"/"设置菜单层级。三、游戏控件

【消消大冒险】工程资源结构与解析_视频教程_05

prefabs目录中的主要是与游戏逻辑相关的预制本+脚本,这里的文件有一个规律:一个预制体文件配合一个同名的专用组件脚本,有两种用法:
  1. 直接将预制体拖动到场景编辑器,相当于一个控件

  2. 使用通用组件 LoadPrefab 组件动态创建预制控件

 

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

【消消大冒险】工程资源结构与解析_视频教程_06

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

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

GameScene这组件里面有游戏场景的控制逻辑,为了复用它,同时又要区别双人模式、单人模式结算时弹出不同的预制体窗口,这里可以设置为 ResultDialog 或 ResoultLove7 这两个预制资源。总的来说,为了方便游戏内容生产,尽量使 prefabs 里的预制控件拖拽即可使用,可单独运行、独立测试,不过有些预制体控件需要与其它控件配合才能工作,它们之间使用事件消息进行联系,这方面的内容我以后再单独介绍。四、游戏场景 下面在介绍一下 scene 目录中的文件。

【消消大冒险】工程资源结构与解析_微信_08

首页场景

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仓库源码地址,有任何问题欢迎反馈!如果你有相对完整的游戏案例、技术教程,也欢迎发到公众号上分享你的技术和经验,如果大家觉得有用也感谢支持作者的用心创作。