映像制作 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ピクセルとなります。これは画面下部にナビゲーションバー(システムキー)があるためです。端末によっては、画面の外に出ているものもあるため端末の解像度が同じでも、その有無によって表示サイズが異なります。

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

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