前言：
最近无聊在淘宝弄了个小店，打算做一个兼职。遇到一个客户，要我帮忙拷贝一个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);
|