Intro」という記事が投稿されました。EaselJSの次期バージョンがサポートするでWebGLレンダラをどのように使うかの入門的な解説です。現在、EaselJS次期バージョンはパブリックプレビューがGitHubに公開されています。本稿はblog記事にもとづいて、新しいWebGLレンダラについてご紹介します。次期バージョンに備わる機能については、「EaselJSがWebGLをサポート」をお読みください。はじめにこれまで試されたかぎりでは、一般的に使うWebGLレンダラをEaselJS向けに開発する意味はないと考えられていました。最近のCanvasの実装は、すでにさまざまな2DコンテンツをGPUで適切に描くことができます。それも、ネイティブコードにより、重い仕事をこなしているのです。JavaScriptでそれを超えようとするには及ばないでしょう。コンテンツに一定の制限を設けると、WebGLで大幅にパフォーマンスを高められることがわかりました。新たなSpriteStageとSpriteContainerクラスがつくる表示オブジェクトはEaselJSのなじみのあるAPIを備えながら、コンテンツにいくつかの制限を加えることで、WebGLの描画を大きく最適化します。新たなAPIでは、WebGLがサポートされなければ、Canvasの2Dに意識することなく切り替わります。そのため、コンテンツはどの環境でも動きます。多くの点で統合が行われましたので、WebGLレンダラの高いパフォーマンスを活かしつつ、より安定したCanvasレンダラを組合わせて、両者のいいとこどりができます。SpriteStageとSpriteContainerクラスSpriteStageクラスは、WebGLのステージを扱います。このクラスは、おなじみのEaselJSのStageクラスを継承します。新たなメソッドがいくつか備わり、そして大事なことはSpriteStage.addChild()メソッドで加えられる子がWebGLで描きやすい表示オブジェクトにかぎられることです。それらは、BitmapとSpriteにBitmapText、およびSpriteContainerです。ShapeやText、あるいはContainerのオブジェクトは含まれません。子として加えられない同じように、SpriteContainerは、Containerクラスを継承します。SpriteContainerクラスとしての縛りがかかります。SpriteContainerクラスのコンストラクタは、SpriteSheetオブジェクトを引数に受取って、spriteSheetプロパティにもちます。SpriteContainerオブジェクトに加えるSpriteやBitmapText、あるいはSpriteContainerオブジェクトは、同じSpriteSheetオブジェクトを共有しなければなりません。そのスプライトシートには、イメージがひとつしか使えません。スプライトシートが異なるこの仕組みが意味するのは、SpriteStageオブジェクトのルートからの階層は、それがどれだけ深くて入組んでいても、スプライトシートひとつのイメージとして描けるということです。表示リストの階層のすべてを、ひとつの描画の呼出しにまとめられます。そのため、コンテンツはとても素速く描けるのです。ほとんどの場合、表示オブジェクト(のxやy、rotation、scaleXとscaleY、alphaなど)は普通に扱えます。マスクやフィルタなどの高度な機能は、WebGLでは無視されます。初めは制約が気になるかもしれません。実際の効果はきわめて高いです。ゲームなら、ステージに背景のビットマップを敷き、地形のSpriteが入ったSpriteContainerと、キャラクタのSpriteが納められた別のSpriteContainerオブジェクトを置きます。上のSpriteContainerに加えたBitmapTextとSpriteインスタンスでUIとスコアを示せばよいでしょう。これらのSpriteContainerは、それぞれのSpriteSheetオブジェクトが使えます。ご注目いただきたいのは、DOMElementもSpriteStageとSpriteContainerオブジェクトで問題なく扱えることです。それは、DOMElementがWebGLに描画しなくてよいからです。自動フォールバックWebGLがサポートされないデバイスでは、SpriteStageオブジェクトは自動的にCanvasの2Dレンダラにフォールバックされます。WebGLの高速なレンダリングにもとづいてつくられたコンテンツでは、パフォーマンスが大きな問題になりえます。SpriteStage.isWebGLプロパティでどのレンダラが使われているかわかりますので、それに応じてコンテンツを調整することはできます。ここは注意}新しいレンダラのパフォーマンスの詰めには、もうしばらく時間がかかります。このアプローチにより、きわめて高いパフォーマンスのコンテンツを幅広いデバイス向けに開発できるようになります。CreateJSの豊富なAPIやツール群が使えるのです。SpriteStageとStageをともに使うWebGLレンダラとともに、より安定したCanvasレンダラを使う手もいろいろあります。Canvasがイメージのソースとして使えますので、StageオブジェクトのターゲットのCanvasをラップすればSpriteStageに加えられます。Stageオブジェクトには複雑なベクターアニメーションのコンテンツがつくれます。それをSpriteStageに、問題なく描けるのです。逆に、SpriteStageのWebGLコンテンツをStageオブジェクトのCanvasに表示することもできます。Bitmap(myStage.canvas);mySpriteStage.addChild(stageBmp);つぎに、SpriteSheetBuilderクラスを用いると、Canvasレンダラのスプライトシートがつくれます。そのスプライトシートはWebGLでも使えます。このやり方で、たとえばすでにあるTTFフォントから、ランタイムでビットマップフォントが生成できます。読込んだスプライトシートの色味をフィルタで調整したりもできるでしょう。ベクターのコンテンツからスプライトシートがつくれます。StageとSpriteStageのCanvasをレイヤーとして簡単に重ねられます。マウスやタッチのインタラクションを、新たに備わったStage.nextStageのAPIにより互いに受け渡せます。マウスオーバーやアウトのインタラクションも、ステージの間で正しく扱えます。yetAnotherStage;ステージが複数あるとき、上記のやり方で順につなげきます。各Canvasはそれぞれの大きさをもち、異なった間隔で更新できます。したがって、高速でフルスクリーンのゲームエンジンはWebGLの60fpsで描き、ベクターの美しいUIを半分の高さのCanvasで重ねて20fpsにすることもできるのです。WebGLを始めようWebGLを使ったサンプルがいくつかGitHubで公開されました。「Runners」は、SpriteStageとSpriteContainerの使い方を示します。コンテンツをWebGLがサポートされないデバイスでどう動かすかもわかります。「TwoStages」は、Stage.nextStageプロパティにより、マウスインタラクションをレイヤーの間でやり取りする例です。Gary」は、新たなAPIを用いたより複雑なゲームのサンプルです。Canvasレンダラでつくられたコードのうち、つぎの中身の3行を書替えるだけでWebGLで動かせました。ふたつ目のCanvasを加える。SpriteStageオブジェクトをつくる。ゲームエンジンのContainerの替わりにSpriteContainerを使う。このゲームはSpriteSheetBuilderクラスによりランタイムで、小さなベクターグラフィックス(85kbにgzip圧縮)をWebGLで扱いやすいスプライトシートに変換しています。Garyこれから数ヶ月の間、さらにサンプルが加えられ、正規リリースに向けた仕上げが行われます。目指すのは、EaselJS開発者が使いやすく、安定した豊富な機能をもったレンダラの提供です。CreateJSの開発チームはみなさんのフィードバックを待っているとのことです。