做了一个绑定视图和数据的小工具bindview, 用于cocos creator.
功能是将一个javascript object或者array与节点绑定, 控制该节点下的label和sprite的更新. 这样更新js数据就可以实时更新label和sprite了. 算是一种简单的MVVM实现. 目前托管在github上.
点击进入github项目页面
请大家多提意见, 希望对大家有用!
中文版:
bindview
Bindview 是一个cocos creator的工具，可以将JavaScript的数组和对象与节点、prefabs、标签、精灵绑定。更新数组和对象就可以更新游戏界面。
JavaScript的对象可以和节点绑定。例如一个名为fatherNode的节点，在层级管理器中是这样的：
fatherNode
|-name //a label
|-birthday // another label
|-avatar // a sprite
JavaScripte的对象是这样的：
// javascript object
var person = {
name: "Jacques Yang",
birthday: "1984-6-4",
avatar: new cc.SpriteFrame()
}
把fatherNode和对象person绑定，然后修改person的属性值，fatherNode就会自动更新。
示例工程
-
git clone这个项目，用Cocos Creator打开并运行它。
git clone https://github.com/darceye/bindview.git -
示例项目的资源结构：
assets |-Scene |-bindview.fire // Demo Scene. |-js // Main files of bindview. |-bindview.js // Core functions. |-view.js // Cocos Creator JS component. Drag it to a node which you want to bind with. |-prefab |-child.prefab // Prefab for demo. |-resources |-headsatlas.plist // Used for demostrating sprite binding. |-heads.png |-testdata // Js files for demo. |-data.js // Data bound with labels and sprites. Any changing of data will be shown on labels and sprites. |-edit.js // For editing on Demo scene. |-imgload.js // Load images from resources, and set SpriteFrame data. -
在浏览器中运行bindview场景，修改name, birthday, avatar ID或者array index，然后点击Set。可以看到文字和精灵会立刻改变。试着点击Push()或者Pop()来为数组增加新元素和删除一个元素。你也可以在浏览器的console中进行测试试用。
-
现在看一下“层级管理器”面板，Canvas下面有如下三个节点，他们都有个view组件：
- objectAndNode. view组件中bind type 是 OBJECT_AND_THIS_NODE，它和data[0]绑定。
- arrayAndFirstChild. view组件中bind type 是 ARRAY_AND_FIRST_CHILD。它将data和他的第一个子节点child绑定。
- arrayAndPrefab.view组件中bind type 是 ARRAY_AND_PREFAB，prefab属性设置为child，该prefab在资源管理器的assets/prefab下。它将data和prefab绑定.
使用简介
-
把 bindview.js 和 view.js复制到assets 目录下;
-
拖动 view.js 到你想要绑定的节点上，我们先称之为父节点;
-
设置bind type, data file , 和 data key.
-
如果是绑定一个数组:
-
数组与Prefab绑定(ARRAY_AND_PREFAB): 新建一个你想绑定的prefab。注意这个prefab只能有一个根节点。根节点下的文字和精灵将会被绑定。将prefab拖入 "father node -> view component -> prefab"中;
-
数组与首个子节点绑定(ARRAY_AND_FIRST_CHILD): 在父节点下新建一个子节点。子节点下的文字和精灵将会被绑定。该子节点应该是父节点的第一个子节点。
-
对象和父节点绑定(OBJECT_AND_THIS_NODE)， 父节点下的文字和精灵将会被绑定
-
新建一个数据js文件, 例如: “data.js”。 文件名需要和你填写在view组件Data File中的一致
-
如果是绑定数组, 那么数据文件需要导出数组。数组的元素将和父节点下的子节点依次绑定。数组元素的键值应该和子节点下的文字节点或精灵节点的名称相同。
-
如果是绑定对象，那么数据文件应该导出对象。对象属性的键值应该和父节点的文字节点或精灵节点的名称相同。
-
如果绑定文字节点, 那么属性值的类型应该是字符串，如果是绑定精灵节点，属性值应该是空的cc.SpriteFrame。例如:
module.exports = {
name: "Jacques Yang",
birthday: "1984-6-4",
avatar: new cc.SpriteFrame()
}
如果是数组，应该看起来是这样的：
module.exports = [{
name: "Jacques Yang",
birthday: "1984-6-4",
avatar: new cc.SpriteFrame()
}, {
name: "Penguin",
birthday: "1999-3-1",
avatar: new cc.SpriteFrame()
}
]
- 完成了！此时如果要修改文字和精灵，修改data就可以了!
// For example, Bind object and node. var data = require('data') data.name = "new name" //....
联系我
QQ: 1329046779 (加的时候请说来自于github或者cocos论坛)
Mail: 1329046779@qq.com
小广告: 练手益智小游戏 欢乐24点, 也欢迎大家提意见!
