【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 kondo.kazuhiro@dena.jp

DeNA, inc

Developer Summit 2011

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

はじめに

�本日のお題は

“Smartphone X-Platform Development”

� X-Platform == “X-Device”

� Platform == “Android” || “iOS”

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

自己紹介

� 近藤 和弘 (33)

� 所属� 株式会社ディー・エヌ・エー

� ソーシャルメディア事業本部ソーシャルゲーム統括部

スマートフォン開発グループ グループリーダー

� 略歴� ‘02/03 大阪大学大学院基礎工学研究科修士課程修了

� ‘02/04 ソニー(株)入社

� ’02/04 ソニーエリクソン・モバイルコミュニケーションズ(株)に出向

� ‘07/04 ソニーエリクソン・モバイルコミュニケーションズ(株)に転籍

� ‘10/10 株式会社ディー・エヌ・エーに転職

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

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

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

1. What can ngCore do ?

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

Quiz

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

Answer

○○○○ ○○○○

×××× ××××

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

Tap Slash Ninja

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

Demo

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

Capability

ComingSoon !

ComingSoon !

Possible Possible

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

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を求める実装手法は言い訳にならない

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

2. Architecture of ngCore

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

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

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

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

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

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

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

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()

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

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()

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

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()

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

3. How to develop applicationwith ngCore

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

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

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

Mobage SDK (as of v0.9)

� 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

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

環境構築

�必要物資� 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

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

開発手順 (デモ)

� App Hosting Server 起動� $ cd ~/SDK

� $ make server

� Server running at http://localhost:8002/

�動作確認� Flash

� Android

� iOS

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

4. Inside of ngCore-based application

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

標準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…)

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

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

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

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);

}

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

Application Structure (2/3)

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);},…

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

Application Structure (3/3)

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アプリ風に

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

描画パフォーマンス (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

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

Performance

� HTC Desire HD の場合

1 10 100 200 300 500Tankの数

60

fps

30

50

40

20

10

Java

ngCore

JavaScript + Canvas

400

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

Performance

� Samsung Nexus S の場合

1 10 100 200 300 500Tankの数

60

fps

30

50

40

20

10

Java

ngCore

JavaScript + Canvas

400

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

Performance

� iPhone 3GS の場合

1 10 100 200 300 500Tankの数

60

fps

30

50

40

20

10

Objective-C

ngCore

JavaScript + Canvas

400

参考: JavaScript + CSS

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

Performance

� iPhone 4 の場合

1 10 100 200 300 500Tankの数

60

fps

30

50

40

20

10

Objective-C

ngCore

JavaScript + Canvas

400

参考: JavaScript + CSS

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

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

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

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

5. Next step

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

As Social Game SDK

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

� Currency & Commerce Services

� Advertising Services

� Analytics Services

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

�開発ツールの充実

ngCore ⊂ Mobage SDK, a Social Game SDK

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

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

� シーン管理

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

� JSONベースの画面構築

� ゲーム独自フォント

� エフェクト処理

� ・・・

Dn.SceneDirector

Dn.TouchHandler

Dn.UIBuilder

Dn.ImageFontFactory

Dn.VFX

・・・

SG開発で欲しい機能のうち現在提供されていない機能はまだまだ多い

DeNA内製SG開発の過程で生まれた機能は,DnLibとして公開中

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

6. Summary

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

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 ?

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

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

Get Mobage SDK with ngCorehttp://developer.mobage.com/