查看原文
其他

Cocos Creator基础教程(13)—组件与节点的秘密

张晓衡 Creator星球游戏开发社区 2021-08-09


公众号上我们已经学习了有段时间的Cocos Creator组件开发了,组件化开发到底有是什么?Shawn这阵子思绪不断,同时将自己的理解应用于实际项目中,颇有心得,在这里做一个分享。

1. 节点与组件的关系

有经验的同学,一上手Cocos Creator就能想到「装饰模式」,我们看下定义:

装饰模式(Decorator)动态地给一个对象添加一些额外的职责,就增加功能来说,装饰模式比生成子类更为灵活。

再看一下装饰模式的基本UML类图结构 :


大话设计模式-装饰模式UML


请注意,上图是我从《大话设计模式》中截取的,图中的Component在Cocos Creator对应的是NodeDecorator对应的是Cocos Creator中的Component

非程员同学,看到这里可能会觉得比较懵,这里请耐心听我为解释「装饰模式」。既然其中有装饰二字,就应该有装饰品被装饰者,例如:一个人穿上衣服、背上双肩包、 带上电脑和手机(哈哈!典型的Shanw平时的装扮)。


程序员背包


上图中的就是被装饰者衣服双肩包都是装饰品。其中衣服、双肩包提供了渲染能力,美化外表,让Shawn可以正常地走在大街上;电脑赋予Shawn工作能力,比如写代码、写点教程,当然人走在大家街上你是看不到电脑的,因为对应的行为场景没有激活;手机上不时会收到其他人发来的消息或任务,形成与外部世界沟通的交互界面,提供的是UI交互能力

当Shawn把《大话设计模式》这本书看懂了,并能真正运用了,《大话设计模式》这本书也就装饰了我,只不过从外表上是看不出来的,需要工作起来(代码运行起来)才能表现出来。说不定那天我又把之前的知识给忘记了,衣服、电脑、手机可能还会换,装饰品对装饰被者来说是动态变化的。

说了这么多,我对组件与节点关系的理解是:组件为节点赋能


组件为节点赋能


2. 程序员为美术、策划赋能

基于Cocos Creator这样的可视化引擎,组件代码有着巨大的意义。程序员开发出的组件代码不应该只是满足自己完成任务,而应该是为游戏设计师提供体验优良的工具,当然你在提供这些组件工具的同时,你的设计水平也在提高。

组件脚本就像是美术生产的图片、策划编写的文案一样,是游戏开发中的一项基础生产资料,游戏内容更多的是应该由游戏设计师去完成。

程序不仅仅是编写组件脚本,还应该向团队其他人员提供更多的帮助,比如:教他人使用Cocos Creator、教他人使用你编写的组件、编写项目辅助工具...。目的是用程序的知识、思维和工具,去装饰身边的人,给他们提供他们本身不具备的能力,这样才能更多地发挥程序员的价值。如果程序员平时没有察觉到开发体验(各种不爽),做出的产品也很难谈的上有用户体验。

3. 人与人之间组件化协作

可能大多数人认为上面的协作模式太过理想化了,确实如些,这么多年了,仅在最近Shawn才被幸运眷顾到,哈哈!Shanw服务的一家儿童教育公司,开发了一套H5教学互动课件。


初期Shawn为美术人员进行了简单的Cocos Creator学习培训,制作了一个Demo,并对Demo的设计思路、组件用法、项目规范进行了说明。然后就把内容设计完全效给两名美术同学。没想到他们丰富的想像力,把我提供的组件脚本完成了之前从未想到过的功能,而且这两名美术同学才刚从大学毕业!

项目过程中,这两位美术同学不仅是美术用PhotoShop出图,还整理需求、编辑界面、编辑动画、实现需求;Shawn则在一边打酱油,写点教程,即时根据他们提出的功能点提供解决办法或组件代码。同时引导他们使用git来管理项目资源;引入任务管理系统梳理工作内容;部署内部自动化构建环境方便授课老师进行测试、磨课、教学等,协作的非常顺利。

站在团队基础上,为他人赋予能力,将自己当成装饰品做为组件,去装饰他人让节点充分发挥能力,进行人与人之间的组件化协作,这是我最近从Cocos Creator组件化开发收获的启发。

4. 小结

这一篇没讲多少Cocos Creator具体的技术细节,简单讲述了「装饰模式」的结构,同时推荐《大话设计模式》这本书。Shawn写教程的风格多少受到《大话设计模式》、《Head First》的影响。 后面Shanw通过Cocos Creator的组件化开发,若有所悟地将组件化应用到人与人之间的协作,这是自己在开过程中的一点心得,希望对你也有所帮助。

今天周未,奉送一段动漫给大家,放松下心情!





欢迎关注「奎特尔星球」微信公众号,更期待您向公众号投稿,来我们一起成长!

热门文章TOP10,邀你遨游「奎特尔星球」

  1. Cococ Creator基础教程—meta的秘密(3)

  2. uikiller再度进化支持Cocos Creator 2.0

  3. 庆祝「奎特尔」500勇士,诞生!

  4. 当creator遇上protobufjs—感谢有你,再战2.0

  5. Cocos Creator基础教程(7)—场景切换

  6. Cocos Creator基础教程(9)—优化代码编辑器

  7. Cocos Creator基础教程(4)—color属性的妙用

  8. Cocos Creator基础教程(1)—从zIndex开始

  9. Cocos Creator基础教程(2)—聊聊scale与size属性

  10. Creator模块介绍—领略模块化的力量

    您可能也对以下帖子感兴趣

    文章有问题?点此查看未经处理的缓存