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

2022 iThome 鐵人賽

DAY 6

Modern Web

14th鐵人賽 pixi pixijs

878 瀏覽

▉ 前言

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

系統提示：「And lost be the day to us in which a measure hath not been danced.--Nietzsche」，PixiJS青銅玩家完成前置作業前半段，獲得一件保暖的長褲。

在【LV. 5】階段，知道了怎麼建立畫布，以及把畫布加到網頁上，既然畫布都在網頁上方架好了，再來該做什麼呢？

這個時候我們就可以開始丟我們想要的圖片到上面，只是要使用圖片之前，必須先創建Sprites，創建完成後，要先變成GPU可以處理的圖片才能使用！

document.body.appendChild(app.view);

loader
    .add("images/treasureHunter.json");
    .load(setUp);

這邊主要會學習loader的.add以及.load。

現在既然有了畫布，我們就可以開始在畫布上方放上圖片。

題外話，所有想在畫布上顯示的東西，都必須加進一個PIXI特殊的物件中，這個物件叫做stage，可以利用PIXI.Application.stage去創建這個stage物件，再利用stage.addChild(想放進stage舞台的東西)放進想顯示到畫面上的內容

這邊暫時不提stage創建，而是把重點放在圖片載入的部份。不過我們可以先稍微關心一下畫布與舞台之間的關係：

PIXI.Application > 畫布
PIXI.Application.stage > 舞台

畫布：他會自動創建一個<canvas>tag ，然後去計算出怎麼讓你的圖片在這個tag中顯示

舞台：他是一個container容器，他會包裹所有你想用PIXI顯示的東西

只是圖片並非說丟就丟，它需要經過處理，至於經過什麼處理，先來個總結論：

[ 進行中 ] 1. 創建Sprites
[ 待完成 ] 2. 將圖片載入到texture cache
[ 待完成 ] 3. 載入圖片、轉換成Texture

Step 1. 創建Sprites
Sprites是個特殊的圖像物件，中文為精靈圖，另外有個非正式說法叫做雪碧圖。在電腦圖學中，當一張二維圖像整合進場景中，成為整個顯示圖像的一部分時，這張圖就稱為精靈圖。而我們可以利用程式碼去操控它，像是控制他的位置、大小......等等。

有3種方式可以創建sprites：
1. 單張圖片：
  一張圖片自己一個檔案路徑（From a single image file）
2. tileset圖片：
  多張圖片在同一張大圖裡去使用（From a sub-image on a tileset. A tileset is a single, big image that includes all the images you'll need in your game）
3. textrue atlas：
  中文叫做地圖紋理集（From a sub-image on a tileset. A tileset is a single, big image that includes all the images you'll need in your game）
有看到奔跑吧！台北：程式幕後分享中提到spritesheet，雖然沒提到是否使用單張圖片亦或是地圖紋理集方式，但是有說到圖檔有.png以及.json的格式。

在官方這個範例中，他是利用textrue atlas（即上方的第三種方法，地圖紋理集）創建圖片，檔名為images/treasureHunter.json，而這張圖片的檔案格式為json。