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