今回は、スマートフォンアプリの作成で避けては通れないマルチ解像度について考えてみたいと思います。スマートフォンのアプリは、画面いっぱいにシングルウィンドウとしてコンテンツを描画するため、端末の解像度を考慮しなければなりません。

例えば、Android端末で800x480ピクセル、1920×1080ピクセルの画面サイズで、800x480ピクセルのコンテンツ（画像）をそのまま表示しようとしたらこのような感じになります。



片方はピッタリ合っていますが、高解像度の端末では、なんらかの対処が必要なのは見ての通りです。さて、ここでどうするかという問題です。思い付くところ３通りの手法があります。

（1）コンテンツのアスペクト比を「無視」して拡大する
（2）コンテンツのアスペクト比を「維持」して拡大する
（3）コンテンツを相対的に作成・配置する

ここでは、アスペクト比を「無視」した方法の記述を見てみましょう。
starlingを起動するまでのコードです。

package
{
  import flash.display.Sprite;
  import flash.display.StageDisplayState;
  import flash.display.StageScaleMode;
  import flash.geom.Rectangle;
  import starling.core.Starling;
  
  [SWF(frameRate="60", backgroundColor="#000")]
  
  public class Main extends Sprite
  {
    public var starling:Starling;
    public static const STAGE_HEIGHT:int = 800;
    public static const STAGE_WIDTH:int  = 480;

    public function Main()
    {      
      stage.displayState = StageDisplayState.FULL_SCREEN_INTERACTIVE;
      stage.scaleMode    = StageScaleMode.NO_SCALE;

      var viewPort:Rectangle =
       new Rectangle(0, 0, stage.fullScreenWidth, stage.fullScreenHeight);

      starling = new Starling(MainState, stage, viewPort);
      starling.stage.stageWidth  = STAGE_WIDTH;
      starling.stage.stageHeight = STAGE_HEIGHT;
      starling.start();

    }
  }
}

var viewPort:Rectangle =
       new Rectangle(0, 0, stage.fullScreenWidth, stage.fullScreenHeight);

starling.stage.stageWidth  = STAGE_WIDTH;
starling.stage.stageHeight = STAGE_HEIGHT;

こんにちは、田口です、今回はモバイルAIRアプリの動作検証としてモバイル版のAdobe Scoutを使い、デスクトップ版のScoutに接続してGPUメモリの変化を確認してみようと思います。



まずScoutの役割ですが、プロファイラーツールとなります。これにより、AIR（Flash）の内部動作を視覚的に把握できるようになり、アプリケーションの不具合を突き止めやすくなります。Flash Builderにもプロファイラーは付いていますが、ScoutはGPUメモリの消費も把握でき、これはFlash Builderにはない機能です。

モバイル版のScoutの役割は、デスクトップ版のようなグラフィカルなプロファイラー機能は持っていません。スマートフォン上で動作するAIRアプリを検知して、キャプチャーした情報をデスクトップPCに送信します。そのため、送信先としてScoutを起動しているPCのIPアドレスが必要です。また当然ながら、モバイルAIRアプリを動作させるスマートフォンはwifi設定をオンにして無線LANの環境が必要です。

モバイルAdobe Scoutを起動すると、このようにIPアドレスを求められます。（Android版）


起動して接続を「有効」にする

IPアドレスを知るには、Windowsの場合、DOSプロンプトにて、ipconfigと打ち込むをPCのIPアドレスを知ることができます。基本的に、そのアドレスを入力すると接続できるはずですが、なかなかどうして繋がらないことがあるかもしれません。Wifiで接続できるPCを持って入れば、Scoutを起動するPCにPINGが届くか、確認してみてください。私の場合、セキュリティソフトがアクセスを遮断してうまく繋がらないことがありました。


接続できました。

PCとモバイルのScout両方起動した状態で、スマートフォン上のAIRアプリを起動すると、PCにデータがどんどん送信され、CPU、メモリ、GPUメモリなどの利用状態が分かります。下の例は、良くない状態で、画面移動を前後繰り返すとGPUメモリがどんどん上昇している状態です。




増え続けるGPUメモリの使用量

次に対処した結果です。同じように画面移動を前後繰り返すと、メモリが解放され安定していることが分かります。




期待通りの動作

GPUメモリの消費は、Flash BuilderのプロファイラーやStarling.showStatsプロパティでは分からないため、Scoutは重宝します。そのほかガベージコレクションの発生したタイミングなど色々な情報を確認することができますので、特にStage3DでAIRアプリを開発されている方にはお勧めです。

今回は、Starlingを使い単純な画像を表示させてみようと思います。用意したのは、角まるの四角形の画像（01.png）です。シンプルですね。


01.png

これをプログラムに埋め込むには、Embedでファイルを指定して名前を付けます。
[Embed(source = "01.png")]
private static const MyBitmap01:Class;

そして、次のように書くことでImageオブジェクトとして扱うことができます。
var image1:Image = new Image(Texture.fromBitmap(new MyBitmap01()));

あとは、addChildしてステージに表示すれば完成です。

MainState.as

package
{
	import starling.display.Image;
	import starling.display.Sprite;
	import starling.textures.Texture;

	public class MainState extends Sprite
	{
		[Embed(source = "01.png")]
		private static const MyBitmap01:Class;
		
		public function MainState()
		{
			// Imageオブジェクトを生成
			var image1:Image = new Image(Texture.fromBitmap(new MyBitmap01()));
			image1.width = 300;
			image1.height = 100;
			addChild(image1);
		}
	}
}

※Main.as と共に使用します。
https://bizvalley.co.jp/blog/7506.html

今回は、Quad メソッドを使い、簡単な四角形を表示したいと思います。最近、Webやツール系のアプリケーションは、フラットデザインが流行っているため意外とQuadメソッドは役に立ちます。

まず、Starlingを起動するために前準備として、初期設定を行います。

Main.as

package
{
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageDisplayState;
	import flash.display.StageScaleMode;
	import starling.core.Starling;
	
	[SWF(frameRate="60", backgroundColor="#FFFFFF")]
	
	public class Main extends Sprite
	{
		private var starling:Starling;
		
		//コンストラクタ
		public function Main()
		{
			//初期設定
			stage.align = StageAlign.TOP_LEFT;
			stage.scaleMode = StageScaleMode.NO_SCALE;
			stage.displayState = StageDisplayState.FULL_SCREEN_INTERACTIVE;
			stage.displayState = StageDisplayState.NORMAL;

			// 最初に表示するクラス, stageを指定
			starling = new Starling(MainState, stage);
			
			// 描画を開始
			starling.start();
		}
	}
}

new Quad(200, 200,0xFFFCC);

package
{
	import starling.display.Quad;
	import starling.display.Sprite;

	public class MainState extends Sprite
	{
		public var square:Quad;
	
		public function MainState()
		{

			square = new Quad(200, 200,0xFFFCC);
			addChild(square);

		}
	}
}

Action Scriptを使い、NORMALモードでのステージサイズを取得する場合、実機とFlash BuilderのAIRシミュレーターでは、設定により取得内容が異なります。AIRシミュレーターでは、デバイス設定に登録されている「使用可能な縦向きのサイズ」（ステージサイズ）を取得するには、FULL_SCREEN_INTERACTIVE の設定が必要のようです。



検証コード　（AIRシミュレーター HTC Desire2)

//NORMAL のみを設定
stage.displayState = StageDisplayState.NORMAL;

trace("stageWidth = " + stage.stageWidth);
trace("stageHeight = " + stage.stageHeight);
trace("fullScreenWidth = " + stage.fullScreenWidth);
trace("fullScreenHeight = " + stage.fullScreenHeight);

stageWidth = 500
stageHeight = 375
fullScreenWidth = 480
fullScreenHeight = 800

//FULL_SCREEN_INTERACTIVE を設定
stage.displayState = StageDisplayState.FULL_SCREEN_INTERACTIVE;
stage.displayState = StageDisplayState.NORMAL;

trace("stageWidth = " + stage.stageWidth);
trace("stageHeight = " + stage.stageHeight);
trace("fullScreenWidth = " + stage.fullScreenWidth);
trace("fullScreenHeight = " + stage.fullScreenHeight);

stageWidth = 480
stageHeight = 762
fullScreenWidth = 480
fullScreenHeight = 800