圖像和渲染
基本圖像渲染：Sprite 召噩、 Label 担巩、 Mask 組件
外部資源渲染：ParticleSystem微谓、TiledMap、Spine酝陈、DragonBones、VideoPlayer毁涉、WebView組件
攝像機(jī)
創(chuàng)建場景時(shí)沉帮，Creator 會默認(rèn)創(chuàng)建一個(gè)名為 Main Camera的攝像機(jī)，作為這個(gè)場景的主攝像機(jī)薪丁。
backgroundColor 當(dāng)指定了攝像機(jī)需要清除顏色的時(shí)候遇西，攝像機(jī)會使用設(shè)定的背景色來清除場景。
depth攝像機(jī)深度严嗜，用于決定攝像機(jī)的渲染順序粱檀。值越大，則攝像機(jī)越晚被渲染漫玄。
cullingMask cullingMask 將決定這個(gè)攝像機(jī)用來渲染場景的哪些部分茄蚯。在 屬性檢查器 中的攝像機(jī)組件中的 cullingMask 會列出當(dāng)前可以選擇的 mask 選項(xiàng)压彭，你可以通過勾選這些選項(xiàng)來組合生成 cullingMask。
使用項(xiàng)目-項(xiàng)目設(shè)置-分組管理 來添加和修改分組渗常。
clearFlags指定渲染攝像機(jī)時(shí)需要做的清除操作壮不。
rect 決定攝像機(jī)繪制在屏幕上的哪個(gè)區(qū)域，便于實(shí)現(xiàn)類似小地圖那樣的 Viewport皱碘，值為 0～1询一。
zoomRatio指定攝像機(jī)的縮放比例，值越大顯示的圖像越大癌椿。
alignWithScreen當(dāng) alignWithScreen 為 true 的時(shí)候健蕊，攝像機(jī)會自動(dòng)將視窗大小調(diào)整為整個(gè)屏幕的大小。
orthoSize攝像機(jī)在正交投影模式下的視窗大小踢俄。
targetTexture如果設(shè)置了 targetTexture缩功，那么攝像機(jī)渲染的內(nèi)容不會輸出到屏幕上，而是會渲染到 targetTexture 上都办。如果你需要做一些屏幕的后期特效嫡锌，可以先將屏幕渲染到 targetTexture，然后再對 targetTexture 做整體處理琳钉，最后再通過一個(gè) sprite 將這個(gè) targetTexture 顯示出來势木。
坐標(biāo)轉(zhuǎn)換
// 將一個(gè)屏幕坐標(biāo)系下的點(diǎn)轉(zhuǎn)換到世界坐標(biāo)系下
camera.getScreenToWorldPoint(point, out);
// 將一個(gè)世界坐標(biāo)系下的點(diǎn)轉(zhuǎn)換到屏幕坐標(biāo)系下
camera.getWorldToScreenPoint(point, out);
// 獲取屏幕坐標(biāo)系到世界坐標(biāo)系的矩陣，只適用于 2D 攝像機(jī)并且 alignWithScreen 為 true 的情況
camera.getScreenToWorldMatrix2D(out);
// 獲取世界坐標(biāo)系到屏幕坐標(biāo)系的矩陣槽卫，只適用于 2D 攝像機(jī)并且 alignWithScreen 為 true 的情況
camera.getWorldToScreenMatrix2D(out);
截圖功能 | 參考
Material 材質(zhì)資源
材質(zhì)資源可以用來控制渲染組件在場景中的視覺效果跟压。簡單來說材質(zhì)就是用來指定物體表面的特性胰蝠，如顏色歼培、光亮程度、自發(fā)光度以及不透明度等茸塞。
創(chuàng)建 Effect
Sprite 組件參考
Sprite（精靈）是 2D 游戲中最常見的顯示圖像的方式
渲染方式：
普通模式（Simple）：根據(jù)原始圖片資源渲染 Sprite躲庄，一般在這個(gè)模式下我們不會手動(dòng)修改節(jié)點(diǎn)的尺寸，來保證場景中顯示的圖像和美術(shù)人員生產(chǎn)的圖片比例一致钾虐。九宮格模式（Sliced）：圖像將被分割成九宮格噪窘，并按照一定規(guī)則進(jìn)行縮放以適應(yīng)可隨意設(shè)置的尺寸(size)。通常用于 UI 元素效扫，或?qū)⒖梢詿o限放大而不影響圖像質(zhì)量的圖片制作成九宮格圖來節(jié)省游戲資源空間倔监。詳細(xì)信息請閱讀 使用 Sprite 編輯器制作九宮格圖像 一節(jié)。平鋪模式（Tiled）：圖像將會根據(jù) Sprite 的尺寸重復(fù)平鋪顯示菌仁。如果 SpriteFrame 包含 九宮格配置浩习，平鋪時(shí)將保持周圍寬度不變，而其余部分重復(fù)济丘。填充模式（Filled）：根據(jù)原點(diǎn)和填充模式的設(shè)置谱秽，按照一定的方向和比例繪制原始圖片的一部分洽蛀。經(jīng)常用于進(jìn)度條的動(dòng)態(tài)展示。網(wǎng)格模式（Mesh）：必須使用 TexturePacker 4.x 以上版本并且設(shè)置 ploygon 算法打包出的 plist 文件才能夠使用該模式疟赊。
Label組件參考
Label 組件用來顯示一段文字郊供，文字可以是系統(tǒng)字體、TrueType 字體近哟、BMFont 字體或藝術(shù)數(shù)字驮审。另外，Label 還具有排版功能吉执。
LabelOutline 描邊
LabelShadow 投影
Mask 遮罩
MotionStreak 拖尾
Particle System 粒子系統(tǒng)
Tilemap 組件
Spine
DragonBones
VideoPlayer
WebView 組件參考：WebView 是一種顯示網(wǎng)頁的組件头岔，該組件讓你可以在游戲里面集成一個(gè)小的瀏覽器。
Graphics 組件提供了一系列繪畫接口鼠证，這些接口參考了 canvas 的繪畫接口來進(jìn)行實(shí)現(xiàn)峡竣。
UI系統(tǒng)
多分辨率適配方案
Canvas（畫布） 組件隨時(shí)獲得設(shè)備屏幕的實(shí)際分辨率并對場景中所有渲染元素進(jìn)行適當(dāng)?shù)目s放。
Widget（對齊掛件） 放置在渲染元素上量九，能夠根據(jù)需要將元素對齊父節(jié)點(diǎn)的不同參考位置适掰。
Label（文字） 組件內(nèi)置了提供各種動(dòng)態(tài)文字排版模式的功能，當(dāng)文字的約束框由于 Widget 對齊要求發(fā)生變化時(shí)荠列，文字會根據(jù)需要呈現(xiàn)完美的排版效果类浪。
Sliced Sprite（九宮格精靈圖）則提供了可任意指定尺寸的圖像，同樣可以滿足各式各樣的對齊要求肌似，在任何屏幕分辨率上都顯示高精度的圖像费就。
設(shè)計(jì)分辨率 / 屏幕分辨率
設(shè)計(jì)分辨率 是內(nèi)容生產(chǎn)者在制作場景時(shí)使用的分辨率藍(lán)本
屏幕分辨率 是游戲在設(shè)備上運(yùn)行時(shí)的實(shí)際屏幕顯示分辨率。
通常設(shè)計(jì)分辨率會采用市場目標(biāo)群體中使用率最高的設(shè)備的屏幕分辨率川队，比如目前安卓設(shè)備中 800 x 480 和 1280 x 720 兩種屏幕分辨率力细，或 iOS 設(shè)備中 1136 x 640 和 960 x 640 兩種屏幕分辨率。這樣當(dāng)美術(shù)或策劃使用設(shè)計(jì)分辨率設(shè)置好場景后固额，就可以自動(dòng)適配最主要的目標(biāo)人群設(shè)備眠蚂。
Canvas帶有適配寬度（Fit Width）還有適配高度（Fit Height）的模式，配合Widget（對齊掛件）進(jìn)行調(diào)整斗躏，也存在ExactFit的適配模式逝慧，進(jìn)行圖像的拉伸變形。
對齊策略
要實(shí)現(xiàn)完美的多分辨率適配效果啄糙，UI 元素按照設(shè)計(jì)分辨率中規(guī)定的位置呈現(xiàn)是不夠的笛臣，當(dāng)屏幕寬度和高度發(fā)生變化時(shí)，UI 元素要能夠智能感知屏幕邊界的位置隧饼，才能保證出現(xiàn)在屏幕可見范圍內(nèi)沈堡，并且分布在合適的位置。我們通過 Widget（對齊掛件） 來實(shí)現(xiàn)這種效果桑李。
- 需要貼邊對齊的按鈕和小元素：設(shè)置為
Canvas的子節(jié)點(diǎn)踱蛀，添加Widget組件窿给，開啟Left和Buttom對齊 - 嵌套對齊元素：因?yàn)閃idget是根據(jù)父節(jié)點(diǎn)進(jìn)行對齊
- 根據(jù)對齊需要自動(dòng)縮放節(jié)點(diǎn)尺寸：需要同時(shí)勾選
Left和Right對齊開關(guān)，就能夠修改size - 制作和屏幕大小保持一致的節(jié)點(diǎn)：那就進(jìn)行全部的勾選
- 設(shè)置百分比對齊距離：直接輸入百分比：可以按照需要混合像素單位和百分比單位的使用率拒。比如在需要對齊屏幕中心線的 Left 方向輸入 50%崩泡，在需要對齊屏幕邊緣的 Right 方向輸入 20px，最后計(jì)算子節(jié)點(diǎn)位置和尺寸時(shí)猬膨，所有的邊距都會先根據(jù)父節(jié)點(diǎn)的尺寸換算成像素距離角撞，然后再進(jìn)行擺放。
Align Mode中的 設(shè)置為ON_WINDOW_RESIZE或者 ONCE勃痴，在進(jìn)行一次對齊之后就會把Widget組件的enabled屬性設(shè)置為false
制作可任意拉伸的UI圖像
通過進(jìn)行Sprite的編輯谒所，切分九宮格，并且將Sprite的Type屬性設(shè)置為Sliced
文字排版
Label 組件的排版也是基于節(jié)點(diǎn)尺寸（Size）沛申，也就是約束框（Bounding Box）所規(guī)定的范圍劣领。
Label 中以下的屬性決定了文字在約束框中顯示的位置：
Horizontal Align（水平對齊）：文字在約束框中水平方向的對齊準(zhǔn)線，可以從 Left铁材、Right尖淘、Center 三種位置中選擇。
Vertical Align（垂直對齊）：文字在約束框中垂直方向的對齊準(zhǔn)線著觉，可以從 Top村生、Bottom、Center 三種位置中選擇饼丘。
Font Size（文字尺寸）決定了文字的顯示大小趁桃，單位是 Point（也稱作“磅”）
Line Height（行高）決定了文字在多行顯示時(shí)每行文字占據(jù)的空間高度，單位同樣是 Point肄鸽。
調(diào)整這兩個(gè)參數(shù)的大小關(guān)系決定了文字現(xiàn)實(shí)的疏密與重疊
排版模式（Overflow）
Overflow（排版模式） 屬性卫病，決定了文字內(nèi)容增加時(shí)，如何在約束框的范圍內(nèi)排布贴捡。共有NONE忽肛、CLAMP、SHRINK烂斋、RESIZE_HEIGHT 四種模式，而只有在后面三種模式下才能通過編輯器左上角的 矩形變換工具 或者修改 屬性檢查器 中的 Size 大小或者添加 Widget 組件 來調(diào)整約束框的大小础废。
截?cái)啵–lamp） 截?cái)嗄Ｊ较卵绰睿淖质紫劝凑諏R模式和尺寸的要求進(jìn)行渲染，而超出約束框的部分會被隱藏（截?cái)啵?br>
自動(dòng)縮衅老佟（Shrink）自動(dòng)縮小模式下帘瞭，如果文字按照原定尺寸渲染會超出約束框時(shí)，會自動(dòng)縮小文字尺寸以顯示全部文字蒿讥。
自動(dòng)適應(yīng)高度（Resize Height）自動(dòng)適應(yīng)高度模式會保證文字的約束框貼合文字的高度蝶念，不管文字有多少行抛腕。這個(gè)模式非常適合顯示內(nèi)容量不固定的大段文字，配合 ScrollView 組件 可以在任意 UI 區(qū)域中顯示無限量的文字內(nèi)容媒殉。
自動(dòng)換行（Enable Wrap Text）
Label 組件中的 Enable Wrap Text（自動(dòng)換行）屬性担敌，可以切換文字的自動(dòng)換行開關(guān)。在自動(dòng)換行開啟的狀態(tài)下廷蓉，不需要在輸入文字時(shí)手動(dòng)輸入回車或換行符全封，文字也會根據(jù)約束框的寬度自動(dòng)換行。
注意：自動(dòng)換行屬性只有在文字排版模式的截?cái)啵–lamp） 和 自動(dòng)縮刑胰（Shrink） 這兩種模式下才有刹悴。自動(dòng)適應(yīng)高度（Resize Height）模式下，自動(dòng)換行屬性是強(qiáng)制開啟的攒暇。
中文自動(dòng)換行的行為和英文不同土匀，英文是以單詞為單位進(jìn)行換行的，必須有空格才能作為換行調(diào)整的最小單位形用。中文是以字為單位進(jìn)行換行恒削，每個(gè)字都可以單獨(dú)調(diào)整換行。
文字節(jié)點(diǎn)的錨點(diǎn)
文字節(jié)點(diǎn)的錨點(diǎn)和文字在約束框中的對齊模式是需要區(qū)分的兩個(gè)概念尾序。在需要靠文字內(nèi)容將約束框撐大的排版模式中（如Resize Height）钓丰，要正確設(shè)置錨點(diǎn)位置，才能讓約束框向我們期望的方向調(diào)整每币。
如果希望文字約束框向下擴(kuò)展携丁，需要將錨點(diǎn)（Anchor）的 y 屬性設(shè)為 1。
在 Label 組件所在節(jié)點(diǎn)上添加一個(gè) Widget（對齊掛件） 組件兰怠，就可以讓文字節(jié)點(diǎn)相對于父節(jié)點(diǎn)進(jìn)行各式各樣的排版梦鉴。可以使用百分比來進(jìn)行進(jìn)行頁面的分隔揭保，并且顯示出多列布局的文字肥橙。
自動(dòng)布局容器 Layout
Layout（自動(dòng)布局）組件可以掛載在任何節(jié)點(diǎn)上，將節(jié)點(diǎn)變成一個(gè)有自動(dòng)布局功能的容器秸侣。所謂自動(dòng)布局容器存筏，就是能夠自動(dòng)將子節(jié)點(diǎn)按照一定規(guī)律排列，并可以根據(jù)節(jié)點(diǎn)內(nèi)容的約束框總和調(diào)整自身尺寸的容器型節(jié)點(diǎn)味榛。
布局模式（Layout Type）
- 水平布局
Layout Type設(shè)為Horizontal時(shí)椭坚，所有子節(jié)點(diǎn)都會自動(dòng)橫向排列，并根據(jù)子節(jié)點(diǎn)的寬度（Width）總和設(shè)置 Layout 節(jié)點(diǎn)的寬度搏色。上圖中 Layout 包括的兩個(gè) Label 節(jié)點(diǎn)就自動(dòng)被橫向排列善茎。
水平布局模式下，Layout 組件不會干涉節(jié)點(diǎn)在 y 軸上的位置或高度屬性频轿，子節(jié)點(diǎn)甚至可以放置在 Layout 節(jié)點(diǎn)的約束框高度范圍之外垂涯。如果需要子節(jié)點(diǎn)在 y 軸向上對齊烁焙，可以在子節(jié)點(diǎn)上添加 Widget 組件，并開啟 Top 或 Bottom 的對齊模式耕赘。 - 垂直布局
Layout Type設(shè)為Vertical時(shí)骄蝇，所有子節(jié)點(diǎn)都會自動(dòng)縱向排列，并根據(jù)子節(jié)點(diǎn)的高度（Height）總和設(shè)置 Layout 節(jié)點(diǎn)的高度鞠苟。
垂直布局模式下乞榨，Layout 組件也不會修改節(jié)點(diǎn)在 x 軸的位置或?qū)挾葘傩裕庸?jié)點(diǎn)需要添加 Widget 并開啟 Left 或 Right 對齊模式才能規(guī)整的排列当娱。
制作動(dòng)態(tài)生成內(nèi)容的列表的官方例子
UI組件
Canvas（畫布） 組件能夠隨時(shí)獲得設(shè)備屏幕的實(shí)際分辨率并對場景中所有渲染元素進(jìn)行適當(dāng)?shù)目s放吃既。場景中的 Canvas 同時(shí)只能有一個(gè)，建議所有 UI 和可渲染元素都設(shè)置為 Canvas 的子節(jié)點(diǎn)跨细。
Widget (對齊掛件) 是一個(gè)很常用的 UI 布局組件鹦倚。它能使當(dāng)前節(jié)點(diǎn)自動(dòng)對齊到父物體的任意位置，或者約束尺寸冀惭，讓你的游戲可以方便地適配不同的分辨率震叙。
Button 組件可以響應(yīng)用戶的點(diǎn)擊操作，當(dāng)用戶點(diǎn)擊 Button 時(shí)散休，Button 自身會有狀態(tài)變化媒楼。另外，Button 還以讓用戶在完成點(diǎn)擊操作后響應(yīng)一個(gè)自定義的行為戚丸。
Button組件可以通過編輯器添加回調(diào)划址，也可以通過腳本添加
首先需要構(gòu)造一個(gè) cc.Component.EventHandler 對象，然后設(shè)置好對應(yīng)的 target限府、component夺颤、handler 和 customEventData 參數(shù)，然后再通過button.clickEvents.push()方法把這個(gè)EventHandler對象推進(jìn)去胁勺。
// here is your component file, file name = MyComponent.js
cc.Class({
extends: cc.Component,
properties: {},
onLoad: function () {
var clickEventHandler = new cc.Component.EventHandler();
clickEventHandler.target = this.node; // 這個(gè) node 節(jié)點(diǎn)是你的事件處理代碼組件所屬的節(jié)點(diǎn)
clickEventHandler.component = "MyComponent";// 這個(gè)是代碼文件名
clickEventHandler.handler = "callback";
clickEventHandler.customEventData = "foobar";
var button = this.node.getComponent(cc.Button);
button.clickEvents.push(clickEventHandler);
},
callback: function (event, customEventData) {
// 這里 event 是一個(gè) Event 對象世澜，你可以通過 event.target 取到事件的發(fā)送節(jié)點(diǎn)
var node = event.target;
var button = node.getComponent(cc.Button);
// 這里的 customEventData 參數(shù)就等于你之前設(shè)置的 "foobar"
}
});
另外一種更簡單的方式，但局限性在于在事件回調(diào)里面無法 獲得當(dāng)前點(diǎn)擊按鈕的屏幕坐標(biāo)點(diǎn)署穗，并且也無法傳遞按鈕的屏幕坐標(biāo)點(diǎn)寥裂。
this.button.node.on('click', this.callback, this);
Layout 是一種容器組件，容器能夠開啟自動(dòng)布局功能蛇捌，自動(dòng)按照規(guī)范排列所有子物體抚恒，方便用戶制作列表、翻頁等功能络拌。
SafeArea 會將所在節(jié)點(diǎn)的布局適配到 iPhone X 等異形屏手機(jī)的安全區(qū)域內(nèi)，可適配 Android 和 iOS 設(shè)備回溺，通常用于 UI 交互區(qū)域的頂層節(jié)點(diǎn)春贸。
EditBox 是一種文本輸入組件混萝，該組件讓你可以輕松獲取用戶輸入的文本。
Editing Did Began該事件在用戶點(diǎn)擊輸入框獲取焦點(diǎn)的時(shí)候被觸發(fā)萍恕。
Text Changed該事件在用戶每一次輸入文字變化的時(shí)候被觸發(fā)逸嘀。
Editing Did Ended在單行模式下面，一般是在用戶按下回車或者點(diǎn)擊屏幕輸入框以外的地方調(diào)用該函數(shù)允粤。 如果是多行輸入崭倘，一般是在用戶點(diǎn)擊屏幕輸入框以外的地方調(diào)用該函數(shù)。
Editing Return在用戶按下回車鍵或者在移動(dòng)端上點(diǎn)擊軟鍵盤的完成按鈕時(shí)类垫，該事件會被觸發(fā)司光。
如果是單行輸入框，按回車鍵還會使輸入框失去焦點(diǎn)悉患。
同樣可以通過cc.Component.EventHandler 或者是editbox.node.on('editing-did-began', ...)的方式
RichText 組件用來顯示一段帶有不同樣式效果的文字残家，你可以通過一些簡單的 BBCode 標(biāo)簽來設(shè)置文字的樣式。標(biāo)簽與標(biāo)簽是支持嵌套的售躁，且嵌套規(guī)則跟 HTML 是一樣的坞淮。
富文本組件全部由 JS 層實(shí)現(xiàn)，采用底層的 Label 節(jié)點(diǎn)拼裝而成陪捷，并且在上層做排版邏輯回窘。這意味著，你新建一個(gè)復(fù)雜的富文本市袖，底層可能有十幾個(gè) label 節(jié)點(diǎn)啡直，而這些 label 節(jié)點(diǎn)都是采用系統(tǒng)字體渲染的。所以一般情況下凌盯，你不應(yīng)該在游戲的主循環(huán)里面頻繁地修改富文本的文本內(nèi)容付枫，這可能會導(dǎo)致性能比較低。另外驰怎，如果能不使用富文本組件阐滩，就盡量使用普通的文本組件，并且 BMFont 的效率是最高的县忌。
ScrollView 是一種帶滾動(dòng)功能的容器掂榔，它提供一種方式可以在有限的顯示區(qū)域內(nèi)瀏覽更多的內(nèi)容。通常 ScrollView 會與 Mask 組件配合使用症杏，同時(shí)也可以添加 ScrollBar 組件來顯示瀏覽內(nèi)容的位置装获。
ScrollBar 允許用戶通過拖動(dòng)滑塊來滾動(dòng)一張圖片，它與 Slider 組件有點(diǎn)類似厉颤，但是 ScrollBar 主要是用于滾動(dòng)穴豫，而 Slider 則用來設(shè)置數(shù)值。ScrollBar 一般不會單獨(dú)使用，它需要與 ScrollView 配合使用精肃，另外 ScrollBar 需要指定一個(gè) Sprite 組件秤涩，即屬性面板里面的 Handle。通常我們還會給 ScrollBar 指定一張背景圖片司抱，用來指示整個(gè) ScrollBar 的長度或者寬度筐眷。
ProgressBar（進(jìn)度條）經(jīng)常被用于在游戲中顯示某個(gè)操作的進(jìn)度，在節(jié)點(diǎn)上添加 ProgressBar 組件习柠，然后給該組件關(guān)聯(lián)一個(gè) Bar Sprite 就可以在場景中控制 Bar Sprite 來顯示進(jìn)度了匀谣。
Toggle 是一個(gè) CheckBox，當(dāng)它和 ToggleGroup 一起使用的時(shí)候资溃，可以變成 RadioButton武翎。toggle.node.on('toggle', ...)
ToggleContainer 不是一個(gè)可見的 UI 組件，它可以用來修改一組 Toggle 組件的行為肉拓。當(dāng)一組 Toggle 屬于同一個(gè) ToggleContainer 的時(shí)候后频，任何時(shí)候只能有一個(gè) Toggle 處于選中狀態(tài)。ToggleContainer 一般不會單獨(dú)使用暖途，它需要與 Toggle 配合使用來實(shí)現(xiàn) RadioButton 的單選效果卑惜。
Slider 是一個(gè)滑動(dòng)器組件。slider.node.on('slide', ...)
PageView 是一種頁面視圖容器 pageView.node.on('page-turning', ...) 添加回調(diào)
PageviewIndicator 用于顯示 PageView 當(dāng)前的頁面數(shù)量和標(biāo)記當(dāng)前所在的頁面驻售。
BlockInputEvents 組件將攔截所屬節(jié)點(diǎn) bounding box 內(nèi)的所有輸入事件（鼠標(biāo)和觸摸）露久，防止輸入穿透到下層節(jié)點(diǎn)，一般用于上層 UI 的背景欺栗。
