使用Pixi.js的總結(jié)

Pixi.js是一個(gè)用JavaScript寫的2D渲染引擎，可以用來在瀏覽器里做交互圖形、動(dòng)畫和游戲等的“富視覺”應(yīng)用，主打支持硬件GPU渲染的WebGL API，如瀏覽器不支持WebGL，Pixi則會(huì)退用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ǔ)建造模塊是一個(gè)叫做sprite的對(duì)象。 sprite就是可以用代碼控制的圖形。 你可以控制它們的位置、尺寸和一些其他屬性，用以制作交互和動(dòng)畫圖形。學(xué)習(xí)如何制作和控制sprite確是學(xué)習(xí)使用Pixi最重要的事情，如果你知道如何制作和顯示sprite，你就離開始制作游戲或者其他任何一種交互程序只有一小步的距離了。

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

如何制作root container（根容器），叫做stage（舞臺(tái)）

如何新建一個(gè)renderer（渲染器）

使用加載器加載圖形到Pixi的紋理緩存中（texture cache）

使用加載后的圖形包括tilesets和texture atlases，制作sprite

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

創(chuàng)建renderer和stage

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

//Create the renderer 創(chuàng)建一個(gè)渲染器let renderer = PIXI.autoDectectRenderer(256, 256);//Add the canvas to the HTML document 在HTML文檔中加入canvasdocunment.body.appendChild(renderer.view);//Create a container object called the 'stage' 創(chuàng)建一個(gè)叫stage的容器對(duì)象let stage = new PIXI.Container();//Tell the 'renderer' to 'render' the 'stage' 告訴渲染器去渲染一個(gè)舞臺(tái)renderer.render(stage);

這就是開始使用Pixi所需的最基礎(chǔ)的代碼，它生成了一個(gè)256像素 X 256像素大小的黑色canvas元素，并將之添加到HTML文檔中

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

渲染選項(xiàng)

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

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

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

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

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

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

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

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

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

你也可以強(qiáng)制使用WebGL渲染器，如下所示：

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

現(xiàn)在我們?cè)賮砜纯慈绾卧鰪?qiáng)渲染器的外表

定制canvas

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

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

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

renderer.backgroundColor = 0xFFFFFF;

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

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

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

renderer.resize(512, 512);

如果想讓canvas充滿整個(gè)窗口，你可以使用如下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>

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

相信看了這些案例你已經(jīng)掌握了方法，更多精彩請(qǐng)關(guān)注Gxl網(wǎng)其它相關(guān)文章！

相關(guān)閱讀：

JS模塊化-RequireJS

在vue首頁怎樣做出底部導(dǎo)航TabBar

一個(gè)用Vue.js 2.0+做出的石墨文檔樣式的富文本編輯器

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com