PIXI.JS簡介

Published in

UniMarket

Dec 20, 2022

PIXI.js 是一個開源的 HTML5 圖形庫，它可以幫助你在網頁中創建高效能的遊戲和交互式圖形。它使用 WebGL 進行渲染，可以在大多數瀏覽器中很好地運行。

PIXI.js 提供了一個簡單易用的 API，可以幫助你創建各種圖形、文本、濾鏡和動畫。它還有一個靈活的插件系統，可以擴展其功能。PIXI.js 適用於各種項目，無論是為遊戲開發創建視覺效果，還是為網站提供交互式圖形。

要使用 PIXI.js，首先你需要引入它的庫文件，你可以通過以下兩種方式引入 PIXI.js 的庫文件：

1.通過 CDN 引入：在你的 HTML 頁面中，加入以下代碼即可引入 PIXI.js 的庫文件：

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.2.3/pixi.min.js"></script>

2.通過下載安裝：你也可以通過下載 PIXI.js 的庫文件並安裝在你的項目中，然後在 HTML 頁面中引入本地的文件。

首先，使用 npm 安裝 PIXI.js：

npm install pixi.js

然後，在 HTML 頁面中引入本地的文件：

<script src="/path/to/pixi.min.js"></script>

在引入庫文件之後，你就可以使用 PIXI.js 的 API 創建圖形了。

然後在 HTML 頁面中創建一個畫布元素。例如，你可以在頁面的 <body> 中加入以下代碼：

<canvas id="game-canvas"></canvas>

並使用 PIXI.Application 類來創建一個新的應用程序。例如，你可以在 JavaScript 中使用以下代碼：

const app = new PIXI.Application({
  width: 800,
  height: 600,
  view: document.getElementById('game-canvas'),
});

這段代碼會創建一個名為 app 的新應用程序，寬度為 800 像素，高度為 600 像素，並使用你剛剛創建的畫布元素作為其視圖。

你可以使用 PIXI.Sprite 類來創建精靈。例如，你可以使用以下代碼創建一個名為 cat 的精靈，並加載一張圖片作為其纹理：

const cat = new PIXI.Sprite.from('/path/to/cat.png');

你也可以使用 PIXI.Texture 類來創建精靈，並使用你已經加載的圖片作為纹理：

const texture = PIXI.Texture.from('/path/to/cat.png');
const cat = new PIXI.Sprite(texture);

在創建精靈之後，你可以使用其屬性來設置精靈的位置、大小和旋轉角度。例如，你可以使用以下代碼將精靈設置在畫布的中心位置：

cat.x = app.screen.width / 2;
cat.y = app.screen.height / 2;

你也可以使用以下代碼將精靈的大小設置為 100x100 像素：

cat.width = 100;
cat.height = 100;

最後，你需要將精靈添加到應用程序中才能在畫布上看到它。你可以使用以下代碼將精靈添加到應用程序的 stage 屬性中：

app.stage.addChild(cat);

總的來說，PIXI.js 是一個功能強大且易於使用的圖形庫，可以幫助你在網頁中創建高效能的遊戲和交互式圖形。

Written by Heko