SlideShare a Scribd company logo
JavaScriptゲーム制作勉強会	
  Vol.2	
 (2011/8/23)	




    第7回ありえるえりあ勉強会
    JSで大規模・エンタープライズ開発

               •        株式会社ディー・エヌ・エー	
  
               •        ソーシャルゲーム事業本部ソーシャルゲーム統括部	
  
               •        スマートフォンSG部SPシステム第三グループ	
  

               •  渋川よしき	



        Copyright	
  (c)	
  1999-­‐2011	
  DeNA	
  CO.,Ltd.	
  All	
  rights	
  reserved.	
   1/35
最初に

•  いっぱい詰め込んだので時間が足りないかも	
  
  –  懇親会に行くので質問とかご自由に!	
  


•  3番目の	
  @monjudoh	
  さんは写真撮影すると	
  
   呪い殺されてゾンビにされてしまうかもしれない
   ので禁止ですが、僕のターンは写真撮影もTweet
   も自由です!	
  




   Copyright	
  (c)	
  1999-­‐2011	
  DeNA	
  CO.,Ltd.	
  All	
  rights	
  reserved.	
   2/35
自己紹介:渋川よしき

                                                                                                     TwiTer:	
  @shibukawa	
                                                                       •  仕事	
  
                                                                                  –  本田技術研究所→DeNA	
  
                                                                                  –  スマートフォンと日々戯れています	
  
                                                                       •  参加コミュニティ	
  
                                                                                  –  SphinxUsers.jp会長	
  
                                                                                      •  翻訳ハッカソンとかを継続開催予定	
  
                                                                                  –  日本XPユーザグループ代表	
  
                                                                                  –  Python温泉(系)	
  
                                                                       •  昨年出した本	
  
                                                                                  –  IT業界を楽しく生き抜くための	
  
                                                                                     つまみぐい勉強法(技術評論社)	
  
                                                                                  –  エキスパートPythonプログラミング	
  
                                                                                     (アスキーメディアワークス)	
  
                                                                                  –  ポモドーロテクニック入門	
  
                                                                                     (アスキーメディアワークス)	
  
                                                                                  –  アート・オブ・コミュニティ	
  
                                                                                     (オライリー・ジャパン)	
  
                                                                                       写真:	
  清水川webより転載	
Copyright	
  (c)	
  1999-­‐2011	
  DeNA	
  CO.,Ltd.	
  All	
  rights	
  reserved.	
                                            3/35
ソーシャルゲームとは?	




  Copyright	
  (c)	
  1999-­‐2011	
  DeNA	
  CO.,Ltd.	
  All	
  rights	
  reserved.	
   4/35
ソーシャルゲームの定義(渋川定義)

•  ユーザ間で非同期なやりとりが発生するマルチ
   プレーヤー型のゲーム	
  
 –  5キー連打がソーシャルゲームではない	
  
 –  複数人が同時にリアルタイムでプレイする(MMO)も
    ソーシャルゲームではない	
  
 –  ケータイのゲームがソーシャルゲームではない	
  
  •  ただしケータイとの相性は良い	
  
 –  ブラウザのゲームがソーシャルゲームではない	
  
  •  ただしブラウザとの相性は良い	
  
 –  風来のシレンの風来救助隊はソーシャル	
  
 –  人生ゲームもソーシャル	
  Copyright	
  (c)	
  1999-­‐2011	
  DeNA	
  CO.,Ltd.	
  All	
  rights	
  reserved.	
   5/35
ngCoreのゲームのアーキテクチャ	




Copyright	
  (c)	
  1999-­‐2011	
  DeNA	
  CO.,Ltd.	
  All	
  rights	
  reserved.	
   6/35
ngCoreの実例




                       	
  Androidでも、iOSでも配信しております!	
 Copyright	
  (c)	
  1999-­‐2011	
  DeNA	
  CO.,Ltd.	
  All	
  rights	
  reserved.	
   7/35
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
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
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
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
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
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
役割分担

•  ngCoreのクライアント	
  
  –  アクションシーン(スペシャルミッション)	
  
  –  サーバ側で作ったデータの再生	
  

•  ゲームサーバ	
  
  –  パラメータ保持、パラメータ変化の計算	
  
  –  アイテムの管理	
  
  –  ミッションスロットの出目の決定	
  
  –  ゲーム友達の管理	
  

•  Mobageサーバ	
  
  –  モバ友情報/ブラックリスト管理	
  
  –  課金	

    Copyright	
  (c)	
  1999-­‐2011	
  DeNA	
  CO.,Ltd.	
  All	
  rights	
  reserved.	
   14/35
役割分担

•  ngCoreのクライアント	
  
  –  アクションシーン(スペシャルミッション)	
  
  –  サーバ側で作ったデータの再生	
  

•  ゲームサーバ	
              アイテム購入機能はMobage
  –  パラメータ保持、パラメータ変化の計算	
  
                         サーバにもあるので、ロジック
  –  アイテムの管理	
           をクライアントに全部移動す
                         れば、ゲームサーバレス設計
  –  ミッションスロットの出目の決定	
   も可能	
  
  –  ゲーム友達の管理	
  

•  Mobageサーバ	
  
  –  モバ友情報/ブラックリスト管理	
  
  –  課金	

    Copyright	
  (c)	
  1999-­‐2011	
  DeNA	
  CO.,Ltd.	
  All	
  rights	
  reserved.	
   15/35
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
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
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
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
コードはこんな感じ(イメージです)
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
コードはこんな感じ(イメージです)
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
コードはこんな感じ(イメージです)
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
コードはこんな感じ(イメージです)
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
コードはこんな感じ(イメージです)
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
ネットワークからのダウンロード

•  DownloadManifestクラス	
  
  –  配信するソースコード、画像、音声、JSONなどのデー
     タのファイルをmanifest.jsonに書く	
  
  –  ビルド時に、MD5値を計算	
  
  –  ダウンロード時はMD5を比較して、変更があったもの
     のみをダウンロードする	
  
  –  メインのManifest(最初にダウンロードされる)以外に
     も、サブのManifestを任意のタイミングでダウンロード
     できる(ただしコードはメインのみ)	
  



    Copyright	
  (c)	
  1999-­‐2011	
  DeNA	
  CO.,Ltd.	
  All	
  rights	
  reserved.	
   25/35
大規模JS開発を支えるngCore

•  ソースコードレベル	
  
  –  複数ファイルに分けてJavaScriptコードを開発	
  
  –  複数モジュールをビルドサーバで1ファイルに統合	
  
  –  モジュールごとの名前空間	
  
    •  ただし、JavaScriptなのでグローバル空間はある	
  
  –  Javaっぽいオブジェクト指向	
  
•  データ配信	
  
  –  差分だけを効率よくダウンロードできる仕組み	




    Copyright	
  (c)	
  1999-­‐2011	
  DeNA	
  CO.,Ltd.	
  All	
  rights	
  reserved.	
   26/35
忍者ロワイヤル	
  
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.pop();	
  
      で戻る	
  –  push/pop時に、Sceneのイベントハンドラを呼び出し
•  ビュー・コントローラをさくっと切り替える
•  シーン単位で作りこみができる
  –  デバッグメニューから、カットシーンの単体実行など


   Copyright	
  (c)	
  1999-­‐2011	
  DeNA	
  CO.,Ltd.	
  All	
  rights	
  reserved.	
   29/35
ゲームの基本構成(2)

•  サーバからのリプライのディスパッチ	
  


                                                                        スロットを回すよ!	




                                                                                         ゲームサーバ	




   Copyright	
  (c)	
  1999-­‐2011	
  DeNA	
  CO.,Ltd.	
  All	
  rights	
  reserved.	
              30/35
ゲームの基本構成(2)

•  サーバからのリプライのディスパッチ	
  

                                                                    ジョブの配列+通知情報	




                                                                                         ゲームサーバ	




   Copyright	
  (c)	
  1999-­‐2011	
  DeNA	
  CO.,Ltd.	
  All	
  rights	
  reserved.	
              31/35
サーバ通信のディスパッチ

•  ミッションの結果などは、配列で返ってくる	
  
 –  ミッションクリア、レベルアップ、武器壊れた、	
  
    アイテムゲット、ボスと遭遇etc..	
  
•  クライアントは順番に再生しているだけ	
  
•  新しいミッションの出目を追加する時も、ハンドラ
   を1箇所に追加すればいい	
  
 –  ハンドラさえなければ無視	
  
 –  Androidで先に配信とかもできる	
  
•  サーバエラーがあるとホーム画面に強制で戻る	
  
 –  端末のアプリの再起動は不要なので、デバッグが楽	

   Copyright	
  (c)	
  1999-­‐2011	
  DeNA	
  CO.,Ltd.	
  All	
  rights	
  reserved.	
   32/35
DnLib/ngGo	




    Copyright	
  (c)	
  1999-­‐2011	
  DeNA	
  CO.,Ltd.	
  All	
  rights	
  reserved.	
   33/35
DnLib/ngGo

•  DnLib	
  
   –  ゲーム開発の共通ライブラリ	
  
   –  元はDeNAの内製チーム内で運用	
  
   –  エンサイクロペディアというngCore情報をまとめた
      ページ作成時に、一部を公開	
  
•  ngGo	
  
   –  DnLibをngCore公式のものとして作りなおす	
  
   –  しっかりしたドキュメント	
  
   –  統合開発環境ngBuilderと一緒に公開	
  
   –  数日以内に、1.1がリリース予定	

       Copyright	
  (c)	
  1999-­‐2011	
  DeNA	
  CO.,Ltd.	
  All	
  rights	
  reserved.	
   34/35
エンサイクロペディアは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のモジュール	
  
   –  ドキュメント	
  
•  パキスタン	
  
   –  ngGoのモジュール	
  
   –  サンプルのゲーム	


      Copyright	
  (c)	
  1999-­‐2011	
  DeNA	
  CO.,Ltd.	
  All	
  rights	
  reserved.	
   37/35
Copyright	
  (c)	
  1999-­‐2011	
  DeNA	
  CO.,Ltd.	
  All	
  rights	
  reserved.	
   38/35
ngGo/ngBuilder

•  1st	
  &	
  3rd	
  パーティーの開発をサポート	
  
•  シーンのフレームワークは公開してます	
  
•  データ駆動	
  
    –  リリース後は開発の人数を減らしながら、イベントな
       どを定期的に行う必要あり	
  
    –  パラメータチューニングしやすく!	
  
•  Flow	
  Editor	
  
    –  部品を作るのは簡単	
  
    –  さらにモジュール化しやすくして、テストや分業を	
  
       簡単に!	
  

       Copyright	
  (c)	
  1999-­‐2011	
  DeNA	
  CO.,Ltd.	
  All	
  rights	
  reserved.	
   39/35
開発の風景

•  大きく機能で拠点を分ける	
  
•  でもリリースは同じ場所で	
  
•  Skypeのチャットが主なインフラ	
  
   –  家で仕事することもあるよ	
  :	
  (	
  
•  gitを使う	
  
   –  git	
  flowで	
  
   –  ソースコードでコミュニケーション	
  
•  ドキュメントはSphinx	
  
   –  CommonJSドメイン作った	
  

      Copyright	
  (c)	
  1999-­‐2011	
  DeNA	
  CO.,Ltd.	
  All	
  rights	
  reserved.	
   40/35
ngCoreのデバッグ・開発環境	




   Copyright	
  (c)	
  1999-­‐2011	
  DeNA	
  CO.,Ltd.	
  All	
  rights	
  reserved.	
   41/35
•  デバッグ	
  
  –  デバッグメニューをゲームにつける	
  
     •  パラメータ変更	
  
     •  カットシーンを再生	
  
  –  Android実機用のデバッガー	
  
     •  ngBuilderからデバッガ起動。プロファイラも。	
  
  –  Flash環境	
  
     •  ブラウザのJavaScriptデバッガが利用可能	
  
     •  一番お手頃で便利	
  




     Copyright	
  (c)	
  1999-­‐2011	
  DeNA	
  CO.,Ltd.	
  All	
  rights	
  reserved.	
   42/35
デバッグとテスト

•  デバッグメニュー	
  
  –  サーバにデバッグ用ページがあり、それをアクセス	
  
•  ユニットテスト	
  
  –  サーバ側は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
ngCoreを触ってみるには?

•  下記のサイトでSDKと、ngGo/Builderが	
  
   ダウンロードできます	
  
•  日本語の開発情報も充実しています	
                               https://developer.mobage.com




    Copyright	
  (c)	
  1999-­‐2011	
  DeNA	
  CO.,Ltd.	
  All	
  rights	
  reserved.	
   44/35
今後のngCore

•  本体の機能拡張も行われます!	
  
 –  パフォーマンスアップ	
  
 –  3D対応、HTML5への対応	
  
•  開発効率の向上	
  
 –  ngServer	
  
     •  JavaScriptでゲームサーバ	
  
 –  ngBuilder/ngGo	
  
     •  さらに積極的に開発していきます	




    Copyright	
  (c)	
  1999-­‐2011	
  DeNA	
  CO.,Ltd.	
  All	
  rights	
  reserved.	
   45/35
まとめ

•  大規模JavaScriptゲーム開発	
  
  –  分割しやすい構造にして部品ごとに作りこみ	
  
•  地球規模JavaScript開発	
  
  –  JavaScriptの大規模になりつつあるゲーム開発をサ
     ポートする環境づくり	
  
•  テスト・デバッグ	
  
  –  Jasmine	
  +	
  More::Test	
  
  –  まだ改善の余地があるので改善していきます	
  




    Copyright	
  (c)	
  1999-­‐2011	
  DeNA	
  CO.,Ltd.	
  All	
  rights	
  reserved.	
   46/35

More Related Content

大規模JavaScript開発

  • 1. JavaScriptゲーム制作勉強会  Vol.2 (2011/8/23) 第7回ありえるえりあ勉強会 JSで大規模・エンタープライズ開発 •  株式会社ディー・エヌ・エー   •  ソーシャルゲーム事業本部ソーシャルゲーム統括部   •  スマートフォンSG部SPシステム第三グループ   •  渋川よしき Copyright  (c)  1999-­‐2011  DeNA  CO.,Ltd.  All  rights  reserved. 1/35
  • 2. 最初に •  いっぱい詰め込んだので時間が足りないかも   –  懇親会に行くので質問とかご自由に!   •  3番目の  @monjudoh  さんは写真撮影すると   呪い殺されてゾンビにされてしまうかもしれない ので禁止ですが、僕のターンは写真撮影もTweet も自由です!   Copyright  (c)  1999-­‐2011  DeNA  CO.,Ltd.  All  rights  reserved. 2/35
  • 3. 自己紹介:渋川よしき TwiTer:  @shibukawa •  仕事   –  本田技術研究所→DeNA   –  スマートフォンと日々戯れています   •  参加コミュニティ   –  SphinxUsers.jp会長   •  翻訳ハッカソンとかを継続開催予定   –  日本XPユーザグループ代表   –  Python温泉(系)   •  昨年出した本   –  IT業界を楽しく生き抜くための   つまみぐい勉強法(技術評論社)   –  エキスパートPythonプログラミング   (アスキーメディアワークス)   –  ポモドーロテクニック入門   (アスキーメディアワークス)   –  アート・オブ・コミュニティ   (オライリー・ジャパン)   写真:  清水川webより転載 Copyright  (c)  1999-­‐2011  DeNA  CO.,Ltd.  All  rights  reserved. 3/35
  • 4. ソーシャルゲームとは? Copyright  (c)  1999-­‐2011  DeNA  CO.,Ltd.  All  rights  reserved. 4/35
  • 5. ソーシャルゲームの定義(渋川定義) •  ユーザ間で非同期なやりとりが発生するマルチ プレーヤー型のゲーム   –  5キー連打がソーシャルゲームではない   –  複数人が同時にリアルタイムでプレイする(MMO)も ソーシャルゲームではない   –  ケータイのゲームがソーシャルゲームではない   •  ただしケータイとの相性は良い   –  ブラウザのゲームがソーシャルゲームではない   •  ただしブラウザとの相性は良い   –  風来のシレンの風来救助隊はソーシャル   –  人生ゲームもソーシャル Copyright  (c)  1999-­‐2011  DeNA  CO.,Ltd.  All  rights  reserved. 5/35
  • 6. ngCoreのゲームのアーキテクチャ Copyright  (c)  1999-­‐2011  DeNA  CO.,Ltd.  All  rights  reserved. 6/35
  • 7. ngCoreの実例  Androidでも、iOSでも配信しております! Copyright  (c)  1999-­‐2011  DeNA  CO.,Ltd.  All  rights  reserved. 7/35
  • 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. 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. 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. 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. 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. 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. 役割分担 •  ngCoreのクライアント   –  アクションシーン(スペシャルミッション)   –  サーバ側で作ったデータの再生   •  ゲームサーバ   –  パラメータ保持、パラメータ変化の計算   –  アイテムの管理   –  ミッションスロットの出目の決定   –  ゲーム友達の管理   •  Mobageサーバ   –  モバ友情報/ブラックリスト管理   –  課金 Copyright  (c)  1999-­‐2011  DeNA  CO.,Ltd.  All  rights  reserved. 14/35
  • 15. 役割分担 •  ngCoreのクライアント   –  アクションシーン(スペシャルミッション)   –  サーバ側で作ったデータの再生   •  ゲームサーバ   アイテム購入機能はMobage –  パラメータ保持、パラメータ変化の計算   サーバにもあるので、ロジック –  アイテムの管理   をクライアントに全部移動す れば、ゲームサーバレス設計 –  ミッションスロットの出目の決定   も可能   –  ゲーム友達の管理   •  Mobageサーバ   –  モバ友情報/ブラックリスト管理   –  課金 Copyright  (c)  1999-­‐2011  DeNA  CO.,Ltd.  All  rights  reserved. 15/35
  • 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. 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. 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. 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. コードはこんな感じ(イメージです) 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. コードはこんな感じ(イメージです) 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. コードはこんな感じ(イメージです) 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. コードはこんな感じ(イメージです) 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. コードはこんな感じ(イメージです) 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. ネットワークからのダウンロード •  DownloadManifestクラス   –  配信するソースコード、画像、音声、JSONなどのデー タのファイルをmanifest.jsonに書く   –  ビルド時に、MD5値を計算   –  ダウンロード時はMD5を比較して、変更があったもの のみをダウンロードする   –  メインのManifest(最初にダウンロードされる)以外に も、サブのManifestを任意のタイミングでダウンロード できる(ただしコードはメインのみ)   Copyright  (c)  1999-­‐2011  DeNA  CO.,Ltd.  All  rights  reserved. 25/35
  • 26. 大規模JS開発を支えるngCore •  ソースコードレベル   –  複数ファイルに分けてJavaScriptコードを開発   –  複数モジュールをビルドサーバで1ファイルに統合   –  モジュールごとの名前空間   •  ただし、JavaScriptなのでグローバル空間はある   –  Javaっぽいオブジェクト指向   •  データ配信   –  差分だけを効率よくダウンロードできる仕組み Copyright  (c)  1999-­‐2011  DeNA  CO.,Ltd.  All  rights  reserved. 26/35
  • 27. 忍者ロワイヤル   JavaScript層のアーキテクチャ Copyright  (c)  1999-­‐2011  DeNA  CO.,Ltd.  All  rights  reserved. 27/35
  • 28. ゲームの基本構成(1) •  階層型のシーン Copyright  (c)  1999-­‐2011  DeNA  CO.,Ltd.  All  rights  reserved. 28/35
  • 29. シーン・フレームワーク •  シンプルなクラス群 –  Sceneクラスを継承してシーンを作る   –  SceneDirector.push(シーンのオブジェクト); でシーン遷移   –  SceneDirector.pop();   で戻る –  push/pop時に、Sceneのイベントハンドラを呼び出し •  ビュー・コントローラをさくっと切り替える •  シーン単位で作りこみができる –  デバッグメニューから、カットシーンの単体実行など Copyright  (c)  1999-­‐2011  DeNA  CO.,Ltd.  All  rights  reserved. 29/35
  • 30. ゲームの基本構成(2) •  サーバからのリプライのディスパッチ   スロットを回すよ! ゲームサーバ Copyright  (c)  1999-­‐2011  DeNA  CO.,Ltd.  All  rights  reserved. 30/35
  • 31. ゲームの基本構成(2) •  サーバからのリプライのディスパッチ   ジョブの配列+通知情報 ゲームサーバ Copyright  (c)  1999-­‐2011  DeNA  CO.,Ltd.  All  rights  reserved. 31/35
  • 32. サーバ通信のディスパッチ •  ミッションの結果などは、配列で返ってくる   –  ミッションクリア、レベルアップ、武器壊れた、   アイテムゲット、ボスと遭遇etc..   •  クライアントは順番に再生しているだけ   •  新しいミッションの出目を追加する時も、ハンドラ を1箇所に追加すればいい   –  ハンドラさえなければ無視   –  Androidで先に配信とかもできる   •  サーバエラーがあるとホーム画面に強制で戻る   –  端末のアプリの再起動は不要なので、デバッグが楽 Copyright  (c)  1999-­‐2011  DeNA  CO.,Ltd.  All  rights  reserved. 32/35
  • 33. DnLib/ngGo Copyright  (c)  1999-­‐2011  DeNA  CO.,Ltd.  All  rights  reserved. 33/35
  • 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. エンサイクロペディアはSphinx製! Copyright  (c)  1999-­‐2011  DeNA  CO.,Ltd.  All  rights  reserved. 35/35
  • 36. 開発 Copyright  (c)  1999-­‐2011  DeNA  CO.,Ltd.  All  rights  reserved. 36/35
  • 37. 地球規模のJavaScript開発 •  サンフランシスコ -­‐  ngmoco:)   –  ngBuilderの開発   –  一部ngGoのモジュール   •  日本   –  ngGoのモジュール   –  ドキュメント   •  パキスタン   –  ngGoのモジュール   –  サンプルのゲーム Copyright  (c)  1999-­‐2011  DeNA  CO.,Ltd.  All  rights  reserved. 37/35
  • 38. Copyright  (c)  1999-­‐2011  DeNA  CO.,Ltd.  All  rights  reserved. 38/35
  • 39. ngGo/ngBuilder •  1st  &  3rd  パーティーの開発をサポート   •  シーンのフレームワークは公開してます   •  データ駆動   –  リリース後は開発の人数を減らしながら、イベントな どを定期的に行う必要あり   –  パラメータチューニングしやすく!   •  Flow  Editor   –  部品を作るのは簡単   –  さらにモジュール化しやすくして、テストや分業を   簡単に!   Copyright  (c)  1999-­‐2011  DeNA  CO.,Ltd.  All  rights  reserved. 39/35
  • 40. 開発の風景 •  大きく機能で拠点を分ける   •  でもリリースは同じ場所で   •  Skypeのチャットが主なインフラ   –  家で仕事することもあるよ  :  (   •  gitを使う   –  git  flowで   –  ソースコードでコミュニケーション   •  ドキュメントはSphinx   –  CommonJSドメイン作った   Copyright  (c)  1999-­‐2011  DeNA  CO.,Ltd.  All  rights  reserved. 40/35
  • 41. ngCoreのデバッグ・開発環境 Copyright  (c)  1999-­‐2011  DeNA  CO.,Ltd.  All  rights  reserved. 41/35
  • 42. •  デバッグ   –  デバッグメニューをゲームにつける   •  パラメータ変更   •  カットシーンを再生   –  Android実機用のデバッガー   •  ngBuilderからデバッガ起動。プロファイラも。   –  Flash環境   •  ブラウザのJavaScriptデバッガが利用可能   •  一番お手頃で便利   Copyright  (c)  1999-­‐2011  DeNA  CO.,Ltd.  All  rights  reserved. 42/35
  • 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. ngCoreを触ってみるには? •  下記のサイトでSDKと、ngGo/Builderが   ダウンロードできます   •  日本語の開発情報も充実しています https://developer.mobage.com Copyright  (c)  1999-­‐2011  DeNA  CO.,Ltd.  All  rights  reserved. 44/35
  • 45. 今後のngCore •  本体の機能拡張も行われます!   –  パフォーマンスアップ   –  3D対応、HTML5への対応   •  開発効率の向上   –  ngServer   •  JavaScriptでゲームサーバ   –  ngBuilder/ngGo   •  さらに積極的に開発していきます Copyright  (c)  1999-­‐2011  DeNA  CO.,Ltd.  All  rights  reserved. 45/35
  • 46. まとめ •  大規模JavaScriptゲーム開発   –  分割しやすい構造にして部品ごとに作りこみ   •  地球規模JavaScript開発   –  JavaScriptの大規模になりつつあるゲーム開発をサ ポートする環境づくり   •  テスト・デバッグ   –  Jasmine  +  More::Test   –  まだ改善の余地があるので改善していきます   Copyright  (c)  1999-­‐2011  DeNA  CO.,Ltd.  All  rights  reserved. 46/35