渲染調(diào)試（Rendering Debug View）

經(jīng)常做3D項(xiàng)目的朋友應(yīng)該時(shí)常面臨一些檢查陰影區(qū)域，檢查UV，檢查法線，檢查高光等操作。

Cocos Creator 3.6 版本中新增了這個(gè)特性，如下圖所示：

我們拉近看：

目前這個(gè)特性支持的列表如下：

公共信息：

• 基礎(chǔ)顏色光照（Lighting With Base Color）

• 級(jí)聯(lián)陰影染色（CSM Layer Coloration）

原始模型信息：

• 頂點(diǎn)顏色（Vertex Colors）

• 世界位置、法線、切線（World Posistions,Normals,Tangents）

• 前向面顏色（Front Face Coloration）

• 一套UV，二套UV，光照貼圖UV（UV0,UV1,Light Map UV）

• 透視深度（Projection Depth Z）

• 線性深度（Linear Depth W）

原始材質(zhì)數(shù)據(jù)：

• 世界空間像素法線、切線、副法線

• 基礎(chǔ)顏色、漫反射顏色、高光顏色

• 透明度、金屬度、粗糙度、高光強(qiáng)度

除此之外，還有一些光照結(jié)果數(shù)據(jù)、霧化因子等選項(xiàng)，就不一一列舉了，看下圖：

部分效果截圖：

3D模型預(yù)覽增強(qiáng)

Cocos Creator 3.6 增強(qiáng)了3D模型的預(yù)覽效果，到目前為止，Cocos Creator 的資源管理器、資源預(yù)覽窗口、Mesh選擇窗口均支持 3D 模型預(yù)覽，在選擇模型的時(shí)候終于不用猜了。

美中不足的是，材質(zhì)預(yù)覽依然還是下面這樣子。

目前版本中，如果想要查看材質(zhì)效果，只能先在資源管理器窗口中選中材質(zhì)，在屬性檢查器面板中查看。

希望在后面的版本中可以像 3D 模型預(yù)覽一樣，在編輯器各個(gè)材質(zhì)文件展示的地方實(shí)現(xiàn)材質(zhì)預(yù)覽效果。

可視化多語(yǔ)言編輯器

隨著越來(lái)越多的開(kāi)發(fā)者出海，多語(yǔ)言版本游戲的需求與日俱增。 特別是從今年開(kāi)始，麒麟子收到的關(guān)于 i18n 的反饋就明顯增多。

直接使用 i18n 的問(wèn)題在于，開(kāi)發(fā)者需要自己設(shè)定多語(yǔ)言策略，策略一但有缺陷，就無(wú)法完全交由策劃或者內(nèi)容翻譯團(tuán)隊(duì)來(lái)做。

對(duì)于一個(gè)團(tuán)隊(duì)來(lái)說(shuō)，可能需要從頭到尾做兩個(gè)項(xiàng)目，才能積累出較為豐富的多語(yǔ)言版本經(jīng)驗(yàn)。

沒(méi)想到 Cocos Creator 3.6 竟然內(nèi)置了一個(gè)可視化的多語(yǔ)言編輯器，按照引擎組的說(shuō)法，它有以下幾個(gè)優(yōu)點(diǎn)：

• 全程無(wú)代碼操作：只需點(diǎn)點(diǎn)點(diǎn)即可完成全部流程操作，以后翻譯的活可以轉(zhuǎn)交給策劃、商務(wù)或者渠道等，減輕技術(shù)大大們的工作壓力

• 所見(jiàn)即所得：可以隨時(shí)預(yù)覽，也可以各種語(yǔ)言之間來(lái)回切換

• 自動(dòng)翻譯：可以接入外部翻譯軟件，點(diǎn)一點(diǎn)即可自動(dòng)翻譯

• 高度自動(dòng)化：例如，全自動(dòng)一鍵掃描所需翻譯內(nèi)容、自動(dòng)翻譯、快速構(gòu)建、智能匹配文件等等

可從?面板->本地化編輯器?菜單打開(kāi)多語(yǔ)言面板，如下所示：

不要被看似復(fù)雜的界面嚇到了，界面上大部分內(nèi)容都是自動(dòng)填充的。

只需要簡(jiǎn)單的三步，就能夠完成一個(gè)項(xiàng)目的多語(yǔ)言配置：

• 收集內(nèi)容：通過(guò)自動(dòng)化掃描方式獲取所需翻譯的文本、ts代碼、scene、prefab、video、audio、image文件

• 翻譯內(nèi)容：通過(guò)人工翻譯或者外部軟件自動(dòng)化翻譯工具將內(nèi)容進(jìn)行翻譯

• 構(gòu)建發(fā)布：通過(guò)構(gòu)建發(fā)布功能將指定的語(yǔ)言進(jìn)行打包

眼尖的朋友應(yīng)該發(fā)現(xiàn)了，他還有一個(gè)自動(dòng)翻譯服務(wù)，想要了解更多操作，請(qǐng)參考官方論壇：3.6 | Localization Editor 公測(cè)帖

動(dòng)畫(huà)編輯器增強(qiáng)

請(qǐng)看上面動(dòng)圖的特效部分，它由一個(gè)刀光和一個(gè)爆炸特效組成。當(dāng)角色的揮砍動(dòng)作播到某一幀的時(shí)候，刀光特效開(kāi)始播放。當(dāng)揮砍動(dòng)作播放到打擊幀的時(shí)候，會(huì)出現(xiàn)一個(gè)爆炸特效。

想要高效的在編輯器中制作出這類動(dòng)作與特效完美吻合的效果，我們至少需要?jiǎng)赢?huà)編輯器的兩個(gè)功能：

• 1、允許動(dòng)作觸發(fā)特效或者其他動(dòng)畫(huà)

• 2、實(shí)時(shí)預(yù)覽，所見(jiàn)即所得，便于微調(diào)

Cocos Creator 3.6的動(dòng)畫(huà)編輯器，新增了動(dòng)畫(huà)觸發(fā)軌道的功能，在觸發(fā)軌道上可以播放一個(gè)或者多個(gè)其他現(xiàn)存動(dòng)畫(huà)的功能，并且能夠控制其時(shí)長(zhǎng)。

此功能可以使特效師在制作動(dòng)畫(huà)的時(shí)候，通過(guò)組合的方式實(shí)現(xiàn)更復(fù)雜的效果，并且能實(shí)時(shí)預(yù)覽。這將大大提高了特效師的工作效率。

特效師們，趕緊行動(dòng)起來(lái)！

3D模型導(dǎo)入器優(yōu)化

幾乎每一次的版本更新都會(huì)對(duì)模型導(dǎo)入器進(jìn)行增強(qiáng)，在 Cocos Creator 3.5.1 的時(shí)候就已支持智能材質(zhì)導(dǎo)入，如下圖所示：

截止目前，支持的?DCC?材質(zhì)如下表：

下圖為?Maya?中的材質(zhì)自動(dòng)導(dǎo)入?Cocos?后的效果對(duì)比，可以看得出來(lái)，已非常接近：

在 3.6 版本中，導(dǎo)入器再次強(qiáng)化，主要更新如下：

• 1.新增 GLTF specualr-glossiness 支持

• 2.新增 Blender principled bsdf 材質(zhì)的 specular 通道支持

• 3.新增?mixamo.com?4?模型材質(zhì)導(dǎo)入支持

• 4.增強(qiáng) fbx surface phong 默認(rèn)材質(zhì)導(dǎo)入效果

• 5.模型拆分由默認(rèn)開(kāi)啟變?yōu)槟J(rèn)禁用

材質(zhì)效果提升是基本操作，就不過(guò)多討論，麒麟子主要想說(shuō)一下第?3?點(diǎn)?mixamo 材質(zhì)支持和第?5?點(diǎn)模型拆分默認(rèn)禁用。

mixamo.com?4

mixamo 是 Adobe 的一個(gè)可以為人體模型智能綁定骨骼并使用動(dòng)畫(huà)的軟件，它同時(shí)還提供了許多人物模型和常見(jiàn)動(dòng)作庫(kù)，可免費(fèi)使用。如下圖所示：

但 mixamo 導(dǎo)出的模型在導(dǎo)入 Cocos Creator 時(shí)，材質(zhì)呈現(xiàn)差異較大，因此在 Cocos Creator 3.6 中做了修正。

很多朋友說(shuō)不知道哪里找?guī)?dòng)畫(huà)的測(cè)試模型，mixamo 是一個(gè)不錯(cuò)的地方。

模型拆分默認(rèn)禁用

由于 Uniform 的限制，當(dāng)骨骼數(shù)量超過(guò)一定值后，無(wú)法一次性提交給顯卡渲染，此時(shí)就需要做特殊處理。

常見(jiàn)的處理方法有兩種：

• 拆分模型和骨骼，分批提交

• 使用紋理傳輸骨骼動(dòng)畫(huà)數(shù)據(jù)

在 Cocos Creator 3.6 版本之前，模型拆分功能默認(rèn)是開(kāi)啟的。

默認(rèn)開(kāi)啟的原因是，簡(jiǎn)單來(lái)說(shuō)就是：當(dāng)模型骨骼未超出 Uniform 限制時(shí)，直接使用 Uniform 傳遞骨骼動(dòng)畫(huà)數(shù)據(jù)的方式的性能會(huì)高于使用紋理傳輸骨骼動(dòng)畫(huà)數(shù)據(jù)。

引擎組大佬對(duì)這個(gè)情況的描述是：對(duì)于 CPU 版本的骨骼動(dòng)畫(huà)，使用的是 Uniform 進(jìn)行骨骼數(shù)據(jù)傳遞，由于不同設(shè)備和圖形驅(qū)動(dòng)的 Uniform 上限不同，所以我們使用了最低限制的 iPhone6 WebGL 作為 Uniform 上限，確保沒(méi)問(wèn)題。如果模型的骨骼數(shù)量超出限制（大概是 26-30 個(gè)），就會(huì)進(jìn)行模型拆分，拆分為不同的 sub model，相當(dāng)于是不同 draw call，這樣每個(gè) draw call 的 Uniform 都不會(huì)超限。

許多朋友反饋說(shuō)自己的一個(gè)人物模型會(huì)占用多個(gè) DrawCall，主要原因就是這里被自動(dòng)拆分了，但開(kāi)發(fā)者并不知道。

那為什么3.6版本不需要拆分了呢？

3.6 版本中，對(duì)于非 GPU 版本，做了運(yùn)行時(shí)動(dòng)態(tài)的 Uniform 限制判斷，只要滿足條件就會(huì)使用 Uniform 傳遞，如果不滿足就退化為 FloatTexture 或 RGBA Texture 來(lái)傳遞。

基本規(guī)則如下：

• 默認(rèn)情況下不再拆分模型，不對(duì)導(dǎo)入的模型數(shù)據(jù)做修改

• 如果骨骼數(shù)量未超過(guò)限制，直接使用 Uniform 傳遞

• 如果骨骼數(shù)量超過(guò)限制，則使用紋理傳遞

使用紋理傳遞骨骼動(dòng)畫(huà)數(shù)據(jù)的方式需要在頂點(diǎn)著色器中訪問(wèn)紋理，這一特性最低支持為?OpenGL ES 3.0,?WebGL 2.0。

但依靠?GL?擴(kuò)展，在僅支持?OpenGL ES 2.0?和?WebGL 1.0?設(shè)備上，幾乎已達(dá)到 100% 的覆蓋率，所以無(wú)需擔(dān)心兼容問(wèn)題。

目前保留此選項(xiàng)應(yīng)該只是為了保持舊項(xiàng)目的兼容性，在適當(dāng)?shù)臅r(shí)候會(huì)考慮移除。

場(chǎng)景編輯功能增強(qiáng)

對(duì)于某些 3D 游戲來(lái)說(shuō)，場(chǎng)景的制作效率往往決定了項(xiàng)目進(jìn)度。

在場(chǎng)景編輯工作中，模型的擺放和模型位置的調(diào)節(jié)往往占了90%的工作量。Cocos Creator 3.6 提供了以下三個(gè)提升場(chǎng)景編輯效率的功能：

表面吸附

表面吸附主要用來(lái)在一定范圍內(nèi)的物體表面移動(dòng)，使物件可以精確的擺放在物體表面。

注：對(duì)于有碰撞體組件的物體，表面吸附會(huì)吸附在碰撞體表面，而對(duì)于沒(méi)有碰撞體的物體，表面吸附會(huì)吸附在物體表面。如下所示：

操作流程如下：

• 選中需要挪動(dòng)的目標(biāo)物體

• 按下快捷鍵（Ctrl/Command + Shift），gizmo出現(xiàn)拖動(dòng)ICON

• 移動(dòng)鼠標(biāo)時(shí)，可以切換錨點(diǎn)到待移動(dòng)的頂點(diǎn)

• 鼠標(biāo)左鍵點(diǎn)擊拖動(dòng)ICON，移動(dòng)

• 移動(dòng)時(shí)工具會(huì)自動(dòng)檢測(cè)里光標(biāo)附近的帶有碰撞體積的物體，如果沒(méi)有，則吸附在表面

• 移動(dòng)完成后松開(kāi)鼠標(biāo)左鍵確認(rèn)位置

頂點(diǎn)吸附

頂點(diǎn)吸附的主要作用是更精準(zhǔn)的通過(guò)一個(gè)物體上的頂點(diǎn)，與另一物體的某頂點(diǎn)對(duì)齊。

操作流程如下：

• 選中需要挪動(dòng)的目標(biāo)物體

• 按住v鍵，gizmo出現(xiàn)拖動(dòng)ICON

• 移動(dòng)鼠標(biāo)時(shí)，可以切換錨點(diǎn)到待移動(dòng)的頂點(diǎn)

• 左鍵點(diǎn)擊錨點(diǎn)，移動(dòng)鼠標(biāo)

• 工具會(huì)根據(jù)根據(jù)光標(biāo)位置，計(jì)算出當(dāng)前待吸附的目標(biāo)，并在目標(biāo)各頂點(diǎn)間移動(dòng)注意：只能吸附在有頂點(diǎn)的位置

• 移動(dòng)完成后松開(kāi)鼠標(biāo)左鍵確認(rèn)位置

多對(duì)象框選

多對(duì)象選擇是場(chǎng)景編輯中頻率很高的操作方式，但在沒(méi)有多對(duì)象框選之前，如果我們要選擇多個(gè)對(duì)象，需要精確知道對(duì)象節(jié)點(diǎn)，再通過(guò)復(fù)選節(jié)點(diǎn)的方式進(jìn)行多選操作，很不直觀。

有了多對(duì)象框選功能后，場(chǎng)景編輯更加靈活方便了，用戶無(wú)需在層級(jí)管理器中尋找需要被多選的對(duì)象節(jié)點(diǎn)，全部覆蓋在選擇框中的對(duì)象會(huì)被選中，未全部覆蓋的對(duì)象不會(huì)被選中。

操作流程如下所示：

小結(jié)一下

八年前（目前是2022年），在經(jīng)歷了 4 款 3D 引擎和 5 個(gè) 3D 游戲項(xiàng)目的毒打后，麒麟子有感而發(fā)，寫(xiě)了一篇文章叫《游戲引擎不僅是代碼，更多的是完善的工具》，當(dāng)時(shí)想表達(dá)的心情就是：生產(chǎn)效率是衡量一個(gè)引擎是否優(yōu)秀的主要指標(biāo)，不管是易用性、穩(wěn)定性還是兼容性，最終都會(huì)折算到生產(chǎn)效率上。

Cocos Creator 從立項(xiàng)之初，就以提升生產(chǎn)效率為主要目標(biāo)，這也是麒麟子第一眼就愛(ài)上Cocos Creator，認(rèn)為值得長(zhǎng)期投入精力的原因。

一路走來(lái)，從 Cocos Creator 最近的更新表現(xiàn)來(lái)看，麒麟子很慶幸自己入坑得早。但入坑晚的朋友也不要糾結(jié)，過(guò)去已經(jīng)是過(guò)去，目前你擁有的最早入坑時(shí)間就是現(xiàn)在，想要就趕緊行動(dòng)吧。

期待許久的內(nèi)置預(yù)覽、渲染調(diào)試和3D模型預(yù)覽增強(qiáng)等特性別提有多甜了，開(kāi)發(fā)、調(diào)試效率直線上升。

可視化多語(yǔ)言編輯器和動(dòng)畫(huà)編輯器增強(qiáng)算是驚喜吧，在游戲出海和美術(shù)工具提升方面又邁出了一大步。

模型拆分功能默認(rèn)禁用雖然只是一個(gè)很小的細(xì)節(jié)，但卻能解決大多數(shù)項(xiàng)目問(wèn)題，希望以后這樣的小優(yōu)化越多越好。

由于篇幅有限，麒麟子不能將所有編輯器相關(guān)的優(yōu)化都一一展示，更多內(nèi)容就得靠朋友們自行挖掘啦。

下一篇文章麒麟子將重點(diǎn)介紹 3.6 版本中關(guān)于渲染相關(guān)的內(nèi)容，敬請(qǐng)期待！