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

4,839 views

Published on

0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,839
On SlideShare
0
From Embeds
0
Number of Embeds
71
Actions
Shares
0
Downloads
126
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

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

  1. 1. Developer Summit 2011X-Platform Development with ngCore Kazuhiro KONDO kondo.kazuhiro@dena.jp DeNA, inc Copyright (c) 1999-2010 DeNA Co.,Ltd. All rights reserved.
  2. 2. はじめに 本日のお題は “Smartphone X-Platform Development” X-Platform == “X-Device” Platform == “Android” || “iOS” Copyright (c) 1999-2010 DeNA Co.,Ltd. All rights reserved.
  3. 3. 自己紹介 近藤 和弘 (33) 所属 株式会社ディー・エヌ・エー ソーシャルメディア事業本部ソーシャルゲーム統括部 スマートフォン開発グループ グループリーダー 略歴 ‘02/03 大阪大学大学院基礎工学研究科修士課程修了 ‘02/04 ソニー(株)入社 ’02/04 ソニーエリクソン・モバイルコミュニケーションズ(株)に出向 ‘07/04 ソニーエリクソン・モバイルコミュニケーションズ(株)に転籍 ‘10/10 株式会社ディー・エヌ・エーに転職 Copyright (c) 1999-2010 DeNA Co.,Ltd. All rights reserved.
  4. 4. 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.
  5. 5. 1. What can ngCore do ?Copyright (c) 1999-2010 DeNA Co.,Ltd. All rights reserved.
  6. 6. Quiz Copyright (c) 1999-2010 DeNA Co.,Ltd. All rights reserved.
  7. 7. Answer × × ○ ○ Copyright (c) 1999-2010 DeNA Co.,Ltd. All rights reserved.
  8. 8. Tap Slash Ninja Copyright (c) 1999-2010 DeNA Co.,Ltd. All rights reserved.
  9. 9. Demo Copyright (c) 1999-2010 DeNA Co.,Ltd. All rights reserved.
  10. 10. Capability Possible Possible Coming Coming Soon ! Soon ! Copyright (c) 1999-2010 DeNA Co.,Ltd. All rights reserved.
  11. 11. Why ngCore ? ngCore is a technology for ”Social Game on Smartphone” Quick development High-quality UX on X-Platform for SmartphoneSocial Gameの成功には Smartphoneユーザは、クイックなアップデートが必須 SmartphoneレベルのUXを求めるできるだけ多くのユーザを集めるには 実装手法は言い訳にならないX-Platform性も重要 Copyright (c) 1999-2010 DeNA Co.,Ltd. All rights reserved.
  12. 12. 2. Architecture of ngCoreCopyright (c) 1999-2010 DeNA Co.,Ltd. All rights reserved.
  13. 13. 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 Copyright (c) 1999-2010 DeNA Co.,Ltd. All rights reserved.
  14. 14. 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) Copyright (c) 1999-2010 DeNA Co.,Ltd. All rights reserved.
  15. 15. 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 Copyright (c) 1999-2010 DeNA Co.,Ltd. All rights reserved.
  16. 16. Client-side Architecture - Android - ngCore Runtime for Android JavaScript Engine (V8 Engine) v8::Function::Call() Native-side Java-side Runtime Logic Runtime LogicPhysics (Box2D)Storage (sqlite3) AudioNetwork (libcurl) Graphics Device (OpenGLES) UI (android.widget) Library Android APP-FW (Java) Android Copyright (c) 1999-2010 DeNA Co.,Ltd. All rights reserved.
  17. 17. Client-side Architecture - iOS - ngCore Runtime for iOS JavaScript Engine UIWebView stringByEvaluatingJavaScriptFromString() Runtime LogicPhysics (Box2D)Storage (sqlite3) Audio Device Library Graphics (OpenGLES) Network UI (UIKit) JavaScriptCore iOS (in UIWebView) Copyright (c) 1999-2010 DeNA Co.,Ltd. All rights reserved.
  18. 18. Client-side Architecture - Flash - ngCore Runtime for Flash JavaScript Engine ExternalInterface.call() Runtime LogicPhysics (Box2D) Audio Graphics Library Network Storage UI (Flex UIComponent) Flash Player / Web Browser Copyright (c) 1999-2010 DeNA Co.,Ltd. All rights reserved.
  19. 19. 3. How to develop application with ngCoreCopyright (c) 1999-2010 DeNA Co.,Ltd. All rights reserved.
  20. 20. 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.
  21. 21. 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.
  22. 22. 環境構築 必要物資 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.
  23. 23. 開発手順 (デモ) 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.
  24. 24. 4. Inside of ngCore-based applicationCopyright (c) 1999-2010 DeNA Co.,Ltd. All rights reserved.
  25. 25. 標準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.
  26. 26. 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.
  27. 27. 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); } Copyright (c) 1999-2010 DeNA Co.,Ltd. All rights reserved.
  28. 28. 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.
  29. 29. 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.
  30. 30. 描画パフォーマンス (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.
  31. 31. Performance HTC Desire HD の場合fps 60 Java ngCore 50 JavaScript + Canvas 40 30 20 10 1 10 100 200 300 400 500 Tankの数 Copyright (c) 1999-2010 DeNA Co.,Ltd. All rights reserved.
  32. 32. Performance Samsung Nexus S の場合fps 60 Java ngCore 50 JavaScript + Canvas 40 30 20 10 1 10 100 200 300 400 500 Tankの数 Copyright (c) 1999-2010 DeNA Co.,Ltd. All rights reserved.
  33. 33. 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の数 Copyright (c) 1999-2010 DeNA Co.,Ltd. All rights reserved.
  34. 34. 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の数 Copyright (c) 1999-2010 DeNA Co.,Ltd. All rights reserved.
  35. 35. 5. Next stepCopyright (c) 1999-2010 DeNA Co.,Ltd. All rights reserved.
  36. 36. 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.
  37. 37. 標準Moduleとして提供されていない機能 シーン管理 Dn.SceneDirector 高レベルタッチイベント処理 Dn.TouchHandler JSONベースの画面構築 Dn.UIBuilder ゲーム独自フォント Dn.ImageFontFactory エフェクト処理 Dn.VFX ・・・ ・・・SG開発で欲しい機能のうち DeNA内製SG開発の 現在提供されていない 過程で生まれた機能は, 機能はまだまだ多い DnLibとして公開中 Copyright (c) 1999-2010 DeNA Co.,Ltd. All rights reserved.
  38. 38. 6. SummaryCopyright (c) 1999-2010 DeNA Co.,Ltd. All rights reserved.
  39. 39. 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.
  40. 40. ご清聴ありがとうございました !! Get Mobage SDK with ngCore http://developer.mobage.com/ Copyright (c) 1999-2010 DeNA Co.,Ltd. All rights reserved.

×