跳過前往主要內容
版本：v8.x

入門

在本節中，我們將建立最簡單的 PixiJS 應用程式。在這樣做的過程中，我們將說明如何建立和服務程式碼的基礎知識。

進階使用者​

開始前先快速說明一下：本指南的對象是經驗較少的 PixiJS 開發人員，他們僅有一些開發 JavaScript 應用程式的經驗。如果您是程式老手，可能會覺得這裡的詳細程度沒什麼幫助。如果是這樣，或許可以略讀本指南，然後跳到要如何使用 PixiJS 和 webpack 或 npm 等封包器。

關於 JavaScript 的說明​

最後說明一下。JavaScript 的世界目前正從舊式的 JavaScript（ES5）轉換到較新的 ES6 風格。

// ES5
var x = 5;
setTimeout(function() { alert(x); }, 1000);
// ES6
const x = 5;
setTimeout(() => alert(x), 1000);

ES6 帶來了許多重大的優點，例如更清晰的語法、更完善的變數範圍、原生類別支援等。目前，主流瀏覽器都支援 ES6。因此，我們在這些指南中的範例都將使用 ES6。這並不代表您不能在 ES5 程式中使用 PixiJS！只要在腦中將「var」替換成「let/const」，並展開較短的功能傳遞語法，一切就會正常執行。

PixiJS 應用程式的元件​

了解以上說明後，開始吧。撰寫 PixiJS 應用程式只需要幾個步驟：

  • 建立一個 HTML 檔案
  • 透過網路伺服器提供檔案
  • 載入 PixiJS 函式庫
  • 建立一個Application
  • 將產生的視圖加入 DOM
  • 在舞台中加入影像
  • 撰寫一個更新迴圈

讓我們一起仔細了解它們。

HTML 檔案​

PixiJS 是在網頁中執行的 JavaScript 程式庫。因此，我們的第一步需要在一個檔案中產生一些 HTML。在一個真正的 PixiJS 應用程式中，您可能會想在一個複雜的現有網頁內嵌入您的顯示，或者您可能希望您的顯示區域填滿整個網頁。對於這個展示，我們將建立一個空白的網頁開始

<!doctype html>
<html>
  <head>
  </head>
  <body>
    <h1>Hello PixiJS</h1>
  </body>
</html>

建立一個新的資料夾名稱為 pixi-test，然後複製並貼上此 HTML 到 pixi-test 資料夾中一個新的檔案中，並命名為 index.html。

提供檔案​

您將需要執行一個網路伺服器，使用 PixiJS 在本地開發。網路瀏覽器會在本地載入的網頁中封鎖載入本機檔案（例如圖像和音訊檔）。如果你只是對您的新 HTML 檔案按兩下，當您嘗試將一個精靈加到 PixiJS 舞台時，您就將會得到一個錯誤訊息。

執行一個網路伺服器聽起來很複雜且困難，但事實上有很多簡單的網路伺服器可以達到這個目的。在這份指南中，我們將使用Mongoose，但您也可以很容易地使用XAMPP 或http-server Node.js 套件來提供您的檔案。

要開始使用 Mongoose 提供您的網頁，請前往Mongoose 下載網頁並為您的作業系統下載免費的伺服器。Mongoose 預設會服務其所執行的檔案夾中的檔案，因此請將下載好的執行檔複製先前步驟中所建立的資料夾 (pixi-test)。對執行檔按兩下，告訴您的作業系統您信任這個檔案可以執行，您便會有一個正在執行的網路伺服器，提供您的新資料夾。

打開您選擇的瀏覽器，在位置欄位中輸入 http://127.0.0.1:8080 來測試是否一切正常。（Mongoose 預設會在埠 8080 上提供檔案。）您應該看到「Hello PixiJS」以及其他東西。如果您在此步驟遇到錯誤，表示您沒有將檔案命名為 index.html，或是錯誤設定您的網路伺服器。

載入 PixiJS​

好的，因此我們有一個網頁，而且我們正在提供它。但它是空的。下一步就是實際載入 PixiJS 程式庫。如果我們建立一個真正的應用程式，我們會希望從Pixi Github repo下載一個 PixiJS 目標版本，這樣我們的版本就不會改變。但是對於這個範例應用程式，我們只需要使用 PixiJS 的 CDN 版本。將這行加入您 index.html 檔案中的 <head> 區段

<script src="https://pixijs.download/release/pixi.js"></script>

這將包含 PixiJS 最新版本的未縮小版本於您的網頁載入時，隨時準備使用。我們使用未縮小的版本是因為我們還在開發中。在實際運作時，您會想要使用 pixi.min.js，此版本已壓縮以加快下載速度，並排除了斷言和不建議事項警告，這有助於在建置專案時，卻會花更長的時間下載和執行。

建立應用程式​

載入程式庫在我們沒有使用它的情況下沒有太大的用處，因此下一步是啟動 PixiJS。先用一個指令碼標籤取代 <h1>Hello PixiJS</h1>，如下所示

<script type="module">
  const app = new PIXI.Application();
  await app.init({ width: 640, height: 360 });
</script>

我們在這裡所進行的是添加一個 JavaScript 程式區塊，並在該區塊內建立一個新的 PIXI.Application 執行個體。應用程式是一個簡化使用 PixiJS 的輔助類別。它會建立渲染器、建立舞台，然後啟動一個用於更新的計時器。在製作階段，您幾乎肯定希望針對自訂和控制親自執行這些步驟，我們將在後面的指南中介紹如何執行。就目前而言，應用程式類別是開始使用 PixiJS 的完美方式，而無需太過擔心細節。應用程式類別也有 method init，它會根據提供的選項來初始化應用程式。此方法是非同步的，因此我們使用 await 關鍵字在 promise 完成後開始我們的邏輯。這是因為 PixiJS 使用 WebGPU 或 WebGL，而前者的 API 是非同步的。

將 Canvas 加到 DOM​

PIXI.應用程式類別建立渲染器時，它會建立一個 Canvas 元素，用來進行渲染。為了要看到我們使用 PixiJS 繪製的內容，我們需要將這個 Canvas 元素加到網頁的 DOM。將以下行附加到您頁面的 script 區塊

  document.body.appendChild(app.canvas);

此行會使用應用程式建立的畫布（Canvas 元素），然後將其加到您頁面的主體。

建立 Sprite​

到目前為止，我們所做的都是準備工作。我們實際上尚未告訴 PixiJS 去繪製任何東西。讓我們透過新增一張要顯示的圖片來修正這個問題。

在 PixiJS 中可以透過許多方式來繪製圖片，但最簡單的方式是使用Sprite。我們將在後續的指南中深入探討場景圖形如何運作，但您目前所需要知道的是，PixiJS 會針對容器的階層進行渲染。Sprite 是包覆已載入的圖片資源的容器類型，以允許繪製、縮放、旋轉等動作。

在 PixiJS 可以渲染圖片前，需要先載入圖片。就像任何網頁一樣，圖片載入是非同步進行的。我們將在後續的指南中深入探討資源載入。就目前而言，我們可以使用 PIXI.Sprite 類別上的輔助方法來為我們處理圖片載入

  // load the PNG asynchronously
  await PIXI.Assets.load('sample.png');
  let sprite = PIXI.Sprite.from('sample.png');

在此下載範例 PNG，並將其儲存在 index.html 旁邊的 pixi-test 目錄中。

將 Sprite 加到舞台​

最後，我們需要將我們的新的 Sprite 加到舞台。舞台只是一個容器，是場景圖形的根目錄。舞台容器的每個子項目都將在每個畫面中進行渲染。透過將我們的 Sprite 加到舞台中，我們會告訴 PixiJS 的渲染器我們想要繪製它。

  app.stage.addChild(sprite);

編寫更新迴圈​

雖然你可以將 PixiJS 用於靜態內容，但對大多數專案而言，你會想要加入動畫。我們的範例應用程式實際上正在加速執行，每秒多次在相同位置渲染相同的精靈。我們所要做的就是每個畫面更新一次其屬性，就能使圖片移動。為了執行此操作，我們需要連接至應用的計時器。計時器是 PixiJS 物件，在每個畫面執行一個或多個回呼函式。執行此操作非常容易。將以下內容新增至指令碼區段結尾

  // Add a variable to count up the seconds our demo has been running
  let elapsed = 0.0;
  // Tell our application's ticker to run a new callback every frame, passing
  // in the amount of time that has passed since the last tick
  app.ticker.add((ticker) => {
    // Add the time to our total elapsed time
    elapsed += ticker.deltaTime;
    // Update the sprite's X position based on the cosine of our elapsed time.  We divide
    // by 50 to slow the animation down a bit...
    sprite.x = 100.0 + Math.cos(elapsed/50.0) * 100.0;
  });

你所需要做的就是呼叫 app.ticker.add(...)，傳遞回呼函式，然後在該函式中更新場景。它將在每個畫面呼叫，你可以移動、旋轉等，做任何你想要用來驅動專案動畫的事情。

將所有部分整合在一起​

就是這樣！最簡單的 PixiJS 專案！

這裡將整體內容放在同一個地方。檢查你的檔案，並確保它與你若有任何錯誤訊息時吻合。

<!doctype html>
<html>
  <head>
    <script src="https://pixijs.download/release/pixi.min.js"></script>
  </head>
  <body>
    <script type="module">
      // Create the application helper and add its render target to the page
      const app = new PIXI.Application();
      await app.init({ width: 640, height: 360 })
      document.body.appendChild(app.canvas);

      // Create the sprite and add it to the stage
      await PIXI.Assets.load('sample.png');
      let sprite = PIXI.Sprite.from('sample.png');
      app.stage.addChild(sprite);

      // Add a ticker callback to move the sprite back and forth
      let elapsed = 0.0;
      app.ticker.add((ticker) => {
        elapsed += ticker.deltaTime;
        sprite.x = 100.0 + Math.cos(elapsed/50.0) * 100.0;
      });
    </script>
  </body>
</html>

執行所有事情後，接下來就是閱讀其他「基礎」指南，深入探討所有這些運作方式。