1: 2018-04-13 (金) 21:34:54 njf |
2: 2018-04-13 (金) 23:09:57 njf |
| _mStarling.stage.stageWidth = GAME_WIDTH; | | _mStarling.stage.stageWidth = GAME_WIDTH; |
| _mStarling.stage.stageHeight = GAME_HEIGHT; | | _mStarling.stage.stageHeight = GAME_HEIGHT; |
| + | |
| + | RectangleUtil.fitのScaleMode.SHOW_ALLを指定することで、以下のように拡大されます。 |
| + | |
| + | &ref(screenSizeShowAll.jpg,mw:480,mh:360); |
| + | |
| + | 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; |
| + | |
| + | これで画面全体に描画されます。 |
| + | しかし、これでは縦横比を保たれていないので、背景以外の縦横比を変更します。 |
| + | そのための比率は以下の方法で計算します。 |
| + | |
| + | var r:Number = GAME_WIDTH / GAME_HEIGHT; |
| + | if (r == stage.fullScreenWidth / stage.fullScreenHeight){ |
| + | xScale = yScale = 1; |
| + | }else 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 = GameConstants.STAGE_X * ( 1 - xScale) / 2; |
| + | baseSprite.scaleY = yScale; |
| + | baseSprite.y = GameConstants.STAGE_Y * ( 1 - yScale) / 2; |
| + | |
| + | ここでbaseSpriteは背景以外をまとめたSpriteです。 |
| + | |
| + | この方法で、最低限の手間でタブレット対応も可能です。しかし、全画面にわたるような描画をしたい場合は注意が必要です。このままではエフェクトで全画面を白くしたい場合や、ウインドウを表示して背景を暗くしたい、というような時は、このままでは端の方が描画されません。 |
| + | |
| + | そのときには上で求めた比率で割ってやることで、画面のサイズや座標が割り出せます。例えば、画面全体に描画するQuadを作るなら、 |
| + | |
| + | var quad:Quad = new Quad( GAME_WIDTH / xScale, GAME_WIDTH/yScale); |
| + | |
| + | とします。単色画面を表示するなら、alignPivotをつかって中心に座標の基準をおき、画面中央に配置するのが楽です。それ以外でも、上のxScale、yScaleを使うと計算で座標を割り出せますが、ここでは省略します。 |
| + | |
| + | 他の注意点として、横にスライドするような画面遷移を使っていると、画面が変わるとき端の方がおかしくなります。この方法を使うならフェイドアウトなどが無難です。 |