iT邦幫忙

2022 iThome 鐵人賽

DAY 5
0
Modern Web

PixiJS青銅玩家系列 第 5

【LV. 5】PixiJS青銅玩家:前置作業(1)

  • 分享至 

  • xImage
  •  

▉ 前言

這裡將利用教程所提供的"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當中。

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


▉ 結語

今天進度到把畫布放到網頁之上,再來有了畫布然後呢?該放什麼東西到畫布上,明天應該會往這個方向去寫。


參考資料


上一篇
【LV. 4】PixiJS青銅玩家:實作準備
下一篇
【LV. 6】PixiJS青銅玩家:前置作業(2)
系列文
PixiJS青銅玩家30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言