CocosCreator黃金礦工資源工程檔案

愛分享的小佳發表於2020-12-26

檔案:n459.com/file/25127180-477367889

以下內容無關:

-------------------------------------------分割線---------------------------------------------

資源工作流程
新增資源
資源管理器 提供了三種在專案中新增資源的方式:

通過 建立按鈕 新增資源
在作業系統的檔案管理器中,將資原始檔複製到專案資原始檔夾下,之後再開啟或啟用 Cocos Creator 視窗,完成資源匯入。
從作業系統的檔案管理器中(比如 Windows 的檔案資源管理器或 Mac 的 Finder),拖拽資原始檔到 資源管理器 皮膚來匯入資源
從外部匯入資源
從作業系統中的其他視窗拖拽檔案到 Cocos Creator 視窗中的 資源管理器 皮膚上,就能夠從外部匯入資源。該操作會自動複製資原始檔到專案資原始檔夾下,並完成匯入操作。

匯入和同步資源
資源管理器 中的資源和作業系統的檔案管理器中看到的專案資原始檔夾是同步的,在 資源管理器 中對資源的移動、重新命名和刪除,都會直接在使用者的檔案系統中對資原始檔進行同步修改。同樣的,在檔案系統中(如 Windows 上的 Explorer 或 Mac 上的 Finder)對新增或刪除資源,再次開啟或啟用 Cocos Creator 程式後,也會對 資源管理器 中的資源進行更新。

管理資源配置檔案(.meta)
所有 assets 路徑下的資源都會在匯入時生成一份 資源配置檔案(.meta) 這份配置檔案提供了該資源在專案中的唯一標識(uuid)以及其他的一些配置資訊(如圖集中的小圖引用,貼圖資源的裁剪資料等),非常重要。

在編輯器中管理資源時,meta 檔案是不可見的,對資源的任意刪除、改名、移動操作,都會由編輯器自動同步相應的 meta 檔案,確保 uuid 的引用不會丟失和錯亂。

注意在編輯器外部的檔案系統中(Explorer,Finder)對資原始檔進行刪除、改名、移動時必須同步處理相應的 meta 檔案。資原始檔和其對應的 meta 檔案應該保持在同一個目錄下,而且檔名相同。

處理無法匹配的資源配置檔案(.meta)
如果您在編輯器外部的檔案系統(Explorer,Finder等)中進行了資原始檔的移動或重新命名,而沒有同步移動或重新命名 meta 檔案時,會導致編輯器將改名或移動的資源當做新的資源匯入,可能會出現場景和元件中對該資源(包括指令碼)的引用丟失。

在編輯器發現有未同步的資源配置檔案時,會彈窗警告使用者,並列出所有不匹配的 meta 檔案。

這時無法正確匹配的資源配置檔案會從專案資源路徑(asset)中移除,並自動備份到 temp 路徑下。

如果您希望恢復這些資源的引用,請將備份的 meta 檔案複製到已經移動過的資原始檔同一路徑下,並保證資原始檔和 meta 檔案的檔名相同。注意編輯器在處理資源改名和移動時會生成新的 meta 檔案,這些新生成的 meta 檔案可以在恢復備份的 meta 後安全刪除。

跨專案匯入匯出資源
除了匯入基礎資源外,從 1.5 版本開始編輯器支援將一個專案中的資源和其依賴完整的匯出到另一個專案,詳情請閱讀 匯入匯出資源工作流程。

匯入其他編輯器專案
現在可以在 Cocos Creator 中匯入其他編輯器的專案。具體的說明請參考:匯入其他編輯器專案

常見資源工作流程
接下來我們會介紹 Cocos Creator 中主要資源型別和相關工作流程:

場景資源
影像資源
圖集資源(Atlas)
自動圖集資源(Auto Atlas)
影像資源的自動剪裁

預製資源(Prefab)

指令碼資源

字型資源
粒子資源
聲音資源
骨骼動畫資源(Spine)
瓦片圖資源(TiledMap)
骨骼動畫資源(DragonBones)
建立和管理場景
建立場景
方法一:選擇主選單:檔案/新建場景

方法二:在 資源管理器 中點選建立選單,建立新場景。

儲存場景
方法一:使用快捷鍵 Ctrl + S (Windows) 或 Command + S (Mac)

方法二:選擇主選單:檔案/儲存場景

切換場景
在 資源管理器 中,雙擊需要開啟的場景。

修改場景資源自動釋放策略
如果專案中的場景很多,隨著新場景的切換,記憶體佔用就會不斷上升。除了使用 cc.loader.release 等 API 來精確釋放不使用的資源,我們還可以使用場景的自動釋放功能。要配置自動釋放,可以在 資源管理器 中選中所需場景,然後在 屬性檢查器 中設定“自動釋放資源”選項,該項預設關閉。
從當前場景切換到下一個場景時,如果當前場景不自動釋放資源,則該場景中直接或間接引用到的所有資源(指令碼動態載入的不算),預設都不主動釋放。反之如果啟用了自動釋放,則這些引用到的資源預設都會自動釋放。

已知問題:粒子系統的 plist 所引用的貼圖不會被自動釋放。如果要自動釋放粒子貼圖,請從 plist 中移除貼圖資訊,改用粒子元件的 Texture 屬性來指定貼圖。

防止特定資源被自動釋放
啟用了某個場景的資源自動釋放後,如果在指令碼中儲存了對該場景的資源的“特殊引用”,則當場景切換後,由於資源已經被釋放,這些引用可能會變成非法的,有可能引起渲染異常等問題。為了讓這部分資源在場景切換時不被釋放,我們可以使用 cc.loader.setAutoRelease 或者 cc.loader.setAutoReleaseRecursively 來保留這些資源。

“特殊引用”指的是以全域性變數、單例、閉包、“特殊元件”、“動態資源”等形式進行的引用。“特殊元件”是指通過 cc.game.addPersistRootNode 方法設定的常駐節點及其子節點上的元件,並且這些元件中包含以字串 URL 或 UUID,或者以除了陣列和字典外的其它容器去儲存的資源引用。“動態資源”指的是在指令碼中動態建立或動態修改的資源。這些資源如果還引用到場景中的其它資源,則就算動態資源本身不應該釋放,其它資源預設還是會被場景自動釋放。

以上關於場景資源自動釋放部分的內容可以歸納為下圖中的幾種情況:

修改場景載入策略
在 資源管理器 中,選中指定場景,可以在 屬性檢查器 中看到“延遲載入資源”選項,該項預設關閉。

不延遲載入資源
載入場景時,如果這個選項關閉,則這個場景直接或間接遞迴依賴的所有資源都將被載入,全部載入完成後才會觸發場景切換。

延遲載入依賴的資源
載入場景時,如果選項開啟,則這個場景直接或間接依賴的所有貼圖、粒子和聲音都將被延遲到場景切換後才載入,使場景切換速度極大提升。
同時,玩家進入場景後可能會看到一些資源陸續顯示出來,並且啟用新介面時也可能會看到介面中的元素陸續顯示出來,因此這種載入方式更適合網頁遊戲。
使用這種載入方式後,為了能在場景中更快地顯示需要的資源,建議一開始就讓場景中暫時不需要顯示的渲染元件(如 Sprite)保持非啟用狀態。

Spine 和 TiledMap 依賴的資源永遠都不會被延遲載入。

影像資源(Texture)
影像資源又經常被稱作貼圖、圖片,是遊戲中絕大部分影像渲染的資料來源。影像資源一般由影像處理軟體(比如 Photoshop,Windows 上自帶的畫圖)製作而成並輸出成 Cocos Creator 可以使用的檔案格式,目前包括 JPG 和 PNG 兩種。

匯入影像資源
使用預設的資源匯入方式就可以將影像資源匯入到專案中,之後我們就可以在 資源管理器 中看到如下圖所示的影像資源。

影像資源在 資源管理器 中會以自身圖片的縮圖作為圖示。在 資源管理器 中選中影像資源後,屬性檢查器 下方會顯示該圖片的縮圖。目前影像資源的屬性設定功能還沒有完善,請不要在 屬性檢查器 手動修改影像資源的屬性設定。

Texture 和 SpriteFrame 資源型別
在 資源管理器 中,影像資源的左邊會顯示一個和資料夾類似的三角圖示,點選就可以展開看到它的子資源(sub asset),每個影像資源匯入後編輯器會自動在它下面建立同名的 SpriteFrame 資源。

SpriteFrame 是核心渲染元件 Sprite 所使用的資源,設定或替換 Sprite 元件中的 spriteFrame 屬性,就可以切換顯示的影像。Sprite 元件的設定方式請參考Sprite 元件參考。

為什麼會有 SpriteFrame 這種資源?這樣的設定是因為除了每個檔案產生一個 SpriteFrame 的影像資源(Texture)之外,我們還有包含多個 SpriteFrame 的圖集資源(Atlas)型別。參考圖集資源(Atlas)文件來了解更多資訊。

下面是 Texture 和 SpriteFrame 的 API 介面文件:

Texture 資源型別
SpriteFrame 資源型別
使用 SpriteFrame
直接將 SpriteFrame 或影像資源從 資源管理器 中拖拽到 層級管理器 或 場景編輯器 中,就可以直接用所選的影像在場景中建立 Sprite 節點。

之後可以拖拽其他的 SpriteFrame 或影像資源到該 Sprite 元件的 Sprite Frame 屬性欄中,來切換該 Sprite 顯示的影像。

在 動畫編輯器 中也可以拖拽 SpriteFrame 資源到已建立好的 Sprite Frame 動畫軌道上,詳見編輯序列幀動畫文件。

效能優化注意事項
使用單獨存在的 Texture 作為 Sprite 資源,在預覽和釋出遊戲時,將無法對這些 Sprite 進行批量渲染優化的操作。目前編輯器不支援轉換原有的單張 Texture 引用到 Atlas 裡的 SpriteFrame 引用,所以在開發正式專案時,應該儘早把需要使用的圖片合成 Atlas(圖集),並通過 Atlas 裡的 SpriteFrame 引用使用。詳情請繼續閱讀下一篇。

預製資源(Prefab)
建立預製
在場景中編輯好節點後,直接將節點從 層級管理器 拖到 資源管理器:

即可建立出一個預製:

儲存預製
在場景中修改了預製例項後,在 屬性檢查器 中直接點選 儲存,即可儲存對應的預製資源:

還原預製
在場景中修改了預製例項後,在 屬性檢查器 中直接點選 回退,即可將預製物件還原為資源中的狀態:

自動同步和手動同步
每個場景中的預製例項都可以選擇要自動同步和還是手動同步。
設為手動同步時,當預製對應的原始資源被修改後,場景中的預製例項不會同步重新整理,只有在使用者手動還原預製時才會重新整理。
設為自動同步時,該預製例項會自動和原始資源保持同步。

圖中的圖示表示當前預製的同步方式,點選圖示將會在兩種模式之間切換:

上面的圖示表示當前預製使用手動同步,點選圖示會切換到自動同步:

注意,為了保持引擎的精簡,自動同步的預製例項有如下限制:

為了便於對各場景例項進行單獨定製,場景中的預製根節點自身的 name、active、position 和 rotation 屬性不會被自動同步。而其它子節點和所有元件都必須和原始資源保持同步,如果發生修改,編輯器會詢問是要撤銷修改還是要更新原始資源。
自動同步的預製中的元件無法引用該預製外的其它物件,否則編輯器會彈出提示。
自動同步的預製外面的元件只能引用該預製的根節點,無法引用元件和子節點,否則編輯器會彈出提示。
這些限制都僅影響編輯器操作,執行時不影響。

將預製還原成普通節點
從 資源管理器 中刪除一個預製資源後,你可以將場景中對應的預製例項還原成普通節點。方法是選中預製例項,然後點選選單 節點 > 還原成普通節點。

預置的選項
在 資源管理器 中,選中任一預置資源,可以在 屬性檢查器 中編輯以下選項。

設定“優化策略”
在 v1.8.0 中加入了“優化策略”選項,能優化所選預置的例項化時間,也就是執行 cc.instantiate 所需的時間。可設定的值有:

自動調整(預設):
設為這個選項後,引擎將根據建立次數自動調整優化策略。初次建立例項時,等同於“優化單次建立效能”,多次建立後將自動“優化多次建立效能”。
優化單次建立效能:
該選項會跳過針對這個 prefab 的程式碼生成優化操作。
優化多次建立效能:
該選項會啟用針對這個 prefab 的程式碼生成優化操作。
如果這個預置需要反覆執行 cc.instantiate,請選擇“優化多次建立效能”,否則保持預設的“自動調整”即可。

在舊版本引擎中,優化方式固定為“優化多次建立效能”,在需要批量建立物件的場合中效果拔群。但是有不少人將 prefab 作為多人協作或者分步載入的工具,這些 prefab 基本只會例項化一次,就會導致節點建立速度變慢。新版本預設採用“自動調整”以後,很好的解決了這個問題。

設定“延遲載入資源”
該項預設關閉。勾選之後,使用 屬性檢查器 關聯、loadRes 等方式單獨載入預置資源時,將會延遲載入預置所依賴的其它資源,提升部分頁遊的載入速度。詳情請參考場景的延遲載入。

圖集資源(Atlas)
圖集(Atlas)也稱作 Sprite Sheet,是遊戲開發中常見的一種美術資源。圖集是通過專門的工具將多張圖片合併成一張大圖,並通過 plist 等格式的檔案索引的資源。可供 Cocos Creator 使用的圖集資源由 plist 和 png 檔案組成。下面就是一張圖集使用的圖片檔案:

為什麼要使用圖集資源
在遊戲中使用多張圖片合成的圖集作為美術資源,有以下優勢:

合成圖集時會去除每張圖片周圍的空白區域,加上可以在整體上實施各種優化演算法,合成圖集後可以大大減少遊戲包體和記憶體佔用
多個 Sprite 如果渲染的是來自同一張圖集的圖片時,這些 Sprite 可以使用同一個渲染批次來處理,大大減少 CPU 的運算時間,提高執行效率。
更形象生動的解釋可以觀看來自 CodeAndWeb 的教學視訊What is a Sprite Sheet(什麼是圖集)。

製作圖集資源
要生成圖集,首先您應該準備好一組原始圖片:

接下來可以使用專門的軟體生成圖集,我們推薦的圖集製作軟體包括:

TexturePacker
Zwoptex
使用這些軟體生成圖集時請選擇 cocos2d-x 格式的 plist 檔案。最終得到的圖集檔案是同名的 plist 和 png。

匯入圖集資源
將上面所示的 plist 和 png 檔案同時拖拽到 資源管理器 中,就可以生成可以在編輯器和指令碼中使用的圖集資源了。

Atlas 和 SpriteFrame
在影像資源文件中,我們介紹了 Texture 和 SpriteFrame 的關係。匯入圖集資源後,我們可以看到型別為 Atlas 的圖集資源可以點選左邊的三角圖示展開,展開後可以看到圖集資源裡包含了很多型別為 SpriteFrame 的子資源,每個子資源都是可以單獨使用和引用的圖片。

接下來對於 Sprite Frame 的使用方法就和影像資源中介紹的一樣了,請查閱相關文件。

碎圖轉圖集
在專案原型階段或生產初期,美術資源的內容和結構變化都會比較頻繁,我們通常會直接使用碎圖(也就是多個單獨的圖片)來搭建場景和製作 UI。在之後為了優化效能和節約包體,需要將碎圖合併成圖集。Creator 提供了自動圖集功能,可以在釋出專案時無縫地將生產階段的碎圖合併成圖集,並且自動更新資源索引。請檢視 自動圖集資源 獲取詳細用法。

自動圖集資源 (Auto Atlas)
自動圖集資源 作為 Cocos Creator 自帶的合圖功能,可以將指定的一系列碎圖打包成一張大圖,具體作用和 Texture Packer 的功能很相近。

建立自動圖集資源
在 資源管理器 中右鍵,可以在如下選單中找到 新建 -> 自動圖集配置 的子選單,點選選單將會新建一個類似 AutoAtlas.pac 的資源。

自動圖集資源 將會以當前資料夾下的所有 SpriteFrame 作為碎圖資源,以後會增加其他的選擇碎圖資源的方式。 如果碎圖資源 SpriteFrame 有進行配置過,在打包後重新生成的 SpriteFrame 將會保留這些配置。

配置自動圖集資源
在資源管理器中選中一個 自動圖集資源 後,屬性檢查器 皮膚將會顯示 自動圖集資源 的所有可配置項。

屬性

功能說明

最大寬度

單張圖集最大寬度

最大高度

單張圖集最大高度

間距

圖集中碎圖之間的間距

允許旋轉

是否允許旋轉碎圖

輸出大小為正方形

是否強制將圖集長寬大小設定成正方形

輸出大小為二次冪

是否將圖集長寬大小設定為二次方倍數

演算法

圖集打包策略, 可選的策略有 [BestShortSideFit, BestLongSideFit, BestAreaFit, BottomLeftRule, ContactPointRule]

輸出格式

圖集圖片生成格式,可選的格式有 [png, jpg, webp]

擴邊

在碎圖的邊框為擴充套件出一畫素外框,並複製相鄰碎影像素到外框中

不包含未被引用資源

在預覽中,此選項不會生效,構建後此選項才會生效

配置完成後可以點選 預覽 按鈕來預覽打包的結果,按照當前自動圖集配置生成的相關結果將會展示在 屬性檢查器 下面的區域。 需要注意的是每次配置過後,需要重新點選 預覽 才會重新生成預覽資訊。

結果分為:

Packed Textures, 顯示打包後的圖集圖片以及圖片相關的資訊,如果會生成的圖片有多張,則會往下在 屬性檢查器 中列出來。
Unpacked Textures,顯示不能打包進圖集的碎圖資源,造成的原因有可能是這些碎圖資源的大小比圖集資源的大小還大導致的,這時候可能需要調整下圖集的配置或者碎圖的大小了。
生成圖集
預覽專案或者在 Cocos Creator 中使用碎圖的時候都是直接使用的碎圖資源,在 構建專案 這一步才會真正生成圖集到專案中。 生成的大圖將會放在 構建目錄 下的 res/raw-assets 相對於專案中 assets 目錄結構下的對應的目錄中,以 AutoAtlas-xx.png 結構命名。 生成專案後可以到對應的目錄下檢查對應的圖集資源是否生成成功了。

藝術數字資源 (LabelAtlas)
藝術數字資源 是一種使用者自定義的資源,它可以用來配置藝術數字字型的屬性。

建立藝術數字資源
在 資源管理器 中右鍵,可以在如下選單中找到 新建 -> 藝術數字配置 的子選單,點選選單將會新建一個類似 LabelAtlas.labelatlas 的資源。

藝術數字資源 在使用之前需要進行一些配置,比如關聯渲染的圖片資源,設定每一個字元的寬高和起始字元資訊。

配置藝術數字資源
在資源管理器中選中一個 藝術數字資源 後,屬性檢查器 皮膚將會顯示 藝術數字資源 的所有可配置項。

屬性

功能說明

Raw Texture File

指定渲染圖片

Item Width

指定每一個字元的寬度

Item Height

指定每一個字元的高度

Start Char

指定藝術數字字型裡面的第一個字元,如果字元是 Space,也需要在這個屬性裡面輸入空格字元

配置完成後需要點選 屬性檢查器 右上角的綠色的打勾按鈕來儲存設定。

使用藝術數字資源
使用藝術數字資源非常簡單,你只需要新建一個 Label 元件,然後把新建好的藝術數字資源拖到 Label 元件的 Font 屬性即可。

資源匯入匯出工作流程
Cocos Creator 是專注於內容創作的遊戲開發工具,在遊戲開發過程中,對於每個專案該專案專用的程式架構和功能以外,我們還會生產大量的場景、角色、動畫和 UI 控制元件等相對獨立的元素。對於一個開發團隊來說,很多情況下這些內容元素都是可以在一定程度上重複利用的。

在以場景和 Prefab 為內容組織核心的模式下,1.5版本的 Cocos Creator 內建了場景(.fire)和預製(.prefab)資源的匯出和匯入工具。

資源匯出
在主選單選擇 「檔案->匯出資源」,即可開啟資源匯出工具皮膚,接下來可以用以下兩種方式選擇需要匯出的資源:

將場景或預製檔案從 資源管理器 中拖拽到匯出資源皮膚的資源欄中
點選資源欄右邊的「選擇」按鈕,開啟檔案選擇對話方塊,並在專案中選取你要匯出的資源
可以選擇的資源包括 .fire 場景檔案和 .prefab 預製檔案。

確認依賴
匯出工具會自動檢查所選資源的依賴列表並列出在皮膚裡,使用者可以手動檢查每一項依賴是否必要,並剔除部分依賴的資源。被剔除的資源將不會被匯出。

確認完畢後點選 匯出 按鈕,會彈出檔案儲存對話方塊,使用者需要指定一個資料夾位置和檔名,點選 儲存,就會生成 檔名.zip 的壓縮包檔案,包含匯出的全部資源。

資源匯入
有了匯出的資源包,就可以在新專案中匯入這些現成的資源了,在新專案的主選單裡選擇 「檔案->匯入資源」,即可開啟資源匯入皮膚。

點選 Zip 檔案路徑 輸入框右邊的 選擇 按鈕,在檔案瀏覽對話方塊中選擇剛才匯出的匯出資源壓縮包。

匯入過程中也會讓使用者再次確認匯入資源依賴,在這時候也可以取消某些資源的勾選來不匯入部分資源。

設定匯入位置
相比匯出過程,匯入過程中增加了 匯入目標路徑 的設定,使用者可以點選旁邊的 選擇 按鈕,選擇一個專案 assets 路徑下的某個資料夾作為匯入資源的放置位置。由於匯出資源時所有資源的路徑都是以相對於 assets 路徑來儲存的,匯入時如果不希望匯入的資源放入 assets 根目錄下,就可以再指定一層中間目錄來隔離不同來源的匯入資源。

設定完成後點選 匯入 按鈕,會彈出確認對話方塊,確認後就會把列出的資源匯入到目標路徑下。

指令碼和資源衝突
由於 Creator 專案中的指令碼不能同名,當匯入的資源包含和當前專案裡指令碼同名的指令碼時,將不會匯入同名的指令碼。如果出現匯入資源的 UUID 和專案中現有資源 UUID 衝突的情況,會自動為匯入資源生成新的 UUID,並更新在其他資源裡的引用。

工作流應用
有了全新的資源匯入/匯出功能,我們可以進一步根據專案和團隊需要擴充套件工作流,比如:

程式和美術分別使用不同的專案進行開發,美術開發好的 UI、角色、動畫可以通過匯出資源的方式引入到程式負責的主專案中。避免衝突並進一步加強許可權管理。
一個專案開發完成後,可以將可重用的資源匯出並匯入到一個公共資源庫中,在公共資源庫專案裡對該資源進行優化整理後,可以隨時再匯出到其他專案,大大節約開發成本。
將一個較為完整的功能做成場景或預製,並上傳資源包到擴充套件商店,方便社群直接取用。
在此基礎上還可以發展出更多樣化的工作流程,開發團隊可以發揮想象力,並使用擴充套件外掛系統進一步定製匯入匯出的資料和行為,滿足更復雜的需要。

影像資源的自動剪裁
匯入影像資源後生成的 SpriteFrame 會進行自動剪裁,去除原始圖片周圍的透明畫素區域。這樣我們在使用 SpriteFrame 渲染 Sprite 時,將會獲得有效影像更精確的大小。

Sprite 元件剪裁相關設定詳解
和圖片裁剪相關的 Sprite 元件設定有以下兩個:

Trim 勾選後將在渲染 Sprite 影像時去除影像周圍的透明畫素,我們將看到剛好能把影像包裹住的約束框。取消勾選,Sprite 節點的約束框會包括透明畫素的部分。
Size Mode 用來將節點的尺寸設定為原圖或原圖裁剪透明畫素後的大小,通常用於在序列幀動畫中保證影像顯示為正確的尺寸。有以下幾種選擇:
TRIMMED 選擇這個選項,會將節點的尺寸(size)設定為原始圖片裁剪掉透明畫素後的大小。
RAW 選擇這個,會將節點尺寸設定為原始圖片包括透明畫素的大小。
CUSTOM 自定義尺寸,使用者在使用 矩形變換工具 拖拽改變節點的尺寸,或通過修改 Size 屬性,或在指令碼中修改 width 或 height 後,都會自動將 Size Mode 設為 CUSTOM。表示使用者將自己決定節點的尺寸,而不需要考慮原始圖片的大小。
下圖中展示了兩種常見組合的渲染效果:

自帶位置資訊的序列幀動畫
有很多動畫師在繪製序列幀動畫時,會使用一張較大的畫布,然後將角色在動畫中的運動直接通過角色在畫布上的位置變化表現出來。在使用這種素材時,我們需要將 Sprite 元件 的 Trim 設為 false,將 Size Mode 設為 RAW。這樣動畫在播放每個序列幀時,都將使用原始圖片的尺寸,並保留影像周圍透明畫素的資訊,這樣才能正確顯示繪製在動畫中的角色位移。

而 Trim 設為 true,則是在位移完全由角色位置屬性控制的動畫中,更推薦使用的方式。

TexturePacker 設定
在製作序列幀動畫時,我們通常會使用TexturePacker這樣的工具將序列幀打包成圖集,並在匯入後通過圖集資源下的 SpriteFrame 來使用。在 TexturePacker 中輸出圖集資源時,Sprites 分類下的 Trim mode 請選擇 Trim,一定不要選擇 Crop, flush position,否則透明畫素剪裁資訊會丟失,您在使用圖集裡的資源時也就無法獲得原始圖片未剪裁的尺寸和偏移資訊了。

字型資源
使用 Cocos Creator 製作的遊戲中可以使用三類字型資源:系統字型,動態字型和點陣圖字型。

其中系統字型是通過呼叫遊戲執行平臺自帶的系統字型來渲染文字,不需要使用者在專案中新增任何相關資源。要使用系統字型,請使用Label元件中的 Use System Font 屬性。

匯入字型資源
動態字型
目前 Cocos Creator 支援 TTF 格式的動態字型。只要將副檔名為 TTF 的字型檔案拖拽到 資源管理器 中,即可完成字型資源的匯入。

點陣圖字型
點陣圖字型由 fnt 格式的字型檔案和一張 png 圖片組成,fnt 檔案提供了對每一個字元小圖的索引。這種格式的字型可以由專門的軟體生成,請參考點陣圖字型制作工具。

在匯入點陣圖字型時,請務必將 fnt 檔案和 png 檔案同時拖拽到 資源管理器 中。

匯入後的字型在 資源管理器 中顯示如下:

注意 為了提高資源管理效率,建議將匯入的 fnt 和 png 檔案存放在單獨的目錄下,不要和其他資源混在一起。

使用字型資源
字型資源需要通過 Label 元件來渲染,下面是在場景中建立帶有 Label 元件的節點的方法。

使用選單建立 Label(字型)節點
在 層級管理器 中點選左上角的 建立節點 按鈕,並選擇 建立渲染節點/Label(文字),就會在場景中建立出一個帶有 Label 元件的節點。

您也可以通過主選單的 節點/建立渲染節點/Label(文字) 來完成建立,效果和上面的方法一樣。

關聯字型資源
使用上面方法建立的字型元件預設使用系統字型作為關聯的資源,如果想要使用匯入到專案中的 TTF 或點陣圖字型,可以將您的字型資源拖拽到建立的 Label 元件中的 File 屬性欄中。

這時場景中的字型會立刻用剛才指定的字型資源進行渲染。您也可以根據專案需要,自由的切換同一個 Label 元件的 File 屬性,來使用 TTF 或點陣圖字型。切換字型檔案時,Label 元件的其他屬性不受影響。

如果要恢復使用系統字型,可以點選 Use System Font 的屬性核取方塊,來清除 File 屬性中指定的字型檔案。

拖拽建立 Label(字型)節點
另外一種快捷使用指定資源建立字型節點的方法,是直接從 資源管理器 中拖拽字型檔案(TTF 或點陣圖字型都可以)到 層級管理器 中。和上面用選單建立的唯一區別,是使用拖拽方式建立的文位元組點會自動使用拖拽的字型資源來設定 Label 元件的 File 屬性。

點陣圖字型合併渲染
如果點陣圖字型使用的貼圖和其他 Sprite 使用的貼圖是同一張,而且點陣圖字型和 Sprite 之間沒有插入使用其他貼圖的渲染物件時,點陣圖字型就可以和 Sprite 合併渲染批次。在放置點陣圖字型資源時,請把 .fnt 檔案、.png 檔案和 Sprite 所使用的貼圖檔案放在一個資料夾下,然後參考 自動圖集工作流程 將點陣圖字型的貼圖和 Sprite 使用的貼圖打包成一個圖集,即可在原生和 WebGL 渲染環境下自動享受點陣圖字型合併渲染的效能提升。

相關文章