前言

這篇文章是我在 2022 iTHome 鐵人賽看到 PixiJS青銅玩家系列文章做的一個紀錄。

PixiJS 是什麼?

PixiJS 是一個用於創建2D網頁遊戲和互動內容的快速輕量級渲染引擎。它是一個使用JavaScript編寫的開源庫，提供了簡單而強大的API，使開發者能夠輕鬆地創建高性能的瀏覽器內遊戲和互動應用。

安裝PixiJS

npm

1	npm i pixi.js

下載JS文件

https://github.com/pixijs/pixijs/releases

可以從以上PixiJS的主要發布頁面中，找到各種版本的PixiJS，現在最新版本是v8.0.0-rc.2，往下滑到Asset的部份，可以看見很多個文件（如下圖），其中最重要的就是pixi.js跟pixi.min.js，這兩個檔案都可以使用。

https://github.com/pixijs/pixijs/releases/tag/v8.0.0-rc.2

CDN

https://cdnjs.com/libraries/pixi.js/4.5.5

https://cdnjs.com/libraries/pixi.js

:::info

.js檔與.min.js檔案的區別

	.js檔	.min.js檔
優點	可讀性高，比較好觀察、修改	1. 減小體積，使傳輸變快 2. 可以使JS防止被偷窺、竊取
缺點	體積較大，傳輸較慢	可讀性差
:::

執行

在HTML執行

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>範例</title>
</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.8.5/pixi.min.js" ></script>
    <script>
        let type = "WebGL"
        if(!PIXI.utils.isWebGLSupported()){
        type = "canvas"
        }

        PIXI.utils.sayHello(type)
    </script>
</body>
</html>

當我們執行上述程式碼後，假如PixiJS成功可以運作時，以Chrome來說就可以在DevTools中的console裡面看見底下的圖片：