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

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

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

20150501-1

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

(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();

    }
  }
}

ポイントになる部分は、ビューポートの矩形設定で(0,0)からフルスクリーンでの座標をセットしてStarlingオブジェクト生成時の引数としています。

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

そして、次のところでコンテンツサイズ(800x480)をセットしています。

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

結果、このように縦横800x480ピクセルの画像がディスプレイのサイズにぴったり合いました。ただし中央の正方形は11ピクセル歪んでいました。

20150510-3

注意したいのは、端末の解像度が1920x1080であっても、コンテンツの高さは1920ピクセルではありません。1776ピクセルとなります。これは画面下部にナビゲーションバー(システムキー)があるためです。端末によっては、画面の外に出ているものもあるため端末の解像度が同じでも、その有無によって表示サイズが異なります。

またステータスバーを表示すると、さらに縦幅は変わってきますので、なかなかやっかいです。個人的には、アスペクト比を無視したやり方は端末により歪みが大きいため、利用していません。

次回は、アスペクト比を「維持」したやり方を見てみようと思います。

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

20150217-1

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

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

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

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

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

20150216-3
接続できました。

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

20150216-1

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

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

20150216-2

20150216-5
期待通りの動作

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

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

01
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
実行すると画像が表示されます。

20141021-1

原寸のサイズ(300x100)で表示する分では、角まるの画像は特に問題なさそうですが、スケールを変えたい場合、不都合がでてきます。サイズが300x200になる場合、画像が縦に間延びして崩れてしまします。これを、なんとか角まるを綺麗に維持したまま表示するには、9-patchという手法を使います。

20141021-2

次回は、Starlingで9-patchを試してみましょう。

今回は、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();
		}
	}
}


MainState.as で、Quadメソッドを使い四角形を描きます。ここでは単純に、Quad(縦幅, 横幅, 色) を指定します。
new Quad(200, 200,0xFFFCC);

MainState.as
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);

		}
	}
}

また、下記のようなパラメータを加えることで、表示位置など変えることができます。
square.x = 100;
square.y = 100;
square.alpha = 0.1;

さて、これをAIRシミュレーターで実行すると、縦横200pxの四角形がこのように表示されます。

20141006-1

ここでAIRシミュレーターとスマートフォン(Xperia UL)の表示を重ね比べてみると同じ200pxでも、だいぶ差があることが分かります。これは縦横のステージサイズと画素密度の差からくるものです。PCでFlashを表示するときは、ほとんど気にする必要はありませんでしたが、スマートフォンでは端末により縦横のサイズ、画素密度がバラバラのため、このような違いがでてくるため工夫が必要になります。

20141006-2

この違いの解決の仕方については別の機会に触れようと思います。

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

20141001-1

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

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

trace("stageWidth = " + stage.stageWidth);
trace("stageHeight = " + stage.stageHeight);
trace("fullScreenWidth = " + stage.fullScreenWidth);
trace("fullScreenHeight = " + stage.fullScreenHeight);
trace 結果
stageWidth = 500
stageHeight = 375
fullScreenWidth = 480
fullScreenHeight = 800

縦横のサイズが、期待するステージサイズと異なっています。
20141001-02


次に、FULL_SCREEN_INTERACTIVE を設定します。すると正しく取得できます。
//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);
trace 結果
stageWidth = 480
stageHeight = 762
fullScreenWidth = 480
fullScreenHeight = 800
20141001-03

実機では、FULL_SCREEN_INTERACTIVE は無くても正しく取得できます。NORMALモードでコンテンツを作るときは、ちょっと注意が必要のようです。

1 / 212