今天我们做一个H5的Demo，使用FireFox开发，开发完成之后，直接使用上一章节我们发布的android app，直接访问查看效果。
Subline Text2 / VIM【其实开发js我用的是eclipse写的】FireFox / Chrome / H5Builder【Chrome为了安全不支持加载本地图片，除非自己搭建一个本地的HttpServer】AEPixi.apk 【上一章节的末尾的二维码】
这里先简单地了解一下概念
Organize your objects in hierarchical trees, with parent-child relationships.
从上图可以看到，在pixi中，每个Node就相当于iOS中的一个View，Node.addChild(Node)，就像iOS中[UIView addSubview:UIView]
从上图可以看到，游戏世界里，基本的元素：Sprite、Texture、MovieClip、Rope、Graphics、TilingSprite等等；就像iOS中的UIImageView、UILabel一样，创建完成对象实例后，需要将坐标、缩放、旋转、图片等数据，转换成GPU可以运行的OpenGL数据，Renderer就是OpenGLES的封装。相当于iOS的UIWindow对象，负责管理硬件资源，只在初始化的时候使用一次，每次视图更新，在调用一次接口。
从上图可以看到，AssetLoader负责读取本地/网络的纹理资源，并将解码后的Texture(Bitmap)统一的保存在本地，多个对象可以共享同一张图片资源。
Demo的核心代码一共40行，由三部分组成：Html空壳 + JS代码 + 资源文件
pixi没有使用css和dom来做UI，它使用了canvas和webgl作为渲染技术。H5作为前端展示工具，分为两种，一种是基于dom的css，一种是基于canvas的API，二者的优势和不足在《》中已经讲过，不熟悉的同学请回顾上文。
在计算机的世界，图形渲染和展示都是GPU的工作，为了提高性能，将多种图片资源整合成一张大图，是不错的选择。（为什么这样性能好，我们先挖坑，后续我们谈谈OpenGL的加速原理）json文件描述了各个图片资源对应大图的坐标位置，资源加载完成之后，内存中的bitmap将会释放，将不再占用内存。（原理请回顾：《》）
千言万语，都在代码的注释中
// 创建渲染器，可以理解为Activity活着UIViewController var renderer = PIXI.autoDetectRenderer(480, 800); // 添加视图到window上，可以理解为[UIWindow addViewController]; document.body.appendChild(renderer.view); var angles = 0; // world的旋转角度 var number = 200; // 创建200个外星人图片，这个大家自觉修改，可以测试手机性能 var aliens = []; // 保存所有图片的句柄 var frames = ["eggHead.png", "flowerTop.png", "helmlok.png", "skully.png"]; // 一共4个图片 // 所有外星人图片视图，我们统一放到world容器中 var world = new PIXI.Container(); // 类比iOS: world = [[UIView alloc] init]; world.position = new PIXI.Point(240, 400); // 类比iOS: world.frame.origin = CGSizeMake(240, 400); // 创建根视图，游戏里成为舞台【iOS的self.view】 var stage = new PIXI.Container(); // 类比iOS: stage = [[UIView alloc] init]; stage.addChild(world); // 类比iOS: [stage addSubview:world]; // 加载json资源，描述了图片的信息，加载成功后回调onAssetsLoaded函数 PIXI.loader.add('SpriteSheet.json').load(onAssetsLoaded); function onAssetsLoaded() { for (var i = 0; i < number; i++) { var alien = PIXI.Sprite.fromFrame(frames[i % 4]); // 类比iOS[[UIImageView alloc] initWithImage:[UIImage imageNamed:@""]]; alien.anchor = new PIXI.Point(0.5, 0.5); // 设置围绕图片的中心旋转，默认是左上角(0, 0) alien.position = new PIXI.Point(Math.random() * renderer.width - world.x, Math.random() * renderer.height - world.y); // 随机的位置 aliens.push(alien); world.addChild(alien); // 类比iOS [world addSubview:alien]; } animate(); } function animate() { for (var i = 0; i < number; i++) { var alien = aliens[i]; // 获取每个外星人对象 alien.rotation += 0.1; // 外星人旋转角度递增0.1 } angles += 0.01; world.scale = new PIXI.Point(Math.sin(angles), Math.sin(angles)); world.rotation += 0.01 renderer.render(stage); // 设置RootView为stage，从stage开始渲染，递归的渲染所有子视图 requestAnimationFrame(animate); // 16.67ms之后调用animate函数 }工程源码见附件不会搭建apache的同学，可以再app中输入这个url来打开
AEPixi打开：http://download.taobaocdn.com/appengine-download/test/pixi001/index.js浏览器打开：http://download.taobaocdn.com/appengine-download/test/pixi001/index.html
代码中的number字段表示外星人的个数，有没有想法改成2000？20000？没有关系，测试一下自己手机的GPU性能极限，没有性能测试，怎么能说了解自己的手机呢？测试手机HTC G10【2010年上市】
H5是建立在浏览器（我们简单地成为WebKit）上，运行环境依赖支持Dom和Css的WebCore、支持JS的JSCore上，因为各个平台都有相应地浏览器支持，所以H5的跨平台性非常赞，开发人群也非常多。
有一句话，我很喜欢，技术同学有能力看到未来2~5年的变化。移动互联网兴起后，用户体验上升一个台阶，前端的开发成本成倍的增加，对商业公司来说，开发成本、效率、安全都有不同程度的挑战，成本增加的同时，盈利能力没有本质提升。商业公司的本质不就是成本、利润吗？脚本的兴起不也是这原因吗？swift、lua、python等脚本在android、ios平台写出的代码不能通用，就是因为底层的内核不同意，没有提供统一的api。ReactNative、钛、母夜叉等框架，本质就是对上层提供统一的api，让js可以写一套相同的代码~~~
不说了，知道的太多，心里反而容易受累。
下一章）我们一起深入的谈谈pixi.js，一个号称是SuperFast的图形引擎，它究竟Fast在哪里呢？
