HTML5小游戏转换成mobile应用

继上次总结html5做小游戏的经验后，一直工作繁忙，到现在才发出这篇迟迟的总结。好，言归正传。

把HTML5转换成mobile有很多选择，主要针对android平台尝试了一些方式。把html5直接转成android应用可以用phonegap，android sdk，Rexsee和appMobi等。我试了前两种方式，下面会比较一下这两种方式，并总结一下经验和遇到的问题。

1. PhoneGap

PhoneGap作为一个优秀的移动开发框架，受到很多人的亲睐。它可以生成IOS，android，windows phone，blackberry， webos，symbian平台上的应用。真正做到利用html5实现一次开发，多个平台运行。

如何用PhoneGap开发这里就不说了，主要介绍一下 PhoneGap的在线build 服务 https://build.phonegap.com/。它同样可以生成多平台的应用， 而且现在还是免费的。它用起来也非常的简单，只要把你的html5的程序打包上传，就可以很快的生成多平台的安装文件，供下载。注意的是上传的文件中必须包含index.html文件，否则build会失败。它还提供debugging方式，但没有尝试。由于当时build的程序在分辨率上有些问题，为了便于调试，以及想看看PhoneGap生成的应用速度是不是不如原生应用，于是还是决定尝试一下android sdk。

2. Android SDK

(1) 开发环境

简单的方法是去android官方网站下载ADT Bundle. 它包含了开发需要的所有组件：

• Eclipse + ADT plugin
• Android SDK Tools
• Android Platform-tools
• The latest Android platform
• The latest Android system image for the emulator

这样就不用再配置环境了。

(2) 模拟器环境配置

要想看到设备上的显示结果，需要建立一个模拟器Android Virtual Device(AVD)。建立的方法是在Android Virtual Device Manager中新增一个AVD，选择模拟设备的一些属性即可。

调试运行AVD时，会遇到速度很慢的问题，每次修改都要等半天才能看到结果。优化方法是，把AVD里的Image替换成x86的Image，它原来默认是arm的。需要重新下载安装一个x86的System Image，然后重新建立AVD。这样速度有所提升，但是还不是很满意。

(3) webview

用webview载入本地的html文件，即可生成应用程序。

WebView webview = new WebView(this);

setContentView(webview);

webview.loadUrl("file:///android_asset/index.html");

(4) 分辨率自适应

在html中加入如下语句，就可以支持分辨率自适应。

<meta name="viewport" content="width=device-width initial-scale=1.0, maximum-scale=1.0, user-scalable=no, target- densitydpi=device-dpi">

3. Html5功能的支持情况

(1) android版本

html5在android2.3以上才能正常访问，在android2.2以下，sdk中的webview还没完全支持HTML5。

(2) canvas

要支持canvas， 首先要打开对JavaScript的支持，如下：

webSettings.setJavaScriptEnabled(true);

(3) touch
mobile天生支持touch，对HTML5中的touch event，不用做任何额外的设置，就能工作得很好。

(4)  web storage

对localStorage的支持，只需配置本地数据库，但不需要建立数据库结构。设置如下:

webSettings.setDomStorageEnabled(true);

webSettings.setDatabaseEnabled(true);

        String dir = this.getApplicationContext().getDir("database", Context.MODE_PRIVATE).getPath();

webSettings.setDatabasePath(dir);

webview.setWebChromeClient(new WebChromeClient() { 

    public void onExceededDatabaseQuota(String url, String databaseIdentifier, long currentQuota, long estimatedSize, 

long totalUsedQuota, WebStorage.QuotaUpdater quotaUpdater) { 

                  quotaUpdater.updateQuota(estimatedSize*2); 

              } 

});

 

(5)  audio
audio看似简单，但是android sdk对html5 audio的支持并没有那么理想。android sdk还不支持<audio>标签，原因在于音频的编解码问题。要想支持audio，可能需要依赖于一些第三方的库。这一点让人有点失望，有待后续跟进。

4. 性能问题
让人很意外的是，程序在android sdk 2.3版本上跑的速度很快。在android sdk 4.0以上版本的速度要慢很多。原因是android 4.0在2d绘制机制上有了很大变化，但对canvas的渲染速度上却受到了影响。

综上所述，感觉要把html5应用直接转换到android应用还有一些路要走。不知直接转成ios应用，会不会问题会少些。有待后续尝试。

转换成 mobile应用只是一些尝试，说得不对的地方，还请批评指教。