Introduction
Download
License
Start
Adapter
FAQ

1、NativeCanvas - A Fast Canvas for Running HTML5 Games on Android

NativeCanvas is a high-performance game engine for running HTML5 games on Android mobile or TV. It  implements with C++, and base on openGL-ES and openSL-ES. it is compatible with the HTML5 standard, and HTML5 games (based on canvas) can be seamlessly integrated with NativeCanvas then running on Android device. NativeCanvas has no DOM, no CSS, only has JS, canvas, audio, image.... It was just born for the HTML5 game. With NativeCanvas, H5 mobile game  travel era truly arrived!


2、NativeCanvas Runtime Files(V1.0.2)

FilenameFile SizeFile Description
libnativecanvas.so5,862KBnativecanvas so Library
libnativecanvas.jar14KBnativecanvas jar Library
Total< 6MBLight and Fast


3、HTML5 Game Architecture

LevelH5 Game Based on WebViewH5 Game Based on NativeCanvas
L4HTML5 GameHTML5 Game
L3HTML5 Game FrameworkHTML5 Game Framework
L2WebViewNativeCanvas
L1Android OSAndroid OS


4、NativeCanvas Features

No.FeaturesDescription
1Canvascompatible with H5<canvas>
2Imagecompatible with H5<img>:  jpg/png/webp
3Audiocompatible with H5<audio>: mp3/ogg
4Timercompatible with H5 setTimeout, setInterval
5requestAnimationFramecompatible with H5 requestAnimationFrame
6LocalStoragecompatible with H5 LocalStorage
7Inputcompatible with H5 Touch & Keyboard Input
8XMLHttpRequestcompatible with H5 XMLHttpRequest
9WebSocketcompatible with H5 WebSocket
10NativeRequestnative capability support
11VideoTODO
12GamePadTODO
13WebVRTODO


5、NativeCanvas Operating Performance

The NativeCanvas demo game - SpeedKart(included in SDK) can reach to 58+ FPS, and FPS in Android WebView or XWalkView only get about 40+; Also NativeCanvas audio delay is lower than Android WebView or XWalkView, So NativeCanvas although light weight, but excellent performance.

CPU

Occupancy

Memory

Consumption

Power

Consumption


FPS

1.0% ~ 5.0%
30MB ~ 60MB
0.5 ~ 1.0mAh/min58+


6、H5 Game Engines NativeCanvas Support

Construct2, Phaser, ImpactJS...

More infomation about H5 game engines:https://html5gameengine.com/


nativecanvas-sdk-1.0.2.zip
6.62MBDownload
nativecanvas-demo-src.zip
6.49MBDownload

1、NativeCanvas offers a free trial version, and the LOGO icon will always show at the top left of the screen with unauthorized trial version at runtime.


2、If you need to acquire an authorized version of NativeCanvas, please provide the following information of the project with email to 403656045@qq.com:

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

(The contents of the table as an example, please submit the actual project information when applying for authorization)

Start

1、Download and uncompress the NativeCanvas SDK files

  SDK include: NativeCanvas library files, SpeedKart demo game source code.


2、Import SDK library files into Android project

- copy libnativecanvas.jar file to libs directory within Android project

- copy libnativecanvas.so file to libs/armeabi-v7a directory within Android project

- copy .ttf font files to assets/www/fonts directory within Android project if needed


3、Import HTML5 game files to Android project

- copy all of the files of HTML5 game to assets/www directory within Android project

- obtain NativeCanvas license and copy the license.dat file to assets/www directory

- edit index.html, remove the css, and insert following code if need:

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

     this code line lock the mobile orientation to landscape or 'portrait' to portrait orientation

- create the NativeCanvasView object in Android main activity, and call following code to load H5 game:

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

   for detail please reference the demo game in SDK package.


4、Apply native capability in H5 games

NativeCanvas supply the NativeRequest object to apply Android native capabiliy in H5 games, eg: ad, payment intergration.

JS code - payment example

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 code - payment example

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、Finnaly package the project to Android apk and publish it



Adapter

1. H5 game engines or frameworks  which NativeCanvas support:

Construct2, Phaser, ImpactJS...


2. NativeCanvas adapt to Construct2:

- Open the index.html file of the construct2 game, insert following code into <head>:

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

- translate the data.js file to utf-8 code

- make all the audio files satisfied with:  44.1K sample rate, 16 bits, two channels.


3. NativeCanvas adapt to Phaser:

- Open the index.html file of the Phaser game, insert following code into <body>:

<body>

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

</body>

- Initialize the game(renderer must be Phaser.CANVAS and parent must be null):

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

- Open Phaser.js file, found following code segment and modified it as the red font code:

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;

 },

you may also download the customed Phaser(2.5.0) version directly:

download url:http://nativecanvas.hynoo.cn/phaser-2.5.0.js
download url:http://nativecanvas.hynoo.cn/phaser-2.5.0.min.js‍‍

- if used BitmapFont in game, please convert the xxx.xml file to .json format.

- if used tile map in game, please call following code with all map layers. this will optimize the map scrolling speed obviously.

xLayer.renderSettings.enableScrollDelta = false;

- make all the audio files satisfied with:  44.1K sample rate, 16 bits, two channels.


FAQ

1、What is NativeCanvas ?

NativeCanvas is an excellent engine for running HTML5 games on Android mobile or TV. Relative to Android WebView or XWalkView, NativeCanvas has strong advantage in running HTML5 games. Because NativeCanvas has no weight DOM and CSS, it implements with C++ based on OpenGL-ES and OpenSL-ES. it is light weight and very fast. The SpeedKart game running on NativeCanvas can reach to 58+ FPS, but if running on Android WebView or XWalkView the FPS only has 45+ . Another platform game base on phaser tile map will drop the FPS down to below 40 when scrolling the map on Android WebView or XWalkView, but if scrolling on NativeCanvas the FPS always keep at 56+.


2、Is NativeCanvas free ?

NativeCanvas offer free trial version, and final version is not free, for detail about this please reference the NativeCanvas authorization.


3、What's the size of NativeCanvas ?

NativeCanvas running library files total size is less than 6MB.


4、What type of image NativeCanvas support ?

NativeCanvas support png, jpg and webp image.


5、What type of audio NativeCanvas support ?

NativeCanvas support mp3 and ogg audio. In orde to reduce the latency, the audio file must be: 44.1K sample rate, 16bits and two channes audio.


6、Can NativeCanvas play more than one audio simultaneously ?

NativeCanvas can play 5 audio sounds simultaneously.


7、How to lock the mobile screen orientation in H5 games ?

Insert following code into index.html file of the H5 Game:

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


8、How to capture the mobile BACK button event in H5 games ?

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

  if (event.keyCode == 4) {

      window.close();

  }
});

   

9、How to capture the game switch event from foreground to background and reverse in H5 games ?


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

  if (document.hidden) {

      //TODO: pause game...

  } else {

      //TODO: resume game...

  }

});



10、Does NativeCanvas support local data storage in H5 games ?

Yes, NativeCanvas has window.localStorage.


11、Dose NativeCanvas support network communication ?

Yes, NativeCanvas has XMLHttpRequest, and encapsulat to Ajax.


12、Does NativeCanvas support requestAnimationFrame吗 ?

Yes.


13、Does NativeCanvas support game assets hot-update online ?

Yes. After download new version of the game assets from server, then load it with:

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

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


14、Does NativeCanvas support H5 game framework or engine, eg: Phaser... ?

Yes., NativeCanvas supported H5 game frameworks include: Construct2, Phaser, ImpactJS...



Hynoo

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