グランブルーファンタジーのコードをちょっと読んでみた

なんかすごい無茶してますね。 HTML5で普通に読めるので、適当に読んでみた。都合が悪ければ言ってください > Cygamesさん

大雑把にコールしてるライブラリは "jquery","underscore","backbone","easeljs","tweenjs","soundjs","movieclip","preloadjs","loadmanager","pex","typist", "flexslider","finger","socketio","subroute","uaparser"

require.js

全体的にrequire.jsに強く依存している。require.jsは r.js使ってまとめてminifyできるんだけど、今回はそれをしていなくて、uglifyか何かで難読化されているだけ。なんだけど、圧縮できない文字列ベースで依存関係を表現しているため、外部から非常に読みやすい("自分には"読みやすいだけかもしれない)

例えばこんなコードがみえる。

define('model/pagination',["backbone","underscore","model/data"],function(a,b,c){var d=c.extend({urlRoot:function(){...

ディレクトリ構成とか想像できてニヤニヤできる。

画面構成

画面構成としては、全面を巨大なCanvasが覆ってて、各種エフェクトはcanvasの上に描画される。そのCanvasの上にpositon:absoluteの座標系で置いた透明なdivが散らばっていて、当たり判定を作っている。その下は普通のマークアップされたHTMLがあるのだけど、タッチイベントをリッスンしてはいない模様。これは複雑なマークアップをするとDOMのサイズを計算してタッチベントが発火する負荷がかかるから、見た目のマークアップとは別に透明なdivが用意されたものだと思われる。

アニメーションはCreateJS

アニメーションはCreateJSのeasel.jsとtween.jsとmovieclip.js。アセットはおそらくToolkit for CreatejsでAdobe CSから生成されているのではないか。~stageというdivが大量にあってpreloaderから読み込まれているのだと思う。

Flash to HTML5 | Learn more about the CreateJS toolkit

UIは素のBackbone

UI部分はHTMLとBackboneで構成されている。普通のextendスタイル。テンプレートはDOMにscriptタグで埋まっており、underscore.jsの_.templateのようにみえる。通信はどうもWebSocketと普通のAJAXのハイブリット。たぶん戦闘画面とかでwebsocket使ってるようにみえる。(サーバーサイドのスケールどうしてるんだろう)

pure js

minifyされた結果を見る限り、altjsを使っている形跡はない。coffeeだと前方にvar宣言が固まるし、coffeeやtypescriptのクラス記法ならsuperの記法が歪になる。