映像制作 eラーニングのことならビズバレー
文字サイズの変更 標準 
大きい
ホーム > スタッフブログ
スタッフブログ
ビズバレーは、東京都 千代田区で活動する、映像制作、DVD、eラーニングを扱う会社です。

Starlingを利用してアプリケーションを作るとき、showStatsを使い、FPS、使用メモリ、ドロー回数といったモニタリング情報を表示させておくと便利です。このような情報ですね。

20140902-1

私の場合、FPSとドロー回数を特に注目して、FPSは、秒間のフレームレート数を知ることができます。処理が重くなると、アニメーションやスクロール処理などがカクカクとした動作になります。ドロー回数は、GPUに画像をアップロードする回数です。これも多くなると処理が重くなるため少ないほど良しとされます。メモリに関しては、FlashBuildrのプロファイルや、Adobe Scoutを利用するともっと細かく知ることができるので参考程度です。

showStatsの使い方は、
starlingをStarlingインスタンスとして、下記たった一行を加えるだけで、表示されるようになります。
starling.showStats = true;

ただ、この記述はPCのモニタで見る分は問題ありませんが、解像度の高いスマートフォンで見ると、とても小さく表示されてよく分かりません。そのため次のような記述に変更します。
starling.showStatsAt("left", "top", 4);

この記述は、左上に4倍に大きくしたモニタリング情報を表示するという意味で、PCモニタに表示すると、とても大きく表示されますが、スマートフォンで表示するとちょうど良いサイズになります。

20140902-2

20140902-3
Flashの動作は、PCで動かす分は、よほどゲームのようなものでなければ、パフォーマンスを気にすることは、ほとんどありませんが、スマートフォンやタブレットといった端末では、とてもシビアです。そのためモニタリングを行いながら、少しでもスムーズな動作になるよう心がけます。

Starling Frameworkに対応したUIコンポーネント Feathersのサンプルを試してみようと思います。Feathersを利用することでGPUでレンダリングされながらもスクロールボタンなどを簡単に導入することができます。

前提環境
AIR SDKは、バージョン14.0
Starling Frameworkダウンロード済み
・開発ソフト FlashBuilder4.7

まずFeathersのサイトからコンポーネントをダウンロードします。

20140711-1

Starling Framework、Feathersは、とりあえずCドライブ直下に置きました。※慣れてきたら都合の良いところに配置してください。

20140711-2

Feathersのexamplesディレクトリを見ると、いろいろなサンプルが入っています。今回は、「ComponentsExplorer」を動かしてみます。

20140711-3

サンプルは、FlashBuilderのプロジェクトファイルにはなっていないため、プロジェクトとして読み込むことができません。そのためダミーとして1つプロジェクトを作り上書きしたいと思います。新規で「ActionScriptモバイル」を選択してプロジェクト名は「ComponentsExplorer」とします。

20140711-4

そしてビルドパスに、次のswcを読み込みます。
・feathers.swc
20140711-6

・MetalWorksMobileTheme.swc
20140711-7

・starling.swc
20140711-8

3つ入れ終えた状態、そして「終了」ボタンを押してワークスペースに切り替えます。

20140711-9

次に、サンプルのsource内のファイルをパッケージエクスプローラーのsrcディレクトリに上書きコピーします。

20140711-10

すると、このようになり、ComponentsExplorer-app.xmlとEmbeddedAssets.asがエラーになっています。このエラーを修正します。

20140711-11

まず、ComponentsExplorer-app.xmlを開き、AIR SDKのバージョン指定を修正します。

20140711-12

4.0を14.0に変更、これでエラーが消えました。

2014071-13

次にEmbeddedAssets.asを開くとEmbedの読み込みに失敗しています。

20140711-13

これは、サンプルのassetsディレクトリが読み込まれていないためです。assetsディレクトリを読み込むように設定します。

20140711-14

プロパティからActionScriptビルドパスの「ソースパス」タブからassetsを読み込みます。

20140711-15

そうすると無事エラーがすべて消えました。

20140711-16

これで準備が整いましたので、「実行」ボタンから動かしてみましょう。今回は、実行構成からAndroidを選び、AIRシミュレーター上で動かしてみます。

20140711-17

無事実行されました!

20140711-18

このようにして、GPUレンダリングでありながらもUIコンポーネントを利用できることが分かりました。スクロールや素早い動作のときでも60FPSを維持できるぐらいの動作が期待できそうです。

前回はスマホで動作する付属サンプルのデモを試しましたが、今回は、Webブラウザで動作するサンプルデモを試してみようと思います。

今回も一発では動作しないため、修正を行います。主な修正事項は、下記になります。
スマホ用のデモと修正内容が重複する部分もあるので、それほど難しくはないでしょう。

・Starling.swcへのパスのズレを修正する (スマホ用と同じ)
・source pathのパス変数を設定する (スマホ用と同じ)
・HTMLを修正する

まずプロジェクトフォルダーとして「demo_web」を読み込みます。

20140627-1

そうすると、このように読み込まれます。パス変数は設定されておらず、そしてライブラリのパスもズレているので設定が必要です。

20140627-2

まず、Starling.swcのライブラリパスを修正します。

20140627-3

修正後
20140627-4

次に、ActionScriptコンパイラーの画面にて、「特定のバージョンを使用」にチェックを入れます。これを指定しないと(なぜか)swfが書き出されませんでした。そして、HTMLラッパーの設定箇所で、「HTMLラッパーファイルの生成」にチェックをいれます。これはブラウザでFlashを読み込むときの土台となるHTMLファイルです。

20140627-5

次にパス変数の設定を行います。

20140628-6

スマホ用のデモと同じですね。

20140628-7

これで、とりあえず実行構成で、Webアプリケーションを選び「実行」するとSWF、HTMLファイルが書き出され、ブラウザが起動します。

20140628-8

そうすると、このようなエラーがでてきました。
「Context3D not available! Possible reasons:wrong wmode or missing device support.」
GPUを利用するときは、HTMLファイルにwmodeパラメーターを追加する必要があり、抜けているとこのようなエラーが発生します。

20140628-9

Demo_Web.htmlを開いて修正します。

20140628-10

params.wmode = "direct" を追加して、GPUでレンダリングできるように設定します。スマホ用のデモのときは、何も設定しませんでしたが、たまたま、すでに設定されていたため、気にする必要がなかったのです。(※ 記述仕方はちょっと異なりますが)

20140628-11

これですべて、設定できましたので、再度ブラウザで表示すると、このようにちゃんと表示されました。

20140628-12

実際にデモを自分でコンパイルして動かしてみることで、印象はだいぶ変わると思います。
次回は、UIフレームワークのfeathersを動かしてみようと思います。

(参考)
FlashBuilderでStarling Frameworkのスマホ用デモを試す
https://bizvalley.co.jp/blog/6732.html

FlashでGPUレンダリングを可能にするStage3Dを用いた、2D用のフレームワークStarling Frameworkの設定を行い、付属サンプルのデモを動かしてみようと思います。ここでは、AIR SDKはバージョン14.0に上げています。アップデートの仕方は、下記を参考にしてください。

Flash Builder4.7 AIR SDKをアップデートする方法

Starling Frameworkのダウンロード
まず、Starling Frameworkのライブラリをダウンロードします。
http://gamua.com/starling/

20140623-01

ZIPファイルをダウンロードして解凍したら、とりあえずCドライブの直下に置きます。※慣れてきたら都合の良いところに配置してください。

20140623-03

FlashBuilderを起動して、デモのあるプロジェクトファイル、ここでは「demo_mobile」を読み込みます。

20140623-05

プロジェクトを読み込んでみると、エラーを起こしていて、修正作業が必要なことが分かります。

20140623-06

ここでの修正点は、3点です。
・Demo_Mobile-app.xmlファイルのAIR SDKのバージョンのズレを修正する
・Starling.swcへのパスのズレを修正する
・source pathのパス変数を設定する

20140623-07

まず、Demo_Mobile-app.xmlを開きます。まるで囲った部分を直す必要があります。4.0になっている部分を使用するAIRSDKのバージョンである14.0に修正します。4.0というのは、このサンプルを作られた方が、そのときAIRSDK4.0をターゲットにしていたということです。実行環境のAIRSDKのバージョンを指定する必要があるためここでは14.0になります。そのため人によって13であったり14・・と変わってきます。

次に、Starling.swcのパスを修正します。プロパティを表示して、ActionScriptビルドパスの「ライブライパス」を見てみると、Starling.swcを読み込んでいることが分かりますが、自身のPCでは存在しないパスを参照しているためこれでは動作しません。Starling.swcファイルの参照を編集します。

20140623-08

starling.swcは、ダウンロードしたファイル内、starling/bin/の中に入っています。これを指定します。

20140623-09

20140623-10

最後に、パス変数を設定します。プロパティ内の「リンクされたリソース」に[source_path]という記述ありますが、ロケーション内のSTARLING_FRAMEWORKのパスが設定されていないことから、エラーを起こしています。そのため、STARLING_FRAMEWORKのパス変数を追加します。

20140623-11

「パス変数」の画面から、新規で設定を行います。

20140623-14

20140623-15

20140623-16

そうすると、エラーが消えたことが確認できます。

20140623-17

これで修正ができましたので、動かしてみましょう。ここではAndroidをターゲットにしています。

20140623-19

20140623-20 20140623-21

このようにして、サンプルを動かすことができました。Androidの端末をPCにつなげ認識させることができる場合は、端末上で動作させることも可能です。iPhoneのようなiOSの場合はAppleに対して有料のデベロッパー登録が必要なので、端末で動かすにはちょっと敷居が高いかもしれません。



(参考)
FlashBuilderでStarling FrameworkのWeb用デモを試す
https://bizvalley.co.jp/blog/6841.html