2: 2018-04-13 (金) 23:09:57 njf[6] [7] [8] | 3: 2018-04-18 (水) 18:06:01 njf[6] [9] [10] | ||
---|---|---|---|
Line 15: | Line 15: | ||
&ref(screenSizeShowAll.jpg,mw:480,mh:360); | &ref(screenSizeShowAll.jpg,mw:480,mh:360); | ||
- | ScaleMode.SHOW_ALLを変えれば、他の拡大方法も使えます。しかし、もし縦横比とがほぼ決まっているデバイスのみにリリースするなら、この方法さえおぼえておけば十分です。 | + | ScaleMode.SHOW_ALLを変えれば、他の拡大方法も使えます。しかし、他の方法は上下または左右が切れてしまいます。もし縦横比とがほぼ決まっているデバイスのみにリリースするなら、ScaleMode.SHOW_ALLさえおぼえておけば十分でしょう。 |
しかし、タブレットや極端に縦横比の異なる端末などに対応するにはこの上下や左右に出る黒い帯が大きな問題となります。なぜなら、AndroidやiOSではこの黒い部分があるとタブレット対応とは見なされず、タブレット向けのストアに表示されなくなり、かなりの機会損失となるからです。 | しかし、タブレットや極端に縦横比の異なる端末などに対応するにはこの上下や左右に出る黒い帯が大きな問題となります。なぜなら、AndroidやiOSではこの黒い部分があるとタブレット対応とは見なされず、タブレット向けのストアに表示されなくなり、かなりの機会損失となるからです。 | ||
Line 34: | Line 34: | ||
これで画面全体に描画されます。 | これで画面全体に描画されます。 | ||
- | しかし、これでは縦横比を保たれていないので、背景以外の縦横比を変更します。 | + | しかし、これでは縦横比が保たれていないので、背景以外の縦横比を変更します。 |
そのための比率は以下の方法で計算します。 | そのための比率は以下の方法で計算します。 | ||
+ | xScale = yScale = 1; | ||
var r:Number = GAME_WIDTH / GAME_HEIGHT; | var r:Number = GAME_WIDTH / GAME_HEIGHT; | ||
- | if (r == stage.fullScreenWidth / stage.fullScreenHeight){ | + | 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; | yScale = stage.fullScreenWidth / GAME_WIDTH * GAME_HEIGHT / stage.fullScreenHeight; | ||
}else{ | }else{ | ||
Line 49: | Line 48: | ||
baseSprite.scaleX = xScale; | baseSprite.scaleX = xScale; | ||
- | baseSprite.x = GameConstants.STAGE_X * ( 1 - xScale) / 2; | + | baseSprite.x = GAME_WIDTH * ( 1 - xScale) / 2; |
baseSprite.scaleY = yScale; | baseSprite.scaleY = yScale; | ||
- | baseSprite.y = GameConstants.STAGE_Y * ( 1 - yScale) / 2; | + | baseSprite.y = GAME_HEIGHT * ( 1 - yScale) / 2; |
ここでbaseSpriteは背景以外をまとめたSpriteです。 | ここでbaseSpriteは背景以外をまとめたSpriteです。 | ||
- | この方法で、最低限の手間でタブレット対応も可能です。しかし、全画面にわたるような描画をしたい場合は注意が必要です。このままではエフェクトで全画面を白くしたい場合や、ウインドウを表示して背景を暗くしたい、というような時は、このままでは端の方が描画されません。 | + | この方法で、最低限の手間でタブレット対応も可能です。しかし、全画面にわたるような描画をしたい場合は注意が必要です。エフェクトで全画面を白くしたい場合や、ウインドウを表示して背景を暗くしたい、というような時は、このままでは端の方が描画されません。 |
そのときには上で求めた比率で割ってやることで、画面のサイズや座標が割り出せます。例えば、画面全体に描画するQuadを作るなら、 | そのときには上で求めた比率で割ってやることで、画面のサイズや座標が割り出せます。例えば、画面全体に描画するQuadを作るなら、 | ||
Line 63: | Line 62: | ||
とします。単色画面を表示するなら、alignPivotをつかって中心に座標の基準をおき、画面中央に配置するのが楽です。それ以外でも、上のxScale、yScaleを使うと計算で座標を割り出せますが、ここでは省略します。 | とします。単色画面を表示するなら、alignPivotをつかって中心に座標の基準をおき、画面中央に配置するのが楽です。それ以外でも、上のxScale、yScaleを使うと計算で座標を割り出せますが、ここでは省略します。 | ||
- | 他の注意点として、横にスライドするような画面遷移を使っていると、画面が変わるとき端の方がおかしくなります。この方法を使うならフェイドアウトなどが無難です。 | + | 他の注意点として、横にスライドするような画面遷移を使っていると、画面が変わるとき端の方がおかしくなります。ここで解説した方法を使うなら、画面遷移はフェイドアウトなどが無難です。 |
(This host) = https://njf.jp