紋理

我們會逐步由淺入深地探討。我們已經談論過場景圖形，以及通常存在其中的顯示物件，接著會討論精靈和其他簡單的顯示物件。不過，在那之前，我們需要先討論紋理。

在 PixiJS 中，紋理是顯示物件用來的一項核心資源。廣義而言，紋理指的是一種畫素來源，可以用來填滿螢幕上的區域。最簡單的範例就是精靈，一種完全由單一紋理填滿的矩形。不過，事情的複雜度可是會高出許多。

紋理生命週期

讓我們透過追蹤圖像資料在傳送至螢幕過程中的路徑，檢視紋理的實際運作方式。

以下是我們要遵循的流程：原始圖像 > 載入器 > 基本紋理 > 紋理

提供圖像

首先，你需要有想要顯示的圖像。第一步是讓圖像可以在你的伺服器上使用。這看起來可能很明顯，但如果你從其他遊戲開發系統轉換到 PixiJS，就必須記得所有內容都必須透過網路載入。如果你在本地開發，請注意你必須使用網路伺服器進行測試，否則你的圖像載入不了，因為瀏覽器的處理方式是基於本機檔案安全性。

載入圖像

要使用圖像，第一步是將圖像檔案從你的網路伺服器拉到使用者的網頁瀏覽器。為此，我們可以使用 Assets.load('myTexture.png')。Assets 會封裝並處理告知瀏覽器擷取圖像、轉換圖像，然後在完成後通知你。這個程序是非同步的，你可以要求載入，然後過一段時間就會完成一個提示，通知你載入已完成。我們會在後面的指南中更深入地介紹載入器。

const texture = await Assets.load('myTexture.png');

// pass a texture explicitly
const sprite = new Sprite(texture);
// as options
const sprite2 = new Sprite({texture});
// from the cache as the texture is loaded
const sprite3 = Sprite.from('myTexture.png')

TextureSources 擁有資料

TextureSource 類別。每個 TextureSource 會管理一個單一像素來源 - 通常為影像，但也可以是 Canvas 或 Video 元素。TextureSource 允許 PixiJS 將影像轉換成畫素，並在渲染中使用這些畫素。此外，它還包含控制紋理資料如何渲染的設定，例如包覆模式（用於處理 UV 座標超出 0.0-1.0 範圍的情況）和縮放模式（用於縮放紋理時）。

TextureSource 會自動快取，因此重複針對相同 URL 呼叫 Texture.from() 每一次都會傳回相同的 TextureSource。刪除 TextureSource 將會釋放與之相關聯的影像資料。

紋理是 BaseTexture 上的檢視

最後，我們終於來到 Texture 類別本身！在這個時候，您可能會想知道 Texture 物件執行的動作是什麼。畢竟，BaseTexture 會管理像素和渲染設定。而答案是，它不會執行太多動作。紋理是底層 BaseTexture 上的輕量級檢視。其主要屬性是在 TextureSource 中可以用來取用的來源矩形。

如果 PixiJS 繪製的只是精靈，那會相當多餘。但請考慮 精靈表。精靈表是一個單一包含許多精靈影像並被排列在內部的影像。在 Spritesheet 物件中，一個 TextureSource 會由一組紋理參照，針對原始精靈表中的每個來源影像各一個。透過共用一個 TextureSource，瀏覽器只會下載一個檔案，而且我們的批次處理渲染器可以在繪製精靈時高速運行，因為它們都共用相同的底層像素資料。精靈表的紋理會取用每個精靈所需的像素矩形。

這就是為什麼我們同時擁有紋理和 TextureSource - 允許精靈表、動畫、按鈕狀態等載入為一個單一影像，同時只顯示母體影像中需要的部分。

載入紋理

我們將在後續指南中探討資源載入，但許多新手在建置 PixiJS 專案時面臨最常見的問題之一，是如何最佳載入紋理。

以下是一個不錯解決方案的快速秘訣

1. 顯示載入影像
2. 使用 資源 確保所有紋理已載入
3. 視需要使用進度回呼更新載入影像
4. 在載入器完成時，執行所有物件並使用 Texture.from() 從紋理快取中取出載入的紋理
5. 準備紋理（選用 - 詳見下文）
6. 隱藏載入影像，開始渲染場景圖

使用這個工作流程可以確保預先載入紋理，以防止影像突然出現，而且編碼相對簡單。

關於準備紋理：即使載入紋理後，仍需要將影像推送到 GPU 並解碼。對大量來源影像執行此動作可能會很耗時，並在專案初次載入時造成延遲高峰。為了解決此問題，可以使用 準備 外掛程式，它允許您在顯示專案前的最後一個步驟預先載入紋理。

卸載紋理

完成使用材質後，您可能會希望釋放它所使用的記憶體（WebGL 管理的緩衝區和基於瀏覽器的緩衝區）。為此，您應該在擁有資料的 BasicTexture 上呼叫 destroy()。請記住，材質不管理像素資料！

對於像過場動畫一樣的短暫影像，這是一個特別好的主意，它很大且只會使用一次。如果已透過 Assets 載入的材質已損毀，則資產類別會自動替您從快取中移除它。

除了影像以外

如上所述，您可以製作的材質不僅限於影像

影片：傳遞 HTML5 <VIDEO> 元素給 TextureSource.from()，讓您可以在專案中顯示影片。由於它是材質，因此您可以為它上色、新增濾鏡，甚至將其應用於自訂幾何。

畫布：同樣地，您可以將 HTML5 <CANVAS> 元素包覆在 BaseTexture 中，讓您可以使用畫布的繪製方法動態建立材質。

SVG：傳入 <SVG> 元素或載入 .svg URL，PixiJS 會嘗試將其光柵化。對於高度網路受限的專案，這可以用於建立具有最少網路載入時間的精緻圖形。

渲染材質：更進階（但非常強大！）的功能是從 渲染材質 建立材質。這可以使用 幾何 物件建立複雜的幾何，然後將該幾何烘焙成簡單的材質。

這些材質來源中的每一個都有我們無法在本指南中介紹到的注意事項和細微差別，但它們應該讓您了解 PixiJS 材質系統的強大功能。

查看 渲染材質範例程式碼。