這裡將利用教程所提供的"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 是什麼?
什麼是argument?
看到argument(引數)就會想到parameter(參數)
所以說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當中。
下圖為官方提供的操作說明
今天進度到把畫布放到網頁之上,再來有了畫布然後呢?該放什麼東西到畫布上,明天應該會往這個方向去寫。
主線任務:前置作業-建立畫布