09. WebApp2.0时代启程:倒立者赢,挑战Android性能极限-阿里云开发者社区

开发者社区> 开发与运维> 正文

09. WebApp2.0时代启程:倒立者赢,挑战Android性能极限

简介: 紧接上文,在终端硬件资源有限的大背景下,业务脚本+图形内核,将是未来主流的开发方式。AEPixi使用C/C++、JS、JNI、OC等混合语言开发,将pixi.js变成高性能的Native内核,提供上层pixi.js标准的API,无缝的兼容浏览器开发好的代码,实现浏览器开发,无需编译,到处运行的开发方式。 今天我们做一个H5的Demo,使用FireFox开发,开发完成之后,直接使用上一
紧接上文,在终端硬件资源有限的大背景下,业务脚本+图形内核,将是未来主流的开发方式。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 【上一章节的末尾的二维码】
screenshot

二)理解pixi.js的技术框架

这里先简单地了解一下概念

2.1 Node/Container相当于Android/iOS的View。这里引擎官网的图片和文字:

Organize your objects in hierarchical trees, with parent-child relationships.
screenshot

从上图可以看到,在pixi中,每个Node就相当于iOS中的一个View,Node.addChild(Node),就像iOS中[UIView addSubview:UIView]

2.2 Renderer集成了OpenGL ES的封装

screenshot

从上图可以看到,游戏世界里,基本的元素:Sprite、Texture、MovieClip、Rope、Graphics、TilingSprite等等;
就像iOS中的UIImageView、UILabel一样,创建完成对象实例后,需要将坐标、缩放、旋转、图片等数据,转换成GPU可以运行的OpenGL数据,Renderer就是OpenGLES的封装。
相当于iOS的UIWindow对象,负责管理硬件资源,只在初始化的时候使用一次,每次视图更新,在调用一次接口。

2.3 AssetLoader相当于iOS/Android的UIImage/BitmapFactory

screenshot

从上图可以看到,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函数
}

screenshot

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字段表示外星人的个数,有没有想法改成200020000?没有关系,测试一下自己手机的GPU性能极限,没有性能测试,怎么能说了解自己的手机呢?
测试手机HTC G10【2010年上市】
screenshot

3.5.1 100个外星人

screenshot

3.5.2 500个外星人

screenshot

3.5.3 2000个外星人

screenshot

3.5.4 10000个外星人

screenshot

四)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在哪里呢?

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章