使用Pixi.js的總結

這次帶給大家使用Pixi.js的總結，使用Pixi.js的注意事項有哪些，下面就是實戰案例，一起來看一下。

Pixi.js是一個用JavaScript寫的2D渲染引擎，可以用來在瀏覽器裡做互動圖形、動畫和遊戲等的「富視覺」應用，主打支援硬體GPU渲染的WebGL API，如瀏覽器不支援WebGL，Pixi則會退用HTML5 Canvas來渲染。 Pixi主要負責渲染畫面，許多其它功能開發者得自己寫或搭配其它庫來使用，如用來開發網頁遊戲的Phaser框架就是使用Pixi來做渲染。以下內容選自Learning Pixi.js一書，可以來小試試看Pixi。

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

製作精靈（sprites)

Pixi中的基礎建造模組是一個叫做sprite的物件。 sprite就是可以用程式碼控制的圖形。 你可以控制它們的位置、尺寸和一些其他屬性，用以製作互動和動畫圖形。學習如何製作和控制sprite確是學習使用Pixi最重要的事情，如果你知道如何製作和顯示sprite，你就離開始製作遊戲或其他任何一種互動程式只有一小步的距離了。

本章， 你將學習在Pixi的Canvas中顯示和定位sprite所需的必備知識，包括下列內容：

如何製作root container（根容器），叫做stage（舞台)

如何新建一個renderer（渲染器）

使用載入器載入圖形到Pixi的紋理快取中（texture cache）

使用載入後的圖形包括tilesets和texture atlases，製作sprite

在開始製作sprite之前，讓我們來建立一個用於顯示它們的類似長方形的螢幕。

創建renderer和stage

Pixi有一個渲染器物件（renderer）給你用來創建一個顯示螢幕。它會自動產生一個HTML 元素並解決在canvas裡顯示你的映像的問題，但是你還得另外創建一個叫stage的Pixi容器物件（別擔心，一會兒你就知道到底什麼是容器物件和為什麼需要它們了）。這個stage物件將被當作一個根容器（root container），用來顯示我們需要Pixi所顯示的所有東西。以下是建立一個renderer和stage的程式碼，將這些程式碼加入你的HTML文件的<script> 標籤之間:</script>

//Create the renderer 建立一個渲染器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' 建立一個叫stage的容器物件let stage = new PIXI.Container();//Tell the 'renderer' to 'render' the 'stage' 告訴渲染器去渲染一個舞台renderer.render(stage);

這就是開始使用Pixi所需的最基礎的程式碼，它產生了一個256像素X 256像素大小的黑色canvas元素，並將之添加到HTML文件中

這個簡單的黑色方塊應該會為你小小的心靈帶來純純的愉悅！那是因為要讓Pixi開始顯示內容，這既是首要的一步，也是最重要的一步，讓我們仔細分解這些程式碼的功用。

渲染選項

Pixi的autoDetectRenderer方法會根據可用狀態，自動選擇是使用Canvas API還是WebGL去渲染影像。

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

上面程式碼的第一個和第二個參數分別表示canvas畫布的寬和高。 然而還可以加入第三個可選的參數供你並設一些附加值，這第三參數是一個物件直接量，下面程式碼就是設定渲染器抗鋸齒、透明和解析度的範例：

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

用不用第三參數是可選的，如果你滿意Pixi的預設值就不用管它，一般來說都不用改。但最好了解這些設定有哪些用處，抗鋸齒（antialias）可以使字體和圖形的邊緣變得平滑（WebGL的anti-aliasing還沒有適用於所有平台，所以最好在你的應用平台上測試此功能）。透明選項可以使canvas的背景變為透明。解析度選項使得匹配不同解析度和像素密度變得更容易，一般設定為1就可應對多數項目，更多關於解析度匹配的資訊請參閱第六章。

提示 此渲染器還有另一個第四選項叫做preserveDrawingBuffer，缺省值為false。唯一需要設定它為true的情況是：在WebGL上下文情境中呼叫一個Pixi的特殊方法dataToURL。如果你需要將一個Pixi的canvas轉換成一個HTML圖片物件時，你可能不得不這麼做。

Pixi的autoDetectRenderer将决定使用canvas绘图接口还是WebGL来显示图像。缺省是WebGL，这是好的，因为WebGL特别的快而且能使用很多引人入胜的特效，这些你都能在本书后面学到。但是如果你想强制使用canvas绘图接口而不是
WebGL，你可以这么写:

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

上面的情况只需要头两个参数：宽和高。

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

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

现在我们再来看看如何增强渲染器的外表

定制canvas

renderer.view对象只是一个普通平常的对象，所以你可以象控制其它任何canvas对象那样控制它，下面的代码给canvas加了一圈虚线边框：

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

如果新建canvas之后，你需要改变它的背景颜色，那就给渲染器对象的backgroundColor设置任何十六进制颜色值即可，下面的代码给了一个纯白色的背景：

renderer.backgroundColor = 0xFFFFFF;

提示 网上可以搜索到很多十六进制配色表，你可以很容易选择一个合适的背景色。

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

要改变canvas的大小，使用渲染器的resize()方法，然后应用新的宽高值，如下所示：

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值都设为0， 如下所示：

(上面的*号是CSS里的通配选择器，就是指所有标签)如果没有上面这条CSS样式，你可能会发现在Pixi画布与浏览器边缘之间有几像素的空隙。

相信看了这些案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

相关阅读：

JS模块化-RequireJS

在vue首页怎样做出底部导航TabBar

一个用Vue.js 2.0+做出的石墨文档样式的富文本编辑器

以上是使用Pixi.js的總結的詳細內容。更多資訊請關注PHP中文網其他相關文章！