JavaScriptゲーム制作勉強会	  Vol.2	 (2011/8/23)	    第7回ありえるえりあ勉強会    JSで大規模・エンタープライズ開発               •        株式会社ディー・エヌ・エー	      ...
最初に•  いっぱい詰め込んだので時間が足りないかも	    –  懇親会に行くので質問とかご自由に!	  •  3番目の	  @monjudoh	  さんは写真撮影すると	     呪い殺されてゾンビにされてしまうかもしれない   ので禁止で...
自己紹介:渋川よしき                                                                                                     TwiTer:	  @...
ソーシャルゲームとは?	  Copyright	  (c)	  1999-­‐2011	  DeNA	  CO.,Ltd.	  All	  rights	  reserved.	   4/35
ソーシャルゲームの定義(渋川定義)•  ユーザ間で非同期なやりとりが発生するマルチ   プレーヤー型のゲーム	   –  5キー連打がソーシャルゲームではない	   –  複数人が同時にリアルタイムでプレイする(MMO)も    ソーシャルゲー...
ngCoreのゲームのアーキテクチャ	Copyright	  (c)	  1999-­‐2011	  DeNA	  CO.,Ltd.	  All	  rights	  reserved.	   6/35
ngCoreの実例                       	  Androidでも、iOSでも配信しております!	 Copyright	  (c)	  1999-­‐2011	  DeNA	  CO.,Ltd.	  All	  right...
ngCoreとは?•  JavaScriptで開発可能なゲームエンジンです。	  •  特徴としては	   –  マルチプラットフォーム	     •  同一ソース(JavaScript)でAndroidとiOSに対応	     •  テスト環...
ngCoreとは?•  JavaScriptで開発可能なゲームエンジンです。	  •  特徴としては	   –  マルチプラットフォーム	     •  同一ソース(JavaScript)でAndroidとiOSに対応	     •  テスト環...
DeNAのngCore製ゲームの構成                      ゲームロジック	                         /JavaScript	                            ngCore	  ...
DeNAのngCore製ゲームの構成                      ゲームロジック	                         /JavaScript	                            ngCore	  ...
DeNAのngCore製ゲームの構成                      ゲームロジック	                         /JavaScript	                            ngCore	  ...
DeNAのngCore製ゲームの構成                      ゲームロジック	                         /JavaScript	                            ngCore	  ...
役割分担•  ngCoreのクライアント	    –  アクションシーン(スペシャルミッション)	    –  サーバ側で作ったデータの再生	  •  ゲームサーバ	    –  パラメータ保持、パラメータ変化の計算	    –  アイテムの管...
役割分担•  ngCoreのクライアント	    –  アクションシーン(スペシャルミッション)	    –  サーバ側で作ったデータの再生	  •  ゲームサーバ	              アイテム購入機能はMobage  –  パラメータ...
ngCoreの開発サイクル                                                                      Build	                                 ...
ngCoreの開発サイクル                                                                     •       端末にランタイムをインストール	                ...
ngCoreの開発サイクル                                   •      ソースコードをまとめて1つのjsファイルに	                                     •      画...
ngCoreの開発サイクル                                                                     •      ベイクした結果を端末に配信	                   ...
コードはこんな感じ(イメージです)var GL2 = require(“./NGCore/Client/GL2”).GL2;var Core = require(“./NGCore/Client/Core”).Core;var MainLoop...
コードはこんな感じ(イメージです)var GL2 = require(“./NGCore/Client/GL2”).GL2;                                                 •    Common...
コードはこんな感じ(イメージです)var GL2 = require(“./NGCore/Client/GL2”).GL2;var Core = require(“./NGCore/Client/Core”).Core;var MainLoop...
コードはこんな感じ(イメージです)var GL2 = require(“./NGCore/Client/GL2”).GL2;var Core = require(“./NGCore/Client/Core”).Core;var MainLoop...
コードはこんな感じ(イメージです)var GL2 = require(“./NGCore/Client/GL2”).GL2;var Core = require(“./NGCore/Client/Core”).Core;var MainLoop...
ネットワークからのダウンロード•  DownloadManifestクラス	    –  配信するソースコード、画像、音声、JSONなどのデー     タのファイルをmanifest.jsonに書く	    –  ビルド時に、MD5値を計算	 ...
大規模JS開発を支えるngCore•  ソースコードレベル	    –  複数ファイルに分けてJavaScriptコードを開発	    –  複数モジュールをビルドサーバで1ファイルに統合	    –  モジュールごとの名前空間	      •...
忍者ロワイヤル	  JavaScript層のアーキテクチャ	   Copyright	  (c)	  1999-­‐2011	  DeNA	  CO.,Ltd.	  All	  rights	  reserved.	   27/35
ゲームの基本構成(1)•  階層型のシーン	   Copyright	  (c)	  1999-­‐2011	  DeNA	  CO.,Ltd.	  All	  rights	  reserved.	   28/35
シーン・フレームワーク•  シンプルなクラス群   –  Sceneクラスを継承してシーンを作る	     –  SceneDirector.push(シーンのオブジェクト);      でシーン遷移	     –  SceneDirector...
ゲームの基本構成(2)•  サーバからのリプライのディスパッチ	                                                                          スロットを回すよ!	      ...
ゲームの基本構成(2)•  サーバからのリプライのディスパッチ	                                                                      ジョブの配列+通知情報	        ...
サーバ通信のディスパッチ•  ミッションの結果などは、配列で返ってくる	   –  ミッションクリア、レベルアップ、武器壊れた、	      アイテムゲット、ボスと遭遇etc..	  •  クライアントは順番に再生しているだけ	  •  新しい...
DnLib/ngGo	    Copyright	  (c)	  1999-­‐2011	  DeNA	  CO.,Ltd.	  All	  rights	  reserved.	   33/35
DnLib/ngGo•  DnLib	     –  ゲーム開発の共通ライブラリ	     –  元はDeNAの内製チーム内で運用	     –  エンサイクロペディアというngCore情報をまとめた      ページ作成時に、一部を公開	  ...
エンサイクロペディアはSphinx製!	Copyright	  (c)	  1999-­‐2011	  DeNA	  CO.,Ltd.	  All	  rights	  reserved.	   35/35
開発Copyright	  (c)	  1999-­‐2011	  DeNA	  CO.,Ltd.	  All	  rights	  reserved.	   36/35
地球規模のJavaScript開発•  サンフランシスコ -­‐	  ngmoco:)	     –  ngBuilderの開発	     –  一部ngGoのモジュール	  •  日本	     –  ngGoのモジュール	     –  ド...
Copyright	  (c)	  1999-­‐2011	  DeNA	  CO.,Ltd.	  All	  rights	  reserved.	   38/35
ngGo/ngBuilder•  1st	  &	  3rd	  パーティーの開発をサポート	  •  シーンのフレームワークは公開してます	  •  データ駆動	      –  リリース後は開発の人数を減らしながら、イベントな       ...
開発の風景•  大きく機能で拠点を分ける	  •  でもリリースは同じ場所で	  •  Skypeのチャットが主なインフラ	     –  家で仕事することもあるよ	  :	  (	  •  gitを使う	     –  git	  flowで	...
ngCoreのデバッグ・開発環境	   Copyright	  (c)	  1999-­‐2011	  DeNA	  CO.,Ltd.	  All	  rights	  reserved.	   41/35
•  デバッグ	    –  デバッグメニューをゲームにつける	       •  パラメータ変更	       •  カットシーンを再生	    –  Android実機用のデバッガー	       •  ngBuilderからデバッガ起動。...
デバッグとテスト•  デバッグメニュー	    –  サーバにデバッグ用ページがあり、それをアクセス	  •  ユニットテスト	    –  サーバ側はTest::More	  (Perl)	    –  クライアント側はJasmine	   ...
ngCoreを触ってみるには?•  下記のサイトでSDKと、ngGo/Builderが	     ダウンロードできます	  •  日本語の開発情報も充実しています	                               https://d...
今後のngCore•  本体の機能拡張も行われます!	   –  パフォーマンスアップ	   –  3D対応、HTML5への対応	  •  開発効率の向上	   –  ngServer	       •  JavaScriptでゲームサーバ	 ...
まとめ•  大規模JavaScriptゲーム開発	    –  分割しやすい構造にして部品ごとに作りこみ	  •  地球規模JavaScript開発	    –  JavaScriptの大規模になりつつあるゲーム開発をサ     ポートする環境...
Upcoming SlideShare
Loading in …5
×

大規模JavaScript開発

8,645 views

Published on

ありえるえりあ勉強会で発表した、大規模JavaScript開発の資料です。

Published in: Technology
0 Comments
21 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
8,645
On SlideShare
0
From Embeds
0
Number of Embeds
3,716
Actions
Shares
0
Downloads
44
Comments
0
Likes
21
Embeds 0
No embeds

No notes for slide

大規模JavaScript開発

  1. 1. JavaScriptゲーム制作勉強会  Vol.2 (2011/8/23) 第7回ありえるえりあ勉強会 JSで大規模・エンタープライズ開発 •  株式会社ディー・エヌ・エー   •  ソーシャルゲーム事業本部ソーシャルゲーム統括部   •  スマートフォンSG部SPシステム第三グループ   •  渋川よしき Copyright  (c)  1999-­‐2011  DeNA  CO.,Ltd.  All  rights  reserved. 1/35
  2. 2. 最初に•  いっぱい詰め込んだので時間が足りないかも   –  懇親会に行くので質問とかご自由に!  •  3番目の  @monjudoh  さんは写真撮影すると   呪い殺されてゾンビにされてしまうかもしれない ので禁止ですが、僕のターンは写真撮影もTweet も自由です!   Copyright  (c)  1999-­‐2011  DeNA  CO.,Ltd.  All  rights  reserved. 2/35
  3. 3. 自己紹介:渋川よしき TwiTer:  @shibukawa •  仕事   –  本田技術研究所→DeNA   –  スマートフォンと日々戯れています   •  参加コミュニティ   –  SphinxUsers.jp会長   •  翻訳ハッカソンとかを継続開催予定   –  日本XPユーザグループ代表   –  Python温泉(系)   •  昨年出した本   –  IT業界を楽しく生き抜くための   つまみぐい勉強法(技術評論社)   –  エキスパートPythonプログラミング   (アスキーメディアワークス)   –  ポモドーロテクニック入門   (アスキーメディアワークス)   –  アート・オブ・コミュニティ   (オライリー・ジャパン)   写真:  清水川webより転載 Copyright  (c)  1999-­‐2011  DeNA  CO.,Ltd.  All  rights  reserved. 3/35
  4. 4. ソーシャルゲームとは? Copyright  (c)  1999-­‐2011  DeNA  CO.,Ltd.  All  rights  reserved. 4/35
  5. 5. ソーシャルゲームの定義(渋川定義)•  ユーザ間で非同期なやりとりが発生するマルチ プレーヤー型のゲーム   –  5キー連打がソーシャルゲームではない   –  複数人が同時にリアルタイムでプレイする(MMO)も ソーシャルゲームではない   –  ケータイのゲームがソーシャルゲームではない   •  ただしケータイとの相性は良い   –  ブラウザのゲームがソーシャルゲームではない   •  ただしブラウザとの相性は良い   –  風来のシレンの風来救助隊はソーシャル   –  人生ゲームもソーシャル Copyright  (c)  1999-­‐2011  DeNA  CO.,Ltd.  All  rights  reserved. 5/35
  6. 6. ngCoreのゲームのアーキテクチャ Copyright  (c)  1999-­‐2011  DeNA  CO.,Ltd.  All  rights  reserved. 6/35
  7. 7. ngCoreの実例  Androidでも、iOSでも配信しております! Copyright  (c)  1999-­‐2011  DeNA  CO.,Ltd.  All  rights  reserved. 7/35
  8. 8. ngCoreとは?•  JavaScriptで開発可能なゲームエンジンです。  •  特徴としては   –  マルチプラットフォーム   •  同一ソース(JavaScript)でAndroidとiOSに対応   •  テスト環境としてFlashも。将来的にはHTML  5にも対応   –  複数の配信方法を提供   •  ポータルでゲームをダウンロード/app,apkを生成   –  ゲーム用API完備   •  XNAよりもシンプルなAPI   –  ソーシャル用API完備   •  同一ソースでiOS/Androidで友達情報取得とか課金とか   Copyright  (c)  1999-­‐2011  DeNA  CO.,Ltd.  All  rights  reserved. 8/35
  9. 9. ngCoreとは?•  JavaScriptで開発可能なゲームエンジンです。  •  特徴としては   –  マルチプラットフォーム   •  同一ソース(JavaScript)でAndroidとiOSに対応   •  テスト環境としてFlashも。将来的にはHTML  5にも対応   –  複数の配信方法を提供   •  ポータルでゲームをダウンロード/app,apkを生成   –  ゲーム用API完備   •  XNAよりもシンプルなAPI   –  ソーシャル用API完備   •  同一ソースでiOS/Androidで友達情報取得とか課金とか   Copyright  (c)  1999-­‐2011  DeNA  CO.,Ltd.  All  rights  reserved. 9/35
  10. 10. DeNAのngCore製ゲームの構成 ゲームロジック   /JavaScript ngCore Mobageサーバ サーバロジック   /Perl Apache+FCGI  iOS機/Android機 +MobaSiF ゲームサーバ By  jamisonjudd  under  CC-­‐BY Copyright  (c)  1999-­‐2011  DeNA  CO.,Ltd.  All  rights  reserved. 10/35
  11. 11. DeNAのngCore製ゲームの構成 ゲームロジック   /JavaScript ngCore Mobageサーバ ゲームロジック   /JavaScript サーバロジック   ngCore /Perl Apache+FCGI  iOS機/Android機 +MobaSiF ゲームサーバ Android  Market/App  Storeからインストール By  jamisonjudd  under  CC-­‐BY Copyright  (c)  1999-­‐2011  DeNA  CO.,Ltd.  All  rights  reserved. 11/35
  12. 12. DeNAのngCore製ゲームの構成 ゲームロジック   /JavaScript ngCore Mobageサーバ ゲームロジック   /JavaScript サーバロジック   ngCore /Perl Apache+FCGI  iOS機/Android機 +MobaSiF ゲームサーバ 追加アセット(画像・データなど)と、イベント用アセットをロード By  jamisonjudd  under  CC-­‐BY Copyright  (c)  1999-­‐2011  DeNA  CO.,Ltd.  All  rights  reserved. 12/35
  13. 13. DeNAのngCore製ゲームの構成 ゲームロジック   /JavaScript ngCore Mobageサーバ 認証/ソーシャルグラフ ゲームロジック   JSON /JavaScript サーバロジック   ngCore /Perl Apache+FCGI  iOS機/Android機 +MobaSiF ゲームサーバ サーバとクライアントでJSONを交換しながらゲーム進行 By  jamisonjudd  under  CC-­‐BY Copyright  (c)  1999-­‐2011  DeNA  CO.,Ltd.  All  rights  reserved. 13/35
  14. 14. 役割分担•  ngCoreのクライアント   –  アクションシーン(スペシャルミッション)   –  サーバ側で作ったデータの再生  •  ゲームサーバ   –  パラメータ保持、パラメータ変化の計算   –  アイテムの管理   –  ミッションスロットの出目の決定   –  ゲーム友達の管理  •  Mobageサーバ   –  モバ友情報/ブラックリスト管理   –  課金 Copyright  (c)  1999-­‐2011  DeNA  CO.,Ltd.  All  rights  reserved. 14/35
  15. 15. 役割分担•  ngCoreのクライアント   –  アクションシーン(スペシャルミッション)   –  サーバ側で作ったデータの再生  •  ゲームサーバ   アイテム購入機能はMobage –  パラメータ保持、パラメータ変化の計算   サーバにもあるので、ロジック –  アイテムの管理   をクライアントに全部移動す れば、ゲームサーバレス設計 –  ミッションスロットの出目の決定   も可能   –  ゲーム友達の管理  •  Mobageサーバ   –  モバ友情報/ブラックリスト管理   –  課金 Copyright  (c)  1999-­‐2011  DeNA  CO.,Ltd.  All  rights  reserved. 15/35
  16. 16. ngCoreの開発サイクル Build   Server   (node.js) Baked   game By  nyuhuhuu  under  CC-­‐BY By  the_toe_stubber  under  CC-­‐BY By  _m  geers  under  CC-­‐BY-­‐SA By  superstrikertwo  under  CC-­‐BY-­‐SA By  osde8info  under  CC-­‐BY-­‐SA Copyright  (c)  1999-­‐2011  DeNA  CO.,Ltd.  All  rights  reserved. 16/35
  17. 17. ngCoreの開発サイクル •  端末にランタイムをインストール        ラインタイムからサーバにアクセス   •  Or  ブラウザでアクセス Build   Server   (node.js) Baked   game By  nyuhuhuu  under  CC-­‐BY By  the_toe_stubber  under  CC-­‐BY By  _m  geers  under  CC-­‐BY-­‐SA By  superstrikertwo  under  CC-­‐BY-­‐SA By  osde8info  under  CC-­‐BY-­‐SA Copyright  (c)  1999-­‐2011  DeNA  CO.,Ltd.  All  rights  reserved. 17/35
  18. 18. ngCoreの開発サイクル •  ソースコードをまとめて1つのjsファイルに   •  画像の正方形/2のべき乗にリサイズ   •  ファイルのリスト(manifest)生成   •  暗号化とかminifyとか(オプション)   •  150kbごとに分けてzip圧縮(オプション)   etc Build   Server   (node.js) Baked   game By  nyuhuhuu  under  CC-­‐BY By  the_toe_stubber  under  CC-­‐BY By  _m  geers  under  CC-­‐BY-­‐SA By  superstrikertwo  under  CC-­‐BY-­‐SA By  osde8info  under  CC-­‐BY-­‐SA Copyright  (c)  1999-­‐2011  DeNA  CO.,Ltd.  All  rights  reserved. 18/35
  19. 19. ngCoreの開発サイクル •  ベイクした結果を端末に配信   •  ゲームを動作させてデバッグ Build   Server   (node.js) Baked   game By  nyuhuhuu  under  CC-­‐BY By  the_toe_stubber  under  CC-­‐BY By  _m  geers  under  CC-­‐BY-­‐SA By  superstrikertwo  under  CC-­‐BY-­‐SA By  osde8info  under  CC-­‐BY-­‐SA Copyright  (c)  1999-­‐2011  DeNA  CO.,Ltd.  All  rights  reserved. 19/35
  20. 20. コードはこんな感じ(イメージです)var GL2 = require(“./NGCore/Client/GL2”).GL2;var Core = require(“./NGCore/Client/Core”).Core;var MainLoop = Core.MessageListener.subclass({ initialize: function() { this.image = mychar = new GL2.Sprite(); this.image.setImage(“Content/myimage.png”); this.setPosition(100, 100); this.x = 100; }, onUpdate: function() { this.x += 3; this.setPosition(this.x, 100); }});function main() { var loop = new MainLoop(); Core.UpdateEmitter(loop, loop.onUpdate);} Copyright  (c)  1999-­‐2011  DeNA  CO.,Ltd.  All  rights  reserved. 20/35
  21. 21. コードはこんな感じ(イメージです)var GL2 = require(“./NGCore/Client/GL2”).GL2; •  CommonJS準拠のモジュール  var Core = require(“./NGCore/Client/Core”).Core; システム   •  モジュールごとの名前空間   •  ファイル分割で大規模ゲームも  var MainLoop = Core.MessageListener.subclass({ 余裕   initialize: function() { this.image = mychar = new GL2.Sprite(); this.image.setImage(“Content/myimage.png”); this.setPosition(100, 100); this.x = 100; }, onUpdate: function() { this.x += 3; this.setPosition(this.x, 100); }});function main() { var loop = new MainLoop(); Core.UpdateEmitter(loop, loop.onUpdate);} Copyright  (c)  1999-­‐2011  DeNA  CO.,Ltd.  All  rights  reserved. 21/35
  22. 22. コードはこんな感じ(イメージです)var GL2 = require(“./NGCore/Client/GL2”).GL2;var Core = require(“./NGCore/Client/Core”).Core;var MainLoop = Core.MessageListener.subclass({ •  オブジェクト指向言語に慣れた   initialize: function() { 人も安心のオブジェクト指向   サポート   this.image = mychar = new GL2.Sprite(); •  継承、シングルトンが簡単に   this.image.setImage(“Content/myimage.png”); this.setPosition(100, 100); this.x = 100; }, onUpdate: function() { this.x += 3; this.setPosition(this.x, 100); }});function main() { var loop = new MainLoop(); Core.UpdateEmitter(loop, loop.onUpdate);} Copyright  (c)  1999-­‐2011  DeNA  CO.,Ltd.  All  rights  reserved. 22/35
  23. 23. コードはこんな感じ(イメージです)var GL2 = require(“./NGCore/Client/GL2”).GL2;var Core = require(“./NGCore/Client/Core”).Core;var MainLoop = Core.MessageListener.subclass({ initialize: function() { this.image = mychar = new GL2.Sprite(); this.image.setImage(“Content/myimage.png”); this.setPosition(100, 100); this.x = 100; }, onUpdate: function() { this.x += 3; this.setPosition(this.x, 100); }});function main() { •  main関数から始まります   var loop = new MainLoop(); •  フレームごとにUpdateEmiTer   Core.UpdateEmitter(loop, loop.onUpdate); に登録した関数が呼ばれます  } Copyright  (c)  1999-­‐2011  DeNA  CO.,Ltd.  All  rights  reserved. 23/35
  24. 24. コードはこんな感じ(イメージです)var GL2 = require(“./NGCore/Client/GL2”).GL2;var Core = require(“./NGCore/Client/Core”).Core;var MainLoop = Core.MessageListener.subclass({ •  ini_alize/destroyがコンストラクタ   initialize: function() { デストラクタの役割をします   this.image = mychar = new GL2.Sprite(); this.image.setImage(“Content/myimage.png”); this.setPosition(100, 100); this.x = 100; }, onUpdate: function() { •  毎フレームごとの処理を記述   update通知が処理の起点   this.x += 3; this.setPosition(this.x, 100); }});function main() { var loop = new MainLoop(); Core.UpdateEmitter(loop, loop.onUpdate);} Copyright  (c)  1999-­‐2011  DeNA  CO.,Ltd.  All  rights  reserved. 24/35
  25. 25. ネットワークからのダウンロード•  DownloadManifestクラス   –  配信するソースコード、画像、音声、JSONなどのデー タのファイルをmanifest.jsonに書く   –  ビルド時に、MD5値を計算   –  ダウンロード時はMD5を比較して、変更があったもの のみをダウンロードする   –  メインのManifest(最初にダウンロードされる)以外に も、サブのManifestを任意のタイミングでダウンロード できる(ただしコードはメインのみ)   Copyright  (c)  1999-­‐2011  DeNA  CO.,Ltd.  All  rights  reserved. 25/35
  26. 26. 大規模JS開発を支えるngCore•  ソースコードレベル   –  複数ファイルに分けてJavaScriptコードを開発   –  複数モジュールをビルドサーバで1ファイルに統合   –  モジュールごとの名前空間   •  ただし、JavaScriptなのでグローバル空間はある   –  Javaっぽいオブジェクト指向  •  データ配信   –  差分だけを効率よくダウンロードできる仕組み Copyright  (c)  1999-­‐2011  DeNA  CO.,Ltd.  All  rights  reserved. 26/35
  27. 27. 忍者ロワイヤル  JavaScript層のアーキテクチャ Copyright  (c)  1999-­‐2011  DeNA  CO.,Ltd.  All  rights  reserved. 27/35
  28. 28. ゲームの基本構成(1)•  階層型のシーン Copyright  (c)  1999-­‐2011  DeNA  CO.,Ltd.  All  rights  reserved. 28/35
  29. 29. シーン・フレームワーク•  シンプルなクラス群 –  Sceneクラスを継承してシーンを作る   –  SceneDirector.push(シーンのオブジェクト); でシーン遷移   –  SceneDirector.pop();   で戻る –  push/pop時に、Sceneのイベントハンドラを呼び出し•  ビュー・コントローラをさくっと切り替える•  シーン単位で作りこみができる –  デバッグメニューから、カットシーンの単体実行など Copyright  (c)  1999-­‐2011  DeNA  CO.,Ltd.  All  rights  reserved. 29/35
  30. 30. ゲームの基本構成(2)•  サーバからのリプライのディスパッチ   スロットを回すよ! ゲームサーバ Copyright  (c)  1999-­‐2011  DeNA  CO.,Ltd.  All  rights  reserved. 30/35
  31. 31. ゲームの基本構成(2)•  サーバからのリプライのディスパッチ   ジョブの配列+通知情報 ゲームサーバ Copyright  (c)  1999-­‐2011  DeNA  CO.,Ltd.  All  rights  reserved. 31/35
  32. 32. サーバ通信のディスパッチ•  ミッションの結果などは、配列で返ってくる   –  ミッションクリア、レベルアップ、武器壊れた、   アイテムゲット、ボスと遭遇etc..  •  クライアントは順番に再生しているだけ  •  新しいミッションの出目を追加する時も、ハンドラ を1箇所に追加すればいい   –  ハンドラさえなければ無視   –  Androidで先に配信とかもできる  •  サーバエラーがあるとホーム画面に強制で戻る   –  端末のアプリの再起動は不要なので、デバッグが楽 Copyright  (c)  1999-­‐2011  DeNA  CO.,Ltd.  All  rights  reserved. 32/35
  33. 33. DnLib/ngGo Copyright  (c)  1999-­‐2011  DeNA  CO.,Ltd.  All  rights  reserved. 33/35
  34. 34. DnLib/ngGo•  DnLib   –  ゲーム開発の共通ライブラリ   –  元はDeNAの内製チーム内で運用   –  エンサイクロペディアというngCore情報をまとめた ページ作成時に、一部を公開  •  ngGo   –  DnLibをngCore公式のものとして作りなおす   –  しっかりしたドキュメント   –  統合開発環境ngBuilderと一緒に公開   –  数日以内に、1.1がリリース予定 Copyright  (c)  1999-­‐2011  DeNA  CO.,Ltd.  All  rights  reserved. 34/35
  35. 35. エンサイクロペディアはSphinx製! Copyright  (c)  1999-­‐2011  DeNA  CO.,Ltd.  All  rights  reserved. 35/35
  36. 36. 開発Copyright  (c)  1999-­‐2011  DeNA  CO.,Ltd.  All  rights  reserved. 36/35
  37. 37. 地球規模のJavaScript開発•  サンフランシスコ -­‐  ngmoco:)   –  ngBuilderの開発   –  一部ngGoのモジュール  •  日本   –  ngGoのモジュール   –  ドキュメント  •  パキスタン   –  ngGoのモジュール   –  サンプルのゲーム Copyright  (c)  1999-­‐2011  DeNA  CO.,Ltd.  All  rights  reserved. 37/35
  38. 38. Copyright  (c)  1999-­‐2011  DeNA  CO.,Ltd.  All  rights  reserved. 38/35
  39. 39. ngGo/ngBuilder•  1st  &  3rd  パーティーの開発をサポート  •  シーンのフレームワークは公開してます  •  データ駆動   –  リリース後は開発の人数を減らしながら、イベントな どを定期的に行う必要あり   –  パラメータチューニングしやすく!  •  Flow  Editor   –  部品を作るのは簡単   –  さらにモジュール化しやすくして、テストや分業を   簡単に!   Copyright  (c)  1999-­‐2011  DeNA  CO.,Ltd.  All  rights  reserved. 39/35
  40. 40. 開発の風景•  大きく機能で拠点を分ける  •  でもリリースは同じ場所で  •  Skypeのチャットが主なインフラ   –  家で仕事することもあるよ  :  (  •  gitを使う   –  git  flowで   –  ソースコードでコミュニケーション  •  ドキュメントはSphinx   –  CommonJSドメイン作った   Copyright  (c)  1999-­‐2011  DeNA  CO.,Ltd.  All  rights  reserved. 40/35
  41. 41. ngCoreのデバッグ・開発環境 Copyright  (c)  1999-­‐2011  DeNA  CO.,Ltd.  All  rights  reserved. 41/35
  42. 42. •  デバッグ   –  デバッグメニューをゲームにつける   •  パラメータ変更   •  カットシーンを再生   –  Android実機用のデバッガー   •  ngBuilderからデバッガ起動。プロファイラも。   –  Flash環境   •  ブラウザのJavaScriptデバッガが利用可能   •  一番お手頃で便利   Copyright  (c)  1999-­‐2011  DeNA  CO.,Ltd.  All  rights  reserved. 42/35
  43. 43. デバッグとテスト•  デバッグメニュー   –  サーバにデバッグ用ページがあり、それをアクセス  •  ユニットテスト   –  サーバ側はTest::More  (Perl)   –  クライアント側はJasmine   •  ngCore非依存にしてnode.jsで実行とか   •  ngCore用テストランナーも作ったよ   –  ngCore本体は、node.js+Jasmine   •  実機で走らせて結果をnode.jsで集約   •  国内で発売された実機はほぼテスト   Copyright  (c)  1999-­‐2011  DeNA  CO.,Ltd.  All  rights  reserved. 43/35
  44. 44. ngCoreを触ってみるには?•  下記のサイトでSDKと、ngGo/Builderが   ダウンロードできます  •  日本語の開発情報も充実しています https://developer.mobage.com Copyright  (c)  1999-­‐2011  DeNA  CO.,Ltd.  All  rights  reserved. 44/35
  45. 45. 今後のngCore•  本体の機能拡張も行われます!   –  パフォーマンスアップ   –  3D対応、HTML5への対応  •  開発効率の向上   –  ngServer   •  JavaScriptでゲームサーバ   –  ngBuilder/ngGo   •  さらに積極的に開発していきます Copyright  (c)  1999-­‐2011  DeNA  CO.,Ltd.  All  rights  reserved. 45/35
  46. 46. まとめ•  大規模JavaScriptゲーム開発   –  分割しやすい構造にして部品ごとに作りこみ  •  地球規模JavaScript開発   –  JavaScriptの大規模になりつつあるゲーム開発をサ ポートする環境づくり  •  テスト・デバッグ   –  Jasmine  +  More::Test   –  まだ改善の余地があるので改善していきます   Copyright  (c)  1999-­‐2011  DeNA  CO.,Ltd.  All  rights  reserved. 46/35

×