不同 api shee 整理 圖像處理 復制 manual nim tiledmap

--摘自官方文檔

資源工作流程

添加資源

資源管理器 提供了三種在項目中添加資源的方式：

• 通過 創建按鈕 添加資源
• 在操作系統的文件管理器中，將資源文件復制到項目資源文件夾下，之後再打開或激活 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 渲染環境下自動享受位圖字體合並渲染的性能提升。

詳情請參考 BMFont 與 UI 合圖自動批處理。

CocosCreator資源工作流程