CocosCreator组件化编程的探索

使用CocosCreator已经一年了,在此期间一直在摸索,如何才是组件化编程的最优实践。Shawn属于半野生的路子,水平不高,但不时会陷入一些问题瞎琢磨。我根据自己的经验,总结了一套组件化编程模型:法宝结界模型。

但在介绍法宝结界组件模型之前,先回顾一下控件和组件的概念。

一、控件与组件

在Cocos2d-x/lua/js的年代,UI元素都以控件类的形式存在。只有cc.Node的子类才能在界面上显示,例如:cc.Image、cc.Button、cc.Text。我们编写的界面代码也属于cc.Node的子类或系统控件的子类。

在Creator中我们自己编写的cc.Component的子类脚本,能称之为控件吗?

image

1.我所理解的控件

我觉得要能称的上控件,必须是能够被界面编辑器代码所控制,并能相对独立完成一项或多项任务的程序模块。而且控件具有一定范围的通用性,可以独立运行,可以被独立测试。

我们要自定控件,一类是cc.Componet子类脚本 + 预制体的结合;第二类是纯cc.Componet的子类脚本(不含预制体),也可以是系统组件的派生类。不含预制体的脚本其实是引擎自动帮我们生成的,当拖入一个组件脚本到场景编辑器,Creator会自动生成一个节点,并将脚本挂载到这个节点上。

这两类控件有什么不同呢?

脚本+预制体:控制的是预制体中的节点和子节点,以及节点上的控件。

纯脚本: 只能控制当前节点,也可以控制当前节点上的其它组件。

可以看出,这两类组件代码在他们控制的范围上是不同的。

2. 组件的悲剧

cc.Componet的子类都是组件,但他们要想要上升成为控件却很难。因为大多组件代码,都无法像系统控件那样独立完成一项目任务,其原因之一是滥用组件的properties可视化编辑功能,将本职范围内的节点做为成员变量,目的仅仅是为了方便访问。

[图片上传失败...(image-346e88-1518414298577)]

从Creator范例工程中的TestList首场景为例,Menu.js组件脚本挂载到Menu节点上,最后一个Menu.testList属性设置是非当前节点的子节点,控制权延生到了外面去了。前面几个属性(Text, Readme...)都是通过编辑器拖拽将Menu节点下的几个子节点配置到了组件脚本上,他们对于Menu.js应该属于私有成员变量,也变成了公开的了。

通过简单拖拽配置成员属性确实让程序开发变的简单,但如果滥用会有一个严重的问题:控件属性由原来的点状(控制自身节点)或线性(控制子节点或成员节点)关系,变成了网状关系(控制自身以外的节点)。

这将导致组件脚本难以独立完成任务和测试,必须通过编辑器正确配置才能工作,就像在一个模块代码中访问了全局变量一样。要让Menu.js成为控件的办法,最好是将TestList节点放到Menu节点内部。把Menu节点拖到资源管理器中成为一个prefab。

image

不知道如何下手,设置这些属性

不知道大家有没有遇到过,在属性检查器上密密麻麻的属性配置,不知道该如何下手?更让人头痛的是,不小心代码冲突,导致组件属性配置丢了,再看代码,脚本中的属性变量与节点名字又对应不上,就连编写这个模块代码的人都搞不懂是怎么会事!

网状关系的程序组织结构,会导至模块之间相互依赖,可重用性极低。如何规范组件的编写方式,确保模块的内聚性值得我们多多思考。

二、法宝与结界

下面来聊聊我总结的法宝结界模型,假想一个完整的世界,为了维护这个世界的有序运行,设置了一个结界。结界中有无数的法宝参与到世界的运行之中,贡献出力量。

1.法宝型组件

法宝型组件:以装饰宿主节点为己任,从不控制其它节点。

法宝型的特点是通用性强,可挂载任意节点运行,Creator内置的组件绝大多数属于这类。例如有Sprite、Label、Button、Widget等,可以看出纯脚本的组件就属于法宝型。

2.结界型组件

结界型组件:管理和控制其它节点及节点上的组件,通常会根据上层业务要求,调用其它节点的属性方法完成任务。

结界型的特点是业务逻辑性强,通用性差,通常是对法宝型组件的指挥和管理。组件+prefab就属于这类,由于结界型组件大多是定制的,它并且不能随便挂载到别的节点上(更多的是只能挂载到唯一的节点上)。

3. 结界的秘密

话说天有九重,九只是个虚数,其实是很多的意思。一个结界型组件,对于它的上层结界来说,他又是一个法宝型组件,这就形成了模块化。

image

比如有一个名为A的prefab,将组件脚本A.js挂载到prefab的根结点。当另一个场景或预制体中实例化这个A.prefab时,A.js就上升为一个控件,他管理了A.prefab下的所有节点,但对于当前场景来说,它又体现为一个法宝型组件,而成为了一个控件。

对内是结界,从根节点开始自下而下管理所有子节点;对外是法宝,从根节点获取法宝暴露的属性方法。这样以内部线性、总体树状的程序结构,是不是要比网状的结构更好些呢?

三、小结

uikiller库是我在组件化编程上的一点成果,可以方便管理prefab下的任意节点和组件,以及节点上的触摸事件。奉上一段uikill的使用视频 ,结束这篇分享。
http://v.youku.com/v_show/id_XMzMxNzUxMzYzMg==.html?spm=a2hzp.8244740.0.0

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,393评论 5 467
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,790评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,391评论 0 330
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,703评论 1 270
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,613评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,003评论 1 275
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,507评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,158评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,300评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,256评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,274评论 1 328
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,984评论 3 316
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,569评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,662评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,899评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,268评论 2 345
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,840评论 2 339

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,259评论 25 707
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 11,975评论 4 60
  • 该文章主题是(让大脑用来思考,而不是用来记事)那么大脑用来思考了 记事该怎么办呢?文章还提到了 可以给大脑安装一...
    小芭蕾_7ed2阅读 145评论 0 0
  • 要说香料里面,我最喜欢的恐怕就是它了——天竺桂。你可以不知道天竺桂是什么东西,但是你一定知道桂皮。 她是常用的五香...
    浅然五味子阅读 2,355评论 2 2
  • 喵~是宿舍楼下的一只流浪猫,纯白色的毛发,一脸傲娇,但又喜欢跟人讨吃的,老是冲我喵~喵~喵~,就暂且叫它喵吧。 起...
    紫罗兰的欢乐世界阅读 867评论 0 1