前言：
最近无聊在淘宝弄了个小店，打算做一个兼职。遇到一个客户，要我帮忙拷贝一个html5游戏。。
我这人有一个习惯，拿到自己没见过的东西。都会去研究一番。去网上查了下发现，资料都是英文版。感觉极度不方便。。因此拿出来，自己分析分析。。。。
框架简介：
Pixi.js到底是什么呢。。
以上是百度出来的答案。。作者，分析下。。说的白话点就是 一个做游戏的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); |