StarlingフレームワークによるStage3Dを使った2次元表現

スプライトシートから切出したテクスチャでインスタンスをつくる-後編-

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
スプライトシートとして書出された画像にXMLデータを組合わせると、各フレームのイメージが切出せます。これを扱うのが、TextureAtlasクラスです。
講師:
06:44

字幕

煩わしいので重要でない部分は 今回のテーマでない部分は 畳んでおくことにしましょう ここは良いですね それから コンストラクタも畳みます これくらい見えていても良いでしょうか trace 関数も削除して TextureAtlas の オブジェクトを作りたいと思います texture を作った後です myAtlas としましょうか Texture Atlas で型指定をします Starling の TextureAtlas クラスが インポート自動的にされました 作るのは お約束通りコンストラクタです Texture Atlas 引数は 2 つです だいたい検討付きますね 画像ファイルから作った texture が先ず 1 つ myTexture ですね コントロール若しくは コマンドドラッグでコピーします もう 1 つは勿論 XML です これもコントロールまたは コマンドドラッグでコピー これで TextureAtlas のオブジェクトは 一応できました TextureAtlas は 画像から作られた texture と XML のデータを組み合わせて texture ごとの情報を 取り出すことができます ですから好きなフレームの texture が取り出せます ということで プレームの texture を 1 つ取り出してみましょう 変数は frame という名前にします 型指定は Texture です そして取り出すには TextureAtlas にお願いします myAtlas コントロール若しくは コマンドドラッグでコピーして getTexture というメソッドです この中に 欲しい texture の名前を入れます 名前はなんだったけと これは XML の中に指定されていますので ちょっと XML を覗いてみましょう xml データはこの様な構造になっています まず 1 番の大元は TextureAtlas という要素名です そして その中に SubTexture という要素が フレーム数分だけあります 全部で 6 フレームです そして名前が付いています この名前が実は先程の getTexture のメソッドに渡すものです この名前の付け方なんですが 先ず文字の部分これは シンボルから書き出していますので シンボルに付けた後 名前が基本的にデフォルトとして用いられます それにフレーム番号が付いています 但し 0 番からスタートしますので ご注意ください 6 フレームあると 0005 まであるということになります 後 残りの数字は大体 属性を見てわかりますね x y 座標起点と幅と高さ ここを切り出すんだよ という情報を持っています 今回 欲しいのはこの名前ですので 先頭フレームの pen_walk0000 これをコピーしておきます そしてfla ファイル Starling ルートクラスの方に また切り替えます Starling ルートクラスに書いた ステートメント TextureAtlas に対する getTexture というメソッドに渡すのが 今コピーした名前です ペーストしましょう これは文字列で渡しますので ダブルクオテーションで囲みます これで第 1 フレームの texture がフレームに入りました このオブジェクトを texture のオブジェクトをコピーして image オブジェクトに 渡す引数に差し替えれば良いですね ではファイルは保存しましょう fla ファイルに切り替えて ムービープレビューを確かめたいと思います 制御メニューからムービープレビューです 読み込んだスプライトシートの 大きい画像の中から xml データの先程確認した名前を使って 最初のフレームのペンギン 画像を配することができました これに更にもっと別のクラスを 組み込んで使うと アニメーションさせることもできますが 今回は ここまでで まとめにしたいと思います 一旦 swf のウインドウは閉じて そして Starling ルートクラスに戻り ファンクション 4 番で フルスクリーンの表示にします スプライトシートとして書き出した 画像ファイルと XML ファイル この 2 つを扱って texture を作り その texture 中の欲しいフレームの data.texture を取り出すという 処理の流れです 先ず xml データは URL_Loader を使って読み込みました それから画像ファイルの方は今回は fla ファイルの ライブラリのビットマップを 差し替える形で用いました ですから単に ライブラリに付けておいたクラス名を コンストラクタとして呼び出せば それでデータが手に入ります この 2 つデータから どうやって Starling フレームワークの方に 表示するかというと TextureAtlas と言うのを作るのでした TextureAtlas は new TextureAtlas で コンストラクタを呼び出して 渡す引数は 2 つです スプライトシートの 画像から読み込んで作った texture それから やはり XML ファイルから読み込んだ XML のデータです そうすると texture と XML データを組み合わせた TextureAtlasの オブジェクトができあがります そうすると XML の情報を使って その texture の中から 1 部を 切り取ることができます 具体的には TextureAtlas に対する getTexture というメソッドを呼び出して その引数に XML に指定されている フレームにつけた イメージの名前を指定します そうすると texture が取り出せますので image オブジェクトに 引数として コンストラクタの引数として渡せば Starling のステージに 表示することができるということです

StarlingフレームワークによるStage3Dを使った2次元表現

StarlingはFlash Player 11の新しい描画機能Stage3Dに基づいて作られた2次元の描画用フレームワークです。このコースではStarlingフレームワークによるクラス定義の基礎から、トゥイーンアニメーションやマウスインタラクション、そして最近のバージョンで実装された新しい機能まで解説していきます。

5時間09分 (40 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
カテゴリー
プログラミング
価格: 3,990
発売日:2014年01月26日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。