はじめに
- 私が TechLead を務める 株式会社キッズスター のアプリ「 なりきり!!ごっこランド (iOS / Android) 」を iPhone X 対応する際に、都度ビルドするのも大変なので「Editor 上で iPhone X での見え方を確認できるようなアセット」を作りました。
- 一応 Unity 公式でセーフエリアに対する対応が行われるそうですが、待っていられなかったので作りました。
- 元々は社内で使うだけのつもりだったので、Private リポジトリで開発していましたが、需要がありそうだったので Public に切り替えて公開することにしました。
概要
- iPhone X のベゼルとかセンサーハウジングとかホームインジケータを再現したフレーム画像を GameView 上で重ねます。
-
- 開発中の画面なので、中身にはモザイクを掛けております。
- (公開時点ではモザイク掛けてなかったので、 Twitter の OGP 画像が古いままなんだよなぁ…。1週間くらいしたらクリアされるらしいので、それまで待つしかなさそうだ…。)
導入
- こちらのリポジトリ にて公開しています。
- README に書かれている方法でプロジェクトにインストールすれば、即使えるようになるはずです。
- npm コマンドを用いるため、Node.js のインストールが必要になります。
使い方
- README に記載していますが、 シーンを再生していない状態で メニューの
Assets
>Install iPhone X Tester
を選択してください。 - GameView のサイズを 2,436 × 1,125 などにすると実際の iPhone X の画角で確認できます。
- 正確に上記のサイズでなくとも、似たような比率であれば良いかと。
詳細
- 既存のシーンには影響を与えないように、マルチシーンとして追加されます。
- 現在のところ、Landscape (横向き) のみに対応しています。
- センサーハウジング(端末上部の切り欠き)やホームインジケータ(画面下部のホームボタン代わりの横棒)の領域に当たり判定は設置していません。
- あくまで見え方を確認するためのモノなので。
- 当たり判定置きたい場合は、BoxCollider2D なり PolygonCollider2D なりを置くと良いでしょう。
- シーンが再生されると
iPhoneX_Tester
シーン内の GameObject は DontDestroyOnLoad フラグが立てられてiPhoneX_Tester
シーンそのものは UnloadScene されます。- DontDestroyOnLoad フラグが立つ GameObject の中には Camera も含まれるため、開発中のシーンでも Camera 付きの GameObject を DontDestroyOnLoad すると思わぬ挙動を示す可能性があります。(未検証)
iPhoneX_Tester
シーンの Camera の depth は10
に設定してあります。- フレームが奥に隠れてしまう場合はこの値を大きくすれば良いでしょう。
- なお、インストールの際に npm を用いるのは、私が開発している umm: Unity Module Manager という仕組みで提供されるアセットとして作ったためです。
- umm の詳細は近々記事にします。
おわりに
- 「あー、対応しなきゃー」って時に、サッとフレーム画像を作ってくれた弊社のスーパーデザイナーさんに感謝です!
- 「ブログで紹介しても良いっすか?」って聞いたら、「今、すごく需要ありそうだし、全然 OK!」的なリアクションで返してくれたのも嬉しかったです。
- 公開のきっかけを与えてくださった @lycoris102 さんにも感謝です!