【17-A-6】X-Platform Development with ngCore

Developer Summit 2011

X-Platform Development with ngCore

Kazuhiro KONDO
kondo.kazuhiro@dena.jp
DeNA, inc
Copyright (c) 1999-2010 DeNA Co.,Ltd. All rights reserved.

はじめに

本日のお題は
“Smartphone X-Platform Development”

X-Platform == “X-Device”
Platform == “Android” || “iOS”


自己紹介
近藤和弘 (33)
所属
株式会社ディー・エヌ・エー
ソーシャルメディア事業本部ソーシャルゲーム統括部
スマートフォン開発グループグループリーダー
略歴
‘02/03 大阪大学大学院基礎工学研究科修士課程修了
‘02/04 ソニー(株)入社
’02/04 ソニーエリクソン・モバイルコミュニケーションズ(株)に出向
‘07/04 ソニーエリクソン・モバイルコミュニケーションズ(株)に転籍
‘10/10 株式会社ディー・エヌ・エーに転職


Contents
1. What can ngCore do ?
2. Architecture of ngCore
3. How to develop application with ngCore
4. Inside of ngCore-based application
5. Next step
6. Summary


1. What can ngCore do ?


Quiz


Answer

× ×

○ ○

Tap Slash Ninja


Demo


Capability

Possible Possible

Coming Coming
Soon ! Soon !

Why ngCore ?
ngCore is a technology
for ”Social Game on Smartphone”

Quick development High-quality UX
on X-Platform for Smartphone

Social Gameの成功には Smartphoneユーザは、
クイックなアップデートが必須 SmartphoneレベルのUXを求める
できるだけ多くのユーザを集めるには実装手法は言い訳にならない
X-Platform性も重要


2. Architecture of ngCore


Mobage Service Architecture
国内）
モバゲータウン（国内） Mobage
JP Local API Common API US Local API
サービス

サービスAPI
サービスサービスAPI
サービスサービスAPI
サービス
for Android for ngCore for iOS

アプリ
Androidアプリ ngCore アプリアプリ
iOSアプリ
アプリケーション
（Java）
）（JavaScript）
）（Objective-C）
）

ngCore エンジン

OS Android iOS


ngCore Overall Architecture
Mobage
App Hosting Server

ngCore-based Apps (JavaScript)

ngCore Modules (JavaScript)

Android Apps ngCore ngCore iOS Apps
Runtime Runtime
for Android for iOS
Android
(C++) (Obj-C)
APP-FW (Java)

Android iOS
(C++) (Obj-C)


Application Packaging & Release
Androidの場合
の iOSの場合
の
Mobage
App Hosting Server
App-A App-B App-A App-B

ngCore Runtime ngCore Runtime
for Android for Android

App-A.app App-B.app
App-A App-B

ngCore Runtime
for Android

MobageApp.apk App-A.app App-B.app

Client-side Architecture - Android -
ngCore Runtime for Android

JavaScript Engine (V8 Engine)
v8::Function::Call()

Native-side Java-side
Runtime Logic Runtime Logic
Physics (Box2D)
Storage (sqlite3) Audio
Network (libcurl) Graphics Device
(OpenGLES) UI (android.widget)
Library

Android
APP-FW (Java)

Android


Client-side Architecture - iOS -
ngCore Runtime for iOS

JavaScript Engine

UIWebView
stringByEvaluatingJavaScriptFromString()
Runtime Logic

Physics (Box2D)
Storage (sqlite3) Audio
Device
Library Graphics (OpenGLES)
Network
UI (UIKit)

JavaScriptCore
iOS
(in UIWebView)


Client-side Architecture - Flash -
ngCore Runtime for Flash

JavaScript Engine

ExternalInterface.call()
Runtime Logic

Physics (Box2D)
Audio
Graphics
Library Network
Storage
UI (Flex UIComponent)

Flash Player / Web Browser


3. How to develop application
with ngCore


Mobage SDK
JavaScript APIs to access the key features
ngCore Game Tech
Social Game Services
Currency & Commerce Services
Advertising Services
Analytics Services
Development toolkit
Runtime (ngCore Binary for Android/iOS/Flash)
Instant app-hosting server for development
Limited Mobage Application (w/ UI for developer facing service)
Application packaging tool


Mobage SDK (as of v0.9)
JavaScript APIs to access the key features
ngCore Game Tech
Analytics Services
Development toolkit
Runtime (ngCore Binary for Android/iOS/Flash)
Instant app-hosting server for development
Limited Mobage Application (w/ UI for developer facing service)
Application packaging tool


環境構築
必要物資
MacOSX Snow Leopard(10.6.X) with Internet
実は Win, Linuxでも…
To your PC
Install Eclipse, Android SDK
Install XCode, iOS SDK
Install node.js
Install(=unzip) Mobage SDK
To your device
Install Runtime apk / app


開発手順 (デモ)
App Hosting Server 起動
$ cd ~/SDK
$ make server
Server running at http://localhost:8002/

動作確認
Flash
Android
iOS


4. Inside of ngCore-based application


標準Module群
Core
GL2 (2D Graphics)
Audio (Music, Effect)
Device (各種状態通知, Location, …)
Network (XHR, Downloader)
Physics2 (2D Physics)
Storage (FS, Key-Value Store)
UI (UI Widget)
Localization (Coming soon…)


JavaScript
提供Moduleは, CommonJS Modules 1.0 に
準拠
exports.add = function() { /* impl */ };
var add = require(‘math’).add;

各ngCore Runtime中のJavaScript Engine は
ECMAScript 3rd準拠
Android : V8 Engine
iOS : JavaScriptCore


Application Structure (1/3)
function main() {
// initialize and start glview
var glView = new UI.GLView();
glView.onload = function() {
gameInit();
};
glView.setAttribute(…);

// Add a back button.
var back = new UI.Button();
back.setNormalText('x');
back.setFrame([10, 10, 64, 64]);
back.onclick = function() {
var LGL = LocalGameList;
LGL.runUpdatedGame('/Samples/Launcher');
};
NGWindow.document.addChild(back);
}


var Tank = Core.MessageListener.subclass({
initialize: function() {
// Create a node to house everything.
this._node = new GL2.Node();
this._node.setPosition(...);
// Create body.
this._sprite = new GL2.Sprite();
this._sprite.setAnimation(a, t);
this._node.addChild(this._sprite);
// Create touch target.
this._target = new GL2.TouchTarget();
this._target.setAnchor(...);
this._target.setSize(...);
this._target.getTouchEmitter().addListener(this, this.onTouch);
this._node.addChild(this._target);
// Set to be notified on update.
Core.UpdateEmitter.addListener(this, this.onUpdate);
},
…

destroy: function() { ... },
setPosition: function(x, y) { … },
getNode: function() { … },

onUpdate: function(delta) {
...
var p = this._node.getPosition();
p.setX(p.getX() + this._vx * delta);
p.setY(p.getY() + this._vy * delta);
...
this._node.setPosition(p);
},

onTouch: function(touch) {
...
},
});
アプリケーションの構造は, Android/iOSアプリ風に

描画パフォーマンス (2011/02/11版)
ベンチマークアプリ
64 x 64の画像で構成されるTankを、アニメーションさせながら
動かすアプリ
Tankの数によるフレームレートの変化をざっくり計測
以下の3方式で比較
Native OpenGL ES (Java / Objective-C)
ngCore JavaScript
JavaScript + Canvas
環境は以下の通り
端末: Desire HD, Nexus S / iPhone 3GS, iPhone 4
Mobage SDK バージョン : 0.9


Performance
HTC Desire HD の場合
fps
60 Java
ngCore
50
JavaScript + Canvas
40

30

20

10

1 10 100 200 300 400 500
Tankの数

Performance
Samsung Nexus S の場合
fps
60 Java
ngCore
50
JavaScript + Canvas
40

30

20

10

1 10 100 200 300 400 500
Tankの数

Performance
iPhone 3GS の場合
fps
60 Objective-C
ngCore
50
JavaScript + Canvas
40

30
参考: JavaScript + CSS
20

10

1 10 100 200 300 400 500
Tankの数

Performance
iPhone 4 の場合
fps
60 Objective-C
ngCore
50
ここなら十分作れる
ここなら十分作れる
十分作れる!! JavaScript + Canvas
40

30
もちろん底上げも
もちろん底上げも
底上
20 参考: JavaScript + CSS
従来ここでがんばっていた・・・
従来ここでがんばっていた・・・
ここでがんばっていた
10

1 10 100 200 300 400 500
Tankの数

5. Next step


As Social Game SDK
Social Game ならではの API の提供
Analytics Services
対応機能の拡大
3D Support など
開発ツールの充実

ngCore ⊂ Mobage SDK, a Social Game SDK

標準Moduleとして提供されていない機能
シーン管理 Dn.SceneDirector
高レベルタッチイベント処理 Dn.TouchHandler
JSONベースの画面構築 Dn.UIBuilder
ゲーム独自フォント Dn.ImageFontFactory
エフェクト処理 Dn.VFX
・・・・・・

SG開発で欲しい機能のうち DeNA内製SG開発の
現在提供されていない過程で生まれた機能は,
機能はまだまだ多い DnLibとして公開中

6. Summary


Summary
X-Platform development with ngCore
Web app-like development style with JavaScript
Android/iOS-like app structure
Performance for enough UX on Smartphone
Now on growing up !!

Why don’t we release our games to
50 million users with this X-Platform app
dev solution ?


ご清聴ありがとうございました !!

Get Mobage SDK with ngCore
http://developer.mobage.com/

【17-A-6】X-Platform Development with ngCore

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (20)

Similar to 【17-A-6】X-Platform Development with ngCore

Similar to 【17-A-6】X-Platform Development with ngCore (20)

More from Developers Summit

More from Developers Summit (20)

【17-A-6】X-Platform Development with ngCore