針對行動裝置應用程式和遊戲引擎建立 Sprite 工作表或紋理地圖集,並且匯出您的動畫。使用插件,將紋理地圖集匯入 Unity 或任何您喜愛的遊戲引擎。

概觀

Animate CC 可讓您建立 Sprite 工作表或紋理地圖集動畫,並將其匯出用於行動裝置應用程式和遊戲引擎。 

Sprite 工作表

Sprite 工作表是一種點陣圖影像檔案,其中包含數個以並排格線方式排列的較小圖像。透過將數個圖像編譯成單一檔案,Animate 和其他應用程式只需載入單一檔案就能使用圖像。在如遊戲開發等效能尤其重要的情況中,這種載入效率會很有用。

Sprite 工作表
Sprite 工作表,包含逐格動畫中的 Sprite。

建立 Sprite 工作表時,您可以選取影片片段、按鈕元件、圖像元件或點陣圖的任何組合。您可以在「元件庫」面板或「舞台」中選取項目,但不能同時在兩者選取項目。每個點陣圖和選取元件的每個影格會以個別圖像的形式出現在 Sprite 工作表中。如果從「舞台」匯出,影像輸出會保留您曾經套用至元件實體的任何變形 (例如縮放、傾斜等)。

紋理地圖集

紋理地圖集是在單一大型影像上顯示各種紋理的集合。您可以建立紋理地圖集並用於您的遊戲應用程式中,藉此使您的遊戲最佳化。 

在 Animate 中,您可以從影片片段、圖像或按鈕等元件建立紋理地圖集。您可以在「元件庫」面板或「舞台」中選取項目,但不能同時在兩者選取項目。每個向量和選取元件的每個關鍵影格會以個別點陣圖的形式出現在紋理地圖集中。如果從「舞台」匯出,影像輸出會保留您曾經套用至元件實體的任何變形 (例如縮放、傾斜等)。

Sprite 工作表和紋理地圖集的差異

您可以根據需求,在行動裝置應用程式中使用 Sprite 工作表或紋理地圖集。下表說明 Sprite 工作表和紋理地圖集之間部分重要差異。 

特色 Sprite 工作表 紋理地圖集
行動裝置應用程式中的效能
載入應用程式的效率 高,因為未經過運算 低,因為經過 JSON 檔案運算
大小 佔用較多空間 佔用較少空間
動畫品質
產生的檔案數目 兩個檔案:一個點陣圖,一個 json 三個檔案:一個點陣圖,兩個 json 檔案
產生的點陣圖數目 根據 Sprite 工作表中使用的影格數目,也會增加點陣圖檔案的數目,因而增加 Sprite 工作表大小 Sprite 工作表中只產生唯一的點陣圖,因而減少總計大小。

建立 Sprite 工作表

若要建立 Sprite 工作表,請執行下列步驟:

  1. 選取「元件庫」中的一個或多個元件,或選取「舞台」上的元件實體。選取範圍也可以包含點陣圖。

  2. 以滑鼠右鍵按一下選取範圍並選擇「產生 Sprite 工作表」。

    generate-spritesheet
  3. 在「產生 Sprite 工作表」對話方塊中,選取所需的選項,然後按一下「匯出」。

    匯出選項 說明
    影像尺寸 Sprite 工作表的總計大小,以像素為單位。預設設定是「自動調整大小」,此設定會調整工作表的大小,以符合您加入的所有 Sprite。
    影像格式 所匯出 Sprite 工作表的檔案格式。PNG 8 位元和 PNG 32 位元都支援使用透明背景 (Alpha 色版)。PNG 24 位元和 JPG 不支援透明背景。一般來說,PNG 8 位元和 PNG 32 位元之間的視覺差異不大。PNG 32 位元檔案是 8 位元 PNG 位元檔案的四倍大。
    邊框距離 Sprite 工作表邊框周圍的邊框距離,以像素為單位。
    形狀距離 Sprite 工作表內每個影像之間的邊框距離,以像素為單位。
    演算法

    將影像封裝至 Sprite 工作表時所使用的技術。共有兩個選項:

    • 基本 (預設)
    • MaxRects
    資料格式 影像資料所使用的內部格式。選擇匯出後最符合您對 Sprite 工作表工作流程所預期的格式。
    旋轉 將 Sprite 旋轉 90 度。這個選項僅適用於某些資料格式。
    修剪 這個選項會針對每個加入工作表的元件影格修剪未使用的像素,藉此節省 Sprite 工作表的空間。
    堆疊影格 選取這個選項可避免在產生的 Sprite 工作表中複製選取元件內重複的影格。

匯出適用於行動裝置應用程式的 Sprite 工作表動畫

匯出適用於行動裝置應用程式的 Sprite 工作表動畫
Train Simple - Matthew Pizzi

建立紋理地圖集

遊戲開發人員可以使用 Animate 來協調動畫,並以紋理地圖集形式將動畫匯出至 Unity 遊戲引擎或任何其他喜愛的遊戲平台。 

下列圖表說明在 Animate 產生紋理地圖集及匯入 Unity 的程序:

flow-diagram-Texture-Atlas
產生紋理地圖集及將其匯入 Unity 的工作流程圖解。

若要產生動畫的紋理地圖集,請執行下列步驟:

  1. 在 Animate 中,您可以為「元件庫」中選取的元件或舞台上的元件實體產生紋理地圖集。 

  2. 以滑鼠右鍵按一下元件並從功能表中選取「產生紋理地圖集」。「產生紋理地圖集」視窗隨即出現。

    generate-texture-atlas (2)
    產生紋理地圖集
  3. 為紋理地圖集選擇適當的匯出選項。 

    匯出選項 說明
    影像尺寸 紋理地圖集的總計大小,以像素為單位。預設設定是「自動調整大小」,此設定會調整工作表的大小,以符合您加入的所有影像。
    影像格式 所匯出 Sprite 工作表的檔案格式。PNG 8 位元和 PNG 32 位元都支援使用透明背景 (Alpha 色版)。一般來說,PNG 8 位元和 PNG 32 位元之間的視覺差異不大。PNG 32 位元檔案是 8 位元 PNG 位元檔案的四倍大。
    邊框距離 紋理地圖集周圍的邊框距離,以像素為單位。
    形狀距離 紋理地圖集內每個影像之間的距離,以像素為單位。
    演算法

    將影像封裝至紋理地圖集時所使用的技術。共有兩個選項:

    • 基本 (預設)
    • MaxRects
    資料格式 影像資料所使用的內部格式。預設值為 JSON 格式。
    旋轉 將影像旋轉 90°。這個選項僅適用於某些資料格式。
    將傾斜的物件平面化為點陣圖 如果您要對物件使用傾斜的變形,請選取這個選項。Animate 會將這些物件轉換成點陣圖影像,因為有些遊戲引擎無法適當地解譯傾斜變形。 
  4. 若要預覽紋理地圖集輸出,請按一下「預覽」索引標籤。

    texture-atlas-preview
    預覽建立後的紋理地圖集
  5. 按一下「瀏覽」並為輸出檔案選擇您電腦中的目標路徑,或者在文字區域中輸入路徑,然後按一下「匯出」。

為紋理地圖集產生的輸出資料夾包含下列檔案:

Animation.json

這個檔案包含動畫的相關資訊。 

spritemap.json

這個檔案包含 spritesheet.png 檔案的相關資訊。

spritemap.png

對於匯出的元件,這個檔案包含重新建構動畫所需之所有最小獨特紋理的點陣圖代表。

運用適當的匯入程式插件,您可以在任何遊戲引擎 (例如 Unity) 使用產生的紋理地圖集。

將紋理地圖集匯入 Unity

您可以將 Animate 產生的紋理地圖集檔案匯入到您喜愛的遊戲引擎。若要匯入紋理地圖集檔案,您可以建立對應至您遊戲引擎的插件。有個適用於 Unity 工具的範例匯入插件可供使用。 

執行下列步驟,將紋理地圖集匯入 Unity:

  1. 在 Unity 中,在任何特定位置建立專案。這個位置中會建立資料夾,其中含有 Assets 子資料夾。

  2. 在「資產」資料夾下建立兩個名為「資源」和「編輯器」的子資料夾。

  3. 按一下這裡以下載適用於 Unity 的範例匯入插件。從「Downloads」(下載) 索引標籤選擇 Unity Plugin,以及選擇要下載的對應版本。

    unity-plugin.zip 內含 Plugin.csWrapperPlugin.cs AnimateEditor.csEffect.shader 檔案。

    下載範例表示您同意使用條款和線上隱私權政策

  4. 將紋理地圖集檔案 (例如,Animation.json、spritemap.json、spritemap.png),以及 unity 插件檔案 (例如,Plugin.cs 和 Effect.shader) 移到「資產 > 資源」。

  5. AnimateEditor.csWrapperPlugin.cs 檔案移到「資產」資料夾。

  6. 在 Unity 中,按一下 AnimateEditor.cs 檔案並拖曳 「Main Camera」(主要攝影機)。

  7. 播放。播放您的專案,將 sprite 地圖分割成不同的 sprite。

  8. AnimateEditor.cs 移到「編輯器」。

  9. 在 Unity 中,按一下 WrapperPlugin.cs 檔案並拖曳到「Main Camera」(主要攝影機)。此外,從「Main Camera」(主要攝影機) 取消選取或移除 AnimateEditor.cs

  10. 根據您的需求播放或發佈輸出。 

您甚至可以將 WrapperPlugin.cs 檔案修改成符合您的需求,以自訂插件。

Unity 插件支援 Animate 產生的紋理地圖集檔案顏色效果。而且,這個插件支援圖層間的遮色片。遮色片功能僅適用於 Unity 2017 之後的版本。 

紋理發佈

身為動畫人員,您可以繼續以向量格式編寫內容,然後匯出為適用於 HTML 5 平台的向量或點陣格式。「發佈設定」中已增加可將動畫匯出為紋理地圖集的選項,以增強動畫的效能。

按一下「檔案 > 發佈設定」。如果已啟用「基本」索引標籤中的「將文件匯出為紋理」,則「影像設定」索引標籤會顯示「紋理發佈」選項。根據預設,所有元件都會包含在「紋理發佈」中。若要選擇性地選擇紋理的元件,請按一下旁邊的設定圖示。

雖然這個選項可能會增加資源的大小,但是可提升效能。此外,您也可以針對 HiDPI 顯示器,以影像原始解析度的 2 倍和 3 倍來提高影像的解析度。若要變更解析度設定,請按一下「將文件匯出為紋理」選項旁邊的螺絲扳手圖示,如下面的螢幕擷取畫面所示。拖曳「解析度」旁邊的數字,以取得 2 倍和 3 倍的倍數。

根據預設,紋理發佈設定為 2 倍解析度,而解析度可變更的範圍為 0.3 – 3 倍。

註解:

紋理發佈僅適用於 HTML5 Canvas 文件類型。 

將文件匯出為紋理
將文件匯出為紋理

選擇向量或點陣檔案就像在檔案大小和效能之間做選擇。HTML5 平台已針對點陣內容最佳化。因此,就某些複雜的形狀而言,預先將向量影像轉換為點陣,效果更好。對於某些基本內容,您還是可以使用向量內容。Animate 會透過部分元件選取範圍對話方塊,為您提供這個選項。部分元件選取範圍可讓您選擇應轉換為點陣的元件,同時將其餘元件保留為向量。

若要開啟部分元件選取範圍,請按一下「發佈設定」對話方塊中的「變更」,並從清單選取元件。根據預設,所有元件都是選取狀態。

變更部分元件選取範圍
變更部分元件選取範圍

從清單選取您所選的元件。 

部分元件選取範圍
部分元件選取範圍

關於紋理發佈的教學課程

關於紋理發佈的教學課程
了解如何使用向量編寫您的資源,以求彈性和保真度,然後發佈為點陣圖紋理。

此産品由 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License 授權  Creative Commons 條款未涵蓋 Twitter™ 與 Facebook 文章。

法律說明   |   線上隱私權政策