紧接上文，在终端硬件资源有限的大背景下，业务脚本+图形内核，将是未来主流的开发方式。AEPixi使用C/C++、JS、JNI、OC等混合语言开发，将pixi.js变成高性能的Native内核，提供上层pixi.js标准的API，无缝的兼容浏览器开发好的代码，实现浏览器开发，无需编译，到处运行的开发方式。
今天我们做一个H5的Demo，使用FireFox开发，开发完成之后，直接使用上一章节我们发布的android app，直接访问查看效果。
一）搭建前端开发环境
Subline Text2 / VIM【其实开发js我用的是eclipse写的】
FireFox / Chrome / H5Builder【Chrome为了安全不支持加载本地图片，除非自己搭建一个本地的HttpServer】
AEPixi.apk 【上一章节的末尾的二维码】
二）理解pixi.js的技术框架
这里先简单地了解一下概念
2.1 Node/Container相当于Android/iOS的View。这里引擎官网的图片和文字:
Organize your objects in hierarchical trees, with parent-child relationships.
从上图可以看到，在pixi中，每个Node就相当于iOS中的一个View，Node.addChild(Node)，就像iOS中[UIView addSubview:UIView]
2.2 Renderer集成了OpenGL ES的封装
从上图可以看到，游戏世界里，基本的元素：Sprite、Texture、MovieClip、Rope、Graphics、TilingSprite等等；
就像iOS中的UIImageView、UILabel一样，创建完成对象实例后，需要将坐标、缩放、旋转、图片等数据，转换成GPU可以运行的OpenGL数据，Renderer就是OpenGLES的封装。
相当于iOS的UIWindow对象，负责管理硬件资源，只在初始化的时候使用一次，每次视图更新，在调用一次接口。
2.3 AssetLoader相当于iOS/Android的UIImage/BitmapFactory
从上图可以看到，AssetLoader负责读取本地/网络的纹理资源，并将解码后的Texture(Bitmap)统一的保存在本地，多个对象可以共享同一张图片资源。
三）开始写Demo
Demo的核心代码一共40行，由三部分组成：Html空壳 + JS代码 + 资源文件
3.1 搭建一个干净的html，引入pixi.js和index.js，分别用于pixi库和自己的代码
<!DOCTYPE HTML>
<html>
<head>
<title>SpriteSheet</title>
<script src="pixi.js"></script>
</head>
<body>
<script src="index.js"></script>
</body>
</html>
pixi没有使用css和dom来做UI，它使用了canvas和webgl作为渲染技术。
H5作为前端展示工具，分为两种，一种是基于dom的css，一种是基于canvas的API，二者的优势和不足在《》中已经讲过，不熟悉的同学请回顾上文。
3.2 预置资源文件
{"frames": {
"eggHead.png":
{
"frame": {"x":2,"y":169,"w":142,"h":157},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":142,"h":157},
"sourceSize": {"w":142,"h":157}
},
"flowerTop.png":
{
"frame": {"x":2,"y":328,"w":119,"h":181},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":119,"h":181},
"sourceSize": {"w":119,"h":181}
},
"helmlok.png":
{
"frame": {"x":123,"y":328,"w":123,"h":177},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":123,"h":177},
"sourceSize": {"w":123,"h":177}
},
"skully.png":
{
"frame": {"x":2,"y":2,"w":155,"h":165},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":155,"h":165},
"sourceSize": {"w":155,"h":165}
}},
"meta": {
"app": "http://www.texturepacker.com",
"version": "1.0",
"image": "SpriteSheet.png",
"format": "RGBA8888",
"size": {"w":256,"h":512},
"scale": "1",
"smartupdate": "$TexturePacker:SmartUpdate:9e3e5afd01ea8e418afabfbdcd724485$"
}
}
在计算机的世界，图形渲染和展示都是GPU的工作，为了提高性能，将多种图片资源整合成一张大图，是不错的选择。（为什么这样性能好，我们先挖坑，后续我们谈谈OpenGL的加速原理）
json文件描述了各个图片资源对应大图的坐标位置，资源加载完成之后，内存中的bitmap将会释放，将不再占用内存。（原理请回顾：《》）
3.3 核心代码
千言万语，都在代码的注释中
// 创建渲染器，可以理解为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函数
}
3.4 性能测试
工程源码见附件
不会搭建apache的同学，可以再app中输入这个url来打开
AEPixi打开：http://download.taobaocdn.com/appengine-download/test/pixi001/index.js
浏览器打开：http://download.taobaocdn.com/appengine-download/test/pixi001/index.html
3.5性能极限
代码中的number字段表示外星人的个数，有没有想法改成2000？20000？没有关系，测试一下自己手机的GPU性能极限，没有性能测试，怎么能说了解自己的手机呢？
测试手机HTC G10【2010年上市】
3.5.1 100个外星人
3.5.2 500个外星人
3.5.3 2000个外星人
3.5.4 10000个外星人
四）AEPixi与H5的相同与不同
H5是建立在浏览器（我们简单地成为WebKit）上，运行环境依赖支持Dom和Css的WebCore、支持JS的JSCore上，因为各个平台都有相应地浏览器支持，所以H5的跨平台性非常赞，开发人群也非常多。
相同点：
都是JS开发，使用相同的代码，相同的pixi.js。不同点：
运行环境不同。
H5运行在Webkit之上，AEPixi运行在SpiderMonkey+C/C++ + OpenGL之上。
AEPixi让js直接调用OpenGL，绕过了webkit的沙箱机制，不依赖dom、css，是一个纯净的js运行环境
AEPixi不支持dom、css、document等传统的API，没有WebSockit，不支持jquery等等好处：
统一的跨平台支持，把大量浮点数运算和C的底层API封装，提供高性能的JS API支持。
不支持的功能，后续会一点点弥补上去，不要慌~~~
总结）iOS/Android/H5的未来在哪里
有一句话，我很喜欢，技术同学有能力看到未来2~5年的变化。
移动互联网兴起后，用户体验上升一个台阶，前端的开发成本成倍的增加，对商业公司来说，开发成本、效率、安全都有不同程度的挑战，成本增加的同时，盈利能力没有本质提升。
商业公司的本质不就是成本、利润吗？脚本的兴起不也是这原因吗？
swift、lua、python等脚本在android、ios平台写出的代码不能通用，就是因为底层的内核不同意，没有提供统一的api。
ReactNative、钛、母夜叉等框架，本质就是对上层提供统一的api，让js可以写一套相同的代码~~~
不说了，知道的太多，心里反而容易受累。
下一章）我们一起深入的谈谈pixi.js，一个号称是SuperFast的图形引擎，它究竟Fast在哪里呢？
325
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
