[Starlingの画面サイズの初期化の編集]

印刷

Starlingの画面サイズの初期化の編集

詳細な入力項目を表示

ページタイトル( 空白で自動設定 ):
ページ並び順( 0-9 小数可標準:1 ):
ページ別名(複数は[改行]で区切る):

ページ内容:

_mStarlingをStarlingのインスタンス、stageをStageのインスタンス、GAME_WIDTHとGAME_WIDTHをアプリをデザインした横幅と縦幅とすると、以下のようにすれば描画領域を縦横比を保ったまま最大にします。

var viewPort:Rectangle = RectangleUtil.fit(
 	new Rectangle(0, 0, GAME_WIDTH, GAME_HEIGHT),
 	new Rectangle(0, 0, stage.stageWidth, stage.stageHeight),
 	ScaleMode.SHOW_ALL
 );
 
 _mStarling = new Starling(Sprite, stage, viewPort);
 _mStarling.stage.stageWidth = GAME_WIDTH;
 _mStarling.stage.stageHeight = GAME_HEIGHT;

RectangleUtil.fitのScaleMode.SHOW_ALLを指定することで、以下のように拡大されます。

&ref(screenSizeShowAll.jpg,mw:480,mh:360);

ScaleMode.SHOW_ALLを変えれば、他の拡大方法も使えます。しかし、他の方法は上下または左右が切れてしまいます。もし縦横比とがほぼ決まっているデバイスのみにリリースするなら、ScaleMode.SHOW_ALLさえおぼえておけば十分でしょう。

しかし、タブレットや極端に縦横比の異なる端末などに対応するにはこの上下や左右に出る黒い帯が大きな問題となります。なぜなら、AndroidやiOSではこの黒い部分があるとタブレット対応とは見なされず、タブレット向けのストアに表示されなくなり、かなりの機会損失となるからです。

もし十分に時間があり、手間をかける余力があるなら、最も良い対応方法は縦横比によってデザインを作り直し、アプリで完全に対応することです。しかし、現実には簡単ではありません。特に、ゲームでは縦横比が変わるとゲーム性も変わりかねないため、デザインの変更は難しくなります。

そんなときは、背景だけ大きくして、この黒い帯を消すという方法があります。それでもiOSの場合は人が審査しているため、iPad対応とみなされない場合もあるようですが、一般には審査を通ることが多いようです。また、Androidはこれで問題ありません。

&ref(backStretch.jpg,mw:480,mh:360);

そのため、まず画面全体に描画領域を広げます。

var viewPort:Rectangle = new Rectangle(0,0,stage.fullScreenWidth, stage.fullScreenHeight);
  
 _mStarling = new Starling(Sprite, stage, viewPort);
 _mStarling.stage.stageWidth = GAME_WIDTH;
 _mStarling.stage.stageHeight = GAME_HEIGHT;

これで画面全体に描画されます。
しかし、これでは縦横比が保たれていないので、背景以外の縦横比を変更します。
そのための比率は以下の方法で計算します。

xScale = yScale = 1;
 var r:Number = GAME_WIDTH / GAME_HEIGHT;
 if (r > stage.fullScreenWidth / stage.fullScreenHeight){
 	yScale = stage.fullScreenWidth / GAME_WIDTH * GAME_HEIGHT / stage.fullScreenHeight;
 }else{
 	xScale = stage.fullScreenHeight / GAME_HEIGHT * GAME_WIDTH / stage.fullScreenWidth;
 }

あとは、ここでも求めた比率を使い、背景以外を拡大・縮小し、中心寄せで配置します。

baseSprite.scaleX = xScale;
 baseSprite.x = GAME_WIDTH * ( 1 - xScale) / 2;
 baseSprite.scaleY = yScale;
 baseSprite.y = GAME_HEIGHT * ( 1 - yScale) / 2;

ここでbaseSpriteは背景以外をまとめたSpriteです。

この方法で、最低限の手間でタブレット対応も可能です。しかし、全画面にわたるような描画をしたい場合は注意が必要です。エフェクトで全画面を白くしたい場合や、ウインドウを表示して背景を暗くしたい、というような時は、このままでは端の方が描画されません。

そのときには上で求めた比率で割ってやることで、画面のサイズや座標が割り出せます。例えば、画面全体に描画するQuadを作るなら、

var quad:Quad = new Quad( GAME_WIDTH / xScale, GAME_WIDTH/yScale);

とします。単色画面を表示するなら、alignPivotをつかって中心に座標の基準をおき、画面中央に配置するのが楽です。それ以外でも、上のxScale、yScaleで計算したり、localToGrobalメソッドなどを使うと座標を割り出せますが、ここでは省略します。

他の注意点として、横にスライドするような画面遷移を使っていると、画面が変わるとき端の方がおかしくなります。ここで解説した方法を使うなら、画面遷移はフェイドアウトなどが無難です。

また、PopupManagerを使うと、縦横比が変形しているので、修正しておく必要があります。

ここの方法を使っても、Androidではナビゲーションなどの領域の関係でレイアウトがずれる場合があります。解決するには、[[ActionScript 3/Androidで全画面表示]]を参照してください。

編集の要約:

Q & A 認証: ページ更新時は次の質問にお答えください。(プレビュー時は必要ありません)
Q: 「東京」の読みがな？(ひらがなで)
A:

お名前: タイムスタンプを変更しない

テキスト整形のルールを表示する^[1]

添付ファイル^[2]:

backStretch.jpg^[3] 94件 [詳細^[4]]

screenSizeShowAll.jpg^[5] 84件 [詳細^[6]]

Links list

(This host) = https://njf.jp

^{(This host)}/cms/modules/xpwiki/?cmd=edit&help=true&page=Starling%E3%81%AE%E7%94%BB%E9%9D%A2%E3%82%B5%E3%82%A4%E3%82%BA%E3%81%AE%E5%88%9D%E6%9C%9F%E5%8C%96
^{(This host)}/cms/modules/xpwiki/?plugin=attach&pcmd=list&refer=Starling%E3%81%AE%E7%94%BB%E9%9D%A2%E3%82%B5%E3%82%A4%E3%82%BA%E3%81%AE%E5%88%9D%E6%9C%9F%E5%8C%96
^{(This host)}/cms/modules/xpwiki/gate.php/backStretch.jpg?way=attach&_noumb&refer=Starling%E3%81%AE%E7%94%BB%E9%9D%A2%E3%82%B5%E3%82%A4%E3%82%BA%E3%81%AE%E5%88%9D%E6%9C%9F%E5%8C%96&openfile=backStretch.jpg
^{(This host)}/cms/modules/xpwiki/?plugin=attach&pcmd=info&refer=Starling%E3%81%AE%E7%94%BB%E9%9D%A2%E3%82%B5%E3%82%A4%E3%82%BA%E3%81%AE%E5%88%9D%E6%9C%9F%E5%8C%96&file=backStretch.jpg
^{(This host)}/cms/modules/xpwiki/gate.php/screenSizeShowAll.jpg?way=attach&_noumb&refer=Starling%E3%81%AE%E7%94%BB%E9%9D%A2%E3%82%B5%E3%82%A4%E3%82%BA%E3%81%AE%E5%88%9D%E6%9C%9F%E5%8C%96&openfile=screenSizeShowAll.jpg
^{(This host)}/cms/modules/xpwiki/?plugin=attach&pcmd=info&refer=Starling%E3%81%AE%E7%94%BB%E9%9D%A2%E3%82%B5%E3%82%A4%E3%82%BA%E3%81%AE%E5%88%9D%E6%9C%9F%E5%8C%96&file=screenSizeShowAll.jpg

Starlingの画面サイズの初期化 の編集 :: NJF Wiki

Starlingの画面サイズの初期化 の編集

Links list

Starlingの画面サイズの初期化の編集 :: NJF Wiki

Starlingの画面サイズの初期化の編集