【LV. 10】PixiJS青銅玩家：setUp( )（2）

2022 iThome 鐵人賽

DAY 10

Modern Web

PixiJS青銅玩家系列第 10 篇

14th鐵人賽 pixijs pixi

NoZ

團隊好想工作室 v6.0

2022-09-25 16:12:23

759 瀏覽

分享至

▉ 前言

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

系統說明：「There is no such thing as a great talent without great will power.--Balzac」，PixiJS青銅玩家仍卡關於setUp()階段，僅獲得經驗值提昇等級。

▉ 主線任務：setUp( )：製作Sprites，加到遊戲場景中（1）別名

// Create an alias for the texture atlas frame ids

▍任務說明

在【LV. 9】階段時，製作了一個遊戲場景「gameScene」，再來我們要製作一些Sprites（例如Dungeon, Door, Explorer, Treasure, Blobs），並且把他們加到gameScene中。

不過在【LV. 7】時就提到，有了Sprites後，要先把他轉換成GPU也可以使用的圖片，也就是被我們稱為「Texture」東西。

但是要將Sprites轉換成可以使PIXI使用的Texture，語法真的很長很長...，所以我們得先幫他利用別名命名來減少我們的困擾。

▍作法

id = resources["images/treasureHunter.json"].textures;

▍分析

我們在【LV. 8】前置作業的任務中，寫了以下的程式碼：

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

當時說到利用loader的.add方法，可以將資源載入到佇列當中等待被使用，而回到現階段：

id = resources["images/treasureHunter.json"].textures;

現在便是把當初儲存的資源（即"images/treasureHunter.json"這個json檔案）用loader的.resources方法來使用，後方串接.texture或.textures，使圖片轉換為texture後，就可以使用PIXI中的Sprite物件創建新的Sprite，讓這個Sprite可以使用紋理texture。

至於.texture或.textures的差異，我感覺上是依照我們儲存的資源是單一圖像或是一個陣列（例如用json檔，裡面存有多張圖片），如果是前者就接上.texture，後者就接上.textures。

▉ 主線任務：setUp( )：製作Sprites，加到遊戲場景中（2）Dungeon

// Make the sprites and add them to the gameScene
// Dungeon

▍任務說明

那接下來看看要如何製作Sprites，並加到gameScene之中。

▍作法

dungeon = new Sprite(id["dungeon.png"]);
gameScene.addChild(dungeon);

在範例中的程式碼是長上方這樣的，id的部份為前面利用別名取代的，展開來全部為resources["images/treasureHunter.json"].textures，但是要在codepen示範，圖片是傳到imgur來取得圖片連結的，而非利用json檔，所以接下來的操作與官方教程提供的有些不太一樣。

▍分析

範例 1.

完整程式碼：

//取別名
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;

//建立畫布
let app = new Application({
    width: 512, 
    height: 512,                       
    antialiasing: true, 
    transparent: false, 
    resolution: 1
})

//把畫布變成一個canvas加到HTML之上
document.body.appendChild(app.view)

//將圖片載入完成後，執行setUp()
loader
  .add("dungeon","https://i.imgur.com/hXK1VOJ.png")
  .load(setUp);

//setUp()函式
function setUp(){
  gameScene = new Container()
  app.stage.addChild(gameScene)

  const dungeon = new Sprite(resources["dungeon"].texture)
  gameScene.addChild(dungeon)
}

重點：
主要看這兩個部份

//將圖片載入完成後，執行setUp()
loader
  .add("dungeon","https://i.imgur.com/hXK1VOJ.png")
  .load(setUp);

//setUp()函式
function setUp(){
  gameScene = new Container()
  app.stage.addChild(gameScene)

  const dungeon = new Sprite(resources["dungeon"].texture)
  gameScene.addChild(dungeon)
}

這裡就是最基本的用法，利用loder物件底下的.add、.load、.resources，將圖片利用.add、.load放到texture cache，載入完成進到setUp函式，此時就可以用PIXI的Sprite物件，讓他使用texture。

codepen範例

範例 2.
但其實還有另一個方法，就是不先將圖像存在texture cache之中，而是直接用url載入。

完整程式碼：

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;

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

document.body.appendChild(app.view)

gameScene = new Container()
app.stage.addChild(gameScene)

const dungeon = Sprite.fromImage("https://i.imgur.com/hXK1VOJ.png")
gameScene.addChild(dungeon)

重點：
主要看這兩個部份
```
gameScene = new Container()
app.stage.addChild(gameScene)

const dungeon = Sprite.fromImage("https://i.imgur.com/hXK1VOJ.png")
gameScene.addChild(dungeon)
```
這個方法就是沒利用到loader了，他直接利用另外一種語法Sprite.fromImage()，並且直接用url載入，載入後他會看此張圖片是否存在於texture cache，若不存在則會直接加載圖片。

不過PIXI論壇版主有提到！不能將loader以及上方這個Sprite.fromImage()混用！這在【LV. 7】時有提到：
codepen範例