unityでいってみよう！

unityがチョットワカル位の人のブログ

トップ > StoryBoard > 【2020年版】Unity Storyboard対応

【2020年版】Unity Storyboard対応

StoryBoard Unity Xcode iOS

はじめに

Appleの規約の変更によりアプリケーション起動時のLaunchScreenにStoryboardの使用が必須となりその対応期限が2020年6月30 日迄となりました。

https://developer.apple.com/jp/news/?id=03262020b

Storyboardそのものは、以前から存在していたようですが、我々Unity使いには全く馴染みが無くググって出てくる情報は古い情報ばかりで、現在のXcodeとバージョンもことなります。そこで今回はこれまで使用していたSplashScreen用の１枚絵をStoryboardで表示するという最小限の目的に絞り、2020年時点での対応方法を紹介します。

環境

  • Xcode 11.4.1(11E503a)
  • Unity2017.4.38
  • Unity2018.4.18
  • Unity2019.3.3

Unityは必ず上記のバージョン以上を使用して下さい。このバージョンでStoryboardを使用した際のいくつかの不具合が修正されています。

iOS: Launch Screen storyboards are validated to ensure that they have the correct settings to be used as a launch screen. (1212014)

実際にどのような不具合であったかは不明ですが、以前検証していた際には下記のような問題がありましたが現在は解消されているのでおそらくその辺りだと思われます。

  • Storyboardを有効にした場合でも旧SplashImageの設定を明示的に削除しないとおかしなことになっていた
  • Storyboardのファイル名がLaunchScreen.storyboard固定になっていた

LaunchScreen.storyboardのファイルを作成する

Storyboardを使用する為にはLaunchScreen.storyboardというファイルが必要ですが、こちらはXcodeを使用して作成します。 下記にこのファイルを作成する方法を説明します。

  1. Xcodeを起動
  2. Create new Xcode projectを選択
  3. Single View Appを選択しNextを押す
  4. Product Name等を入力しNextを押す（ここで入力する項目な適当で大丈夫です）
  5. Projectを出力するフォルダを選択してCreateを押す 生成されたXcodeのプロジェクトにLaunchScreen.storyboardが作成されていることが確認出来るかと思います。こちらのファイルをUnityのプロジェクトにコピーして下さい。 f:id:kimukats:20200518104842p:plain コピーが終わった今作成したXcodeのプロジェクトは用済みですので削除して頂いて大丈夫です。

UnityでStoryboardを有効にする

  1. PlayerSettings->Splash Image ->Splash Screen から Use Storyboard for Launch Screenにチェックを入れる
  2. Custom Storyboardを押し、先程作成したLaunchScreen.storyboardを選択する f:id:kimukats:20200518112117p:plain

これだけで、Unityが出力するXcodeのプロジェクトにLaunchScreen.storyboardも含まれるようになります。

Storyboardで使用する画像ファイルをXcodeプロジェクトへコピーする

LaunchScreen.storyboardはXcodeのプロジェクトに含まれるようになったのですが、LaunchScreen.storyboardで使用する画像ファイルは別途Xcodeに含まれるように何とかする必要があります。 一番簡単な方法としてはStreamningAssetフォルダーに画像ファイルを含めてしまうことですが、ちょっと気持ちが悪いです。 そこで今回はUnityEditor.iOS.Xcodeと UnityEditor.Callbacksを使用してXcodeの出力時に画像ファイルをXcodeのプロジェクトへ追加するEditor拡張を作成しました。

試した感じでは大丈夫でしたが、何か問題がありましらコメント下さい。

splashImagePathの部分を各々の環境に合わせて使用する画像ファイルを指定するように変更して下さい。 画像ファイルは自分はiPhone XRに合わせて828x1792で用意しましたが、出来るだけ高解像度のものに合わせた方が良いと思います。

LaunchScreen.storyboardの編集

ここまでプロセスを踏んで、UnityからXcodeのプロジェクトを出力してみて下さい。 XcodeのプロジェクトにLaunchScreen.stroryboardと画像ファイルが追加されている筈です。 もし追加されていないようであれば何かが間違っています。これまでのプロセスをもう一度見直してみて下さい。 無事上手く行っている場合は、いよいよ最後の工程であるStoryboardでSplash Imageを表示する為にLaunchScreen.storyboardを追加する作業を行います。

  1. Xcodeからプロジェクトを開き、LaunchScreen.storyboardを選択して下さい。

  2. 無垢な状態のLauchScreenのイメージが表示されているでXcodeの右上に表示されている５個のボタンの内一番左側にある[＋]ボタンを押します。 f:id:kimukats:20200518131834p:plain

  3. コンポーネントの一覧が表示されるのでそこからStoryboardで表示する画像を選択し、そのままドラッグ＆ドロップします。 f:id:kimukats:20200518132639g:plain

  4. 右から２番目の定規の様なアイコンをクリックします。 f:id:kimukats:20200518133736p:plain

  5. View->ArrangeからCenter Horizontally in Container Center Vertically In Container Fill Container Horizontally Fill Container Vertically を何度か順に選択してみて下さい。選択された画像が丁度良い感じで表示されるようになった筈です。 f:id:kimukats:20200518135744p:plain しかしながら、この状態でViewを他の端末に変更したり、Orientationの向きを変えると意図しない表示になります。

  6. Autoresizingの矢印を何度かクリックし、下記にように四角の内側の矢印のみ表示された状態に変更します。 f:id:kimukats:20200518141145p:plain

  7. Inspectorの表示をAttributes(右から３番目）に切り替え、View->Content ModeをAsspect Fillにします。 f:id:kimukats:20200518141601p:plain

  8. この状態でDeveiceやOrientationを変更して表示が意図した範囲に収まっているか確認してみてください。 f:id:kimukats:20200518141948g:plain

以上で編集作業は終了です。 LaunchScreen.storyboardをUnityのProjectへ上書きコピーして内容をフィードバックして下さい。 LaunchScreen.storyboardはXMLファイルですので、テキストエディタ等で作成することも可能です。

最後に

今回の手順で作成したLaunchScreen.storyboardはこちらです。 Version等が含まれている為、将来的に注意は必要ですがこのファイルがそのまま使うことによってLaunchScreen.storyboardの編集を省略できる可能性があります。

以上です。