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

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

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

ぜひご覧ください。

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

字幕

Flash Professional CS6 からは スプライトシートという形で MovieClip シンボルを Starling フレームワークで 再生できるように ファイルとして書き出すことができます 具体的には その MovieClip シンボルの イメージを 1 枚に収めた png ファイル ピングファイルと それから そのアニメーションの フレームごとの情報を持った XML ファイルが書き出されます この 2 つから Starling フレームワークでは TextureAtlas という オブジェクトを作って そして具体的なイメージを切り出して フレームとして表示することができます その表示の仕方 TextureAtlas オブジェクトの 作り方をご説明したいと思います この Starling ルートクラスは 2 つの仕事を別々に行っています 先ず 今 お見せしている部分は 外部の XML ファイルを読み込んで xml データとして扱える状態にまで 持ってきています もう 1 つは今 隠れている部分で Flash のライブラリに収めた ビットマップを Starling のイメージオブジェクトにして 表示する部分です 先ずは XML データの読み込みの部分を 確認しておきましょう XML ファイルは URL_Loader クラスで読み込みます ですから先ず new 演算子で URL_Loader のコンストラクタを 呼び出してオブジェクトを作ります この URL_Loader の オブジェクトに対して loader というメソッドを呼び出し その引数に読み込む 外部ファイル XML ファイルの情報を持った URL_Request オブジェクトを渡すと 読み込みができます URL_Request オブジェクトは はやり new 演算子でコンストラクタ URL_Request を呼び出したら その引数には 読み込むファイルのパスを定めます 今回は animation という XMLファイル これが スプライトシートとして 書き出された XML なんですが それを fla ファイルと 同じ階層に置いてありますので ただ単にファイル名だけです 拡張子も忘れないようにしてください このプロセスで 外部 XML ファイルが読み込めるんですが 読み込んだ後の処理というのが 必ず必要でしょう それは EventListener で行われます URL_Loader のオブジェクトに対して addEventListener メソッドを呼び出し 読み込み終わったらという処理 これはイベントの COMPLETE という定数で指定します そして読み込み終わった時の メソッドを定めます これが そのメソッドです Event オブジェクトを受け取ったら その target というプロパティを調べると この addEventListener を登録した URL_Loader のオブジェクトが取れます その data というプロパティで読み込んだ テキストファイルの テキストデータが取れます そのテキストデータを XML に変換するのが xml という関数です 変数 型指数を XML にした変数に入れれば これで xml データとして 解析できる状態になります 1 つだけ注意は Event オブジェクトの型指定です この URL_Loader クラスを使った 読み込みというのは Starling のクラスでなく Action Script 3.0 定義済みのクラスで行います ですから この Event オブジェクトは Starling の Event オブジェクト これをインポートしますね Starling のイベントではなく Flash のイベントクラスの オブジェクトです ですから Flash のイベントクラスが インポートされていません インポートするという方法もあるんですが ちょっと煩わしいいので Event のオブジェクトの親 オブジェクトこれは Starling も それから Action Script 3.0 定義済みも 共通ですので使えます そして親で型指定する文には 型指定が緩まりますけれども 指定はできます ですから それで target というプロパティを取り 更に テキストデータのプロパティを取って XML に変換をしました 畳んである部分は ライブラリのビットマップから image オブジェクトを作って ステージに置くという部分です インポート宣言は Sprite を読み込んで それをクラスの拡張 extends で継承しています 後は使うのは image と texture ですね そして image オブジェクトを入れる プロパティが宣言してあります そして読み込みの処理は loader URL_Loader の EventListener に登録した この createInstance という メソッドの方で行っています ここは もう基本的な処理で ライブラリのビットマップに付けた名前で クラスのコンストラクタを呼び出し BitmapData として受け取ります その BitmapDataは texture の fromBitmapData というメソッドで texture に変換します 変換したtexture は image オブジェクトの引数として image オブジェクトの コンストラクタの引数として image オブジェクトを作ります それを Starling ルートクラスの 子どもとして addChild すれば ステージに表示されます 後 この4行は位置決めで ステージの中央に表示するようにしています ムービープレビューで確かめたいと思います なお XML データは ステージに表示されませんので trace 関数で出力パネルに 出すようにしています では すぐに保存がしてありますので fla ファイルの方に切り替えて 制御メニューから ムービープレビューを確かめます ビットマップのイメージを収めた image オブジェクトが ステージ中央に収められています それから出力パネルには 読み込んだ XML データが表示されています スプライトシートとして書き出すと 最初の要素が TextureAtlas という名前で定められます Starling フレームワークでは スプライトシートのデータ png 画像データと それから XML 合わせて TextureAtlas という オブジェクトを作って扱うことになります では swf のウインドウは閉じ Starling ルートクラスに切り替えて スクリプトをフルスクリーンにするために F4を function 4 番を 2 回押します XML データの読み込みは 確認ができましたので trace 関数は煩わしいので コメントアウトします そして保存しましょう ファイルメニューから保存です XML と次は png の ファイルの読み込みになりますね これはスクリプトで読み込まずに fla ファイルの方に 直接読み込んでみようと思います では fla ファイルに戻ります そして function 4 番で 今度はパネルを出します 今現在は ライブラリに この丸いペンギンの画像が入っています これを差し替えてしまいましょう 右クリックでプロパティです そしてダイアログの右上の方にある 読み込みを選択します クリックです そうすると画像ファイルは 1 つしかないので 1 つが表示されています これを選んで開きましょう 読み込んだ画像は 全てのフレーム絵が 1 枚になっていますので こんな感じです OK を押しましょう ここは構わず OK を もう 1 度押してください そうすると ライブラリの画像が変わりました では この fla ファイルも一旦保存して ムービープレビューを確かめてみましょう 制御メニューからムービープレビューです 勿論こうなりますね 単に丸い画像をスプライトシートの 大きい画像と差し替えただけです この中から 1 部を切り出すというのは png の画像と XML のデータを組み合わせて TextureAtlas という オブジェクトを作らなければなりません その処理を行いますので swf のウインドウは閉じて Starling ルートクラスに戻ります function 4 番をキーボードから 2 回押して フルスクリーン表示にしましょう 1 回で構いませんね

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

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

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

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

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

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