首頁 > web前端 > js教程 > 主體

使用Pixi.js的總結

php中世界最好的语言
發布: 2018-03-07 10:26:21
原創
5352 人瀏覽過

這次帶給大家使用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文件

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板