Pixi.js是一個用JavaScript寫的2D渲染引擎，可以用來在瀏覽器里做交互圖形、動畫和游戲等的“富視覺”應(yīng)用，主打支持硬件GPU渲染的WebGL API，如瀏覽器不支持WebGL，Pixi則會退用HTML5 Canvas來渲染。 Pixi主要負(fù)責(zé)渲染畫面，很多其它功能開發(fā)者得自己寫或搭配其它庫來使用，如用來開發(fā)網(wǎng)頁游戲的Phaser框架就是使用Pixi來做渲染。下面內(nèi)容選自Learning Pixi.js一書，可以來小試一下Pixi。

備注：例子中的JavaScript用的是ES6，var 變成 let， function（）{} 變成 () => {}。

制作精靈（sprites)

Pixi中的基礎(chǔ)建造模塊是一個叫做sprite的對象。 sprite就是可以用代碼控制的圖形。 你可以控制它們的位置、尺寸和一些其他屬性，用以制作交互和動畫圖形。學(xué)習(xí)如何制作和控制sprite確是學(xué)習(xí)使用Pixi最重要的事情，如果你知道如何制作和顯示sprite，你就離開始制作游戲或者其他任何一種交互程序只有一小步的距離了。

本章， 你將學(xué)習(xí)在Pixi的Canvas中顯示和定位sprite所需的必備知識，包括下列內(nèi)容：

• 如何制作root container（根容器），叫做stage（舞臺）
• 如何新建一個renderer（渲染器）
• 使用加載器加載圖形到Pixi的紋理緩存中（texture cache）
• 使用加載后的圖形包括tilesets和texture atlases，制作sprite

在開始制作sprite之前，讓我們來創(chuàng)建一個用于顯示它們的類似長方形的屏幕。

創(chuàng)建renderer和stage

Pixi有一個渲染器對象（renderer）給你用來創(chuàng)建一個顯示屏幕。它會自動生成一個HTML <canvas> 元素并解決在canvas里顯示你的圖像的問題，但是你還得另外創(chuàng)建一個叫stage的Pixi容器對象（別擔(dān)心，一會兒你就知道到底什么是容器對象和為什么需要它們了）。這個stage對象將被當(dāng)作一個根容器（root container），用于顯示我們需要Pixi顯示的所有東西。下面是創(chuàng)建一個renderer和stage的代碼，將這些代碼加入你的HTML文檔的<script> 標(biāo)簽之間:

//Create the renderer 創(chuàng)建一個渲染器
let renderer = PIXI.autoDectectRenderer(256, 256);

//Add the canvas to the HTML document 在HTML文檔中加入canvas
docunment.body.appendChild(renderer.view);

//Create a container object called the 'stage' 創(chuàng)建一個叫stage的容器對象
let stage = new PIXI.Container();

//Tell the 'renderer' to 'render' the 'stage' 告訴渲染器去渲染一個舞臺
renderer.render(stage);

這就是開始使用Pixi所需的最基礎(chǔ)的代碼，它生成了一個256像素 X 256像素大小的黑色canvas元素，并將之添加到HTML文檔中。圖1-1 顯示了運行代碼后在瀏覽器里的樣子。

pixi1-1.jpg

這個簡單的黑色方塊應(yīng)該給你小小的心靈帶來純純的愉悅！那是因為要讓Pixi開始顯示內(nèi)容，這既是首要的一步，也是最重要的一步，讓我們仔細(xì)分解這些代碼的功用。

渲染選項

Pixi的autoDetectRenderer方法會根據(jù)可用狀態(tài)，自動選擇是使用Canvas API還是WebGL去渲染圖像。

let renderer = PIXI.autoDetectRenderer(256, 256);

上面代碼的第一個和第二個參數(shù)分別表示canvas畫布的寬和高。 然而還可以加入第三個可選的參數(shù)供你并設(shè)一些附加值，這第三參數(shù)是一個對象直接量，下面代碼就是設(shè)置渲染器抗鋸齒、透明和分辨率的示例：

renderer = PIXI.autoDetectRenderer(
  256, 256,
  { antialias: false, transparent: false, resolution: 1 }
);

用不用第三參數(shù)是可選的，如果你滿意Pixi的缺省值就不用管它，一般來說都不用改。但最好了解這些設(shè)置有哪些用處，抗鋸齒（antialias）可以使字體和圖形的邊緣變得平滑（WebGL的anti-aliasing還沒有適用于所有平臺，所以最好在你的應(yīng)用平臺上測試此功能）。透明選項可以使canvas的背景變?yōu)橥该鳌７直媛蔬x項使得匹配不同分辨率和像素密度變得更容易，一般設(shè)置為1就可應(yīng)對多數(shù)項目，更多關(guān)于分辨率匹配的信息請參見第六章。

提示 該渲染器還有另一個第四選項叫做preserveDrawingBuffer，缺省值為false。唯一需要設(shè)置它為true的情況是：在WebGL上下文情境中調(diào)用一個Pixi的特殊方法dataToURL。如果你需要將一個Pixi的canvas轉(zhuǎn)化為一個HTML圖片對象時，你可能不得不這么做。

Pixi的autoDetectRenderer將決定使用canvas繪圖接口還是WebGL來顯示圖像。缺省是WebGL，這是好的，因為WebGL特別的快而且能使用很多引人入勝的特效，這些你都能在本書后面學(xué)到。但是如果你想強制使用canvas繪圖接口而不是
WebGL，你可以這么寫:

renderer = new PIXI.CanvasRenderer(256, 256);

上面的情況只需要頭兩個參數(shù)：寬和高。

你也可以強制使用WebGL渲染器，如下所示：

renderer = new PIXI.WebGLRenderer(256, 256);

現(xiàn)在我們再來看看如何增強渲染器的外表

定制canvas

renderer.view對象只是一個普通平常的<canvas>對象，所以你可以象控制其它任何canvas對象那樣控制它，下面的代碼給canvas加了一圈虛線邊框：

renderer.view.style.border = "1px dashed black";

如果新建canvas之后，你需要改變它的背景顏色，那就給渲染器對象的backgroundColor設(shè)置任何十六進制顏色值即可，下面的代碼給了一個純白色的背景：

renderer.backgroundColor = 0xFFFFFF;

提示 網(wǎng)上可以搜索到很多十六進制配色表，你可以很容易選擇一個合適的背景色。

如果你想知道渲染器的寬和高，使用renderer.view.width和renderer.view.height即可。

要改變canvas的大小，使用渲染器的resize()方法，然后應(yīng)用新的寬高值，如下所示：

renderer.resize(512, 512);

如果想讓canvas充滿整個窗口，你可以使用如下CSS樣式：

renderer.view.style.position = "absolute";
renderer.view.style.width = window.innerWidth + "px";
renderer.view.style.height = window.innerHeight + "px";
renderer.viwe.sytle.display = "block";

注意，如果要這么做，你必須還得將所有HTML元素的padding和margin值都設(shè)為0， 如下所示：

<style>* {padding: 0; margin:0} </style>

(上面的*號是CSS里的通配選擇器，就是指所有標(biāo)簽)如果沒有上面這條CSS樣式，你可能會發(fā)現(xiàn)在Pixi畫布與瀏覽器邊緣之間有幾像素的空隙。

縮放畫布至瀏覽器窗口

你可以使用一個叫scaleToWindow()的定制函數(shù)去縮放Pixi的畫布最大化至整個瀏覽器窗口（ scaleToWindow在本書源代碼中有，或者訪問“github.com/kittykatattack/scaleToWindow” 代碼庫）。scaleToWindow也能在瀏覽器窗口里對齊畫布以獲得最佳適配效果，舉例說如果你的畫布寬大于高，它能在窗口里垂直的居中對齊，如果高大于寬，則會水平的居中對齊，圖1-2是兩個這樣的對齊效果。

pixi1-2.jpg

下面是使用scaleToWindow縮放和對齊畫布的代碼：

scaleToWindow(renderer.view, borderColor);

其中可選的第二參數(shù)，你可以用來設(shè)置瀏覽器的背景色，用以形成畫布的邊框，這里可以使用任何RGB、HSLA或Hex顏色值，當(dāng)然也可以是任何HTML顏色字符串，如“blue”或者“red”。（如果沒有設(shè)置顏色值，缺省的邊框顏色是一個中性的深灰色：#2C3539。）

scaleToWindow還能返回畫布縮放后的縮放值，你可以這樣獲得數(shù)值：

let scale = scaleToWindow(renderer.view);

這會給你一個數(shù)值，可能就像這樣 1.98046875，它告訴你畫布的縮放比率，如果你要將瀏覽器的像素坐標(biāo)轉(zhuǎn)換為畫布縮放像素值，這就會是一個重要數(shù)值，舉例說，如果你有一個指針對象用于跟蹤鼠標(biāo)在瀏覽器里的位置，你會需要將這些像素坐標(biāo)傳喚為縮放的畫布坐標(biāo)，用于確定鼠標(biāo)是否碰到了畫布中的什么東西，下面這些平常的代碼就能搞定：

pointer.x = pointer.x / scale;
pointer.y = pointer.y / scale;

提示 在第七章中，你將學(xué)習(xí)如何創(chuàng)建和使用一個Pixi指針。

有時，你可能需要隨著窗口大小的改變而重新縮放canvas，如果是這樣，在window的監(jiān)聽器中調(diào)用scaleToWindow, 就像下面這樣：

window.addEventListener("resize", event => {
  scaleToWindow(renderer.view);
});

現(xiàn)在你知道如何創(chuàng)建一個Pixi canvas了。