环境: Mac
oops Framework
该框架是由gdflas
编写,基于cocosCreator 3.x 而实现的开源游戏框架。特点:
- 框架通过插件方式提供,与项目相分离,方便不同版本平滑升级
- 内置模块低耦合, 可根据需要进行删减, 以适应不同类型的游戏
- 封装了常用的功能库,支持动画状态机,行为树等
- 支持
ECS
,MVVM
框架 - 支持屏幕适配,脚本模版创建,Excel的解析,ProtoBuf等
作者提供了两个项目工程:
- oops-framework oops项目实例工程, 可用于学习和研究框架的功能相关
- oops-game-kit oops的游戏开发模版, 可用于开发微信小游戏等项目
前者用于学习和研究,后者用于开发,方便快捷。该框架通过插件的方式提供, 主要有:
- oops-plugin-framework 游戏框架插件
- oops-plugin-hot-update 热更新插件
- oops-plugin-excel-to-json Excel转Json的插件
- oops-plugin-bundle AB包资源路径管理插件
作者针对于oops-framework的学习,提供了很多的资料参考:
哔哩视频教程-dgflash
CSDN博客-dgflash
cocos论坛-dgflash
cocosCreator商城搜索oops也可以找到
感谢作者将该框架开源分享给更多的人使用。
项目安装
以项目实例工程: oops-framework 为例:
-
打开Gitee的项目工程: oops-framework
-
复制克隆/下载下的链接, 打开终端命令,项目克隆:
git clone https://gitee.com/dgflash/oops-framework.git
-
项目下载成功后,先不要通过cocosCreator项目编译器打开项目, 因为项目的主体需要插件的支持, 直接打开,会有各种各样的错误。
-
终端命令进入到oops-framework的项目目录中, 先执行
update-oops-plugin-framework
的命令, 用于框架插件的下载:
./update-oops-plugin-framework.sh
// 如果命令提示错误,类似如下:
// -bash: ./update-oops-plugin-bundle: No such file or directory
// 可以增加 sudo ,它会提示你输入登录密码
sudo ./update-oops-plugin-framework.sh
// 如果使用sudo后,报错:command not found,那就再运行下命令
chmod u+x fileName.sh
sudo ./fileName.sh
插件下载成功,会放到项目extensions目录下,其他插件根据需要自行下载
sudo ./update-oops-plugin-bundle.sh
sudo ./update-oops-plugin-excel-to-json.sh
sudo ./update-oops-plugin-hot-update.sh
- 打开cocosCreator编译器,导入项目并打开,选择资源管理器 -> assets --> main.scene打开,运行游戏:
至此项目配置结束。
项目结构
oops-framework的项目目录结构,跟cocosCreator的项目结构 是一样的,只是额外增加了:
doc
放置了core, ecs, mvvm的配置说明文件,建议学习的时候进行参考excel
excel表配置文件,用于通过update-oops-plugin-excel-to-json插件转换为json等extensions
插件目录.bat/.sh
更新指定的插件配置相关,以update-oops-plugin-framework.sh为例:
# 检测是否存在extensions目录,不存在则创建
if [ ! -d "extensions" ]; then
mkdir extensions
fi
# 进入extensions目录
cd extensions
# 检测是否存在oops-plugin-framework
# 不存在,则克隆; 存在则拉取用于更新
if [ ! -d "oops-plugin-framework" ]; then
git clone -b master https://gitee.com/dgflash/oops-plugin-framework.git
else
cd oops-plugin-framework
git pull
fi
根据相关的.bat/.sh
命令,就可以下载或更新插件相关,方便快捷。
框架结构
框架的主要结构在插件oops-plugin-framework
中
目录:extensions/oops-framework/assets,主要有:
core
框架核心技术库相关libs
框架可选技术库相关, 可根据项目需要自动剔除moudule
通用模块相关
目录结构:
core
common 公共模块相关
audio 音频模块
event 全局事件
loader 资源管理相关
log 日志模块
random 随机管理
storage 本地存储
timer 定时器相关
game 游戏世界类
gui 游戏界面类
layer 多层界面、窗口管理
prompt 公共提示窗口
utils 各类工具
Oop.ts
框架功能访问接口
Root.ts
框架视图层根节点管理组件libs 框架中可选技术库
animator 可视化动画状态机
animator-effect 动画特效组件
animator-move 动画移动组件
behavior-tree 行为树框架
camera 摄像机控制组件
collection 数据集合处理
ecs ECS框架
gui 界面组件, 比如:红点提示、按钮、标签、多语言等组件
model-view MVVM框架
network 网络模块, 支持Http, WebSocket的请求相关,支持Protobuf
render-texture 渲染纹理组件, 可用于三维模型显示到二维精灵等
module 游戏通用模块
common 公共模块
config 配置模块
基础相关:
LayerManager.ts
UI界面管理, 可用于显示不同的UI页面相关ResLoader.ts
资源管理相关, 可用于resources及其他bundle的加载TimerManager.ts
时间管理相关,可用于时间的显示及定时器相关AudioManager.ts
声音管理相关,可用于音乐音效的播放MessageManager.ts
可用于消息的注册和监听相关GUI.ts
可用于屏幕匹配相关StorageManager.ts
本地存储,支持AES数据加密
组件相关:
libs/gui/button
按钮相关, 支持点击效果,防连点和长按点击等libs/gui/language
多语言相关, 支持Label, Sprite, Spine等libs/model-view
MVVM组件库相关libs/animator-effect
特效管理相关,比如流光效果等
网络相关
libs/network/HttpRequest.ts
Http请求相关libs/network/NetManager.ts
webSocket请求相关
工具相关
Logger.ts
日志管理,支持网络层,业务,视图,配置等日志的显示RandomManager.ts
随机管理器,支持指定范围内的随机数显示core/utils
工具相关,比如:数学运算、字符串、正则、加密、Json加载等libs/network/protocol
zip压缩相关
项目开发
暂且以示例项目为例, 在项目开发中,注意几点内容:
- 该框架是支持屏幕适配的,通过项目 -> 项目设置 设定宽度和高度后,选择适配屏幕宽度和高度即可,框架那边会进行处理
- 创建脚本时,框架提供了不同模块的模版文件,主要有:
// oops-framework/.creator/asset-templete/typeScript
Module.ts
ModuleBll.ts // 业务层对象
ModuleModel.ts // 数据层对象
ModuleTable.ts // Excel表导出的Json数据相关
ModuleView.ts // 视图层对象
ModuleViewVM.ts // MVVM的视图层对象
- assets/script/game/initialize/bll/InitRes.ts 它主要用于项目启动时加载必备的资源,注意:要控制资源的大小,避免加载导致黑屏时间过长
entityEnter(e: Initialize): void {
var queue: AsyncQueue = new AsyncQueue();
// 加载自定义资源
this.loadCustom(queue);
// 加载多语言包
this.loadLanguage(queue);
// 加载公共资源
this.loadCommon(queue);
// 加载游戏内容加载进度提示界面
this.onComplete(queue, e);
queue.play();
}
- assets/script/game/initialize/view/LoadingViewComp.ts 资源加载进度条,在加载结束后,会通过如下进入设定的主页面
reset(): void {
setTimeout(() => {
// 关闭加载界面
oops.gui.remove(UIID.Loading);
// 打开游戏主界面(自定义逻辑)
oops.gui.open(UIID.Demo);
}, 500);
}
- assets/script/game/initialize/view/HotUpdate.ts 热更新相关, 主要的配置文件在resources目录下,分别为
project.manifest
和version.mainifest
最后祝大家学习oops Framework
顺利。