NativeCanvas 简介
NativeCanvas 下载
NativeCanvas 授权
NativeCanvas 使用
NativeCanvas 适配
NativeCanvas 问答

1、NativeCanvas - Canvas for Running HTML5 Games on Android

一个采用C++实现并运行在Android手机/电视上的高性能游戏运行库,为Android手机/电视提供极佳的HTML5游戏运行环境。HTML5游戏(基于canvas)无需或稍加移植即可与NativeCanvas无缝集成然后运行在Android手机/电视上NativeCanvas没有DOM,没有CSS,只有JS,只有Canvas、Audio、Image...,她只为H5游戏而生。可以说有了NativeCanvas,H5手游时代到来了!


2、NativeCanvas Runtime Files(V1.0.2)

文件名文件大小说明
libnativecanvas.so5,862KBnativecanvas动态库
libnativecanvas.jar14KBnativecanvas jar库
合计< 6MBNativeCanvas短小精悍


3、HTML5游戏层次架构

层次基于传统WebView的H5游戏基于NativeCanvas的H5游戏
L4HTML5 GameHTML5 Game
L3HTML5游戏引擎(可选)HTML5游戏引擎(可选)
L2WebViewNativeCanvas
L1Android OSAndroid OS


4、NativeCanvas功能特性

编号能力描述
1Canvas兼容H5的<canvas>,提供绘图及渲染
2Image兼容H5的<img>,支持jpg/png/webp
3Audio兼容H5的<audio>,支持双声道mp3和ogg
4Timer兼容H5的setTimeout和setInterval
5requestAnimationFrame兼容H5的requestAnimationFrame
6LocalStorage兼容H5的LocalStorage
7Input兼容H5的Touch Input和Keyboard Input
8XMLHttpRequest兼容H5的XMLHttpRequest,并封装成了Ajax
9WebSocket兼容H5的WebSocket
10NativeRequest原生能力请求,包括设备事件/控制/广告/支付等
11VideoTODO
12GamePadTODO
13WebVRTODO


5、NativeCanvas运行性能

大部分主流手机运行基于NativeCanvas的赛车demo游戏的FPS达到58+,而在Android WebView或XWalkView中FPS只有40~50左右;而且NativeCanvas的音效延迟也低于Android WebView或XWalkView,可见NativeCanvas短小精悍,性能出色。

CPU占用率内存耗用电量耗用FPS
1.0% ~ 3.0%
30MB ~ 60MB
0.5 ~ 1.0mAh/min58+

(上表中的指标为赛车demo游戏在近100款主流手机中测试的平均结果)


6、NativeCanvas支持的主流HTML5游戏引擎

Construct2、Phaser、ImpactJS...

更多关于H5游戏引擎的资讯请看这里:https://html5gameengine.com/


nativecanvas-sdk-1.0.2.zip
6.62MB下载
nativecanvas-demo-src.zip
6.49MB下载

1、NativeCanvas提供免费试用版本,未经授权的试用版本在运行时屏幕画面左上角会显示NativeCanvas的LOGO图标。


2、若您需要获得授权版本的NativeCanvas,请提供以下信息到403656045@qq.com邮箱:

APP NameAPP Package NameAPP Version NameAPP Author
Escapecn.hynoo.game.escape1.0.0hynoo

(上表中的内容为示例,申请授权时请提交实际项目信息)

NativeCanvas 使用

1、下载并解压NativeCanvas SDK文件

  SDK文件包括:NativeCanvas运行库文件、赛车游戏demo版源码。


2、导入SDK库文件到Android项目中

- 将SDK中的libnativecanvas.jar文件复制到Android项目的libs目录下

- 将SDK中的libnativecanvas.so文件复制到Android项目的libs/armeabi-v7a目录下

- 如果有用到TTF格式的字体文件,请将.TTF格式的字体文件复制到assets/www/fonts目录下


3、导入HTML5游戏到Android项目中

在PC浏览器中完成对HTML5游戏的开发调试后,即可将HTML5游戏代码导入到Android项目中。

- 将HTML5游戏的所有文件拷贝到Android项目的assets/www目录下

- 获取NativeCanvas授权,并将授权文件license.dat文件拷贝到Android项目的assets/www目录下

- 修改index.html文件,去掉其中的css语句,因为NativeCanvas不支持css;并且根据需要加入以下语句:

        <script>window.screen.orientation.lock('landscape');</script>

    该语句将手机屏幕锁定为横屏朝向,锁定竖屏朝向则为'portrait'。

- 在Android项目的主界面文件中创建NativeCanvasView对象,然后调用以下语句完成对HTML5游戏的加载:

        canvasView.load("file:///android_asset/www/index.html");

    详见SDK中的实例项目源码。


4、游戏原生能力扩展

如果HTML5游戏中需要使用Android原生能力(如获取设备信息和事件以及集成第三方插件SDK等),可以通过NativeCanvas中提供的NativeRequest对象来实现(支持异步交互),以支付为例说明如下:

JS侧代码

var req = new window.NativeRequest();

var data = {money: 5, pid: 'coins'};

req.send("payment.create", JSON.stringify(data), function(response) {

  console.log("payment create success:", response.success);

});

Java侧代码

PluginManager.registerPluginHandler("payment.create", newPluginHandler() {

      @Override

      public void action(String params, long sessionId) throwsJSONException {

             JSONObject jsonParams = new JSONObject(params);

             int money = jsonParams.getInt(“money”);

             //TODO: complete the payment...

             JSONObject jsonResult = new JSONObject();

             jsonResult.put("success", true);

            PluginManager.nativeResponse(jsonResult , sessionId);

      }

});


5、最后将游戏项目打包成Android APK发布


NativeCanvas 适配

1、NativeCanvas当前版本支持的主流H5游戏引擎或框架

包括:Construtct2、Phaser、ImpactJS等,在使用时需要在游戏代码中对NativeCanvas进行一定的适配。


2、NativeCanvas适配Construct2

- 打开construct2游戏的index.html文件,在<head>中加入以下语句:

<script>window.navigator.userAgent= 'nativecanvas';</script>

- 注意将游戏的data.js文件转成utf-8编码的文件。

- 转换所有音频文件以满足:采样率44.1K,16位,双声道。


3、NativeCanvas适配Phaser

- 打开Phaser游戏的index.html文件,在<body>中加入以下语句:

<body>

<canvas id='canvas'></canvas>

</body>

- 在游戏代码中调用以下语句进行游戏初始化(renderer须为Phaser.CANVAS,parent须为null):

var game = new Phaser.Game(640, 480, Phaser.CANVAS);

- 打开Phaser.js引擎文件,找到以下代码行并改成红色字体代码即可:

Phaser.Canvas = {

     ...

     create: function (parent, width,height, id, skipPool) {

         width = width || 256;

         height = height || 256;

         if (skipPool === undefined)

         {

             var canvas = PIXI.CanvasPool.create(parent,width, height);

         }

         else

         {

             // varcanvas = document.createElement('canvas');

             var canvas= document.getElementById('canvas') || document.createElement('canvas');

         }

         if (typeof id === 'string' &&id !== '')

         {

             canvas.id = id;

         }

         canvas.width = width;

         canvas.height = height;

         canvas.style.display = 'block';

         return canvas;

  },

 …

或者直接从这里下载修改后的Phaser(2.5.0)版本:

下载‍地址:http://nativecanvas.hynoo.cn/phaser-2.5.0.js
下载地址http://nativecanvas.hynoo.cn/phaser-2.5.0.min.js‍‍

- 对于游戏中用到的BitmapFont字体文件,请将字体的xxx.xml文件转成json格式。

- 对于使用tilemap地图的游戏,将地图中的所有图层调用以下语句可明显提升tilemap滚屏的速度(可达到未滚屏时的FPS值)。

xLayer.renderSettings.enableScrollDelta = false;

- 转换所有音频文件以满足:采样率44.1K,16位,双声道。



NativeCanvas 问答

1、NativeCanvas是什么?

NativeCanvas是一个在Android手机/电视上完美运行HTML5游戏的高性能引擎,她以SDK的方式提供给手游开发者。相比于Android自带的浏览器或第三方的crosswalk在运行H5游戏方面(游戏图片渲染+游戏音效播放)都有着明显的性能优势。她直接基于OpenGL-ES和OpenSL-ES采用C++实现,极轻而又快速。同样的一款H5赛车游戏在Android自带的浏览器或crosswalk中运行时的FPS只能达到40~50,而在NativeCanvas中则能达到58+。一款基于Phaser的H5游戏在tilemap地图滚屏时如果是在Android自带的浏览器或crosswalk中运行会出现明显的掉帧(FPS低于40),而在NativeCanvas中则依然流畅。

2、NativeCanvas是免费的吗?

NativeCanvas提供免费版和正式版。正式版是收费的,详情请见NativeCanvas授权。

3、NativeCanvas是有多大?

NativeCanvas运行库文件总共不超过6MB。

4、NativeCanvas支持哪些格式图片?

NativeCanvas支持的图片格式:png、jpg和webp。

5、NativeCanvas支持哪些格式音频?

NativeCanvas支持的音频格式:mp3和ogg。为了降低音频延迟,音频文件必须满足:采样率44.1K,16位,双声道音频。

6、NativeCanvas同时支持多个音频同时播放吗?

NativeCanvas支持最多5个音频同时播放。

7、V8是什么?

V8是Google公司自主研发的超高性能javascript运行引擎,也是Google浏览器Chrome使用的脚本引擎。和其他的浏览器脚本引擎最大的不同是V8在加载js时就将脚本代码编译成机器码而不是字节码,因此V8获得业界最快脚本引擎的美誉。所以运行游戏,V8当然是NativeCanvas的不二之选。

8、如何在H5游戏中锁定手机屏幕朝向?

在H5游戏的index.html中,加入以下语句:

横屏朝向<script>window.screen.orientation.lock('landscape');</script>
竖屏朝向<script>window.screen.orientation.lock('portrait');</script>
解除锁定window.screen.orientation.unlock()

9、如何在H5游戏中捕获Android设备的back按键事件?

document.addEventListener('keyup', function(event){

   if (event.keyCode == 4) {

       window.close();

   }
});

10、如何在H5游戏中捕获游戏的前后台切换事件?

document.addEventListener('visibilitychange', function(event) {

   if (document.hidden) {

       //TODO: pause game...

   } else {

       //TODO: resume game...

   }

});

11、NativeCanvas支持本地数据存储吗?

支持,提供window.localStorage对象实现游戏中的数据存取能力。

12、NativeCanvas支持网络通讯吗?

当前版本的NativeCanvas提供了XMLHttpRequest对象,并封装成了ajax方法。

13、NativeCanvas支持requestAnimationFrame吗?

支持。

14、NativeCanvas支持游戏内容资源的热更新吗?

支持。开发者需要把新版本的游戏内容资源文件从服务端下载到手机中(内存和外存皆可),然后在load时将默认的入口地址“file:///android_asset/www/index.html”改为新版内容所在的路径即可,如:

canvasview.load("file:///data/data/xxx.xxx.xxx/www/index.html")  或

canvasview.load("file:///storage/emulated/0/xxx.xxx.xxx/www/index.html")

有关下载和热更新的java代码有需要者请发邮件到service@hynoo.cn

15、NativeCanvas支持哪些H5游戏引擎吗?

NativeCanvas当前版本支持的H5游戏引擎: Construct2、Phaser、ImpactJS


Hynoo

© 2008-2016 Hynoo. All Right Reserved. 粤ICP备09024680号