HTML5游戏开发引擎Pixi.js完全入门手册（一）框架简介及框架结构分析，作者思路剖析

前言：

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