iPhoneXなどへの画像サイズ調整について

[parallel]

・Unityの習熟度：初心者

・宴のバージョン：3.3.5

・Unityのバージョン：2017 3.1f.1 personal

・使用OS：Mac

初歩的な質問で恐縮です。異なる画像サイズへの対応について、マニュアルだけではどうしてもわからず、

ご質問させていただきました。

こちら↓のマニュアルを参考に

http://madnesslabo.net/utage/?page_id=392

SpriteCameraとUICameraの

 Letter Box Camera

  └Game Screen Width :1125　

  └Game Screen Height :2436

＊こちらのサイズはiPhoneXのサイズを入れました。

＊背景画像に使用した画像サイズも1125px−2436pxの物を作成し、

　フォルダに入れました。

に設定し、Flexibleにチェックを入れ、最大値を5000にしたのですが、

　・iPhoneX　： 画面上下に黒色部分が表示される

　　　　　　　　（実機での確認はunity Remote5にて行いました）

状況となりました。

別機のiPhone6Sでは画面いっぱいに表示され、特に見切れる部分も

ないのですが、iPhoneX、iPhone6Sなど、画面サイズの異なる

端末でも全画面表示させる方法をご教示いただければ幸いです。

なお、縦画面固定、iPhoneのみ対応で考えています。

[マッドネスラボ]

＞iPhoneX　： 画面上下に黒色部分が表示される

＞　　　　　　　　（実機での確認はunity Remote5にて行いました）

これは実機のみのことでしょうか？

こちらの手順で、Unity上でiPhoneXのアスペクト比（90x195）で行った場合も黒枠が表示されるでしょうか？

http://madnesslabo.net/utage/?page_id=392#GameView

[parallel]

早速のご返信ありがとうございます。

はい、実機のみ（unity Remote5上）に発生しています。

アドバイス通りアスペクト比をAspect Ratioより90x195に変更し試してみましたが、

PCのUnity上では全画面表示されております。

ご質問にちゃんとお答えできているか自信がないので、

以下のテスト画像を使ったキャプチャ画像を添付致します。

＊Title画面とゲーム画面の両方で試しています。

＊両方とも画像のサイズは1125px-2436pxです。

①Title画面キャプチャ_PC　→PC上では黒枠はないです。

　　└②Title画面キャプチャ_iPhoneX　→黒枠あり

　　└③Title画面キャプチャ_iPhone6S　→黒枠なし（全画面）

④ゲーム画面キャプチャ_PC　→PC上では黒枠はないです。

　　└⑤ゲーム画面キャプチャ_iPhoneX　→黒枠あり。

　　└⑥ゲーム画面キャプチャ_iPhone6S　→黒枠なし（全画面）

添付も多く恐縮です。上記の番号の後がそのまま添付データのファイル名に

しております。

ご教示いただけますと幸いです。

[マッドネスラボ]

詳細ありがとうございます。

Unity上では問題なくて、UnityRemote上でのみの不具合ということであれば、おそらくUnityRemoteのバグだと思います。

UnityRemoteの更新履歴を見てみましたが、更新が2016年8月以降止まっているようですので、おそらくiPhoneXに対応していないのかと思います。

Unity公式に問い合わせてみてください。

[parallel]

早速のご確認ありがとうございます。

Buildし実機で確認したところ、iPhoneXでは黒縁は

出ませんでした。ありがとうございます。

ただ同じくBuildしiPhone6Sの実機にて試したところ、

逆に左右に黒縁が発生してしまいました。

（ただしタイトル画面は全画面表示されます）

こちらへの質問では無いのかもしれませんが、

以下、試したことの詳細をまとめました。

＊画像サイズ ：1125px−2436px（タイトル画面画、ゲーム画面の両方）

＊Unityアスペクト比　：90-195

①iPhoneX

　　└Unity上のGame view：全画面表示される。

　　└unityRemote5　：上下に黒枠　→ただしiPhoneX未対応のため

　　└Build後実機テスト　：全画面表示される。

これでiPhoneXへの対応はクリアできました。

ただし、

②iPhone6S

　　└Unity上のGame view：全画面表示される。

　　└unityRemote5　：全画面に表示される。

　　└Build後実機テスト　：title画像　：全画面表示される。

　　　　　　　　　　　　　ゲーム画面　：★左右に黒枠が表示される★

　　※iPhone6SでのBuild後実機テストキャプチャ画像を添付致します。

PCのUnity上ではちゃんと全画面表示されているのですが、Buildして実機となると

左右に黒枠が出てしまうなど、どうも同じではないようなのです。

※こちらも画像キャプチャを添付致します。

度々恐縮ですが、ご教示いただければ幸いです。

またunityRemote5については、Unity側に確認してみたいと思います。

[マッドネスラボ]

＞【PC-Unity】画面キャプチャ.png

こちらの設定画面のGameViewの設定が、iPhoneXのアスペクト比設定になっているようです。

Unity上でiPhone6Sの画面を確認するのであれば、9:16の設定に変えて確認しないといけません。

実機とPC（Unity）上での表示の違いはそのせいかと思います。

また、タイトルとゲーム画面で表示がズレるのは、

おそらく、こちらの設定を「UICamera」だけに設定して、「SpriteCamera」に設定していないからだと思います。

http://madnesslabo.net/utage/?page_id=392#i-3

[parallel]

ご確認ありがとうございます。

また度々のご質問となり申し訳ありません。

ご指摘の

＞おそらく、こちらの設定を「UICamera」だけに設定して、「SpriteCamera」に設定していないからだと思います。

ですが、SpriteCameraにもUICamera同様の設定を致しました。

※画面キャプチャを参照ください。

ただそこで疑問なのが9：16の設定にして確認したところ、同じサイズの画像（1125px−2436px）を使用しても

title画面は全画面表示、ゲーム画面だと左右に黒枠が表示されてしまうところです。

（こちらはBuildして実機テストしても同じでした）

同じ画像サイズのものを使用してもTitle画面とゲーム画面では扱いが異なるのでしょうか？

なんども申し訳ありません。

ご教示いただけますと幸いです。

[マッドネスラボ]

＞同じ画像サイズのものを使用してもTitle画面とゲーム画面では扱いが異なるのでしょうか？

はい。違います。

ちょっと長くなりますが、詳しく説明します。

まず、前提としてアスペクト比を可変に対応するのは大変なので、

宴のデフォルトではレターボックスといって「黒枠で埋める」という設定にしています。

PCのノベルゲームなどはほぼすべてこれが基本です。
スマートフォンの場合でも、「黒枠で埋める」でも問題ないのであればそうすることをお勧めします。

唯一問題なのが、Appleの審査でiPhoneX対応が必須になってしまったことですが、黒がダメのかは不明です。黒じゃなくて色を変えたり、テクスチャを表示するとかでも大丈夫なケースはあるようです。詳しくはこちらを。

https://twitter.com/rodostw/status/907786912340967424

ただ、Appleの審査はいつも基準があいまいで担当者によってもコロコロ言うことが変わるので、確かなことは誰も把握できないかと思います。

さて、本題に入ります。

まず、UIはUnityの基本機能のuGUIというもので作っています。

たとえば起動画面（Boot）やタイトル画面（Title）の画像の大きさは、RectTransformのここで設定されています。

これは、RectTransformのAnchorという機能を使って、「親オブジェクトの大きさに合わせて目いっぱい広げる」という設定になっています。

なので、Title画面の大きさは「元の画像の縦横比を崩して、画面の大きさいっぱいに広げる」という風になっています。

1125px−2436pxの画像を9:16の画面で表示しているのであれば、よくみれば横に引き延ばされているのがわかると思います。

いっぽうゲームのほうは、基本的には画像の縦横比は固定です。縦や横だけに引き延ばすということはしません。

最初に設定した基本の画面サイズ（今回でいうとGame Screen Width :1125　とGame Screen Height :2436）を基本として、

それが画面に収まるように表示します。

想定の画面サイズと違う場合・・・

　・通常であればレターボックスの設定をしているので黒枠で表示されます。

　・今回は、Flexibleのチェックを入れているので、黒枠は表示されません。ご報告されている黒枠が表示されているというのは、単に「何も表示されていないので背景の黒が映っている」だけだと思われます。

つまりこうなります。

　タイトル画面→縦横を歪めて引き延ばす

　ゲーム内画面→縦横は固定。

ゲーム内に関してはドキュメントにある通りに設定できます。

ノベルゲームで画像を縦横比を崩して引き延ばすことはほぼないので、それには対応できませんが、表示位置などは画面サイズに合わせて変更できます。

注意すべきなのは、むしろ基準サイズがどういう扱いになっているかです。

タイトル側のほうのUIはUnityのシーン上で編集してください。

Anchor設定等を把握して使いこなせないのであれば対応できません。

そして、タイトル画面などは宴で用意しているのはテンプレートでしかないので、自分でカスタマイズしてください。

デフォルトでは縦横に歪めて引き延ばす設定になっていますが、そうしないことも可能です。

「画面に合わせて引き延ばす」「位置を変える」その他を細かく設定する必要があり、これは宴ではなくUnity側の問題です。

唯一宴独自の設定として、Canvas-AdvUIにはUguiLetterBoxCanvasScalerというレターボックスを想定したCanvasScalerが設定されているので、UnityデフォルトのCanvasScalerを使いたい場合は、RemoveComponentしてください。

以上のように、アスペクト比を可変に対応するのはそもそも難しいです。

アスペクト比が変わると一口にいっても、どう対応するかは色々やり方あるので

UnityのUIの作り方をしっかり身に着ける必要があります。

[parallel]

ご回答ありがとうございます。

自身の技術はまだまだですが、とてもわかりやすく理解できました。

iPhoneX対応へは、今回お教えいただいたアスペクト比にて

調整していき、タイトル画面、ゲーム内画面ともに全画面表示にて

進めていきたいと思います。

またiPhone6Sなど、他のアスペクト比のものについては、

Canvas-BackGround -ImageのSource ImageかColoerを黒以外に

変更して作ってみます。

毎回すぐにご回答いただき、また初心者でもわかりやすく

ご教示いただけ、本当に感謝しております。

iPhoneXの対応さえ必須でなければよかったのですが。。。

ご教示ありがとうございました。

[マッドネスラボ]

一応、アスペクト比可変で余白なく表示するように対応するなら、

iPhone6系（9:16）のほうを基本として、背景テクスチャを縦横大きめにとっておくのが良いかと思います。

たとえば

基本サイズ：750 x1334 (9:16)

背景テクスチャ： 1000x1700

とかにすれば

iPhoneX：750x 1625(90:195)

iPhone6s：750 x1334 (9:16)

iPad：1000x1334 (3:4)

・・・となるはずです。

レイヤーの表示位置は下寄せするなりすればそれらしくなると思います。

もちろんiPhoneXの1125x2436を基準にして、背景テクスチャをもう少し太いものを用意してもよいです。

ただ、テクスチャサイズが大きくなりすぎるとアプリサイズ等もかなり消費してしまうので。

[parallel]

御礼が遅くなり申し訳ありません。

アドバイスいただいた形でiPhoneX、iPhone6Sの解像度の異なる端末でも無事

全画面表示できました！

いつも細かい部分までアドバイスいただき深く感謝しております。

ありがとうございました！