【LV. 5】PixiJS青銅玩家：前置作業（1）

2022 iThome 鐵人賽

DAY 5

Modern Web

PixiJS青銅玩家系列第 5 篇

14th鐵人賽 pixijs pixi

NoZ

團隊好想工作室 v6.0

2022-09-20 15:00:12

735 瀏覽

分享至

▉ 前言

這裡將利用教程所提供的"Treasure Hunter Game"來直接學習PixiJS中的語法。"Treasure Hunter Game"的程式碼 ---> Click Here !

▉ 主線任務：前置作業

系統提示：「Chance favors the prepared mind.--Louis Pasteur」，PixiJS青銅玩家進行前置作業，獲得一雙手套。

▉ 主線任務：前置作業-利用別名

// Aliases（別名）

▍任務說明

使用別名，讓可讀性更高（原本寫出來太長了）

▍作法

let Application = PIXI.Application,
    Container = PIXI.container,
    loader = PIXI.loader
    resources = PIXI.loader.resources,
    Graphics = PIXI.Graphics,
    TextureCache = PIXI.utils.TextureCache,
    Sprite = PIXI.Sprite,
    Text = PIXI.Text,
    TextStyle = PIXI.TextStyle;

▉ 主線任務：前置作業-建立畫布

// Create a pixi Application

▍任務說明

第一步就是利用PixiJS中的PIXI.Application，去創建一個可以顯示圖片的矩形顯示區。PIXI.Application會自動創建一個<canvas>的HTML Tag。

▍作法

let app = new Application({
    width: 512,
    height: 512,
    antialiasing: true,
    transparent: false,
    resolution: 1
});

▍分析

Application？
此處的Application即PIXI.Application。
new 是什麼？
- new是一個運算子（operators）。
- 把東西實體化，真正創造出一個物件。
- 從MDN Operators Precedence可看到底下的圖：
  
  裡面有提到「argument」，所以決定來看看argument是什麼？
什麼是argument？
- 看到argument（引數）就會想到parameter（參數）
  - parameter參數就是我們使用函數時可以任意帶入的值
  - argument引數就是參數的集合，為一個包含了所有參數的類陣列物件
- 所以說new Application()括號中的那個物件就是argument。
```
let app = new Application({
    width: 512,
    height: 512,
    antialiasing: true,
    transparent: false,
    resolution: 1
});
```
  底下將他們兩個拆分開來觀察：
```
new Application()
```
```
{
    width: 512,
    height: 512,
    antialias: true,
    transparent: false,
    resolution: 1
}
```
  而argument引數中的屬性名稱（像是width、height、antialias、transparent、resolutio等等），可以參考PIXI官方文件，這裡就先看以上有設置的就好。
  
  屬性英文名稱中文名稱
  
  width | 畫布的寬
  height | 畫布的高
  antialias | 抗拒齒
  transparent | 透明
  resolution | 解析度

▉ 主線任務：前置作業-將畫布丟到網頁上

// Add the canvas that PIXI automatically created for you to the HTML document

▍任務說明

利用PIXI.Application，他可以幫助我們自動的創建一個<canvas>的HTML標籤。

創建好後，利用appendChild將這個創建的<canvas>加到document（根元素）上。

▍作法

document.body.appendChild(app.view);

下圖為將畫布創建好放上網頁的樣子（左邊黑色的正方形就是在「主線任務：前置作業-建立畫布」步驟時所創建的畫布，只是現在這步才真正把它放到網頁之上）

▍分析

app.view (也就是new.PIXI.Application.view)
這裡的app，就是前面new出的一個Application物件。所以利用Applicaton中的屬性「view」，從官方文件可看到下圖

從圖可知，這個view的類型為HTMLCanvasElement，他可以幫我們創建一個<canvas>，而這個canvas會吃到Application裡面設置的屬性值（像是width、height、antialias、transparent、resolutio等等）。
appendChild
創建好的<canvas>，再利用appendChild加到DOM當中。

下圖為官方提供的操作說明