精靈

精靈是 PixiJS 中最簡單且最常見的可渲染物件。它們代表要顯示在螢幕上的單一影像。每個 精靈 都包含要繪製的 紋理，以及在場景圖形中運作所需的所有轉換和顯示狀態。

建立精靈

要建立精靈，您只需要一個紋理（查看紋理指南）。使用 Assets 類別載入 PNG 的 URL，然後呼叫 Sprite.from(url)，這樣就大功告成了。不同於 v7，您現在必須在使用紋理之前先載入，這是為了確保最佳做法。

查看 精靈範例程式碼。

使用精靈

在我們的 容器指南 內，我們瞭解 Container 類別和它定義的各種屬性。由於 Sprite 物件也是容器，您可以移動精靈、旋轉精靈，並更新任何其他顯示屬性。

Alpha、Tint 和混合模式

Alpha 是標準的顯示物件屬性。您可以透過在一段時間內讓每個精靈的 Alpha 從 0.0 動畫到 1.0，來使其漸入場景。

色調允許您使用單一顏色來乘上每個畫素的顏色值。例如，如果您有一個地下城遊戲，您可能會透過設定 obj.tint = 0x00FF00 來顯示角色的中毒狀態，這會讓角色呈現綠色色調。

混合模式會改變在渲染時畫素顏色新增至畫面中的方式。三個主要模式為**加法**，會將每個畫素的 RGB 通道新增到精靈下方存在的任何事物（適用於發光和光照），**反白**如同 色調 但以每個畫素為基礎，以及**螢幕**，會將畫素疊加，照亮它們下方存在的任何事物。

縮放相對於寬度和高度

在使用精靈時，一個常見的混淆領域在於縮放和尺寸。容器類別讓你可以為任何物件設定 x 和 y 的縮放。精靈是容器，也支援縮放。然而，精靈還支援明確的 width 和 height 屬性，可以使用它們來達成相同的成效，但這不是使用百分比，而是像素。這種做法能運作，是因為精靈物件持有具有明確寬度和高度的紋理。當你設定精靈的寬度時，PixiJS 會在內部將其轉換為底層紋理寬度的百分比，並更新物件的 x-scale。因此，width 和 height 實際上只是基於像素尺寸而非百分比來變更比例的方便方法。

錨點 vs. 定點

如果你將精靈加入舞台並旋轉它，它會以預設在影像的左上角旋轉。在某些情況下，你會想要這樣做。然而，在許多情況下，你想要精靈圍繞它所包含的影像的中心，或圍繞一個任意點旋轉。

有兩種方法可以達成此目的：錨點和定點。

一個物件的定點是一個從精靈的左上角開始的偏移，以像素為單位。它的預設為 (0, 0)。如果您有一個紋理為 100px x 50px 的精靈，並且想將定點設定在影像的中心，您會將定點設定為 (50, 25) - 一半的寬度，以及一半的高度。請注意，定點可以設定在影像的外側，這表示定點可能是小於零或大於寬度/高度。舉例來說，這在設定複雜的動畫層級架構時可能會有用。每個容器都有定點。

錨點，相較之下，只供精靈使用。錨點以百分比指定，從 0.0 到 1.0，在每個維度上。要使用錨點旋轉圍繞紋理中心，您會將精靈的錨點設定為 (0.5, 0.5) - 寬度和高度的 50%。雖然較不常見，錨點也可以超出標準的 0.0 - 1.0 範圍。

錨點美妙之處在於它們不依賴於解析度和尺寸。如果你將精靈設定為錨點在中間，然後再變更紋理的大小，你的物件將會正確旋轉。如果你使用基於像素的計算來設定定點，變更紋理大小便需要變更你的定點。

因此，一般來說，你會想要使用錨點來處理精靈。

最後一個備註：與 CSS 不同，設定影像的轉換起源不會移動它，在 PixiJS 中設定錨點或定點會移動螢幕上的物件。換句話說，設定錨點或定點不只會影響旋轉起源，也會影響精靈相對於它父項的位置。