もんりぃ is undefined.

育児ネタとか、技術ネタとか。

iPhone X Tester for Unity を公開しました!

はじめに

  • 私が TechLead を務める 株式会社キッズスター のアプリ「 なりきり!!ごっこランド (iOS / Android) 」を iPhone X 対応する際に、都度ビルドするのも大変なので「Editor 上で iPhone X での見え方を確認できるようなアセット」を作りました。
    • 一応 Unity 公式でセーフエリアに対する対応が行われるそうですが、待っていられなかったので作りました。
  • 元々は社内で使うだけのつもりだったので、Private リポジトリで開発していましたが、需要がありそうだったので Public に切り替えて公開することにしました。

概要

  • iPhone X のベゼルとかセンサーハウジングとかホームインジケータを再現したフレーム画像を GameView 上で重ねます。
  • f:id:monry84:20171110102546p:plain
    • 開発中の画面なので、中身にはモザイクを掛けております。
    • (公開時点ではモザイク掛けてなかったので、 Twitter の OGP 画像が古いままなんだよなぁ…。1週間くらいしたらクリアされるらしいので、それまで待つしかなさそうだ…。)

導入

  • こちらのリポジトリ にて公開しています。
  • README に書かれている方法でプロジェクトにインストールすれば、即使えるようになるはずです。
    • npm コマンドを用いるため、Node.js のインストールが必要になります。

使い方

  • README に記載していますが、 シーンを再生していない状態で メニューの Assets > Install iPhone X Tester を選択してください。
    f:id:monry84:20171110101423p:plain
  • GameView のサイズを 2,436 × 1,125 などにすると実際の iPhone X の画角で確認できます。
    f:id:monry84:20171110101500p:plain
    • 正確に上記のサイズでなくとも、似たような比率であれば良いかと。

詳細

  • 既存のシーンには影響を与えないように、マルチシーンとして追加されます。
  • 現在のところ、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 さんにも感謝です!