专栏首页Creator星球游戏开发社区Creator MVVM方案—为人生节省时间!

Creator MVVM方案—为人生节省时间!

向「wsssheep」致敬!

你是否被美术随便瞎*命名搞得心力憔悴?

你是否因为节点该如何组织而焦虑不安?

你是否因为要控制一大堆节点逻辑而烦恼?

cc.find 找不到?

getComponent 为什么这么长?

getChildByName 名字又写错了?

策划又要改游戏UI布局和逻辑了?

节点名字和层级结构都乱七八糟搞不清了。

那么来试试MVVM吧,一次绑定,终生受益。


[图片演示] 快速入门绑定数据

[图片演示] 高级用法

[图片演示] 复杂数据项目演示

[图片演示] 实际应用示例

项目结构:

核心脚本文件存放在 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—在数据模型数值变化的时候调用其他组件方法(结合其他组件使用事半功倍)
  • VMParent — 定义局部范围使用 的 ViewModel数据

基本用法:

  • 导入框架 - 导入 assets\Script\modelView 中的所有脚本
  • 建立数据模型 - 任意位置新建一个数据脚本,定义自己的数据模型,使用VM.add(data,'tag') 添加viewModel。 可以通过VM直接管理该数据,或者自己全局管理 data 数据模型。
  • 挂脚本 - 编辑器中直接添加组件 VMCustom ,它会自动识别绑定到需要设置值的组件和组件的属性,比如cc.Label、cc.Progress等。 你只要填写对应的watchPath, 就会自动赋值到组件的属性上。比如填写 global.play.hp ,就会在游戏运行时赋值给绑定的组件属性。
  • 改数据 - 在游戏中任意改变 global.play.hp的值,对应的label 就会自动改变数值。

局部使用VM的方法: (只在组件内使用的相对路径)

  1. 继承VMParent 组件
  2. 在组件内设置 data 数据(data属性)
  3. 相对路径 使用 *.name 的方式设置 watchPath,VMParent 会在 onLoad 的时候自动将 * 替换成 实际的 ViewModel 标签,以便监听数据变化。

使用文档:https://github.com/wsssheep/cocos_creator_mvvm_tools/tree/master/docs

Github 项目地址:https://github.com/wsssheep/cocos_creator_mvvm_tools

cocos论坛:https://forum.cocos.com/t/ui-mvvm/78821/94 (阅读原文直达)

感谢wsssheep大神的无私分享 ,有问题建议也可以提出 Issuse,这个框架wsssheep一直在用,也会一直维护下去,觉得有用就赶快去点个star 吧!

本文分享自微信公众号 - Creator星球游戏开发社区(creator-star)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-06-08

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • node 数据库ORM框架TypeORM入门

    TypeORM是一个采用TypeScript编写的用于Node.js的优秀ORM框架,支持使用TypeScript或Javascript(ES5, ES6, E...

    javascript.shop
  • 手把手教会使用react开发日历组件

    提前需要准备好react脚手架开发环境,由于react已经不支持在页面内部通过jsx.transform来转义,我们就自己大了个简易的开发环境

    frontoldman
  • VSCode使用ts-node 调试TypeScript代码

    可以看出这些不足都来自于一个根本原因,运行之前需要编译。后来我就发现了一个很强大的工具ts-node,来看下ts-node的简介:

    javascript.shop
  • 这些必备的VSCode JavaScript插件你都用过吗?

    如今,Visual Studio Code无疑是最流行的轻量级代码编辑器。它确实从其他代码编辑器那借鉴了很多,最主要是从Sublime和Atom那里。然而它的成...

    Javanx
  • Typescript使用字符串联合类型代替枚举类型

    我觉得Typescript的宗旨是 任何一个 TypeScript 程序,在手动删去类型部分,将后缀改成 .js 后,都应能够正常运行。Typescript是j...

    javascript.shop
  • 2019 Vue开发指南:你都需要学点啥?

    如果您是Vue开发的新手,您可能已经听过很多关于它的专业术语了,例如:单页面应用程序、异步组件、服务器端呈现等。

    Javanx
  • TypeGraphQL的尝试

    GraphQL 在我们之前的项目中的使用情况非常不错,后端可以只需要专注于合理的 Schema 设计与开发,并不需要太关心界面上的功能交互,在前端我们用 Apo...

    javascript.shop
  • VSCode拓展推荐(前端开发)

    Text-to-speech function is limited to 200 characters

    botkenni
  • 强类型 JavaScript方案 Typescript & flow

    TypeScript 是微软2012年推出的一种编程语言,属于 JavaScript 的超集,可以编译为 JavaScript 执行。 它的最大特点就是支持强类...

    javascript.shop
  • typescript decorators 装饰器入门

    装饰器是一种特殊类型的声明,它能够被附加到类声明,方法, 访问符,属性或参数上,可以修改类的行为。 装饰器使用 @expression这种形式,expressi...

    javascript.shop

扫码关注云+社区

领取腾讯云代金券