pixi.js
創建渲染器（renderer）
創建一個可以播放動畫的區域，相當於(canvas).
//v4.4.2之前的舊寫法
//創建
var renderer = PIXI.autoDetectRenderer(w, h, {
backgroundColor: 0x1099bb,
transparent: true //背景是否設為透明
});
document.body.appendChild(renderer.view);
//舞台添加顯示對象sprite及每次渲染的監聽函數
var stage = new PIXI.Container();
stage.addChild(sprite);
animate();
function animate() {
renderer.render(stage);
requestAnimationFrame(animate);
}
//v4.4.2之后的新寫法
//創建
var app = new PIXI.Application(w, h, {
backgroundColor: 0x1099bb,
transparent: false //背景是否設為透明
});
//添加顯示對象sprite及每次渲染的監聽函數
app.stage.addChild(sprite);
app.ticker.add(function(delta) {});
document.body.appendChild(app.view);
除了
autoDetectRenderer接口，還有CanvasRenderer和WebGLRenderer接口，
autoDetectRenderer可以根據客戶端對 WebGL 的支持自動創建WebGL或Canvas renderer。
創建舞台(stage)
舞台相當於一個容器(Container),添加元素后由渲染器(renderer)渲染舞台。相當於一個頂級的容器。
在 pixi.js 中有個 Container() 類，這個類就是一個容器。
var stage = new PIXI.Container();
添加舞台之后可以由渲染器(renderer)渲染。
renderer.render(stage);
// 舞台(stage)搭建完成后渲染出來。。 ***最后
創建材質集
動畫中最重要的元素是圖片（材質），這一類特殊的圖片對象在pixi.js中稱為精靈（sprite）,
通過控制sprite的大小，位置及一些其他的屬性，可以達到動畫的效果。
在pixi中有一個sprite類，可以根據外部的圖片（材質）來創建一個可以在pixi中使用的sprite對象。
有三種方式創建：
- 從某個單獨的圖片創建
- 從整個材質圖片創建，根據材質上不同的位置和大小截取某部分來創建
sprite - 從材質集中創建
材質集是一個
json文件，定義了某個材質圖片里面圖片的位置和大小等等，這樣做的好處是不用
每次創建sprite都要定義位置和大小，另外一方面修改了材質圖片的時候不用修改代碼.
根據材質集加載圖片
在 pixi 中有一個 loader 類來管理圖片的加載，並且在加載完成后調用回調函數處理。
PIXI.loader
.add("images/treasureHunter.json")
.load(setup);
treasureHunter.json是材質集的配置文件，setup是在完成圖片加載后調用的回調函數。
PIXI.loader在加載完成后可以通過PIXI.loader.resources來獲取加載的圖片。
回調函數
在完成圖片加載后，PIXI.loader 會自動調用 setup 函數來進行下一步的處理。我們先定義
一個測試方法，看看是否跟預期一樣。
function setup() {
console.log("加載完成.");
}
// 測試可以的話就可以，刪除setup里面的東西，然后完善舞台。
創建場景(gameScene)
游戲一般要創建兩個場景，一個是用來顯示正常游戲畫面(gameScene)，一個是用來顯示游戲結果(gameOverScene)。
var gameScene;
function setup() {
gameScene = new PIXI.Container();
}
在容器中要添加所有的材質並創建對應的sprite，如何添加?通過PIXI.loader.resources 可以訪問加載的素材。
var gameScene;
function setup() {
gameScene = new PIXI.Container();
}
注意：pixi需要在一個服務器上運行，推薦調試的時候使用 http-server 本地服務器，
- 游戲開始界面場景
- 游戲結束界面場景（一個顯示一個消失）
利用pixi繪制圖形
繪制線條圖形
- 首先需要創建圖形類
var graphics = new PIXI.Graphics(); graphics.beginFill(0xFF3300);//圖形填充顏色graphics.lineStyle(4, 0xffd900,1);//圖形邊框寬度，顏色，透明度- 按線條點位坐標繪圖
graphics.moveTo(50,50); //圖形繪制起點
graphics.lineTo(250, 50); //連線到下一個點
graphics.lineTo(100, 100);
graphics.lineTo(50, 50);
graphics.endFill(); // 圖形結束標志
繪制方塊及圓形
- 繪制方塊
graphics.drawRect(50, 250, 120, 120);
//參數分別為x點，y點坐標。方塊長、方塊寬 - 繪制圓角方塊
graphics.drawRoundedRect(150, 450, 300, 100, 15);
// 前四個參數與繪制方塊相同，最后一個圓角半徑 - 繪制圓形
graphics.drawCircle(470, 90,60);
//參數為x點坐標、y點坐標、圓形半徑 60
pixi中的文字應用（初）
- 首先需要創建一個文字類
var basicText = new PIXI.Text('Basic text in pixi'); - 隨后可以設值x,y坐標
basicText.x = 30; - 復雜的帶style類
var style = new PIXI.TextStyle({
fontFamily: 'Arial', //字體
fontSize: 36, //字體大小
fontStyle: 'italic', //字體類型（斜體）
fontWeight: 'bold', //加粗
fill: ['#ffffff', '#00ff99'], //由上到下的過渡顏色
stroke: '#4a1850', //文字邊框顏色
strokeThickness: 5, //文字邊框粗細
dropShadow: true, //陰影
dropShadowColor: '#000000', //陰影顏色
dropShadowBlur: 4, //陰影模糊程度
dropShadowAngle: Math.PI / 6, //陰影角度
dropShadowDistance: 6, //陰影距離
wordWrap: true, //自動換行
wordWrapWidth: 440
});
var richText = new PIXI.Text('Rich text with a lot of options', style);
richText.x = 30;
richText.y = 180;