スプラッシュ画面作成② マルチレゾリューション対応

前回作成したスプラッシュ画面ですが、解像度が異なる端末で見え方が異なってしまいます。

ちょっと違うとかならいいんですが、もう全然ダメです。

各解像度に合わせて使う画像とか変えたり、拡大縮小を駆使したり配置位置変えたりで対応できるんですが、全部に最適化はさすがに時間が・・・('A`)

ほんとに解像度が違う端末が増えすぎて、これからの開発ってどうなるんですかね。
フルHD用にバカでかい画像詰め込みまくってるとアプリの容量がえらいことになるわけで・・・。
各解像度にあった画像を更に埋め込んでってなると・・・。

ということで、「いちおくまんえん」ではiPhone4〜iPhone5Sの横幅640pxで最適になるように作成して、それ以外では画像の伸縮で対応させます。
タブレットのような横幅が広い端末では横に黒帯が入って、iPhone4と同じアスペクト比で表示することにしました。

なので、縦方向への伸縮に気を配りつつ開発します。

リリースする頃には縦長になったiPhoneだけになってそうですが、それだけに合わせて作っちゃうとタブレットでの横の黒帯範囲が広くなりすぎて残念なことになりそうなので(´･ω･`)

上記の条件でちゃんと表示されるように、cocos2d-xで設定を加えます。

AppDelegate::applicationDidFinishLaunching

auto director = Director::getInstance();
auto eglView = EGLView::getInstance();

// 通常はiPhone retinaのサイズでデザインする
Size designSize = Size(640, 960);
// 端末のディスプレイサイズ
Size winSize = director->getWinSize();
CCLOG("winSize width: %4.1f, height: %4.1f", winSize.width, winSize.height);
// 縦長の場合は横幅は固定で縦を伸ばす
if (winSize.height > winSize.width * 1.5)
{
    designSize.height = 640 * winSize.height / winSize.width;
}
// 全て表示するようにするので、アスペクト比がiPhone3.5インチの1.5より小さいタブレトは左右に黒帯が入って表示されることになる
eglView->setDesignResolutionSize(designSize.width, designSize.height, solutionPolicy::SHOW_ALL);

「いちおくまんえん」でのコミットログ
https://github.com/yasuhiro-matsuda/ichi_okuman_yen/commit/f52c59a161dc83c78dc88cd69a19a894cd1b29f6

こうすることで各端末で想定どおりの表示にすることが出来ました( ･`д･´)

めでたしめでたし。