iconかつてWebにはFlashというプラットフォームがありました。Flashはグラフィックの描画に長けており、標準ライブラリだけでも、かなり柔軟な表示を行うことができました。JavaScriptの標準ライブラリにはそういったものがありません。グラフィックを描画するためには、原始的なCanvasAPIを利用するか、外部のライブラリを利用するか、自分でライブラリを作ることになります。そこで今回は「自分でライブラリを作る」をやってみましょう。Flashライクな表示システムを作ってみるのです。Flash風のAPIを備えたライブラリはすでに存在しますが、自分で作ってみると楽しいですし、いろんな発見があるかもしれません。実用には程遠いかもしれませんが、一度挑戦してみましょう。動かしてみるFlashの表示の仕組みまず初めにFlashの「表示リスト」について軽くおさらいしておきましょう。表示リストは次のようなシステムでした。システムには唯一のStageが存在します。Stageは表示オブジェクト(DisplayObjectまたはDisplayObjectContainer)を複数個持つことができ、Stageに追加された表示オブジェクトは画面に表示されます。表示オブジェクトは、その名の通り画面に表示するためのオブジェクトです。表示オブジェクトは様々なプロパティを持ちます。表示オブジェクトの持つxプロパティやyプロパティを操作すると、画面上での表示もその通りに移動します。DisplayObjectContainerはその名の通り、自身の子としてさらに表示オブジェクトを持つことができます。(※実際のFlashのシステムではStageとDisplayObjectの間に、タイムラインを表す表示オブジェクトが存在しますが、今回はタイムラインを作らないため省略しています。)Flashではこのようにして表示オブジェクトを入れ子にし、階層構造を使って描画を管理していました。これが表示リストです。JavaScriptでFlashのような表示システムを作るRenderContextさて、これからFlash風の表示システムを構築していきます。このライブラリを「Flesh」と名付けましょう!FleshはFlash風のAPIを備えており、単純なグラフィックを簡単に扱うことのできるライブラリです。flesh.jsというファイルを作り、書き込んでいきましょう。canvas要素の操作をラップするRenderContextクラスを作りましょう。RenderCoxtextクラスなど作らずに、直接canvasを操作しても構いません。描画をWebGLに切り替えたくなった場合、操作をラップしたクラスがないと、煩雑なコードの書き換えが発生することになります。そこで、中間層を提供することで、描画方法の差異を吸収することができます。いった心配がない場合、例えば絶対にWebGLは使うことがないと分かっている場合、この作業は不要になります。不要な方は、この手順を飛ばしてもらっても構いません。実際にRenderCotextクラスを定義してみましょう。{}}このクラスを継承して、canvasのコンテキストを作成しましょう。内容としてはcanvasの同名のメソッドを呼び出すだけです。WebGLのときのみ実装する。}}これでRenderContextの準備ができました。DisplayObjectとDisplayObjectContainer次に一番重要なStageを......と行きたいところですが、まずは表示オブジェクトからです。プロパティとして持たせました。多くのプロパティをもたせても構いませんが、ここではシンプルにするため、数を絞りました。次にDisplayObjectに、必要なgetter/setter、メソッドを実装していきましょう。グローバル(Stageから見た)アルファを求める。