mirror of
https://gitee.com/dgflash/oops-framework.git
synced 2026-09-03 02:23:47 +08:00
更新所有文件到Wiki中，文档在Readme中
This commit is contained in:
dgflash
10
README.md
10
README.md
@@ -13,14 +13,8 @@ Oops Framework 基于 Cocos Creator 3.x 开发的一款游戏框架。
|
||||
1. 项目下载后执行update-oops-plugin-framework.bat下载最新版本框架插件，在启动Cocos Creator运行项目
|
||||
1. master分支一般会与 Cocos Creator 引擎最新版本保持同步，需要其它版本可选其它分支下载
|
||||
|
||||
#### [教程项目](https://store.cocos.com/app/detail/6647)
|
||||
#### [视频教程](https://www.bilibili.com/video/BV1WV4y1G7Gb/?spm_id_from=333.337.search-card.all.click&vd_source=2ecab277f9fb79c5e11c909bf0affd34)
|
||||
|
||||
#### 技术文档
|
||||
- [oops-framework](https://oops-1255342636.cos.ap-shanghai.myqcloud.com/doc/oops-framework/index.html)
|
||||
- [ecs](https://gitee.com/dgflash/oops-framework/tree/master/doc/ecs/ecs.md)
|
||||
- [mvvm](https://gitee.com/dgflash/oops-framework/tree/master/doc/mvvm)
|
||||
- [animator](https://gitee.com/dgflash/oops-framework/tree/master/doc/animator.md)
|
||||
#### 框架介绍与文档
|
||||
- [传送门](https://gitee.com/dgflash/oops-framework/wikis/pages?sort_id=12008674&doc_id=2873565)
|
||||
|
||||
### QQ群
|
||||
- 798575969（1群）
|
||||
|
||||
355
doc/animator.md
355
doc/animator.md
@@ -1,355 +0,0 @@
|
||||
# Cocos Animator
|
||||
一个用于Cocos Creator的可视化动画状态机编辑器。<br/>
|
||||
编辑器地址：https://oops-1255342636.cos.ap-shanghai.myqcloud.com/tools/animator-editor/index.html
|
||||
|
||||
## 目录
|
||||
- [前言](#preface)
|
||||
- [项目结构](#project)
|
||||
- [状态机编辑器](#editor)
|
||||
- [总览](#editor1)
|
||||
- [状态机视图](#editor2)
|
||||
- [Parameters](#editor3)
|
||||
- [Inspector](#editor4)
|
||||
- [数据导入与导出](#editor5)
|
||||
- [导出的数据格式](#json)
|
||||
- [Runtime](#runtime)
|
||||
- [Example](#example)
|
||||
- [注意点](#warning)
|
||||
- [参考资料](#reference)
|
||||
|
||||
|
||||
## <a id="preface"></a>前言
|
||||
当动画数量较多且转换规则复杂的时候，手动编写代码去处理转换逻辑会非常痛苦。用过Unity的话，都知道Unity的Animator Controller能可视化地编辑状态机，在一定程度上减轻了手写逻辑的痛苦，但是Cocos Creator目前没有提供这种便利的工具，于是便有了这个项目。<br/>
|
||||
动手之前，在网上看到已经有人做了一个这种工具<sup>[[1]](#reference1)</sup>，但离我想要的效果差了一点，以及runtime的实现也有一些问题，同时我也希望能随时根据需求自由更改功能，于是便用Cocos Creator另写了一个状态机编辑器，runtime的实现也在他的基础上进行了修改。
|
||||
|
||||
|
||||
## <a id="project"></a>项目结构
|
||||
- animator-editor：状态机编辑器项目源码，使用CocosCreator2.2.2实现
|
||||
- animator-runtime：解析状态机的runtime源码，里面两个目录分别用于CocosCreator2.x的项目与3.0项目
|
||||
- examples：用CocosCreator2.2.2与3.0rc写的简单例子
|
||||
|
||||
|
||||
## <a id="editor"></a>状态机编辑器
|
||||
操作基本和Unity Animator类似</br>
|
||||
|
||||
#### <a id="editor1"></a>**总览**</br>
|
||||
编辑器界面分为三个部分
|
||||
</br>
|
||||
- 左侧用于编辑状态机参数，参数分为number、boolean、trigger、auto trigger四种类型。
|
||||
- 中间用于编辑状态、子状态机以及状态之间的连线关系，上侧的导航栏用于显示当前视图状态机的层级关系，BaseLayer为根状态机。
|
||||
- 右侧用于编辑状态与状态转换连线的数据。
|
||||
|
||||
#### <a id="editor2"></a>**状态机视图**</br>
|
||||
|
||||
|
||||
</br>
|
||||
- 操作方式：
|
||||
- 鼠标滚轮可缩放以及拖动视图
|
||||
- 鼠标右键空白处可选择生成状态或子状态机节点
|
||||
- 鼠标右键状态可选择生成状态转换连线、设置默认状态、删除
|
||||
- 鼠标左键按住状态拖动到状态机上出现加号，即可将状态丢入状态机内
|
||||
- 鼠标右键子状态机可选择删除
|
||||
- 鼠标双击子状态机可进入子状态机视图
|
||||
- 鼠标左键选中状态、子状态机、连线时均可用delete键删除
|
||||
- 鼠标左键可以拉伸调节Parameters和Inspector两个界面宽度
|
||||
- 有上下双向箭头的地方是可拖拽排序的列表
|
||||
- 状态：用矩形表示，橙色为默认状态，是整个状态机运行的入口。AnyState是一种特殊的状态，用于指代任意状态，仅能由AnyState将连线指向其余状态，无法将连线指向AnyState。
|
||||
- 子状态机：用六边形表示，内部包含默认状态则显示为橙色，名字中带有(up)的状态机为当前视图的父状态机。
|
||||
|
||||
#### <a id="editor3"></a>**Parameters**</br>
|
||||
用于编辑状态机参数，可填写初始值表示状态机开始运行时的参数状态
|
||||
- **number** 数字输入框
|
||||
- **boolean** 方形勾选框
|
||||
- **trigger** 圆形勾选框，与Unity中trigger表现一致，内部是一个boolean，在满足包含trigger条件的状态转换时会自动resetTrigger
|
||||
- **auto trigger** 菱形勾选框，在满足状态转换时以及每帧状态机逻辑更新时都会自动reset为false
|
||||
|
||||
#### <a id="editor4"></a>**Inspector**</br>
|
||||
用于编辑状态以及连线数据</br>
|
||||
- **Name**--状态/状态机名</br>
|
||||
- **Motion**--状态对应的动画名</br>
|
||||
- **Speed**--动画播放速度</br>
|
||||
- **Multiplier**--动画播放速度混合的number类型参数</br>
|
||||
- **Loop**--动画是否循环播放</br>
|
||||
- **Transitions**（连线数据）：
|
||||
- 记录状态间的转换关系（当前状态->目标状态）
|
||||
- **优先级**：同一个状态有多个transition的情况下，优先满足哪一个就先转向对应的目标状态，若同时满足多个transition，则以列表中从上往下的排序决定优先级（选中状态时才可以拖拽排序）
|
||||
- **Has Exit Time**打勾则表示会等待动画播放结束才能转向下一状态
|
||||
- **Conditions**（转换条件）：所有条件都是逻辑与的关系，必须同时满足所选择的逻辑关系（若勾选了Has Exit Time，还需等待动画播放完毕）才能转向下一状态
|
||||
|
||||
#### <a id="editor5"></a>**数据导入与导出**
|
||||
- 导出数据
|
||||
- **<kbd>ctrl</kbd>+<kbd>s</kbd>**--导出状态机编辑器工程文件（此文件记录了编辑器与runtime所需的所有数据，此文件必须保存好）
|
||||
- **<kbd>ctrl</kbd>+<kbd>e</kbd>**--仅导出runtime所需的数据文件
|
||||
- 导入数据
|
||||
- 将<kbd>ctrl</kbd>+<kbd>s</kbd>所保存文件拖入状态机编辑器内将还原整个状态机视图
|
||||
- cocos creator的animation文件、spine的json文件、dragonbones的json文件均可拖入状态机编辑器内自动生成对应的状态节点
|
||||
|
||||
|
||||
|
||||
#### <a id="json"></a>导出的数据格式
|
||||
- 状态机编辑器工程数据格式
|
||||
```
|
||||
{
|
||||
/** 编辑器版本号 */
|
||||
animator: string;
|
||||
parameters: [
|
||||
{
|
||||
/** 参数名 */
|
||||
param: string;
|
||||
/** 参数类型 */
|
||||
type: ParamType;
|
||||
/** 初始值 */
|
||||
init: number;
|
||||
}
|
||||
];
|
||||
mainStateMachine: {
|
||||
layerPos: [number, number];
|
||||
layerScale: number;
|
||||
anyStatePos: [number, number];
|
||||
|
||||
subStates: string[];
|
||||
subStateMachines: string[];
|
||||
};
|
||||
subStateMachines: [
|
||||
{
|
||||
/** 此状态机视图坐标 */
|
||||
layerPos: [number, number];
|
||||
/** 此状态机视图缩放 */
|
||||
layerScale: number;
|
||||
/** 此状态机视图内AnyState坐标 */
|
||||
anyStatePos: [number, number];
|
||||
|
||||
/** 状态机名 **/
|
||||
name: string;
|
||||
/** 在父状态机视图下的坐标 */
|
||||
position: [number, number];
|
||||
/** 父状态机 **/
|
||||
upStateMachine: string;
|
||||
/** 在此状态机视图内父状态机的坐标 */
|
||||
upStateMachinePos: [number, number];
|
||||
/** 子状态 */
|
||||
subStates: string[];
|
||||
/** 子状态机 */
|
||||
subStateMachines: string[];
|
||||
}
|
||||
];
|
||||
defaultState: string;
|
||||
anyState: {
|
||||
transitions: [
|
||||
{
|
||||
toState: string;
|
||||
hasExitTime: boolean;
|
||||
conditions: [
|
||||
{
|
||||
param: string;
|
||||
value: number;
|
||||
logic: LogicType;
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
states: [
|
||||
{
|
||||
/** 在父状态机视图下的坐标 */
|
||||
position: [number, number];
|
||||
/** 父状态机 **/
|
||||
upStateMachine: string;
|
||||
|
||||
/** 状态名 */
|
||||
state: string;
|
||||
/** 动画名 */
|
||||
motion: string;
|
||||
/** 动画播放速度 */
|
||||
speed: number;
|
||||
/** 动画播放速度混合参数 */
|
||||
multiplier: string;
|
||||
/** 动画是否循环播放 */
|
||||
loop: boolean;
|
||||
/** 转向别的状态的连线 */
|
||||
transitions: [
|
||||
{
|
||||
/** 目标状态名 */
|
||||
toState: string;
|
||||
/** 是否需等动画播放完毕才可转换 */
|
||||
hasExitTime: boolean;
|
||||
/** 转换需满足的参数条件 */
|
||||
conditions: [
|
||||
{
|
||||
/** 此条件对应的参数名 */
|
||||
param: string;
|
||||
/** 此条件对应的值 */
|
||||
value: number;
|
||||
/** 此条件与值比较的逻辑 */
|
||||
logic: LogicType;
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
}
|
||||
```
|
||||
|
||||
- runtime解析所需的数据格式
|
||||
```
|
||||
{
|
||||
parameters: [
|
||||
{
|
||||
param: string;
|
||||
type: ParamType;
|
||||
init: number;
|
||||
}
|
||||
];
|
||||
defaultState: string;
|
||||
anyState: {
|
||||
transitions: [
|
||||
{
|
||||
toState: string;
|
||||
hasExitTime: boolean;
|
||||
conditions: [
|
||||
{
|
||||
param: string;
|
||||
value: number;
|
||||
logic: LogicType;
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
states: [
|
||||
{
|
||||
state: string;
|
||||
motion: string;
|
||||
speed: number;
|
||||
multiplier: string;
|
||||
loop: boolean;
|
||||
transitions: [
|
||||
{
|
||||
toState: string;
|
||||
hasExitTime: boolean;
|
||||
conditions: [
|
||||
{
|
||||
param: string;
|
||||
value: number;
|
||||
logic: LogicType;
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
## <a id="runtime"></a>Runtime
|
||||
只要将对应版本的runtime整个文件夹丢入项目中即可使用。</br>
|
||||
core中是runtime的核心实现，而AnimatorAnimation、AnimatorSpine、AnimatorDragonBones、AnimatorCustomization是用于与节点绑定的cc.Component脚本，分别用于不同类型的动画。</br>
|
||||
|
||||
**Animator脚本组件 API**
|
||||
- **属性**
|
||||
- **`extraMulti`** 统一控制所有动画播放速度的参数
|
||||
- **`curStateName`** 当前状态名
|
||||
- **`curStateMotion`** 当前动画名
|
||||
- **`animComplete`** 当前动画是否播放完毕
|
||||
|
||||
- **方法**
|
||||
- **`onInit`** 手动初始化状态机
|
||||
- **`manualUpdate`** 手动调用更新
|
||||
- **`setBool`** 设置boolean类型参数的值
|
||||
- **`getBool`** 获取boolean类型参数的值
|
||||
- **`setNumber`** 设置number类型参数的值
|
||||
- **`getNumber`** 获取number类型参数的值
|
||||
- **`setTrigger`** 设置trigger类型参数的值
|
||||
- **`resetTrigger`** 重置trigger类型参数的值
|
||||
- **`autoTrigger`** 设置autoTrigger类型参数的值
|
||||
- **`play`** 无视条件直接跳转状态，如果当前已处于此状态则重置状态
|
||||
|
||||
## <a id="example"></a>Example
|
||||
</br>
|
||||
- **AssetRawUrl** 拖入状态机编辑器导出的文件（两种文件均可，但ctrl+e导出的文件更小）
|
||||
- **PlayOnStart** 如果勾选则自动初始化状态机，否则需要主动调用onInit去初始化
|
||||
- **AutoUpdate** 如果勾选则自动每帧更新状态机逻辑，否则需要主动调用manualUpdate去更新
|
||||
|
||||
#### 绑定脚本后只需要在对应的点设置参数值，就可以靠参数去驱动状态机进行状态转换了
|
||||
```
|
||||
this.Animator.setNumber('speed', this.speed);
|
||||
this.Animator.setTrigger('hit');
|
||||
```
|
||||
|
||||
#### 执行以下操作时必须取消勾选PlayOnStart，主动调用onInit去初始化，onInit可传入0-3个不同类型的参数，传参不需要区分先后顺序
|
||||
1. 如果需要每个状态都有单独的逻辑回调（onEntry、onUpdate、onExit）
|
||||
```
|
||||
// 单个状态的逻辑控制类
|
||||
export default class SheepIdle extends AnimatorStateLogic {
|
||||
public onEntry() {
|
||||
cc.log('idle entry');
|
||||
}
|
||||
public onUpdate() {
|
||||
cc.log('idle update');
|
||||
}
|
||||
public onExit() {
|
||||
cc.log('idle exit');
|
||||
}
|
||||
}
|
||||
```
|
||||
```
|
||||
let map: Map<string, AnimatorStateLogic> = new Map();
|
||||
map.set('sheep_idle', new SheepIdle());
|
||||
map.set('sheep_run', new SheepRun());
|
||||
map.set('sheep_hit', new SheepHit(this));
|
||||
this.Animator.onInit(map);
|
||||
```
|
||||
2. 如果需要监听状态切换
|
||||
```
|
||||
this.Animator.onInit((fromState: string, toState: string) => {
|
||||
cc.log(`state change: ${fromState} -> ${toState}`);
|
||||
});
|
||||
```
|
||||
3. 如果使用自定义的方式播放动画（AnimatorCustomization）
|
||||
```
|
||||
/**
|
||||
* 自定义控制动画播放的接口
|
||||
*/
|
||||
export interface AnimationPlayer {
|
||||
/** 设置动画播放结束的回调 */
|
||||
setFinishedCallback(callback: () => void, target: any): void;
|
||||
/** 播放动画 */
|
||||
playAnimation(animName: string, loop: boolean): void;
|
||||
/** 缩放动画播放速率 */
|
||||
scaleTime(scale: number): void;
|
||||
}
|
||||
```
|
||||
```
|
||||
this.Animator.onInit(AnimationPlayer);
|
||||
```
|
||||
|
||||
#### 如果需要使用spine在不同的trackindex播放动画，可以用AnimatorSpine和AnimatorSpineSecondary挂在同一个spine节点上实现并行状态机
|
||||
|
||||
</br>
|
||||
|
||||
AnimatorSpine为主状态机，trackindex为0，负责播放walk、run、jump三个动画</br>
|
||||
AnimatorSpineSecondary为次状态机，trackindex为1，负责播放shoot动画</br>
|
||||
编辑好两个不同的状态机，运行时便可将实现播放别的动画的同时开枪</br>
|
||||
|
||||
</br>
|
||||
|
||||
**ps：但实际项目中如果需要使用并行状态机往往比这会复杂很多，很可能需要你自行修改runtime的实现**
|
||||
|
||||
|
||||
## <a id="warning"></a>注意点
|
||||
#### 首先，虽然名为动画状态机，但实际上把动画剥离开，仅仅用作一个纯粹的逻辑上的状态机也是没有问题的，只需要编辑状态机时不填入动画名（Motion），然后调用onInit传入逻辑控制参数即可。
|
||||
- 参数名、子状态机名、状态名都不可重名
|
||||
- 目前不支持状态转向自身
|
||||
- 目前的子状态机实际上仅能用于在编辑器中折叠多个状态，在runtime中并不是真正意义上的分层状态机
|
||||
- Parameters和Inspector两个界面如果内容超出，请使用鼠标滚轮滚动，因为为了防止与拖拽行为产生冲突，触摸事件已被屏蔽
|
||||
- 当未勾选Has Exit Time以及没有添加任何condition时，此transition会被忽略
|
||||
- 状态机组件添加了@executionOrder(-1000)
|
||||
- spine的动画播放速度完全由主状态机控制
|
||||
- 由于cocos中spine的setCompleteListener内部实现问题，每次调用会直接覆盖之前的回调，所以如果需要监听动画播完，请使用AnimatorSpine中addCompleteListener等api
|
||||
- 目前不支持动画混合，例如调用spine的setMix会影响动画结束（Has Exit Time）的判定，所以如果需要做spine、dragonbones、cocos animation这些动画混合都需要自行处理
|
||||
|
||||
## <a id="reference"></a>参考资料
|
||||
1. <a id="reference1"></a>https://blog.csdn.net/vikingsc2007_1/article/details/81070029
|
||||
2. https://docs.unity3d.com/2018.4/Documentation/Manual/AnimatorControllers.html
|
||||
@@ -1,84 +0,0 @@
|
||||
|
||||
### 功能说明
|
||||
Oops Framework－音频管理模块主要处理游戏背景音乐、游戏音效两大类功能。
|
||||
|
||||
### [演示程序](https://gitee.com/dgflash/oops-framework/tree/master/assets/demo/audio)
|
||||
|
||||
### 使用说明
|
||||
##### 播放背景音乐
|
||||
```
|
||||
oops.audio.playMusic("audios/nocturne");
|
||||
```
|
||||
注：调用此方法后，后台会异步下载音乐资源，完成后开始播放音乐
|
||||
|
||||
##### 背景音乐播放完成回调设置
|
||||
```
|
||||
oops.audio.setMusicComplete(() => {
|
||||
console.log("音乐播放完成");
|
||||
});
|
||||
```
|
||||
|
||||
##### 获取或设置背景音乐音量
|
||||
```
|
||||
oops.audio.musicVolume = 0.5;
|
||||
```
|
||||
注：音量范围 (0 ~ 1)
|
||||
|
||||
##### 背景音乐开关
|
||||
```
|
||||
oops.audio.switchMusic = false;
|
||||
```
|
||||
|
||||
##### 获取或设置音乐播放进度
|
||||
```
|
||||
oops.audio.progressMusic = 0.5;
|
||||
```
|
||||
注：音量进度 (0 ~ 1)
|
||||
|
||||
##### 播放音效
|
||||
```
|
||||
oops.audio.playEffect("audios/Gravel");
|
||||
```
|
||||
注：调用此方法后，后台会异步下载音乐资源，完成后开始播放音乐
|
||||
|
||||
##### 获取或设置音效音量
|
||||
```
|
||||
oops.audio.volumeEffect = 0.5;
|
||||
```
|
||||
注：音量范围 (0 ~ 1)
|
||||
|
||||
##### 音效音乐开关
|
||||
```
|
||||
oops.audio.switchEffect = false;
|
||||
```
|
||||
|
||||
##### 恢复暂停的所有音乐播放
|
||||
```
|
||||
oops.audio.resumeAll();
|
||||
```
|
||||
|
||||
##### 暂停当前音乐与音效的播放
|
||||
```
|
||||
oops.audio.pauseAll();
|
||||
```
|
||||
|
||||
##### 停止当前音乐与音效的播放
|
||||
```
|
||||
oops.audio.stopAll();
|
||||
```
|
||||
|
||||
##### 停止当前音乐与音效的播放
|
||||
```
|
||||
oops.audio.stopAll();
|
||||
```
|
||||
|
||||
##### 保存音乐音效的音量、开关配置数据到本地
|
||||
```
|
||||
oops.audio.save();
|
||||
```
|
||||
|
||||
##### 本地加载音乐音效的音量、开关配置数据并设置到游戏中
|
||||
```
|
||||
oops.audio.load();
|
||||
```
|
||||
|
||||
@@ -1,44 +0,0 @@
|
||||
### 功能说明
|
||||
Oops Framework－全局事件管理主要在设计上降低对象之间的耦合问题，避免相互调用API导致对象强依赖，从而在项目中后期需求变更或扩展时，增加维护成本。
|
||||
|
||||
### 使用说明
|
||||
##### 注册持续监听的全局事件
|
||||
```
|
||||
export class RoleViewComp extends Component{
|
||||
onLoad(){
|
||||
// 监听全局事件
|
||||
oops.message.on(GameEvent.GameServerConnected, this.onHandler, this);
|
||||
}
|
||||
|
||||
protected onDestroy() {
|
||||
// 对象释放时取消注册的全局事件
|
||||
oops.message.off(GameEvent.GameServerConnected, this.onHandler, this);
|
||||
}
|
||||
|
||||
private onHandler(event: string, args: any) {
|
||||
switch (event) {
|
||||
case GameEvent.GameServerConnected:
|
||||
console.log("处理游戏服务器连接成功后的逻辑");
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
##### 注册只触发一次的全局事件
|
||||
```
|
||||
export class RoleViewComp extends Component{
|
||||
onLoad(){
|
||||
// 监听一次事件，事件响应后，该监听自动移除
|
||||
oops.message.once(GameEvent.GameServerConnected, this.onHandler, this);
|
||||
}
|
||||
|
||||
private onHandler(event: string, args: any) {
|
||||
switch (event) {
|
||||
case GameEvent.GameServerConnected:
|
||||
console.log("处理游戏服务器连接成功后的逻辑");
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
@@ -1,91 +0,0 @@
|
||||
### 功能说明
|
||||
Oops Framework－资源管理模块主要处理游戏各种类型的资源的加载与释放功能。
|
||||
|
||||
### 使用说明
|
||||
##### 加载远程资源
|
||||
```
|
||||
var opt: IRemoteOptions = { ext: ".png" };
|
||||
var onComplete = (err: Error | null, data: ImageAsset) => {
|
||||
const texture = new Texture2D();
|
||||
texture.image = data;
|
||||
|
||||
const spriteFrame = new SpriteFrame();
|
||||
spriteFrame.texture = texture;
|
||||
|
||||
var sprite = this.sprite.addComponent(Sprite);
|
||||
sprite.spriteFrame = spriteFrame;
|
||||
}
|
||||
resLoader.loadRemote<ImageAsset>(this.url, opt, onComplete);
|
||||
```
|
||||
|
||||
##### 加载资源包配置信息
|
||||
```
|
||||
var serverUrl = "http://192.168.1.13:8082/"; // 服务器地址
|
||||
var md5 = "8e5c0"; // Cocos Creator 构建后的MD5字符
|
||||
await resLoader.loadBundle(serverUrl,md5);
|
||||
```
|
||||
|
||||
##### 加载单个资源
|
||||
```
|
||||
var path = "model";
|
||||
resLoader.load(path, sp.SkeletonData, (err: Error | null, sd: sp.SkeletonData) => {
|
||||
if (err) {
|
||||
console.error(`资源不存在`);
|
||||
return;
|
||||
}
|
||||
|
||||
this.spine.skeletonData = sd;
|
||||
});
|
||||
```
|
||||
|
||||
加载其它bundle中资源
|
||||
```
|
||||
var path = "model";
|
||||
resLoader.load("bundleName", path, sp.SkeletonData, (err: Error | null, sd: sp.SkeletonData) => {
|
||||
if (err) {
|
||||
console.error(`资源不存在`);
|
||||
return;
|
||||
}
|
||||
|
||||
this.spine.skeletonData = sd;
|
||||
});
|
||||
```
|
||||
|
||||
##### 加载一个文件夹中的资源
|
||||
```
|
||||
/** 加载进度事件 */
|
||||
var onProgressCallback = (finished: number, total: number, item: any) => {
|
||||
console.log("资源加载进度", finished, total);
|
||||
}
|
||||
|
||||
/** 加载完成事件 */
|
||||
var onCompleteCallback = () => {
|
||||
console.log("资源加载完成");
|
||||
}
|
||||
resLoader.loadDir("game", onProgressCallback, onCompleteCallback);
|
||||
```
|
||||
|
||||
##### 释放一个资源
|
||||
```
|
||||
resLoader.release("model", "resources");
|
||||
```
|
||||
注：第二个参数"resources"为默认值，为引擎默认bundle。如果需要释放其它bundle里的资源修改此参数即可
|
||||
|
||||
##### 释放一个文件夹的资源
|
||||
```
|
||||
resLoader.releaseDir("model", "resources");
|
||||
```
|
||||
注：第二个参数"resources"为默认值，为引擎默认bundle。如果需要释放其它bundle里的资源修改此参数即可
|
||||
|
||||
##### 获取缓存中资源
|
||||
```
|
||||
resLoader.get("common/anim/button_scale_start", AnimationClip, "resources")
|
||||
```
|
||||
注：第三个参数"resources"为默认值，为引擎默认bundle。如果需要获取其它bundle里的资源修改此参数即可
|
||||
|
||||
|
||||
##### 打印缓存中所有资源信息
|
||||
```
|
||||
resLoader.dump();
|
||||
```
|
||||
注：用于调试时观察是资源是否正确释放
|
||||
@@ -1,30 +0,0 @@
|
||||
### 功能说明
|
||||
Oops Framework－日志管理主要封装console对象日志输出功能，方便在复杂的业务逻辑中，提供更很清晰的信息排查问题。
|
||||
|
||||
### 使用说明
|
||||
##### 打印代码段的执行时间
|
||||
```
|
||||
oops.log.start();
|
||||
...
|
||||
省略N行代码
|
||||
...
|
||||
oops.log.end();
|
||||
```
|
||||
|
||||
##### 打印表格
|
||||
```
|
||||
var object:any = {uid:1000, name:"oops"};
|
||||
oops.log.table(object);
|
||||
```
|
||||
|
||||
##### 打印日志
|
||||
```
|
||||
oops.log.trace("默认标准日志");
|
||||
oops.log.logConfig("灰色配置日志");
|
||||
oops.log.logNet("橙色网络日志");
|
||||
oops.log.logModel("紫色数据日志");
|
||||
oops.log.logBusiness("蓝色业务日志");
|
||||
oops.log.logView("绿色视图日志");
|
||||
|
||||
// 日志格式：[11:31:07:293][标准日志][Generator.ts->next]:'默认标准日志'
|
||||
```
|
||||
@@ -1,44 +0,0 @@
|
||||
### 功能说明
|
||||
Oops Framework－随机数生成管理模块，封装了[seedrandom](https://www.npmjs.com/package/seedrandom) 第三方随机数据库
|
||||
|
||||
### 使用说明
|
||||
##### 设置随机种子
|
||||
```
|
||||
// 随机种子可由服务端派发给其它客户端，同样的种子，多端随机同样次数时，结果是相同的
|
||||
RandomManager.instance.setSeed(123456789);
|
||||
```
|
||||
|
||||
##### 生成指定范围的随机整数
|
||||
```
|
||||
var min = 1;
|
||||
var max = 10;
|
||||
// [min,max) 得到一个两数之间的随机整数,这个值不小于min（如果min不是整数的话，得到一个向上取整的 min），并且小于（但不等于）max
|
||||
RandomManager.instance.getRandomInt(min, max, 1);
|
||||
|
||||
// [min,max] 得到一个两数之间的随机整数，包括两个数在内,这个值比min大（如果min不是整数，那就不小于比min大的整数），但小于（但不等于）max
|
||||
RandomManager.instance.getRandomInt(min, max, 2);
|
||||
|
||||
// (min,max) 得到一个两数之间的随机整数
|
||||
RandomManager.instance.getRandomInt(min, max, 3);
|
||||
```
|
||||
|
||||
##### 根据最大值，最小值范围生成随机数数组
|
||||
```
|
||||
var min = 1;
|
||||
var max = 10;
|
||||
var n = 10;
|
||||
// 生成10个1~10之间的随机数数组
|
||||
RandomManager.instance.getRandomByMinMaxList(min, max, n);
|
||||
```
|
||||
|
||||
##### 获取数组中随机对象
|
||||
```
|
||||
var objs = [1,2,3,4,5,6,7,8,9]
|
||||
RandomManager.instance.getRandomByObjectList(objs, 3);
|
||||
```
|
||||
|
||||
##### 定和随机分配
|
||||
```
|
||||
// 随机5个整数，5个数的和为100
|
||||
RandomManager.instance.getRandomBySumList(5,100);
|
||||
```
|
||||
@@ -1,38 +0,0 @@
|
||||
### 功能说明
|
||||
Oops Framework－本地存储模块主要封装了Cocos Crator引擎里sys.localStorage对象的跨平台平地存储功能，同时在此基础上添加了数据加密与不同帐号区分的功能。
|
||||
|
||||
### 使用说明
|
||||
##### 初始化本地存储加密
|
||||
```
|
||||
oops.storage.init("key", "vi");
|
||||
```
|
||||
注：调试模式下不会触发数据加密，方便明文调试。发布模式自动启动数据加密
|
||||
|
||||
##### 初始化本地存储加密
|
||||
```
|
||||
var uid = 10000; // 用户唯一编号数据
|
||||
oops.storage.setUser(uid);
|
||||
```
|
||||
注：用于区分不同账号本地存储数据，避免同名key的数据被其它账号登录时覆盖
|
||||
|
||||
##### 设置指定关键字的数据
|
||||
```
|
||||
oops.storage.set(key, value);
|
||||
```
|
||||
|
||||
##### 获取指定关键字的数据
|
||||
```
|
||||
var data = oops.storage.get(key);
|
||||
```
|
||||
|
||||
##### 删除指定关键字的数据
|
||||
```
|
||||
oops.storage.remove(key);
|
||||
```
|
||||
|
||||
##### 清空整个本地存储
|
||||
```
|
||||
oops.storage.clear();
|
||||
```
|
||||
|
||||
|
||||
@@ -1,92 +0,0 @@
|
||||
### 功能说明
|
||||
Oops Framework－时间管理模块主要实现在游戏中不同类型的定时器功能。
|
||||
|
||||
### 使用说明
|
||||
##### 获取游戏开始到现在逝去的时间
|
||||
```
|
||||
oops.timer.getTime();
|
||||
```
|
||||
|
||||
##### 获取本地时间刻度
|
||||
```
|
||||
oops.timer.getLocalTime();
|
||||
```
|
||||
|
||||
##### 注册一个固定间隔时间的触发器
|
||||
```
|
||||
oops.timer.schedule(()=>{
|
||||
// 每秒触发一次
|
||||
}, 1000);
|
||||
```
|
||||
|
||||
##### 注册一个只触发一次的延时的触发器
|
||||
```
|
||||
oops.timer.scheduleOnce(()=>{
|
||||
// 1秒后触发一次后不会在触发
|
||||
}, 1000);
|
||||
```
|
||||
|
||||
##### 删除一个时间触发器
|
||||
```
|
||||
var uuid = oops.timer.schedule(()=>{
|
||||
// 每秒触发一次
|
||||
}, 1000);
|
||||
|
||||
// 删除指定标识的触发器
|
||||
oops.timer.unschedule(uuid);
|
||||
```
|
||||
|
||||
##### 删除所有时间触发器
|
||||
```
|
||||
oops.timer.unscheduleAll();
|
||||
```
|
||||
|
||||
##### 在指定对象上注册一个倒计时的回调管理器
|
||||
```
|
||||
export class Test extends Component {
|
||||
private timeId!: string;
|
||||
|
||||
start() {
|
||||
// 在指定对象上注册一个倒计时的回调管理器
|
||||
this.timeId = oops.timer.register(this, "countDown", this.onSecond, this.onComplete);
|
||||
}
|
||||
|
||||
private onSecond() {
|
||||
console.log("每秒触发一次");
|
||||
}
|
||||
|
||||
private onComplete() {
|
||||
console.log("倒计时完成触发");
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
##### 在指定对象上注销一个倒计时的回调管理器
|
||||
```
|
||||
export class Test extends Component {
|
||||
private timeId!: string;
|
||||
|
||||
start() {
|
||||
this.timeId = oops.timer.register(this, "countDown", this.onSecond, this.onComplete);
|
||||
}
|
||||
|
||||
onDestroy() {
|
||||
// 在指定对象上注销一个倒计时的回调管理器
|
||||
oops.timer.unRegister(this.timeId);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
##### 定时跳动组件
|
||||
```
|
||||
export class Test extends Component {
|
||||
// 创建一个定时跳动组件
|
||||
private timer: Timer = new Timer(1);
|
||||
|
||||
update(dt: number) {
|
||||
if (this.timer.update(this.dt)) {
|
||||
console.log(每一秒触发一次);
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
@@ -1,77 +0,0 @@
|
||||
### 功能说明
|
||||
Oops Framework－界面管理模块，主要实现游戏中不同类型的窗口管理，例如常住主界面窗口、弹出窗口、模式窗口，系统提示窗口等。
|
||||
|
||||
### 使用说明
|
||||
##### 窗口配置字段
|
||||
| 字段 | 介绍 |
|
||||
| ------ | -------- |
|
||||
| layer | 窗口层级 |
|
||||
| prefab | 预制资源相对路径 |
|
||||
| bundle | 远程包名 |
|
||||
|
||||
##### 窗口配置数据
|
||||
```
|
||||
/** 界面唯一标识 */
|
||||
export enum UIID {
|
||||
/** 资源加载界面 */
|
||||
Loading = 1,
|
||||
/** 弹窗界面 */
|
||||
Window,
|
||||
/** 加载与延时提示界面 */
|
||||
Netinstable
|
||||
}
|
||||
|
||||
/** 打开界面方式的配置数据 */
|
||||
export var UIConfigData: { [key: number]: UIConfig } = {
|
||||
[UIID.Loading]: { layer: LayerType.UI, prefab: "loading/prefab/loading", bundle: "resources" },
|
||||
[UIID.Netinstable]: { layer: LayerType.PopUp, prefab: "common/prefab/netinstable" },
|
||||
[UIID.Window]: { layer: LayerType.Dialog, prefab: "common/prefab/window" }
|
||||
}
|
||||
```
|
||||
|
||||
##### 打开一个窗口
|
||||
```
|
||||
var uic: UICallbacks = {
|
||||
// 窗口添加到界面完成事件
|
||||
onAdded: (node: Node, params: any) => {
|
||||
var comp = node.getComponent(LoadingViewComp) as ecs.Comp;
|
||||
}
|
||||
|
||||
// 窗口节点 destroy 之后回调
|
||||
onRemoved:(node: Node | null, params: any) => {
|
||||
|
||||
}
|
||||
};
|
||||
oops.gui.open(UIID.Loading, null, uic);
|
||||
```
|
||||
|
||||
##### 异步函数打开一个窗口
|
||||
```
|
||||
var node = await oops.gui.openAsync(UIID.Loading);
|
||||
```
|
||||
|
||||
##### 关闭一个窗口
|
||||
```
|
||||
oops.gui.remove(UIID.Loading);
|
||||
```
|
||||
|
||||
##### 指定一个节点来删除窗口
|
||||
```
|
||||
oops.gui.removeByNode(cc.Node);
|
||||
```
|
||||
注：这里的Node必须是通过oops.gui.open或openAsync打开的才会执行关闭
|
||||
|
||||
##### 缓存中是否存在指定标识的窗口
|
||||
```
|
||||
oops.gui.has(UIID.Loading);
|
||||
```
|
||||
|
||||
##### 渐隐飘过提示
|
||||
```
|
||||
oops.gui.toast("提示内容");
|
||||
```
|
||||
|
||||
##### 清除所有窗口
|
||||
```
|
||||
oops.gui.clear();
|
||||
```
|
||||
@@ -1,109 +0,0 @@
|
||||
### 功能说明
|
||||
Oops Framework－网络模块WebSocket处理客户端与服务之间保持长链接通讯。
|
||||
|
||||
### 使用说明
|
||||
##### 自定义网络通讯数据协议（GZip压缩）
|
||||
```
|
||||
class GameProtocol extends NetProtocolPako {
|
||||
/** 心跳协议 */
|
||||
getHearbeat(): NetData {
|
||||
return `{"action":"LoginAction","method":"heart","data":"null","isCompress":false,"channelid":1,"callback":"LoginAction_heart"}`;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
##### 创建一个WebSocket网络连接对象
|
||||
```
|
||||
var net = new NetNodeGame();
|
||||
var ws = new WebSock(); // WebSocket 网络连接对象
|
||||
var gp = new GameProtocol(); // 网络通讯协议对象
|
||||
var gt = new NetGameTips() // 网络提示对象
|
||||
net.init(ws, gp, gt);
|
||||
NetManager.getInstance().setNetNode(net, NetChannelType.Game);
|
||||
```
|
||||
|
||||
##### 连接游戏服务器
|
||||
```
|
||||
var options = {
|
||||
url: `ws://127.0.0.1:3000`,
|
||||
autoReconnect: 0 // -1 永久重连，0不自动重连，其他正整数为自动重试次数
|
||||
}
|
||||
NetManager.getInstance().connect(options, NetChannelType.Game);
|
||||
```
|
||||
|
||||
##### 断开游戏服务器连接
|
||||
```
|
||||
NetManager.getInstance().close(undefined, undefined, NetChannelType.Game);
|
||||
|
||||
```
|
||||
|
||||
##### 游戏服务器提示
|
||||
```
|
||||
export class NetGameTips implements INetworkTips {
|
||||
/** 连接提示 */
|
||||
connectTips(isShow: boolean): void {
|
||||
if (isShow) {
|
||||
Logger.logNet("游戏服务器正在连接");
|
||||
tips.netInstableOpen();
|
||||
}
|
||||
else {
|
||||
Logger.logNet("游戏服务器连接成功");
|
||||
tips.netInstableClose();
|
||||
Message.dispatchEvent(GameEvent.GameServerConnected);
|
||||
}
|
||||
}
|
||||
|
||||
/** 重连接提示 */
|
||||
reconnectTips(isShow: boolean): void {
|
||||
if (isShow) {
|
||||
Logger.logNet("重连开始");
|
||||
}
|
||||
else {
|
||||
Logger.logNet("重连成功");
|
||||
}
|
||||
}
|
||||
|
||||
/** 请求提示 */
|
||||
requestTips(isShow: boolean): void {
|
||||
if (isShow) {
|
||||
Logger.logNet("请求数据开始");
|
||||
}
|
||||
else {
|
||||
Logger.logNet("请求数据完成");
|
||||
}
|
||||
}
|
||||
|
||||
/** 响应错误码提示 */
|
||||
responseErrorCode(code: number): void {
|
||||
console.log("游戏服务器错误码", code);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
##### 请求服务器数据
|
||||
```
|
||||
var params: any = {
|
||||
playerId: 10000
|
||||
}
|
||||
|
||||
let onComplete = {
|
||||
target: this,
|
||||
callback: (data: any) => {
|
||||
// 服务器返回数据
|
||||
console.log(data);
|
||||
}
|
||||
}
|
||||
// net为NetNodeGame对象
|
||||
net.req("LoginAction", "loadPlayer", params, onComplete);
|
||||
```
|
||||
|
||||
##### 监听服务器推送数据
|
||||
```
|
||||
var onComplete = (data: any) => {
|
||||
// 服务器返回数据
|
||||
console.log(data);
|
||||
}
|
||||
|
||||
// net为NetNodeGame对象
|
||||
net.setResponeHandler("notify", onComplete, this);
|
||||
```
|
||||
357
doc/ecs/ecs.md
357
doc/ecs/ecs.md
@@ -1,357 +0,0 @@
|
||||
# 简介
|
||||
libs/ecs 这是一个 Typescript 语言版的Entity-Component-System框架架。
|
||||
|
||||
# 使用说明
|
||||
创建实体
|
||||
```Typescript
|
||||
ecs.getEntity<ecs.Entity>(ecs.Entity);
|
||||
```
|
||||
|
||||
## 组件
|
||||
自定义组件必须继承ecs.Comp，并且需要使用ecs.register注册组件。
|
||||
```TypeScript
|
||||
@ecs.register('Hello')
|
||||
export class HelloComponent extends ecs.Comp {
|
||||
info: string;
|
||||
data: number;
|
||||
|
||||
// 组件被回收前会调用这个方法。
|
||||
reset() {
|
||||
this.info = '';
|
||||
this.data = 0;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## ecs.register功能
|
||||
- 能通过```entity.Hello```获得组件对象；
|
||||
- 将组件的构造函数存入ecs上下文中，并且给该类组件分配一个组件id。
|
||||
|
||||
## 实体
|
||||
为了能利用Typescript的类型提示机制，在使用实体的时候需要用户自己继承ecs.Entity。
|
||||
```TypeScript
|
||||
ecs.register('HelloEntity')
|
||||
export class HelloEntity extends ecs.Entity {
|
||||
Hello: HelloComponent; // 这里的Hello要和ecs.register中填入的参数一致
|
||||
}
|
||||
```
|
||||
|
||||
- 管理子实体
|
||||
```TypeScript
|
||||
// 添加子实体
|
||||
entity.addChild(ecs.Entity);
|
||||
|
||||
// 移除子实体
|
||||
entity.removeChild(ecs.Entity);
|
||||
```
|
||||
|
||||
- 添加组件：
|
||||
```TypeScript
|
||||
entity.add(HelloComponent); // 添加组件时会优先从组件缓存池中获取无用的组件对象，如果没有才会新创建一个组件对象
|
||||
```
|
||||
|
||||
- 添加组件对象：注意，外部创建的组件对象ecs系统不负责回收，需要用户自己管理该组件对象的声明周期。
|
||||
```Typescript
|
||||
let compObj = new HelloComponent();
|
||||
entity.add(compObj)
|
||||
```
|
||||
|
||||
- 删除组件：
|
||||
```TypeScript
|
||||
entity.remove(HelloComponent); // 组件对象会从实体身上移除并放入组件缓存池中
|
||||
```
|
||||
|
||||
- 删除组件但不删除组件对象：实际开发中，组件身上有很多属性，如果删除了后面再添加，属性值还原是个麻烦的问题，
|
||||
remove方法可以删除组件，但是不真正从实体身上移除该组件对象，这样下次重新添加组件时还是会添加那个组件对象。
|
||||
```Typescript
|
||||
entity.remove(HelloComponent, false)
|
||||
```
|
||||
|
||||
- 获得组件对象
|
||||
```TypeScript
|
||||
entity.Hello; // 见上方自定义实体操作
|
||||
|
||||
entity.get(HelloComponent);
|
||||
```
|
||||
|
||||
- 判断是否拥有组件：
|
||||
```TypeScript
|
||||
entity.has(HelloComponent);
|
||||
|
||||
!!entity.Hello;
|
||||
```
|
||||
|
||||
- 销毁实体：
|
||||
```TypeScript
|
||||
entity.destroy() // 销毁实体时会先删除实体身上的所有组件，然后将实体放入实体缓存池中
|
||||
```
|
||||
|
||||
## 实体筛选
|
||||
目前提供了四种类型的筛选能力，但是这四种筛选能力可以组合从而提供更强大的筛选功能。
|
||||
- anyOf: 用来描述包含任意一个这些组件的实体；
|
||||
- allOf: 用来描述同时包含了这些组件的实体；
|
||||
- onlyOf: 用来描述只包含了这些组件的实体；不是特殊情况不建议使用onlyOf，因为onlyOf会监听所有组件的添加和删除事件；
|
||||
- excludeOf: 表示不包含所有这里面的组件（与关系）；
|
||||
|
||||
使用方式：
|
||||
|
||||
- 表示同时拥有多个组件
|
||||
```TypeScript
|
||||
ecs.allOf(AComponent, BComponent, CComponent);
|
||||
```
|
||||
- 表示拥有任意一个组件
|
||||
```Typescript
|
||||
ecs.anyOf(AComponent, BComponent);
|
||||
```
|
||||
- 表示拥有某些组件，并且不包含某些组件
|
||||
```Typescript
|
||||
// 不包含CComponent或者DComponent
|
||||
ecs.allOf(AComponent, BComponent).excludeOf(CComponent, DComponent);
|
||||
|
||||
// 不同时包含CComponent和DComponent
|
||||
ecs.allOf(AComponent, BComponent).excludeOf(CComponent).excludeOf(DComponent);
|
||||
```
|
||||
|
||||
### 直接查询并获得实体
|
||||
```Typescript
|
||||
ecs.query(ecs.allOf(Comp1, Comp2))
|
||||
```
|
||||
|
||||
## 系统
|
||||
- ecs.System: 用来组合某一功能所包含的System；
|
||||
- ecs.RootSystem: System的root；
|
||||
- ecs.ComblockSystem: 抽象类，组合式的System。默认情况，如果该System有实体，则每帧都会执行update方法；
|
||||
- ecs.IEntityEnterSystem: 实现这个接口表示关注实体的首次进入；
|
||||
- ecs.IEntityRemoveSystem: 实现这个接口表示关注实体的移除；
|
||||
- ecs.ISystemFirstUpdate: 实现这个接口会在System第一次执行update前执行一次firstUpdate
|
||||
- ecs.ISystemUpdate:实现这个接口会在System中每帧出发update方法
|
||||
|
||||
# 怎么使用
|
||||
1、声明组件
|
||||
```TypeScript
|
||||
@ecs.register('Node')
|
||||
export class NodeComponent extends ecs.Comp {
|
||||
val: cc.Node = null;
|
||||
|
||||
reset() {
|
||||
this.val = null;
|
||||
}
|
||||
}
|
||||
|
||||
@ecs.reigster('Move')
|
||||
export class MoveComponent extends ecs.Comp {
|
||||
heading: cc.Vec2 = cc.v2();
|
||||
speed: number = 0;
|
||||
|
||||
reset() {
|
||||
this.heading.x = 0;
|
||||
this.heading.y = 0;
|
||||
this.speed = 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ecs.register('Transform')
|
||||
export class TransformComponent extends ecs.Comp {
|
||||
position: cc.Vec2 = cc.v2();
|
||||
angle: number;
|
||||
reset() {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
export class AvatarEntity extends ecs.Entity {
|
||||
Node: NodeComponent;
|
||||
Move: MoveComponent;
|
||||
Transform: TransformComponent;
|
||||
}
|
||||
```
|
||||
|
||||
2、创建系统
|
||||
```TypeScript
|
||||
export class RoomSystem extends ecs.RootSystem {
|
||||
constructor() {
|
||||
super();
|
||||
this.add(new MoveSystem());
|
||||
this.add(new RenderSystem());
|
||||
}
|
||||
}
|
||||
|
||||
export class MoveSystem extends ecs.ComblockSystem<AvatarEntity> implements ecs.IEntityEnterSystem, ecs.ISystemUpdate {
|
||||
init() {
|
||||
|
||||
}
|
||||
|
||||
filter(): ecs.IMatcher {
|
||||
return ecs.allOf(MoveComponent, TransformComponent);
|
||||
}
|
||||
|
||||
// 实体第一次进入MoveSystem会进入此方法
|
||||
entityEnter(e: AvatarEntity) {
|
||||
e.Move.speed = 100;
|
||||
}
|
||||
|
||||
// 每帧都会更新
|
||||
update(e: AvatarEntity) {
|
||||
let moveComp = e.Move; // e.get(MoveComponent);
|
||||
lel position = e.Transform.position;
|
||||
|
||||
position.x += moveComp.heading.x * moveComp.speed * this.dt;
|
||||
position.y += moveComp.heading.y * moveComp.speed * this.dt;
|
||||
|
||||
e.Transform.angle = cc.misc.lerp(e.Transform.angle, Math.atan2(moveComp.speed.y, moveComp.speed.x) * cc.macro.DEG, dt);
|
||||
}
|
||||
}
|
||||
|
||||
export class RenderSystem extends ecs.ComblockSystem<AvatarEntity> implements ecs.IEntityEnterSystem, ecs.IEntityRemoveSystem, ecs.ISystemUpdate {
|
||||
filter(): ecs.IMatcher {
|
||||
return ecs.allOf(NodeComponent, TransformComponent);
|
||||
}
|
||||
|
||||
// 实体第一次进入MoveSystem会进入此方法
|
||||
entityEnter(e: AvatarEntity) {
|
||||
e.Node.val.active = true;
|
||||
}
|
||||
|
||||
entityRemove(e: AvatarEntity) {
|
||||
|
||||
}
|
||||
|
||||
update(e: AvatarEntity) {
|
||||
e.Node.val.setPosition(e.Transform.position);
|
||||
e.Node.val.angle = e.Transform.angle;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
3、驱动ecs框架
|
||||
```TypeScript
|
||||
const { ccclass, property } = cc._decorator;
|
||||
@ccclass
|
||||
export class GameControllerBehaviour extends Component {
|
||||
rootSystem: RootSystem = null;
|
||||
|
||||
onLoad() {
|
||||
this.rootSystem = new RootSystem();
|
||||
this.rootSystem.init();
|
||||
}
|
||||
|
||||
createAvatar(node: cc.Node) {
|
||||
let entity = ecs.createEntityWithComps<AvatarEntity>(NodeComponent, TransformComponent, MoveComponent);
|
||||
entity.Node.val = node;
|
||||
}
|
||||
|
||||
update(dt: number) {
|
||||
this.rootSystem.execute(dt);
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
# 和Cocos Creator的组件混合使用
|
||||
## 创建基类
|
||||
```Typescript
|
||||
import { Component, _decorator } from "cc";
|
||||
import { ecs } from "../../../Libs/ECS";
|
||||
const { ccclass, property } = _decorator;
|
||||
|
||||
@ccclass('CCComp')
|
||||
export abstract class CCComp extends Component implements ecs.IComp {
|
||||
static tid: number = -1;
|
||||
static compName: string;
|
||||
|
||||
canRecycle: boolean;
|
||||
ent: ecs.Entity;
|
||||
|
||||
onLoad() {
|
||||
this.ent = ecs.createEntity();
|
||||
this.ent.add(this);
|
||||
}
|
||||
|
||||
abstract reset(): void;
|
||||
}
|
||||
```
|
||||
|
||||
## 创建ecs组件并且赋予序列化的功能，这样就能在Cocos Creator的“属性检查器”上修改参数
|
||||
```Typescript
|
||||
import { _decorator, toDegree, v3, Node, Vec3 } from "cc";
|
||||
import { ecs } from "../../../Libs/ECS";
|
||||
const { ccclass, property } = _decorator;
|
||||
|
||||
let outV3 = v3();
|
||||
@ccclass('MovementComponent')
|
||||
@ecs.register('Movement')
|
||||
export class MovementComponent extends CCComp {
|
||||
pos: Vec3 = v3();
|
||||
angle: number = 0;
|
||||
speed: number = 0;
|
||||
|
||||
@property
|
||||
acceleration: number = 0;
|
||||
|
||||
@property
|
||||
private _maxSpeed: number = 0;
|
||||
@property
|
||||
set maxSpeed(val: number) {
|
||||
this._maxSpeed = val;
|
||||
}
|
||||
get maxSpeed() {
|
||||
return this._maxSpeed;
|
||||
}
|
||||
|
||||
@property
|
||||
heading: Vec3 = v3();
|
||||
|
||||
@property
|
||||
targetHeading: Vec3 = v3();
|
||||
|
||||
reset() {
|
||||
|
||||
}
|
||||
|
||||
update(dt: number) {
|
||||
if(!Vec3.equals(this.heading, this.targetHeading, 0.01)) {
|
||||
Vec3.subtract(outV3, this.targetHeading, this.heading);
|
||||
outV3.multiplyScalar(0.025);
|
||||
this.heading.add(outV3);
|
||||
this.heading.normalize();
|
||||
this.angle = toDegree(Math.atan2(this.heading.y, this.heading.x)) - 90;
|
||||
}
|
||||
|
||||
this.speed = Math.min(this.speed + this.acceleration * dt, this._maxSpeed);
|
||||
|
||||
this.pos.add3f(this.heading.x * this.speed * dt, this.heading.y * this.speed * dt, 0);
|
||||
}
|
||||
|
||||
calcAngle() {
|
||||
this.angle = toDegree(Math.atan2(this.heading.y, this.heading.x)) - 90;
|
||||
return this.angle;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
## 创建面向Cocos Creator的组件
|
||||
```Typescript
|
||||
import { Component, _decorator } from "cc";
|
||||
const { ccclass, property } = _decorator;
|
||||
@ccclass('Player')
|
||||
@ecs.register('Player', false)
|
||||
export class Player extends CCComp {
|
||||
@property({
|
||||
type: MovementComponent
|
||||
})
|
||||
movement: MovementComponent;
|
||||
|
||||
onLoad() {
|
||||
super.onLoad();
|
||||
|
||||
// 添加MovementComponent组件对象
|
||||
this.ent.add(this.movement);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
# 调试
|
||||
添加如下代码
|
||||
```TypeScript
|
||||
windows['ecs'] = ecs;
|
||||
@@ -1,51 +0,0 @@
|
||||
### 原创作者上有2.x的DEMO
|
||||
Github 地址: https://github.com/wsssheep/cocos_creator_mvvm_tools
|
||||
|
||||
### 项目结构
|
||||
|
||||
核心脚本文件存放在 assets\Script\modelView 路径,要使用必须全部引入
|
||||
|
||||
- **JsonOb.ts** - 实现基础的 观察者模式, 改变绑定的数据会自动调用回调函数。你可以随时替换成自己写的观察者。
|
||||
- **ViewModel.ts** - VM的核心模块，动态管理ViewModel，使用 cc.director.emit 通知 游戏内的节点组件改变状态。
|
||||
- **VMBase.ts** - VM监听核心组件，用于接收ViewModel 的数值变动消息。VMCustom /VMEvent 之类的衍生组件都是继承自VMBase
|
||||
- **VMParent.ts** - VM父组件，适合 多实例的 prefab 弹窗使用， 它将数据绑定在继承 VMparent 的组件上，只属于此次创建的实例。 需要以特殊方式继承使用。
|
||||
|
||||
****
|
||||
|
||||
### 组件简介
|
||||
|
||||
- `VMCustom` — 挂载VMCustom，然后会自动识别当前节点的组件(也可以自行设置)。填上你的数值路径，大功告成。
|
||||
- `VMLabel` — 挂在VMLabel ，不用担心你的数值是整是零，使用模板语法 {{0:int}}自动格式化，解决文本数据显示的问题
|
||||
- `VMState` — 解决节点状态的切换问题
|
||||
- `VMProgress` — 解决进度条显示问题
|
||||
- `VMEvent `—挂载VMEventCall, 触发事件。在值变化时调用其他组件方法(结合其他组件使用事半功倍)
|
||||
- `VMParent` — 定义局部范围使用 的 ViewModel数据
|
||||
|
||||
定义数据模型: `VM.add(data,"tag")`
|
||||
|
||||
一直被 cc.find、getChildByName，getComponent， 所以一直想要整理个好的方案。部分参考了Vue(OS:假装参考了)， 以适合 Creator 组件化的方式引入 MVVM。你甚至可以不写一行代码就完成大部分的复杂的UI逻辑，非常适合高强度的细节修改 (os:让策划自己改去)。
|
||||
这套工具核心在于提供的组件集合，而不是Mvvm本身。使用的是低耦合度的组件脚本来控制数值监听的绑定，侵入性较低。
|
||||
|
||||
****
|
||||
|
||||
### 用法说明
|
||||
|
||||
- **导入框架** - 导入 assets\Script\modelView 中的所有脚本
|
||||
|
||||
- **建立数据模型** - 任意位置新建一个数据脚本，定义自己的数据模型，使用`VM.add(data,'tag')` 添加viewModel。 可以通过VM直接管理该数据，或者自己全局管理 data 数据模型。
|
||||
|
||||
- **挂脚本** - 编辑器中直接添加组件 VMCustom ，它会自动识别绑定到需要设置值的组件和组件的属性，比如cc.Label、cc.Progress等。 你只要填写对应的watchPath, 就会自动赋值到组件的属性上。比如填写 global.play.hp ，就会在游戏运行时赋值给绑定的组件属性。
|
||||
|
||||
- **改数据** - 在游戏中任意改变 global.play.hp的值，对应的label 就会自动改变数值。
|
||||
|
||||
- **全局注册VM**: (全局自由使用路径) VM.add(data,'tag'); //
|
||||
|
||||
- **局部组件使用VM**: (只在组件内使用的相对路径)
|
||||
|
||||
1.继承VMParent 组件
|
||||
|
||||
2.在组件内设置 data 数据（data属性）
|
||||
|
||||
3.相对路径 使用 *.name 的方式设置 watchPath,VMParent 会在 onLoad 的时候自动将 * 替换成 实际的 ViewModel 标签，以便监听数据变化。
|
||||
|
||||
****
|
||||
@@ -1,39 +0,0 @@
|
||||
## VM Base
|
||||
|
||||
### 介绍
|
||||
|
||||
VM基础组件，只实现了数据绑定, 需要被继承使用。你可以通过继承VM Base来实现自己的VM组件。当然一般情况下使用这个工具所提供的其他组件脚本就够用了。
|
||||
|
||||
### 脚本属性
|
||||
|
||||
- `watchPath` - 需要监听的路径,，你在VM怎么定义的结构，就在这里写上取值的路径。
|
||||
|
||||
比如global 标签的 viewModel 要取值player.atk, 就是gloabl.player.atk。
|
||||
|
||||
- `watchPathArr` - 需要监听的多路径 数组, 和上面一样，不过需要监听的是一个路径的数组。
|
||||
|
||||
- `templateMode` - 模板模式（多路径模式），启用后才能监听 watchPathArr 数组中的所有路径
|
||||
|
||||
- `templateValueArr` - 缓存监听路径的值，当监听某个路径的值发生变动时，会自动更新该数组中缓存的值。一般不需要考虑使用。
|
||||
|
||||
- `VM` - VMManager 对象的引用，参考ViewModel 的说明
|
||||
|
||||
- `onLoad()` - 提前拆分、并且解析 监听的路径,可以捕获一些错误
|
||||
|
||||
**如果需要重写onLoad 方法**，请根据顺序调用 **super.onLoad()**，执行默认方法。直接覆盖将会导致函数的功能丢失。
|
||||
|
||||
- `onEnable()` - 激活节点时，更新对象初始值，同时开启对 watchPath 的监听。
|
||||
|
||||
**可重写**，重写时需要调用 super.onEnable() 处理父方法
|
||||
|
||||
- `onDisable()`- 关闭节点时，关闭对 watchPath 的监听。
|
||||
|
||||
**可重写**，重写时需要调用 super.onDisable() 处理父方法
|
||||
|
||||
- `onValueInit()`- 初始化值时调用函数
|
||||
|
||||
虚方法，可以直接被重写。
|
||||
|
||||
- `onValueChanged(newValue,oldValue,pathArray)` - 当值改变时调用函数
|
||||
|
||||
虚方法，可以直接被重写。
|
||||
@@ -1,31 +0,0 @@
|
||||
## VM Component Edit
|
||||
|
||||
### 介绍
|
||||
|
||||
VM组件编辑，提供一些基础的功能。可以搜索当前节点下的 组件内容，便于查询出被绑定的节点，方便调试信息。
|
||||
|
||||
### 编辑器属性
|
||||
|
||||
- `Find List` - 需要查询的组件名称
|
||||
|
||||
- `Action Type` - 操作行为
|
||||
|
||||
`SEARCH_COMPONENT` - 查询组件
|
||||
|
||||
`ENABLE_COMPONENT` - 激活关闭组件
|
||||
|
||||
`REPLACE_WATCH_PATH` - 替换组件路径
|
||||
|
||||
`DELETE_COMPONENT` - 删除所有匹配组件
|
||||
|
||||
- `Trigger` - 勾选框就会立刻执行对应的命令, 不同模式下Trigger名称不同
|
||||
|
||||
- `Can Collect Nodes` - 将节点收集起来 放在 Collect Nodes 中，Action Type 为 SEARCH_COMPONENT 类型时 才能使用
|
||||
|
||||
- `Target Path` - 准备搜索的目标路径，Action Type 为 REPLACE_WATCH_PATH 时可用
|
||||
|
||||
- `Replace Path` - 准备替换的路径值，Action Type 为 REPLACE_WATCH_PATH 时可用
|
||||
|
||||
### 手动编辑器
|
||||
|
||||
在层级管理器中 搜索 t:VMBase， 也可以查询到所有VM组件的节点，然后你可以进行手动的管理操作
|
||||
@@ -1,17 +0,0 @@
|
||||
## VM Custom
|
||||
|
||||
### 介绍
|
||||
|
||||
VM组件自定义, 可以设置需要监听的 组件名称和组件属性，并且挂载时还能自动识别组件名。比较泛用。适合任意的自制组件。(如果想自动识别自己写的组件名，可以修改脚本配置内容)。
|
||||
|
||||
### 编辑器属性
|
||||
|
||||
- `Controller` - 激活controller,以开启双向绑定，否则只能接收消息
|
||||
- `Watch Path` - 绑定数值监听路径
|
||||
|
||||
- `Component Name` - 绑定组件的名字 (会根据脚本配置自动识别)
|
||||
|
||||
- `Component Property` - 绑定组件上需要监听的属性 (会根据脚本配置自动识别)
|
||||
|
||||
- `refreshRate` - 刷新间隔频率 (只影响脏检查的频率) ，controller开启后生效
|
||||
|
||||
@@ -1,22 +0,0 @@
|
||||
## VM Event
|
||||
|
||||
### 介绍
|
||||
|
||||
VM组件事件，监听watchPath 路径 数值的变动情况，调用回调函数。可以同时监听复数路径的值。适合需要自己处理数值变化行为的场合。比如获得1金币，想让数字闪烁一下，有了VMEvent ，你就不用手动去让数字闪烁了。可以在编辑器中直接设置回调，来触发别的组件的函数。
|
||||
|
||||
### 编辑器属性
|
||||
|
||||
- `Template Mode` - 多路径模板模式，开启后可以监听多路径
|
||||
- `Watch Path ` - 绑定数值监听路径
|
||||
|
||||
- `Watch PathArr` - 绑定数值监听的路径数组 (多路径模板模式开启后出现)
|
||||
|
||||
- `Component Name` - 绑定组件的名字 (会根据脚本配置自动识别)
|
||||
|
||||
- `Component Property` - 绑定组件上需要监听的属性 (会根据脚本配置自动识别)
|
||||
|
||||
- `Trigger Once` - 事件通知只传递一次，然后自动 disabled 该组件
|
||||
|
||||
- `Filter Mode` - 根据条件过滤通知事件，比如 当值>=30 才会通知事件去调用 Change Events
|
||||
|
||||
- `Change Events` - 值路径改变事件，和按钮回调事件类似 在编辑器里绑定对应要执行的节点函数
|
||||
@@ -1,34 +0,0 @@
|
||||
|
||||
## VM Label
|
||||
|
||||
### 介绍
|
||||
|
||||
VM组件文本监听，用于处理 Label 的监听问题。监听watchPath 路径 数值的变动情况，变动Label文本内容。使用模板模式，还可以将输入的字符串格式化。可以监听多路径，来同时在一个label上显示多个数据源的信息。
|
||||
|
||||
### 编辑器属性
|
||||
|
||||
- `Template Mode` - 多路径模板模式，开启后可以监听多路径，并且可以设置文本模板
|
||||
- `Watch Path ` - 绑定数值监听路径
|
||||
|
||||
- `Watch PathArr` - 绑定数值监听的路径数组 (多路径模板模式开启后出现)
|
||||
|
||||
- `Label Type` - 只读属性，自动绑定cc.Label 或者 cc.RichText，你可以在脚本修改自己定义的Label
|
||||
|
||||
|
||||
|
||||
### 关于模板解析
|
||||
|
||||
使用 {{0}} {{1}} {{2}} 方式设置模板内容（设置label 的 String 默认值）。在运行时，会动态的获取多路径监听的值，按数组内index 顺序替换掉 {{index}}。你可以额外添加修饰符号来格式化信息源，比如 {{0:int}} 会将数字内容以整数显示，{{0:time}} 以时间格式显示时间戳 等。
|
||||
|
||||
以下是目前支持的格式化内容:
|
||||
|
||||
- `int` - 只显示整数部分
|
||||
- `fix(n)` -显示小数位数
|
||||
- `kmbt` - 以 K M B T 单位 缩短数字长度
|
||||
- `per ` - 显示百分比
|
||||
- `sep` - 以千位分号分割数字
|
||||
- `limit(n)` - 限制文本字符长度
|
||||
|
||||
### 自定义模板格式
|
||||
|
||||
所有 文本格式处理 都放在 StringFormat 类中，你可以根据自定义需要修改其中的函数。
|
||||
@@ -1,29 +0,0 @@
|
||||
## VM Modify
|
||||
|
||||
### 介绍
|
||||
|
||||
VM组件 修改数据，修改指定 路径 watchPath 的 数据。一般配合 cc.Button 组件使用，可以点击按钮后直接修改指定路径的值。
|
||||
|
||||
### 编辑器属性
|
||||
|
||||
- `Watch Path ` - 绑定数值监听路径
|
||||
- `Value Clamp` - 是否限制数字的修改范围
|
||||
- `Value Min` - 限制最小值不低于
|
||||
- `Value Min` - 限制最大值不高于
|
||||
|
||||
### 使用方式
|
||||
|
||||
类似 Click Events 的设置调用节点上组件的方法， 去调用VMModify 组件上的对应函数，就可以修改 watch Path 监听的 路径的值。
|
||||
|
||||
- `vAddInt` - 增加整数
|
||||
- `vSubInt` - 减少整数
|
||||
- `vMulInt` - 乘以整数
|
||||
- `vDivInt` - 除以整数
|
||||
- `vAdd` - 增加浮点数
|
||||
- `vSub` - 减少浮点数
|
||||
- `vMul` - 乘以浮点数
|
||||
- `vDiv` - 除以浮点数
|
||||
- `vString` - 设置字符串
|
||||
- `vNumberInt` - 设置 整数
|
||||
- `vNumber` - 设置 浮点数
|
||||
|
||||
@@ -1,23 +0,0 @@
|
||||
## VM Parent
|
||||
|
||||
### 介绍
|
||||
|
||||
如果你想要让你的组件具有 动态监听数据的能力，需要继承 VMParent 使用。监听的数据类型为组件实例自身所有，是局部的数据而非全局数据。
|
||||
|
||||
### 属性
|
||||
|
||||
`data` - 定义需要绑定的数据类型，只在该组件内有效。定义后，这些数据就会被自动绑定。
|
||||
|
||||
`onBind()` - 数据绑定完成后调用该方法
|
||||
|
||||
`onUnBind()` - 数据绑定解除之前调用该方法
|
||||
|
||||
`tag` - 绑定的标签，可以通过这个tag 获取 当前的 vm 实例
|
||||
|
||||
`VM` - VM 管理对象，可以使用该对象获取值路径
|
||||
|
||||
### 注意事项
|
||||
|
||||
- 如果你不清楚继承机制，不要随意覆盖 onLoad() 事件，请使用 onBind() 函数代替 onLoad() 函数, onUnBind() 函数代替 onDestroy() 函数。如果你熟悉，可以使用super.onLoad() 的方式 调用父方法
|
||||
- 不要过多的嵌套使用VMParent, 在绑定时可能会影响一点性能
|
||||
|
||||
@@ -1,14 +0,0 @@
|
||||
## VM Progress
|
||||
|
||||
### 介绍
|
||||
|
||||
VM组件 进度条设置，适合任意的进度条组件，比如 ProgressBar，cc.Slider 等。接受两个watchPath 的值，最后会将变动结果反映在 progress 属性上。使用方式和 VM Custom 组件一致。
|
||||
|
||||
### 编辑器属性
|
||||
|
||||
- `Controller` - 激活controller,以开启双向绑定，否则只能接收消息
|
||||
- `Watch Path Arr` - 绑定数值监听路径数组，注意你必须设置一个 长度为 2 的数组，第一个值是最小值，第二个值是最大值，这样才会正确的计算出 progres 属性
|
||||
- `Component Name` - 绑定组件的名字 (会根据脚本配置自动识别)
|
||||
- `Component Property` - 绑定组件上需要监听的属性 (会根据脚本配置自动识别)
|
||||
- `refreshRate` - 刷新间隔频率 (只影响脏检查的频率) ，controller开启后生效
|
||||
|
||||
@@ -1,42 +0,0 @@
|
||||
## VM State
|
||||
|
||||
### 介绍
|
||||
|
||||
VM组件 状态条件，根据watchPath 路径，判断值是不是符合条件，再设置对应节点的状态。 可以根据数据改变节点的颜色，节点的激活与关闭等等情况。
|
||||
|
||||
### 编辑器属性
|
||||
|
||||
- `Watch Path ` - 绑定数值监听路径
|
||||
- `Foreach Child Mode` - 特殊的比较值的方式，它会拿当前节点下的所有子节点的名字作为值的比较，来控制所有子节点的显示状态。
|
||||
- `Foreach Child Type` - `NODE_INDEX` 比较节点的index 值 或者 `NODE_NAME` 比较节点的名字
|
||||
- `Condition` - 判断条件，判断值的的大小是否符合条件
|
||||
- `Value Action`- 效果行为，当状态满足时候执行的条件
|
||||
- `Watch Nodes` - 需要变化状态的节点,如果不设置，默认就会改变本节点以及子节点的所有状态。
|
||||
|
||||
### 效果行为
|
||||
|
||||
- `NODE_ACTIVE` - 改变节点的激活状态（挂载到本节点无效）
|
||||
|
||||
- `NODE_VISIBLE` - 改变节点的显示状态(不透明度切换) ，挂载到本节点有效，只影响显示。
|
||||
|
||||
- `NODE_OPACITY` - 改变节点的不透明度
|
||||
|
||||
`Action Opacity` - 设置 不透明的值
|
||||
|
||||
- `NODE_COLOR` - 改变节点的颜色
|
||||
|
||||
`Action Color` - 设置颜色的值
|
||||
|
||||
- `COMPONENT_CUSTOM` - 完全自定义改变组件属性
|
||||
|
||||
`Component Name` - 组件名
|
||||
|
||||
`Component Property` - 组件上的属性
|
||||
|
||||
`Default Value` - 默认值
|
||||
|
||||
`Action Value` - 满足条件改变的值
|
||||
|
||||
### 注意事项
|
||||
|
||||
NODE_ACTIVE 条件 不会改变自身节点的 激活状态
|
||||
@@ -1,107 +0,0 @@
|
||||
## View Model Script
|
||||
|
||||
### 介绍
|
||||
|
||||
View Model 的脚本用法
|
||||
|
||||
### 方法
|
||||
|
||||
VM是 VMManager 的实例, 用于管理所有的 ViewModel 实例。ViewModel实例 主要用于实现数据的双向绑定，内部使用了 cc.director.emit 方法 来发送数据变动的消息,在使用时你可以不用关注于这些细节。
|
||||
|
||||
我们可以通过 import VM（VMManager） 对象 来管理 所有的 ViewModel ，**不建议**直接去使用 ViewModel 实例。
|
||||
|
||||
```typescript
|
||||
//TS 使用 import 引入
|
||||
import { VM } from './ViewModel';
|
||||
|
||||
//JS 可以使用 require 的方式引入,其他用法没有区别
|
||||
const { VM } = require('./ViewModel');
|
||||
```
|
||||
|
||||
- `add` - 创建并且添加一个 ViewModel 对象
|
||||
|
||||
``` typescript
|
||||
VM.add(data,tag);
|
||||
//data - 你想要进行 绑定 的数据对象
|
||||
//tag - 该数据对象的索引标签，用于之后获取该 ViewModel 对象
|
||||
```
|
||||
|
||||
- `get` - 获取
|
||||
|
||||
```typescript
|
||||
let vm = VM.get(tag);//获取的结果是一个 ViewModel 对象
|
||||
let data = vm.$data; //获取 vm 绑定的 data 对象
|
||||
vm.active = false; // 关闭 vm 的数据通知功能
|
||||
```
|
||||
|
||||
- `remove` - 移除
|
||||
|
||||
```typescript
|
||||
VM.remove(tag);//移除一个指定 tag 的 ViewModel 对象
|
||||
```
|
||||
- `setValue` - 设置一个值（以tag开头的全局路径）
|
||||
|
||||
```typescript
|
||||
VM.setValue('global.player.name','wss');
|
||||
//注意 global 是 ViewModel 的标签，player.name 是 ViewModel 内部的取值路径
|
||||
//使用 VM 全局管理，必须按这种全局路径的方式设置值
|
||||
```
|
||||
- `addValue` - 累加一个值（以tag开头的全局路径）
|
||||
|
||||
```typescript
|
||||
VM.addValue('global.player.hp',10);
|
||||
```
|
||||
|
||||
- `getValue` - 获取一个值（以tag开头的全局路径）
|
||||
|
||||
```typescript
|
||||
VM.getValue('global.player.name',default);//default 是 默认值
|
||||
```
|
||||
|
||||
- `setObjValue` - 以路径的形式 设置 一个 对象的值
|
||||
- `getObjValue` - 以路径的形式 获取 一个 对象的值
|
||||
- `bindPath` - 绑定需要监听的路径
|
||||
- `unbindPath` - 取消绑定需要监听的路径
|
||||
- `active` - 激活 数值变动的事件通知
|
||||
- `inactive` - 关闭 数值变动的事件通知
|
||||
|
||||
### 例子
|
||||
|
||||
```typescript
|
||||
import { VM } from './ViewModel';
|
||||
|
||||
//构建数据对象
|
||||
let data = {
|
||||
name:'user',
|
||||
gold:12200,
|
||||
info:{
|
||||
id:0
|
||||
}
|
||||
}
|
||||
//创建 VM 对象，并且添加到 VMManager 来进行管理, 标记为 'user' 标签
|
||||
VM.add(data,'user');
|
||||
|
||||
//通过 'user' 标签获取一个 ViewModel 的实例
|
||||
let vm = VM.get('user');
|
||||
vm.$data; // vm.$data === data;
|
||||
|
||||
//设置新的属性值
|
||||
vm.setValue('name','new Name');
|
||||
|
||||
//获取属性
|
||||
vm.getValue('gold');
|
||||
|
||||
//通过相对路径获取属性
|
||||
vm.getValue('info.id');
|
||||
|
||||
//一旦修改值，将会通知 cc.director, 使用emit 发送消息
|
||||
data.name = 'my_name';
|
||||
|
||||
//关闭激活状态后，就不会通知 cc.director 传递信息了
|
||||
vm.active = false;
|
||||
|
||||
//移除ViewModel，并且释放 data 的引用
|
||||
VM.remove('user');
|
||||
data = null；
|
||||
```
|
||||
|
||||
Reference in New Issue
Block a user