トマシープが学ぶ

Unity/VR/AR/デザイン好きのミーハー 記事内容は自分用のメモです

縦でも横でも対応できるUnityのスマホUI設計【Unity】

ワールドを移動する系のアプリにフォーカス

他アプリの縦・横画面

私が見たことあるのはZEPETOとRev Worldぐらいかな

Rev Worldは対応しているっていうか、Auto RotationでLandscapeのチェックを外し忘れてるだけなのでは?というぐらい横画面には最適化されてない。

デフォルトが縦

f:id:bibinbaleo:20220114112403j:plain

f:id:bibinbaleo:20220114112407j:plain

 

ZEPETOはちゃんとどちらでもきれいに表示される。

f:id:bibinbaleo:20220114112411j:plain

f:id:bibinbaleo:20220114112415j:plain

ちなみに端末を傾けたら変わるのではなく、マイクボタン横のボタンを押さないと変わらない。

またルーム機能でのデフォルトは横画面で、縦画面にしたら一部使えない機能やゲームがある。

ちなみにルームはデフォルト横画面だけど、ルームを探す画面などその他は縦画面。

f:id:bibinbaleo:20220114113239j:plain

RobloxやClusterもそうだよね。

端末回転によって自動で回転させるよりは、横のほうが良い場面だけ横画面に自動で回転させる方式でも良さそう。

 

Mozilu Hubはブラウザなので当然縦横対応してるけど、横にしたらめっちゃ見える範囲が狭まって操作しずらい

f:id:bibinbaleo:20220114113402j:plain

全画面に出来ないのかな・・・?

f:id:bibinbaleo:20220114113406j:plain

 

ちなみにウマ娘はライブとストーリーと最近レースも横画面を選択できるようになった

f:id:bibinbaleo:20220117220212p:plain

f:id:bibinbaleo:20220117220218p:plain

 

縦と横のメリデリ

ワールド移動に関しては横のほうが空間全体が見えて楽しい気がする。

f:id:bibinbaleo:20220114112411j:plain

縦にしたら当然持ちやすい。

あと縦のほうが周りをくるくる見たくなる感じがする。一度に見えないからこそ動かしてくれるかもしれない。これは360度動画だと、せっかくの360度動画なのに横画面だと絵として完成しているから、あまり視点を動かしてくれないみたいなのにつながるかも

f:id:bibinbaleo:20220114112415j:plain

IDやパスワードの入力などキーボードが表示されるものは絶対縦画面のほうが良い。

入力しやすさもあるし、デザインする側としても、縦だと画面上半分に入力欄を置きやすい。

f:id:bibinbaleo:20220114114401p:plain

Unity

私のアプリは横画面デフォルトで作っている。

Portraitにチェックを入れて縦画面にしてみたら、RevWorldみたいにUIパーツが小さくなってしまう。

f:id:bibinbaleo:20220114113653p:plain

Canvas Scaler

現在Canvasはこんな設定になっている。横画面のiPhoneXのサイズを基準にUIを配置している

f:id:bibinbaleo:20220114125833p:plain

これをScale With Screen SizeにしてHeightを1にするとでかくてあふれちゃうけど、0.5ぐらいにすると、縦でも横でもちょうどよくなった!

f:id:bibinbaleo:20220114125836p:plain

UIによっては0.3ぐらい

姿勢検知で数値変更

Auto Layoutで対応できない部分は、姿勢を検知してUIの位置を明示的に変えないといけないだろうな~

もしくはその画面だけ回転禁止にして一方向にするとか。

以下の記事にあった

www.am10.blog

blog.yucchiy.com

deviceOrientationで向きを取れる

Unity - Scripting API: DeviceOrientation

 if (Input.deviceOrientation == DeviceOrientation.FaceDown)

if (Input.deviceOrientation == DeviceOrientation.LandscapeLeft || Input.deviceOrientation == DeviceOrientation.LandscapeRight)

 

Updateで取り続けないといけないのかな?Inputだからまあしょうがないか。

回転禁止

シーンによって、回転OK,回転禁止をスクリプトで制御したい

deve-cat.com

基本をPortraitにしておいて横もOKの時だけ回転できるようにするか、基本をAutoRotateに設定しておいて縦画面のみのとき横に回転できないようにするか。

いやどちらにせよ、戻さないといけないからすべてのシーンで指定する必要があるのか・・・

docs.unity3d.com

回転できないようにするのは以下のように指定の方向を書けばいいみたいだから楽そう。

Screen.orientation = ScreenOrientation.Portrait;

AutoRotationのときは

Screen.orientation = ScreenOrientation.AutoRotation;

でもPortraitの天地逆を阻止するなら全部のフラグを書く必要がある?

Screen.autorotateToPortrait = true;
Screen.autorotateToPortraitUpsideDown = true;
Screen.autorotateToLandscapeLeft = false;
Screen.autorotateToLandscapeRight =true;
Screen.orientation = ScreenOrientation.AutoRotation;

 

これで大体うまくいった。

ただ端末側で自動回転をオフの設定にしていても、こちらで書いた制御が通って自由に回転してしまった。

 

この記事に書いてたAndroidManifestのを試してみた。バグがあって動かないと書いてたけど、8年前ぐらいの記事だから直ってたりしないかな・・・

seesaawiki.jp

<activity android:name="com.unity3d.player.UnityPlayerNativeActivity"
    android:screenOrientation="userLandscape">
</activity>


UI

ジョイスティックの位置が難しい。右下に置いてたけど、縦画面にしたら画面下部に置いているUIと被ってしまう。

ZEPETOも同じ状況だから、縦画面の時は少し上にジョイスティックの位置をずらしている

f:id:bibinbaleo:20220114112415j:plain

ボタンが並んでる系は縦でも横でもいけるものが多そうだけど、2カラムのリストとかきつい。

折り返ししないテキストも縦に合わせると文字数が少なくなる

 

最後に

Cnvasがかなり分かれてるアプリだからCanvasの設定を一つ一つ変えるのは大変。Canvasをプレハブ化してたので、大部分は一気に変更できてよかった。一部プレハブを使ってない部分があった・・・

共通パーツを使うのって大事だな〜