匯出適用於行動裝置應用程式和遊戲引擎的動畫

搜尋

上次更新時間 2023年5月24日

Animate

開啟應用程式

Adobe Animate 使用手冊

Animate 簡介

動畫

互動

工作區和工作流程

多媒體和視訊

平台

匯出與發佈

疑難排解

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

概觀

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

Sprite 工作表

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

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

紋理地圖集

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

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

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

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

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

建立 Sprite 工作表

若要建立 Sprite 工作表，請執行下列步驟：

選取「元件庫」中的一個或多個元件，或選取「舞台」上的元件實體。選取範圍也可以包含點陣圖。
以滑鼠右鍵按一下選取範圍並選擇「產生 Sprite 工作表」。

在「產生 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 工作表中複製選取元件內重複的影格。

將動畫匯出至行動應用程式或遊戲引擎

Animate 可協助您將動畫匯出至遊戲平台和行動應用程式。想要在您的行動電話或遊戲引擎上檢視動畫嗎？請觀賞此範例結尾的教學課程並依照下列步驟執行。

在「元件庫」中，以滑鼠右鍵按一下影片片段。
選取「產生 Sprite 工作表」。
在「Sprite 工作表」對話方塊中，選取必要的選項。
按一下「匯出」。

如何匯出動畫，以供行動應用程式或遊戲引擎使用

請觀賞影片，了解匯出動畫的其他選項。

建立紋理地圖集

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

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

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

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

在 Animate 中，您可以為「元件庫」中選取的元件或舞台上的元件實體產生紋理地圖集。
以滑鼠右鍵按一下元件並從功能表中選取「產生紋理地圖集」。「產生紋理地圖集」視窗隨即出現。

產生紋理地圖集

為紋理地圖集選擇適當的匯出選項。

匯出選項	說明
影像尺寸	紋理地圖集的總計大小，以像素為單位。預設設定是「自動調整大小」，此設定會調整工作表的大小，以符合您加入的所有影像。
最佳化尺寸	核取「最佳化尺寸」選項時，會從點陣圖中刪除空白像素，而且尺寸不會是 2 次方 (預設選項)。這適用於產生的所有點陣圖。取消核取「最佳化尺寸」選項時，會根據選擇的尺寸產生點陣圖。
影像格式	所匯出 Sprite 工作表的檔案格式。PNG 8 位元和 PNG 32 位元都支援使用透明背景 (Alpha 色版)。一般來說，PNG 8 位元和 PNG 32 位元之間的視覺差異不大。PNG 32 位元檔案是 8 位元 PNG 位元檔案的四倍大。
解析度	選擇 0.3-3.0 之間的任何數值
邊框距離	紋理地圖集周圍的邊框距離，以像素為單位。
形狀距離	紋理地圖集內每個影像之間的距離，以像素為單位。
演算法	將影像封裝至紋理地圖集時所使用的技術。共有兩個選項：基本 MaxRects (預設)
資料格式	影像資料所使用的內部格式。預設值為 JSON 格式。
旋轉	將影像旋轉 90°。這個選項僅適用於某些資料格式。
將傾斜的物件平面化為點陣圖	如果您要對物件使用傾斜的變形，請選取這個選項。Animate 會將這些物件轉換成點陣圖影像，因為有些遊戲引擎無法適當地解譯傾斜變形。
最佳化 Animation.json 檔案	核取「最佳化 animation.json 檔案」選項後，此選項會刪除縮排、分解矩陣並縮短使用的名稱 (預設選項)。取消核取「最佳化 animation.json 檔案」選項時，此選項會以有意義的名稱匯出縮排。

您可以選擇根據尺寸將元件匯出為多個點陣圖。

為多個點陣圖產生紋理地圖集

如果資產超過選擇的圖像尺寸大小，會出現警告。
若要預覽紋理地圖集輸出，請按一下「預覽」索引標籤。

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

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

Animation.json

這個檔案包含動畫的相關資訊。預設會最佳化並合併 Animation.json 檔案中的相同影格。

spritemap.json

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

spritemap.png

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

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

將紋理地圖集匯入 Unity

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

執行下列步驟，將紋理地圖集匯入 Unity：

在 Unity 中，在任何特定位置建立專案。這個位置中會建立資料夾，其中含有 Assets 子資料夾。
在「資產」資料夾下建立兩個名為「資源」和「編輯器」的子資料夾。
按一下這裡以下載適用於 Unity 的範例匯入插件。從「Downloads」(下載) 索引標籤選擇 Unity Plugin，以及選擇要下載的對應版本。

unity-plugin.zip 內含 Plugin.cs、WrapperPlugin.cs、 AnimateEditor.cs 和 Effect.shader 檔案。

下載範例表示您同意使用條款和線上隱私權政策。
將紋理地圖集檔案 (例如，Animation.json、spritemap.json、spritemap.png)，以及 unity 插件檔案 (例如，Plugin.cs 和 Effect.shader) 移到「資產 > 資源」。
將 AnimateEditor.cs 和 WrapperPlugin.cs 檔案移到「資產」資料夾。
在 Unity 中，按一下 AnimateEditor.cs 檔案並拖曳「Main Camera」(主要攝影機)。
播放。播放您的專案，將 sprite 地圖分割成不同的 sprite。
將 AnimateEditor.cs 移到「編輯器」。
在 Unity 中，按一下 WrapperPlugin.cs 檔案並拖曳到「Main Camera」(主要攝影機)。此外，從「Main Camera」(主要攝影機) 取消選取或移除 AnimateEditor.cs。
根據您的需求播放或發佈輸出。

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

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

紋理發佈

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

1. 建立畫布文件。選取「檔案 > 新增」，以顯示「新增文件」視窗。

2. 選取「進階」標籤並按一下「HTML5 Canvas」。新的 FLA 文件隨即開啟。

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

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

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

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

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

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

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

透過點陣圖紋理改善圖形效能

在 Animate 中，點陣圖紋理可改善不同平台中的動畫效能。想要利用點陣圖紋理減少向量的複雜度嗎？請觀賞此範例結尾的教學課程並依照下列步驟執行。

在「屬性」檢測器面板中，按一下「發佈設定」。
在「基本」索引標籤中，選取「將文件匯出為紋理」旁邊的扳手圖示。
在「影像設定」索引標籤中，按一下「變更」並選取您要的元件。
按一下「確定」。

如果將您的資產發佈為點陣圖紋理，以改善效能

請觀賞影片，了解具有點陣圖紋理的動畫如何執行。

更快、更輕鬆地獲得協助

新的使用者？