Starlingでモバイル向けのAIRアプリケーションを開発する際のマルチ解像度対応について、まとめてみた。
基本的には、
http://wiki.starling-framework.org/manual/multi-resolution_development
の内容を参考にしています。
描画範囲の設定
Starlingでは必ず描画がされる範囲をします。
コンストラクタ引数もしくはviewPortで設定。
starling = new Starling(Game, stage, new Rectangle(0, 0, 320, 480));
starling.viewPort = new Rectangle(0, 0, 320, 480);
iPhoneでのマルチ解像度対応
画面サイズの調整
iPhoneの場合、解像度は2種類のみ。
3GSは320x480、4・4Sは640x960で、縦横比は同じなので対応は簡単。
下記のコードでは、ステージサイズを320x480として扱い、
実際の描画は画面全体に合ったサイズで拡大縮小して描画されます。
//フルスクリーン時の縦横幅を取得 var screenWidth:int = stage.fullScreenWidth; var screenHeight:int = stage.fullScreenHeight; //描画範囲を画面全体に指定 var viewPort:Rectangle = new Rectangle(0, 0, screenWidth, screenHeight) starling = new Starling(Game, stage, viewPort); //プログラム上で扱うステージのサイズを指定 starling.stage.stageWidth = 320; starling.stage.stageHeight = 480;
画面解像度に合わせた画像を使用する
ステージサイズを320x480として開発した場合に、上記コードのようにただ画面を引き延ばしただけでは、iPhone4では画像がぼやけます。
【iPhone3GSの場合】
【iPhone4の場合】
これを避けるためには、画面解像度によって使用する画像を切り替える必要があります。
ScaleFactor(スケール係数?)の値によって使用する画像を切り替えます。
var scale:Number = starling.contentScaleFactor; var bmp:Bitmap; if(scale == 1) { //bmp = 320x480用の画像を読み込み } else if(scale <= 2) { //bmp = 640x960用の画像を読み込み } var texture:Texture = Texture.fromBitmap(bmp, true, false, scale);
様々な解像度への対応
iPhoneのみならば上記対応で問題ないが、
ステージサイズの縦横比と画面の縦横比が異なる場合に問題が発生する。
なので以下のように、縦横比を維持しつつ画面にフィットするように拡縮させる。
const STAGE_WIDTH:uint = 320; const STAGE_HEIGHT:uint = 480; // フルスクリーンの際の縦横幅を取得 var screenWidth:int = stage.fullScreenWidth; var screenHeight:int = stage.fullScreenHeight; // ゲーム画面が縦横比を維持しつつ、スクリーンにフィットするようにViewportの縦横幅を算出する var viewport:Rectangle = new Rectangle(); var stage_aspect_ratio:Number = STAGE_HEIGHT / STAGE_WIDTH; var screen_aspect_ration:Number = screenHeight / screenWidth; if(stage_aspect_ratio < screen_aspect_ration) { //ステージの縦横比に比べると縦長 viewport.width = screenWidth; viewport.height = int( (screenWidth / STAGE_WIDTH) * STAGE_HEIGHT ); } else if(stage_aspect_ratio > screen_aspect_ration) { //ステージの縦横比に比べると横長 viewport.height = screenHeight; viewport.width = int( (screenHeight / STAGE_HEIGHT) * STAGE_WIDTH ); } else { //ステージの縦横比と同じ viewport.width = screenWidth; viewport.height = screenHeight; } //ゲーム画面がセンタリングされるように位置調整 viewport.x = int( (screenWidth - viewport.width) / 2); viewport.y = int( (screenHeight - viewport.height) / 2); var st:Starling = new Starling(MainSprite, stage, viewport); st.stage.stageWidth = STAGE_WIDTH; st.stage.stageHeight = STAGE_HEIGHT; st.start();
