前言：
最近無聊在淘寶弄了個小店，打算做一個兼職。遇到一個客戶，要我幫忙拷貝一個html5游戲。。
我這人有一個習慣，拿到自己沒見過的東西。都會去研究一番。去網上查了下發現，資料都是英文版。感覺極度不方便。。因此拿出來，自己分析分析。。。。
框架簡介：
Pixi.js到底是什么呢。。
Pixi.js使用WebGL，是一個超快的HTML5 2D渲染引擎。作為一個Javascript的2D渲染器，Pixi.js的目標是提供一個快速的、輕量級而且是兼任所有設備的2D庫。 Pixi渲染器可以開發者享受到硬件加速，但並不需要了解WebGL。
以上是百度出來的答案。。作者，分析下。。說的白話點就是 一個做游戲的js插件。。優點是使用了WEBGl 加速，，“不知道WEBGl ?不要緊。作者后面會詳細解釋的。。各位不必激動，”。
框架結構分析：
在開始分析結構前 請大家跟我做一件事，“深呼吸，深呼吸，再次深呼吸”，下面就是見證"奇跡"的時刻。
要學這個框架，我們首先要讀懂作者的思路，作者在這里 使用了 面向對象的思想把 框架概括成3個對象 ：舞台，渲染，元素。通過這3個對象相互間的配合組成一個畫面。。。下面我給大家列出了3個對象的大型。。。。
-
舞台對象，PIXI.Stage();
-
以后的頁面元素都是被添加到舞台上，然后通過渲染出來的
|
1
|
stage =
new
PIXI.Stage(
"0x222222"
);
|
-
渲染對象，PIXI.autoDetectRenderer();
-
三個參數，分別是寬度，高度，和綁定元素，HTML里可以用ID綁定
|
1
2
3
4
5
|
var
renderer = PIXI.autoDetectRenderer(
512,
256,
document.getElementById(
"mydiv"
)
)
|
-
圖像資源對象，PIXI.Texture.fromImage();
-
元素對象，sprite;
|
1
|
var
Texture = PIXI.Texture.fromImage(
"tset.png"
);
|
-
PIXI.Sprite(sprite); //加載到sprite，如上面我們加載了一張圖片存放到Texture里了，我們就可以創建到sprite實例
|
1
2
3
4
5
6
|
che =
new
PIXI.Sprite(Texture);
//放入sprite里我們就可以給他定義坐標位置了
che.position.x = 0;
che.position.y = 0;
//還記得我們剛才創建的舞台嗎，我們要把這個實例放入到舞台里面去
stage.addChild(che);
|
-
render();//我們創建了渲染工具，等我們把舞台所有元素都實例化好了后，就開始渲染舞台
|
1
|
renderer.render(stage);
|