這次換一種方式聊聊Creator的UI開發(fā)抑月，目的是想讓學(xué)習(xí)那么枯燥违崇，如果你是一個愛玩游戲的朋友相信你會很有感覺幼衰。

一靴跛、奎特爾星球

在奎特爾星球上，有著無數(shù)的英雄渡嚣，身懷絕世魔力梢睛，在創(chuàng)世之主的統(tǒng)之下維護(hù)著奎特爾世界的安定與和平。

Node是忍者识椰，尾獸是魔靈

1. Node英雄傳

cc.Node是構(gòu)建“奎特爾”星的基石绝葡，上至星體下至塵埃，無處不在腹鹉，無論是可見的或不可見的藏畅，都由有他們默默的在支撐著。

英雄在層級管理與場景編輯器

上圖層級管理器和場景編輯器中功咒，我們看到的都是英雄Node愉阎，請由我來逐一介紹：

1. 名為Canvas的英雄绞蹦，像盤古一樣開天辟地化身出了一個世界，定義了世界的邊界和范圍榜旦。
2. Background英雄坦辟，用自己的整個身體去美化這個世界（雖然只是單一的銀白色）。
3. Advanced統(tǒng)帥著他的部隊（子節(jié)點）構(gòu)建出這個的世界功能章办。
4. Top Left隊長帶領(lǐng)著勇士Label和Tips完成具體的任務(wù)锉走。
5. Label小英雄顯示出小分隊的名字。
6. Tips小英雄顯示出小分隊的詳細(xì)信息藕届。

眾多的Node英雄們不分大小挪蹭、地位同心協(xié)作，創(chuàng)造出炫麗多彩的奎特爾星球休偶。

2. 魔靈

英雄最為驕傲的能力能是可以裝佩各種神奇的魔靈（Component）梁厉。

魔靈附身的英雄

在UI開發(fā)中，魔靈們大至分為兩類：光與暗

光系魔靈

可以直接在場景編輯器中感知到他的存在踏兜，常見的有：
cc.Sprite词顾、cc.Label、 cc.Button碱妆、 cc.EditBox

暗系魔靈

一般在場景編輯器中很難感知到他的存在肉盹，當(dāng)選中node節(jié)點后，通過屬性檢查器中才可以看到疹尾，常見的有：
cc.Canvas上忍、cc.Widget、cc.Layout纳本、cc.Mask

“奎特爾”星球上的魔靈是最具有魔力的生靈窍蓝，他們也可以像Node英雄一樣化出無數(shù)分身，并附身在Node上一起并肩作戰(zhàn)繁成，生死與共吓笙。

三、 創(chuàng)世之主

六道仙人

在地球上有一類人巾腕，他們可以通過“奎特爾引擎”創(chuàng)建出各種奇特的面睛、豐富多彩的奎特爾星球，他們被稱之為Cocos程序員祠墅，也稱之為奎特爾星球的創(chuàng)世之主侮穿。
不論你是誰歌径，只要你能駕馭奎特爾引擎毁嗦，與奎特爾的英雄、魔靈們建立起聯(lián)接回铛，你就能開創(chuàng)出一片新的世界狗准。

二克锣、英雄原力

英雄原力

要想成為奎特爾星求的創(chuàng)世之主，你需要了解Node英雄的一些能力和特性腔长。

1. 英雄三圍

每一個node英雄都具有任意改變自身外型能力袭祟，以適應(yīng)不同的生存環(huán)境，我們來看看英雄的三圍參數(shù)捞附。

image.png

Node有著控制自己外型尺寸的能力巾乳，通過上圖我們一一介紹下這些屬性。

1. 輸入框中可以為英雄取個名字（node.name）鸟召，左邊的復(fù)選框選中可以顯示或隱藏英雄（node.active）胆绊。
2. Position：Node在二維世界中的位置（node.x、node.y欧募、node.position）
3. Rotation：旋轉(zhuǎn)角度压状，范圍0~360（node.rotation）
4. Scale：縮放比例，可以根據(jù)寬跟继、高縮放种冬，值相同就是等比縮放(node.scale)
5. Anchor：位置與旋轉(zhuǎn)的基準(zhǔn)點，中心點（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英雄除了上面這些可以在屬性檢查器中可以看到參數(shù)外异袄，還有幾個重要的屬性只能由魔咒（代碼）來控制：

1. zIndex: Node英雄要沖鋒在戰(zhàn)場的最前面，就需要有足夠大的zIndex值玛臂。(node.zIndex)
2. tag: tag是一個int屬性的標(biāo)簽(tag烤蜕、setTag、getTag)迹冤，在父節(jié)點上可以使用getChildByTag獲取子節(jié)點讽营。
3. isValid: 這是個只讀屬性，表示英雄是否還活著泡徙。
4. parent: Node英雄之間通過parent建立父子關(guān)系橱鹏，形成一顆樹型結(jié)構(gòu)。
5. children: 一個Node小隊長可以通過children獲取他帶領(lǐng)的小組成員。

2. 英雄的感知能力

所有node都是感知型忍者

所有的英雄都能感知外界面對自己的指指點點莉兰，能過感知這些指指點點挑围，英雄們可以做出讓人嘆為觀止的各種反擊，從而演繹現(xiàn)出一幕幕精彩紛呈的星球大戰(zhàn)糖荒，感知力我將他們分為三類：

1. 觸摸事件杉辙、鼠標(biāo)事件：最常用的有TOUCH_END

node.on(cc.Node.EventType.TOUCH_END, 事件處理函數(shù))

2. 屬性改變事件：當(dāng)一個node英雄的屬性發(fā)生變化時，他會發(fā)出信號捶朵。我們可以通過感知其它英雄的屬性變化即時給予支援

this.node.on('position-changed', 事件處理函數(shù))

3. 自定義事件：創(chuàng)世之主可以自由定義事件蜘矢，通過emit發(fā)送出去。

this.node.emit('事件名字符串', {參數(shù)});
...
node.on('事件名字符串', 事件處理函數(shù))

3. 英雄會跳舞

image.png

node是舞者综看，action是舞步

每一個Node英雄都是一個天然的舞者硼端，只要呼喚他的runAction，他就會為你舞動奇跡寓搬。

//移動步法
let moveTo = cc.moveTo(1, cc.p(100, 100));
//讓英雄舞動起來
node.runAction(moveTo);

在這里node是就是舞者珍昨，moveTo是舞步，而舞步需要由創(chuàng)世之主來編排句喷。
舞步是英雄的必殺技能之一被稱之為Action镣典，由于篇幅我們以后專門介紹舞步的設(shè)計與編排，以及單人舞步唾琼、多人舞步兄春，舞步同步等絕技。

4. 魔靈附身

魔靈附身

英雄另一個超能力就是“魔靈附身”锡溯，英雄已然很強大赶舆，注入魔靈后的英雄才能真正上戰(zhàn)場，魔靈與英雄建立聯(lián)接有以下幾種方法：

• 利用奎特爾引擎祭饭，你可以直接召喚出裝備有魔靈的英雄芜茵。
• 通過屬性檢查器為node添加注入魔靈。
• 使用魔咒（addComponent）為node注入魔靈倡蝙。
• 創(chuàng)世之主還可以自己制造魔靈九串，將其附身在英雄身上。

要成為奎特爾的創(chuàng)世之主寺鸥，必須清楚英雄們的能力猪钮，并能靈活運用，組織他們相互協(xié)作胆建，才能戰(zhàn)勝敵人烤低。

三、魔法英雄聯(lián)盟

Node是忍者笆载，尾獸是魔靈

奎特爾星球上雖然有Node英雄們扑馁，但英雄們有一個問題涯呻，他們自己不會行動，必須靠魔靈們驅(qū)動node完成任務(wù)檐蚜。
不同的魔靈注入到node魄懂，就可以讓node具有不同的外表沿侈、特性和能力闯第。

1. 光系魔靈

前面提到過，光系魔靈可以直接在場景編輯器看到它們缀拭，這里我們介紹幾個光系魔靈的代表咳短。

cc.Sprite

Sprite魔靈可以說是眾魔之首，在一場戰(zhàn)斗中不論是重要度和規(guī)模數(shù)量都是其他魔靈不可企及的蛛淋。Sprite主要特點是通過美化node咙好，色誘敵人，擾亂其心使其沉迷不可自拔褐荷。

cc.Label

魔靈中的第二把交椅應(yīng)該屬于Label勾效，Label在戰(zhàn)斗中將node的軀體化身為文字，誘敵深入叛甫。cc.Label還有一個姐妹是cc.RichText层宫。

cc.Button

Button老三，當(dāng)敵人觸摸到Sprite所裝扮的node后其监，Button則順勢擺出一嬌羞的動作（按鈕動畫：圖片切換萌腿、顏色切換、縮放切換）抖苦，并通過事件函數(shù)報告敵軍行蹤毁菱。

cc.EditBox

老四EditBox，通常也是與Sprite配合锌历，誘使敵人輸入文本贮庞，從而竊取情報（最為常見的是用戶名、密碼）究西。

色誘術(shù)與幻術(shù)

2. 暗系魔靈

暗系魔靈在場景編輯中是很難直接看到他們的贸伐，他們身藏在Node英雄與光系魔靈的背后，用自己獨特的能力為整個戰(zhàn)事服務(wù)怔揩。

火影-暗部忍者

cc.Widget

Widget魔靈雖然不能被看見捉邢，但它可以幫助node在不同戰(zhàn)場確定自己的位置（屏幕適配、相對定位）商膊，如果一只隊伍要在不同尺寸的戰(zhàn)場上作戰(zhàn)伏伐，那Widget絕對少不了，特別是在上層Node節(jié)點晕拆。

cc.Layout

Layout魔靈像是一個嚴(yán)格的教官藐翎，可以約束node下的小分隊（子節(jié)點）以縱向材蹬、橫向、網(wǎng)格方式進(jìn)行自動排列吝镣，以及間距和邊距堤器。還可以根據(jù)子節(jié)的排列改變自己所附身的node的大小。

cc.Canvas

Canvas魔靈為整體戰(zhàn)場劃出界末贾，限并化身出一道結(jié)界闸溃，與其他裝備有Widget的魔靈讓戰(zhàn)場更加的和諧。

奎特爾引擎還提供了大量的其他魔靈拱撵，按奎特爾的傳統(tǒng)將他們分為：

UI系辉川、渲染系、物理系拴测、碰撞系乓旗、用戶系

我們這里介紹的光系、暗系其實是屬于UI集索、渲染系中的成員屿愚。更為強大的是創(chuàng)世之主可以自己創(chuàng)造魔靈，集從魔之力面對奎特爾星球來范之?dāng)场?/p>

成為六道仙人自創(chuàng)魔靈