iOS Launch Storyboard

iOS 向け Unreal Engine プロジェクトで Launch Screen Storyboard を設定する方法です。

Launch Storyboards は iOS アプリケーションの起動画面です。静止画像を用いる従来の起動画面とは異なり、Storyboard はアニメーションをサポートして、ユーザーが使用するデバイスの解像度や DPI に合わせてスケーリングが可能です。これによりデベロッパーは高度に洗練された起動画面を比較的簡単に作成して、幅広いデバイスに対応できます。この操作ガイドでは、作成した Unreal Engine (UE) プロジェクトに Storyboard を実装する方法を説明します。

Storyboard は App Store と Apple Arcade のアプリすべてに対して必須です。現在 Apple は静的な起動画面の搭載を許可していません。

シンプルな Launch Storyboard

以下のセクションに従うと、推奨される完全な機能を搭載したカスタム Storyboard を作成できます。また UE4 では、プレースホルダーとテストのためにシンプルな単一画像の Storyboard を作成する方法もあり、これにより有効な iOS プロジェクトをパッケージ化する方法を常に確認できます。このワークフローは作成しているのが C++ プロジェクトかどうかに関わらず、どのオペレーティング システムでも使用できます。

シンプルな Storyboard を構成するには [Project Settings (プロジェクト設定)] を開き、次に [Platforms (プラットフォーム)] > [iOS] > [Launch Screen] セクションまで順に移動します。

LaunchScreenImage

Custom Launch Storyboard のチェックが無効のままの場合は、Launch Screen Image で提供した画像をプロジェクトのビルド時に Storyboard に変換します。こうした Unreal Engine のロゴ付きの画像はデフォルトのフォールバックとして使用します。

画像のガイドライン

起動画面に使用する画像にはアルファ チャンネルを持たない PNG ファイルを指定します。できるだけ簡単に最大数のデバイスに合わせてスケーリングやトリミングができるように、寸法は正方形 (たとえば 2048x2048) にすることを推奨します。

Xcode でカスタム Launch Storyboard を作成する

カスタムの Storyboard を作成するには Xcode を搭載した Mac が必要です。また、この手順を実行するために Unreal で C++ プロジェクトを作成する必要はありませんが、Storyboard の生成には Xcode が必要です。

Xcode プロジェクトの設定する

C++ でプロジェクトを作成した場合は、UE ゲームの Xcode プロジェクトで起動画面を直接作成できます。または、UE4 プロジェクト以外の有効な Xcode プロジェクトで起動画面を作成してから UE に移行もできます。この方法は組織の都合で Storyboard プロジェクトを分離する場合や、ブループリント プロジェクトを作成する場合に便利です。

以下の手順に従ってスタンドアロンの Xcode プロジェクトを作成します。

  1. Xcode を開いて [File] > [New] > [Project] の順にクリックします。

    New Xcode Project

    クリックして画像を拡大します。

  2. テンプレート メニューで iOS プロジェクトを作成していることを確認して、[Single View App]、[Next] の順にクリックします。

    Select Single View App

    クリックして画像を拡大します。

  3. オプション メニューで [Product Name]、[Organization Name]、[Organization Identifier] を入力します。この例では、これは「com.EpicGames.TestLaunchStoryboard」に基づく Bundle Identifier です。

  4. [User Interface] ドロップダウンで [Storyboard] をクリックします。必要な情報をすべて入力したら [Next] をクリックします。

    App Options

    クリックして画像を拡大します。

  5. 適切なフォルダに新しいプロジェクトを配置します。この例では「Users/UserName/Xcode Projects」とします。

このプロジェクトをコンパイルする必要はありません。ここでは Storyboard を作成するためだけにプロジェクトを作成しており、この Storyboard は手動で UE プロジェクトに移行します。

Launch Storyboard を作成する

これでプロジェクトの設定は完了です。次の手順に従って起動画面に使用する Storyboard を作成します。

  1. [Project Navigator] でこの プロジェクト を右クリックし、[New Group] をクリックして Storyboard という新しいグループを作成します。

    Storyboard Group

  2. [File] > [New File...] の順にクリックします。

    New File

    クリックして画像を拡大

  3. ファイル テンプレート メニューで [User Interface] セクションに移動し、[Launch Screen] を選択して [Next] をクリックします。

    Launch Screen

    クリックして画像を拡大

  4. プロンプトが表示されたらファイルを保存します。そして必ず同じ名前のグループ内になるように Storyboard フォルダに配置して、ファイル名をスペースなしの LaunchScreen に変更します。

    SetLaunchScreenName.png

    クリックして画像を拡大

  5. [Create] ボタンをクリックして Storyboard の作成を完了します。簡単なテキスト ラベルと著作権情報を含む LaunchScreen.storyboard というファイルが Storyboard グループ に表示されます。

    Section1_Result.png

    クリックして画像を拡大

  6. View Controller を選択します。Identity Inspector で Storyboard ID を「LaunchScreen」に設定します。そして Restoration ID セクションにある Use Storyboard ID チェックボックスを有効化します。

    SetStoryboardID.png

    クリックして画像を拡大

Storyboard を起動時に認識させるには View Controller で Storyboard ID と Restoration ID を必ず設定します。この手順を行わない場合は、Storyboard の表示前にアプリケーションがハングして黒い画面になります。

Launch Storyboard に画像を追加する

前のセクションで作成した Storyboard は十分な機能を備えており、プロジェクトでそのまま使用できます。このセクションでは Storyboard に画像を追加して、外部アセットを Xcode プロジェクトに統合する方法を説明します。

  1. 画像を作成して Storyboard の背景に設定します。この画像は必ず透明度の情報を含まない PNG にします。

  2. Project Navigator で Storyboard グループを右クリックして、New Group をクリックして新しいグループの名前を Assets とします。

  3. Finder で「Storyboard」フォルダの中に「Assets」フォルダが存在することを確認し、作成した PNG を「Assets」フォルダに配置します。

    AssetsFolder_StoryboardImage.png

    クリックして画像を拡大

  4. Project Navigator で、作成した PNG をクリックして [Assets] グループにドラッグし、Xcode プロジェクトに追加します。

    AssetFolder_WithImage.png

  5. Xcode ウィンドウ上部の [+] (プラス) ボタンをクリックして Library を開きます。

    ClickPlusButton.png

    クリックして画像を拡大

  6. Library にある Image View オブジェクトをクリックして Storyboard にドラッグします。この操作はデフォルトの View とそれが含むテキストをすべて置き換えます。

    CreateNewImageView.png

    クリックして画像を拡大

  7. Image View を選択して [Attributes] パネルにあるソース 画像 ドロップダウンをクリックし、作成した PNG を選択します。[Attributes] パネルが表示されない場合は、定規 アイコンの横にある、シェブロン (V 字形) を線が貫通したようなアイコンをクリックします。

    SelectImageForImageview.png

    クリックして画像を拡大

  8. [Attributes] パネルの [Content Mode] に [Aspect Fill] を設定します。

    AspectFill.png

  9. 定規 アイコンをクリックして Size inspector を選択します。そして [Autoresizing] セクションで Constraints を 4 つすべてクリックします。この操作は Image View のサイズを 4 方向すべてについて変更します。

    SetAutoResizing.png

    クリックして画像を拡大

画像が Xcode プロジェクトのどこかに存在すれば、Image View でその画像を使用できます。しかし、次のセクションで Unreal Engine プロジェクトに追加するため、画像は「Assets」フォルダに保存することを推奨します。

画像のガイドライン

できるだけ幅広いアスペクト比と互換性を持たせるために、Launch Storyboard には正方形の画像を使用することを推奨します。ただし、特定のデバイスやアスペクト比をターゲットにする場合は、その対象のアスペクト比に確実に合う画像を調整することもできます。

カスタム Storyboard を追加する

Storyboard を UE プロジェクトに追加する方法を説明します。

  1. エンジンがインストールされているディレクトリに、フォルダ「Engine/Build/IOS/Resources/Interface」を作成します。

  2. Finder で Xcode プロジェクトの「Storyboard」フォルダを見つけます。

  3. LaunchScreen.storyboard と付随する 「Assets」 フォルダを、両方とも「Project/Build/IOS/Resources/Interface」にコピーします。

    MoveStoryboardToProject.png

    クリックして画像を拡大

    プロジェクト フォルダに必要なファイルがない場合、システムはエンジン ディレクトリをフォールバックしてそれらを探します。

  4. Unreal Editor で [Project Settings (プロジェクト設定)] を開いて [Platforms (プラットフォーム)] > [iOS] > [Launch Screen] の順に移動します。

  5. [Custom Launch Storyboard] のチェックボックスを有効化します。

Enable Custom Storyboard

この状態で iOS プロジェクトをパッケージ化すると、プロジェクトはデフォルトの Launch Storyboard ではなく「IOS/Resources/Graphics」フォルダに配置したカスタム Storyboard を使用します。Xcode プロジェクトは特定のフォルダ構造に依存せずに画像ファイルを参照しますが、UE4 プロジェクトでは LaunchScreen.storyboard ファイルとともに「Assets」フォルダに配置する必要があります。

参考文献

このガイドを完了したら、UE プロジェクトで基本的な Launch Storyboard を実装するのに必要な知識は万全です。iOS の Storyboard の構成および編集についての詳細情報は Apple のドキュメント「Launch Screens」および「Storyboards」を参照してください。

Unreal Engine のドキュメントを改善するために協力をお願いします！どのような改善を望んでいるかご意見をお聞かせください。
調査に参加する
キャンセル