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