【HTML5 Dev】「TRON」の舞台裏：HTML5 による電子書籍サイト構築 (3/4)

開発者向けツールを使ったコードのナビゲート

アプリケーションを柔軟にして、モジュール分割し、扱いやすくしておくため、（オリジナル版のように）全体を13種類の「ページ」に分割した。ページをアプリケーション起動時にあらかじめキャッシュし、横に順々に並べていった。各ページがそれぞれの表示と対話ロジックを定義し、それが X 軸方向に対応している（起動時に設定が行われる）。


画面上で見えるすべてのパネル（そして最終的にはデバッグ情報）を処理する描画ループは、1つしかない（experience.js のなかの Draw()）。

ヒント：コードをよく見ると、Developer Tools（F12 を押すとアクセスできる）で「Format JavaScript」を有効にすると、JavaScript はもっと読みやすくなる。

デバッグ モード

ほとんどのページには、開発中に役に立つデバッグ情報が含まれる。具体的には、キーボードで「d」を押せば、パフォーマンス フレームカウンタを表示させられる。デバッグ用の別のデータは、Console に送られる（F12 を押し、Console タブを選ぶ）。


補足：アプリケーションには隠しキーがもう1つあるが、それがどのキーで、何をするものか分かるだろうか。

イメージの先読み

最初のページを読み込む際、各ページは experience.js で定義された preloader クラスで必要なリソースを非同期にリクエストする。preloader はプロジェクトのすべてのリソースのキューイングとダウンロードを処理する。

読み込み中は、回転するボールのアイコンが表示される。これは、スプライト アニメーションのテクニックを使って実現している。アニメーションは、ステップ数無限でループするデータ列として、イメージの中で定義される（loading-base-128.png が表示用に90^o回転されている）。このイメージを Canvas 上で描画する際に、描画ウィンドウをステータスごとに映像のみに変更し、必要に応じてオフセットを1つずつ増やす。



この画像がほかのものより先に準備できていることは、どうやって分かるのだろうか。実は、どの素材よりも先にダウンロードし、サイズも比較的小さく抑えておくので先に用意しておけるのだ。