Cocos Creator MVVM 工具集使用教程

1. 项目介绍

简介

cocos_creator_mvvm_tools 是一个适用于 Cocos Creator 的 MVVM（Model-View-ViewModel）工具集，旨在帮助开发者摆脱传统 MVC 模式中通过设置节点属性来控制 UI 的方式。通过使用该工具集，开发者可以更快捷、更细致地处理 UI 的表现效果，甚至可以在不写一行代码的情况下完成复杂的显示逻辑。

主要功能

• 数据绑定：通过设置脚本组件的参数，监听路径的数值变化并立即得到反馈。
• 事件处理：灵活获取数据变化时的事件，实现各种难以处理的细节交互。
• UI 与逻辑分离：彻底分离 UI 处理和游戏逻辑处理，专注于业务逻辑。

注意事项

• 查错困难：一旦绑定组件后，查找和调查 bug 位置会变得困难。
• 数据模型修改：设计数据模型后不能随意改变属性名，需要依赖编辑器操作。

2. 项目快速启动

安装

首先，克隆项目到本地：

git clone https://github.com/wsssheep/cocos_creator_mvvm_tools.git

导入框架

将项目中的 assets/Script/modelView 目录下的所有脚本导入到你的 Cocos Creator 项目中。

建立数据模型

在任意位置新建一个数据脚本，定义自己的数据模型，并使用 VM.add(data, 'tag') 添加 ViewModel。

// 示例数据模型
const data = {
    hp: 100,
    mp: 50
};

VM.add(data, 'global.play');

挂载脚本

在编辑器中直接添加 VMCustom 组件，它会自动识别绑定到需要设置值的组件和组件的属性。

// 示例 VMCustom 组件配置
watchPath: 'global.play.hp'

修改数据

在游戏中任意改变 global.play.hp 的值，对应的 UI 组件（如 cc.Label）会自动改变数值。

// 修改数据
data.hp = 50;

3. 应用案例和最佳实践

案例一：角色属性显示

在游戏中，角色的 HP 和 MP 是常见的属性。通过使用 cocos_creator_mvvm_tools，可以轻松实现这些属性的动态显示。

// 数据模型
const playerData = {
    hp: 100,
    mp: 50
};

VM.add(playerData, 'player');

// 在 UI 组件中绑定
watchPath: 'player.hp'

案例二：动态 UI 切换

在某些游戏中，根据玩家的状态动态切换 UI 界面。通过 MVVM 工具集，可以轻松实现这一功能。

// 数据模型
const uiState = {
    isBattle: false
};

VM.add(uiState, 'ui');

// 在 UI 组件中绑定
watchPath: 'ui.isBattle'

最佳实践

• 模块化设计：将数据模型和 UI 组件分离，便于维护和扩展。
• 错误处理：在绑定组件时，注意处理可能的错误，避免影响游戏性能。

4. 典型生态项目

Cocos Creator 插件

• Cocos Creator 插件市场：Cocos Creator 官方插件市场提供了丰富的插件资源，开发者可以在其中找到更多与 MVVM 相关的插件。

社区资源

• Cocos 论坛：Cocos 官方论坛是开发者交流和学习的重要平台，可以在其中找到更多关于 MVVM 的讨论和资源。

开源项目

• Cocos Creator 开源项目：GitHub 上有许多开源的 Cocos Creator 项目，开发者可以参考这些项目来学习和使用 MVVM 工具集。

通过以上步骤，你可以快速上手并应用 cocos_creator_mvvm_tools 工具集，提升你的游戏开发效率。