Stalirng の Web 標準版 ？ となるべく、Starling.js についての発表がありました。（Starling JS）
特に、デバイスのブラウザも含めてのクラスプラットフォームを意識したものだと思われます。その辺りの詳細は、来週の MAX でも聞けるかもしれません。
Starling.js の特徴は、Starling と同じ API が提供されるのはもちろん、それが TypeScript から利用できることです。名前は JS となっていますが、Starling.js のコードは基本的に TypeScript で書かれているようです。
そのため、クラスやインターフェースなどを使って AS3 で開発した既存のコードの再利用も、比較的容易にできそうです。
（もちろん、開発する側として JavaScript を使うという選択は可能ですが）
また、現在は Canvas に依存している描画を、将来は WebGL ベースに置き換えたいと考えているようです。
既にご存知の方も多いと思いますが、今回は Feathers という Starling フレームワーク上で利用が可能な 2D の UI コンポーネントの話です。
Feathers は、もともと Foxhole という名前のオープンソースのプロジェクトとして公開されていたものです。
それが、少し前に Feathers と名前を変えて、Staring の wiki にも専用ページが追加されました。つまり、Staring や Away3D と同様に、アドビが後方支援するフレームワーク群の 1 つになった、ということのようです。
Feathers で提供されるのは、基本的な UI コンポーネントが一通りと、それらのコンポーネントをレイアウトする機能です。下のページでは、それぞれ、Feathers のコンポーネントとレイアウト機能の一覧を実際に確認することができます。
Starling の新しいバージョンが公開されています。 （Download Starling 1.2）
主要な変更点は以下の通りです。
Flash Professional CS6 から、スプライトシートを生成する機能が追加されました。ステージ上やライブラリ内の、任意のシンボルや画像を、スプライトシートとして書き出せるようになっています。
また、複数のシンボルを選択してからこの機能を使うことで、テクスチャアトラスを生成することもできます。
テクスチャ （すなわちスプライトシート） の GPU へのアップロードは時間のかかる処理とされています。そのため、基本的には、シンボルごとにスプライトシート化するよりは、できるだけまとめてテクスチャアトラスにするのがお勧めと言われています。
昨日、ADC OnAir をご覧頂いたみなさま、どうもありがとうございました。見逃した方は、こちらをどうぞ。 （ADC OnAir）
お聞き苦しかったかと思いますが、番組中で説明に使用した資料をアップしましたのでお知らせします。現状では、デバイス向けのコンテンツ作成には、CPU 描画より GPU 描画を選択するのが良さそうだという内容の資料です。
次回の ADC OnAIR （6 月 6 日放送予定。メインは池田さんの Stage3D 解説！） でも、また 5 分ほどのコーナーを頂く予定ですので、何かリクエストがあれば是非お知らせ下さい。番組内容に対するリクエストも大歓迎です。
Starling では、指による操作も、マウスによる操作も、どちらも同じイベント （TouchEvent） として扱います。
Flash Player のマウスイベントとは異なり、イベントの種類は TouchEvent.TOUCH の 1 つだけです。そのため、触れた、移動した等の操作の状態は、イベントに含まれる Touch オブジェクトの属性から判断することになっています。
Starling の全ての表示オブジェクト （Sprite, Stage, Quad, ...） は、TouchEvent を扱えます。ただ、Button クラスは、内部的にタッチイベントを triggered イベントに変換しているため、独自のリスナを追加するのは、注意した方がよいかもです。
また、表示オブジェクト自身や親オブジェクトの touchable 属性が false の場合は、TouchEvent を受け取ることはできません。
Starling には、ボタンを簡単に実装できるよう Button クラスが用意されています。
Button クラスは DisplayObjectContainer クラスのサブクラスです。なので、任意の表示オブジェクトを子に持つことができますが、基本的には、スキン画像とタイトルを表示するだけのクラスです。あと、ボタンのクリックを通知する機能があります。
下が、Button のコンストラクタです。最初の引数は、ボタンのスキンとなるテクスチャです。オプションとして、第 2 引数にタイトルを、第 3 引数に押されたときのテクスチャを指定できます。
Button(upState:Texture, text:String = "", downState:Texture = null)
Flash Professional で作成するボタンと違って、"オーバー" のスキンは指定できません。おそらく、これは、タッチデバイスでの利用を前提としているためだと思われます。
Starling では、文字を表示するために TextField というクラスが提供されています。フォントの種類、大きさ、色、位置などを指定して、テキストを画面に表示できます。
とはいえ、GPU で直接フォントを扱えるわけではありません。実際には、裏で Flash Player の TextFiled を使って CPU 描画したものを、ビットマップ化して GPU にアップロード、という動作をします。
つまり、Starling の TextField が提供するのは、与えられたテキストとフォントから、動的にテクスチャを生成する機能です。
そのため、カーソルで、表示されたテキスト内の文字を選択する、といった操作はできません。 （ただのビットマップなので）
また、特に動的に生成する理由のないテキストは、TextField を使うより、事前にテクスチャとして準備しておいた方が、実行時の効率は良さそうです。
Flash でアニメーションと言えばやはり MovieClip ですが、Starling にも MovieClip というクラスがあります。もちろんアニメーション用のクラスです。
前回少し触れましたが、Starling で画面に表示できるのは、ビットマップ画像か色を指定した矩形です。そのため、名前は同じ MovieClip でも、Starling の MovieClip は、フレーム毎に割り当てられたビットマップを表示するクラスとなっています。
また、Starling の MovieClip には子オブジェクトを管理したり、フレームにスクリプトを持つ機能がありません。この点も Flash Player の MovieClip とは大きく異なります。
（Starling では、表示リストの管理は Sprite の担当です。一方、MovieClip は Image クラスにタイムライン機能を足した Image のサブクラスです。MovieClip が Sprite のサブクラスである Flash Player とは異なり、両者の役割はほとんど被りません。）
今回は、ビットマップ （テクスチャ） の表示方法です。Starling では、ビットマップか、前回までのように矩形を使って画面を構成します。
記事の後半では、動的にピットマップを更新する方法もご紹介します。
（注：以下の文章では、"テクスチャ ＝ ビットマップ" と思ってお読みください）
Starling フレームワークでは、ビットマップを表示するのに Image を使います。Image は Quad のサブクラスです。Quad にビットマップを扱う機能を追加したものが Image という位置づけです。
Flash Player の表示オブジェクトでは Bitmap に BitmapData があるように、Starling では Image に Texture があります。Image が表示オブジェクトとして使われて、データの実体は Texture が持つ、という関係です。
前回は、EnterFrame イベントを使って、アニメーションを実現する方法をご紹介しました。今回は、Tween クラスを使った方法です。
Tween を使った場合の特徴の 1 つは、アニメーションの期間を秒数で指定することです。Tween は指定された時間をかけて、表示オブジェクトの属性値、例えば x 座標を最終的な値へと、だんだんと変化させます。
コードで書くと以下のような感じです。まず Tween のコンストラクタで、対象となるオブジェクトと時間を指定して、次に、animate() メソッドを使って、変化させる属性の名前と最終値を設定します。複数の属性を変化させる場合は animate() を何回も呼ぶことになります。
// myObjectを2秒かけて、横に50px、縦に80px移動させるアニメーションの指定
var myTween:Tween = new Tween(myObject, 2.0);
myTween.animate("x", myObject.x + 50);
myTween.animate("y", myObject.y + 80);
今回は、前回の記事で紹介したコードをベースに、矩形を移動させてみます。利用するのは、EnterFrame イベントです。
Starling の表示オブジェクトは、Flash Player の表示オブジェクトと同じ様に、EnterFrame イベントをサポートしています。そのため、EnterFrame のイベントリスナを追加すれば、新しいフレームの表示ごとにリスナ関数が実行されます。
Starling でのイベントのしくみや、リスナの登録方法も、Flash Player の表示リストとほぼ同様です。ということで、今回紹介する方法は、既存の Flash コンテンツを再利用しやすい方法と言えそうです。
さて、今回のサンプルでは矩形を回転させたいと思います。そうすると、前回のサンプルのまま単色ベタ塗りの矩形が回転しても様子が分かりにくいでしょうから、前準備として、矩形の塗りをグラデーションに変えたいと思います。
都合のよいことに Quad クラスは、Stage3D らしく、頂点ごとに色を指定する機能を持っています。メソッドの名前は setVertexColor() です。
setVertexColor() の最初の引数は頂点の番号です。番号は、0 から順に、左上、右上、左下、右下の頂点を指します。2 つ目の引数は色の指定です。
Starling は Stage3D を利用した高速な 2D 描画の実現を目指したフレームワークです。以前の記事 （Starling （ActionScript 3 の 2D フレームワーク） のご紹介のつづき） で概要と簡単な使い方を紹介しました。
Starlig では、アニメーションに 3 種類の方法が使えます。今回から、何回かに分けて、それぞれの書き方を紹介します。従来の表示リストのアニメーションと比較してみて下さい。
Starling の開発環境は、Flash Player 11 と AIR 3 への対応が前提です。現時点では、唯一サポートされた環境である Flash Builer 4.6 の利用をお勧めします。
Flash Professional CS5 もしくは CS5.5 を使う場合は、以下の記事で紹介した機能拡張が便利です。
前回の記事で伝わったかと思いますが、Stage3D の登場により Flash Player の描画機能は一世代確実に進化しました。 久しぶりに一歩進んだ感じです。
この記事で紹介している Starling の他にも ND2D のようなフレームワークが登場したりとか、今から Flash の周りでいろいろと新しいことが起こりそうな予感がします。 （Alchemy の話や Flash Player のマルチスレッド対応の話とかもありますし）
さて、今回は少し詳細な Starling の仕様の紹介です。
Starling は Stage3D 上に構築されています。Stage3D は、デスクトップ環境では DirectX や OpenGL、モバイル環境では OpenGL ES2 上に構築されています。そして OpenGL 等が GPU の API を直接呼び出すので、Starling は間に 2 階層挟んで GPU を利用していることになります。
Starling は、Flash Player 11 の新しい 3D 描画機能 "Stage3D" 上に構築された、オープンソースの 2D 描画用 ActionScript フレームワークです。FreeBSD ライセンス下で配布されます。
現在バージョン 0.9 が公開されています。ダウンロードはこちらのリンクから。 （Starling Framework v0.9）
Stage3D は直接 GPU 機能を活用できるため、従来よりもずっと高速な描画を実現できます。すでに、様々な 3D フレームワークが Stage3D に対応しています。
（Alternativa3D とか Away3D とか Minko とか Flare3D とか Mixamo とか）
Stage3D は強力なのですが、実際に使おうと思ったら、アセンプラでシェーダープログラムを書くとか、何れかの 3D フレームワークの使い方を学ぶ、つまりまったく新しいプログラミングモデルを学習しなければならなかったりします。
これでは、単純に高速な 2D 描画が欲しいだけなんだけど！の人にはちょっとハードルが高すぎるかもしれません。
このままでは一部の人しか Stage3D を使うまい、という心配があったかどうかは不明ですが、Stage3D の複雑さを隠しつつ高速な 2D 描画を実現できるよう開発されたのが Starling です。Starling は、使い慣れた表示オブジェクト風の API を提供します。一方、裏では Stage3D を呼び出して高速な GPU 描画を実現します。
