专栏名称: COCOS
Cocos引擎官方账号,第一时间为您送上引擎动态、精品教程、达人专访等干货,还会定期举办有奖活动喔!
目录
相关文章推荐
哲学园  ·  AGI时代,财富大洗牌!Hinton分解未来 ... ·  21 小时前  
哲学王  ·  体制内的现状,真实! ·  4 天前  
慧田哲学  ·  为什么学者必须远离名利场? ·  6 天前  
51好读  ›  专栏  ›  COCOS

戏说Creator UI---奎特尔星球上的英雄与魔灵

COCOS  · 公众号  ·  · 2017-08-11 00:00

正文

感谢『简书 ID:danniszhang』友情提供

今天我们换种方式聊聊Creator的UI开发,目的是让游戏名词变得不那么枯燥。如果你也是一个热爱游戏的“圈内人士”,相信看完能感同身受。

 奎特尔星球


奎特尔星球上,有着无数的英雄,身怀绝世魔力,在创世之主统治下维护着奎特尔世界的安定与和平。

Node是忍者,尾兽是魔灵


Node英雄传

cc.Node是构建“奎特尔”星的基石,上至星体下至尘埃,无处不在,无论是可见的或不可见的,都由他们默默的支撑。

英雄在层级管理与场景编辑器


上图层级管理器和场景编辑器中,我们看到的都是英雄Node,请由我来逐一介绍:

  1. 名为Canvas的英雄,像盘古一样开天辟地化身出了一个世界,定义了世界的边界和范围;

  2. Background英雄,用自己的整个身体去美化这个世界(虽然只是单一的银白色);

  3. Advanced统帅着他的部队(子节点)构建出这个的世界功能;

  4. Top Left队长带领着勇士Label和Tips完成具体的任务;

  5. Label小英雄显示出小分队的名字;

  6. Tips小英雄显示出小分队的详细信息;


众多的Node英雄们不分大小、地位同心协作,创造出炫丽多彩的奎特尔星球。


 魔灵

英雄最为骄傲的能力能是可以装佩各种神奇的魔(Component)。


魔灵附身的英雄


在UI开发中,魔灵们大至分为两类:光与暗

光系魔灵

暗系魔灵

“奎特尔”星球上的魔灵是最具有魔力的生灵,他们也可以像Node英雄一样化出无数分身,并附身在Node上一起并肩作战,生死与共。

 创世之主


通过编程改变世界


在地球上有一类人,他们可以通过“奎特尔引擎”创建出各种奇特的、丰富多彩的奎特尔星球,他们被称之为Cocos程序员,也称之为奎特尔星球的创世之主


不论你是谁,只要你能驾驭奎特尔引擎,与奎特尔的英雄、魔灵们建立起联接,你就能开创出一片新的世界。

 英雄原力


英雄原力


要想成为奎特尔星求的创世之主,你需要了解Node英雄的一些能力和特性。

英雄三围

每一个node英雄都具有任意改变自身外型能力,以适应不同的生存环境,我们来看看英雄的三围参数。


Node有着控制自己外型尺寸的能力,通过上图我们一一介绍下这些属性。

  1. 输入框中可以为英雄取个名字(node.name),左边的复选框选中可以显示或隐藏英雄(node.active);

  2. Position:Node在二维世界中的位置(node.x、node.y、node.position);

  3. Rotation:旋转角度,范围0~360(node.rotation);

  4. Scale:缩放比例,可以根据宽、高缩放,值相同就是等比缩放(node.scale);

  5. Anchor:位置与旋转的基准点,中心点(0.5, 0.5)左下角(0,0),右上角(1,1),(node.anchor);

  6. Size:英雄的宽、高体型大小(node.width、node.height、node.getContentSize、node.setContentSize);

  7. Color:每一个英雄都是变色龙(node.color);

  8. Opacity:英雄可以将自己透明,范围0~255 (node.opacity);

  9. Skew:扭曲角度 (node.skew);


Node英雄除了上面这些可以在属性检查器中可以看到参数外,还有几个重要的属性只能由魔咒(代码)来控制:

  1. zIndex: Node英雄要冲锋在战场的最前面,就需要有足够大的zIndex值(node.zIndex);

  2. tag: tag是一个int属性的标签(tag、setTag、getTag),在父节点上可以使用getChildByTag获取子节点;

  3. isValid: 这是个只读属性,表示英雄是否还活着;

  4. parent: Node英雄之间通过parent建立父子关系,形成一颗树型结构;

  5. children: 一个Node小队长可以通过children获取他带领的小组成员;


英雄的感知能力


所有node都是感知型忍者


所有的英雄都能感知外界面对自己的指指点点,通过感知这些指指点点,英雄们可以做出让人叹为观止的各种反击,从而演绎现出一幕幕精彩纷呈的星球大战,感知力我将他们分为三类:

触摸事件、鼠标事件:最常用的有TOUCH_END


属性改变事件:当一个node英雄的属性发生变化时,他会发出信号。我们可以通过感知其它英雄的属性变化即时给予支援


自定义事件:创世之主可以自由定义事件,通过emit发送出去。


 英雄会跳舞



Node是舞者,action是舞步


每一个Node英雄都是一个天然的舞者,只要呼唤他的runAction,他就会为你舞动奇迹。

在这里node就是舞者,move To是舞步,而舞步需要由创世之主来编排。

舞步是英雄的必杀技能之一被称之为Action,由于篇幅我们以后专门介绍舞步的设计与编排,以及单人舞步、多人舞步,舞步同步等绝技。

 魔灵附身


魔灵附身


英雄另一个超能力就是“魔灵附身”,英雄已然很强大,注入魔灵后的英雄才能真正上战场,魔灵与英雄建立联接有以下几种方法:

  • 利用奎特尔引擎,你可以直接召唤出装备有魔灵的英雄

  • 通过属性检查器为node添加注入魔灵

  • 使用魔咒(addComponent)为node注入魔灵

  • 创世之主还可以自己制造魔灵,将其附身在英雄身上


要成为奎特尔的创世之主,必须清楚英雄们的能力,并能灵活运用,组织他们相互协作,才能战胜敌人。


 魔法英雄联盟


Node是忍者,尾兽是魔灵


奎特尔星球上虽然有Node英雄们,但英雄们有一个问题,他们自己不会行动,必须靠魔灵们驱动node完成任务。


不同的魔灵注入到node,就可以让node具有不同的外表、特性和能力。


光系魔灵

前面提到过,光系魔灵可以直接在场景编辑器看到它们,这里我们介绍几个光系魔灵的代表。


cc.Sprite

Sprite魔灵可以说是众魔之首,在一场战斗中不论是重要度和规模数量都是其他魔灵不可企及的。Sprite主要特点是通过美化node,色诱敌人,扰乱其心使其沉迷不可自拔。


cc.Label

魔灵中的第二把交椅应该属于Label,Label在战斗中将node的躯体化身为文字,诱敌深入。cc.Label还有一个姐妹是cc.RichText。


cc.Button

Button老三,当敌人触摸到Sprite所装扮的node后,Button则顺势摆出一娇羞的动作(按钮动画:图片切换、颜色切换、缩放切换),并通过事件函数报告敌军行踪。


cc.EditBox

老四EditBox,通常也是与Sprite配合,诱使敌人输入文本,从而窃取情报(最为常见的是用户名、密码)。


色诱术与幻术


暗系魔灵

暗系魔灵在场景编辑中是很难直接看到他们的,他们身藏在Node英雄与光系魔灵的背后,用自己独特的能力为整个战事服务。

火影-暗部忍者


cc.Widget

Widget魔灵虽然不能被看见,但它可以帮助node在不同战场确定自己的位置(屏幕适配、相对定位),如果一只队伍要在不同尺寸的战场上作战,那Widget绝对少不了,特别是在上层Node节点。


cc.Layout

Layout魔灵像是一个严格的教官,可以约束node下的小分队(子节点)以纵向、横向、网格方式进行自动排列,以及间距和边距。还可以根据子节的排列改变自己所附身的node的大小。


cc.Canvas

Canvas魔灵为整体战场划出界,限并化身出一道结界,与其他装备有Widget的魔灵让战场更加的和谐。


奎特尔引擎还提供了大量的其他魔灵,按奎特尔的传统将他们分为:

UI系、渲染系、物理系、碰撞系、用户系


我们这里介绍的光系、暗系其实是属于UI、渲染系中的成员。更为强大的是创世之主可以自己创造魔灵,集从魔之力面对奎特尔星球来范之敌。

成为六道仙人自创魔灵


通篇采用各种比喻和暗喻的Creator UI入门介绍,小伙伴们看懂了吗?不知道原作是否是个资深策划,但这派系分明的剧情,分分钟可以整出个游戏来。


下面问题来了, 没看过全套火影忍者的程序员,能否请资深火迷给大家文末解释解释?



戳原文,进帖参与讨论!