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

Copyright (c) 1999-2010 DeNA Co.,Ltd. All rights reserved.

X-Platform Development with ngCore

Kazuhiro KONDO [email protected]

DeNA, inc

Developer Summit 2011


はじめに

�本日のお題は

“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

ComingSoon !

ComingSoon !

Possible Possible


Why ngCore ?

ngCore is a technology

for ”Social Game on Smartphone”

Quick developmenton X-Platform

High-quality UXfor Smartphone

Social Gameの成功には

クイックなアップデートが必須できるだけ多くのユーザを集めるにはX-Platform性も重要

Smartphoneユーザは、SmartphoneレベルのUXを求める実装手法は言い訳にならない


2. Architecture of ngCore


Mobage Service Architecture

ngCore アプリアプリアプリアプリ

（（（（JavaScript））））

Android iOSOS

サービスサービスサービスサービス

アプリケーションアプリケーションアプリケーションアプリケーション

ngCore エンジンエンジンエンジンエンジン

モバゲータウンモバゲータウンモバゲータウンモバゲータウン（（（（国内国内国内国内）））） Mobage

JP Local API US Local APICommon API

サービスサービスサービスサービスAPIfor ngCore

iOSアプリアプリアプリアプリ

（（（（Objective-C））））

サービスサービスサービスサービスAPIfor iOS

Androidアプリアプリアプリアプリ

（（（（Java））））

サービスサービスサービスサービスAPIfor Android


ngCore Overall Architecture

Android

(C++)

iOS

(Obj-C)

ngCore

Runtimefor Android

(C++)Android

APP-FW (Java)

ngCoreRuntimefor iOS(Obj-C)

ngCore Modules (JavaScript)

iOS AppsAndroid Apps

ngCore-based Apps (JavaScript)

Mobage

App Hosting Server


Mobage

App Hosting Server

Application Packaging & ReleaseAndroidのののの場合場合場合場合

ngCore Runtimefor Android

MobageApp.apk

App-A App-B

iOSのののの場合場合場合場合

App-A App-B

App-A.app App-B.app

ngCore Runtime

for Android

App-A.app

App-A

ngCore Runtimefor Android

App-B.app

App-B


Client-side Architecture - Android -

JavaScript Engine (V8 Engine)

Native-sideRuntime Logic

Android

ngCore Runtime for Android

Android

APP-FW (Java)

Audio

DeviceUI (android.widget)

Java-sideRuntime Logic

Graphics(OpenGLES)

Library

Physics (Box2D)Storage (sqlite3)Network (libcurl)

v8::Function::Call()


Client-side Architecture - iOS -

JavaScript Engine

ngCore Runtime for iOS

Runtime Logic

Library

iOSJavaScriptCore(in UIWebView)

Audio

DeviceGraphics (OpenGLES)

NetworkUI (UIKit)

Physics (Box2D)Storage (sqlite3)

UIWebView

stringByEvaluatingJavaScriptFromString()


Client-side Architecture - Flash -

JavaScript Engine

ngCore Runtime for Flash

Runtime Logic

Library

Flash Player / Web Browser

Physics (Box2D)AudioGraphicsNetwork

StorageUI (Flex UIComponent)

ExternalInterface.call()


3. How to develop applicationwith 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

� Social Game 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 glviewvar 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 の場合

1 10 100 200 300 500Tankの数

60

fps

30

50

40

20

10

Java

ngCore

JavaScript + Canvas

400


Performance

� Samsung Nexus S の場合

1 10 100 200 300 500Tankの数

60

fps

30

50

40

20

10

Java

ngCore

JavaScript + Canvas

400


Performance

� iPhone 3GS の場合

1 10 100 200 300 500Tankの数

60

fps

30

50

40

20

10

Objective-C

ngCore

JavaScript + Canvas

400

参考: JavaScript + CSS


Performance

� iPhone 4 の場合

1 10 100 200 300 500Tankの数

60

fps

30

50

40

20

10

Objective-C

ngCore

JavaScript + Canvas

400

参考: JavaScript + CSS

従来従来従来従来ここでがんばっていたここでがんばっていたここでがんばっていたここでがんばっていた・・・・・・・・・・・・

ここならここならここならここなら十分作十分作十分作十分作れるれるれるれる!!

もちろんもちろんもちろんもちろん底上底上底上底上げもげもげもげも


5. Next step


As Social Game SDK

� Social Game ならではの API の提供� Social Game Services




�対応機能の拡大� 3D Support など

�開発ツールの充実

ngCore ⊂ Mobage SDK, a Social Game SDK


標準Moduleとして提供されていない機能

� シーン管理

�高レベルタッチイベント処理

� JSONベースの画面構築

� ゲーム独自フォント

� エフェクト処理

� ・・・

Dn.SceneDirector

Dn.TouchHandler

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 ngCorehttp://developer.mobage.com/

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

Documents

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