UE4中的iOS启动故事板

在UE4项目中为iOS设置启动画面故事板

Windows
MacOS
Linux

启动故事板(Launch Storyboards) 是iOS应用程序的启动画面。与传统的静态图像启动画面不同,故事板支持动画,并且能够根据用户设备的分辨率和DPI进行缩放。借助故事板,开发人员能够相对轻松地创建精美的启动画面,并能适配各种设备。本指南将带领你了解如何在 虚幻引擎4(UE4) 项目中一步步实现故事板。

App Store和Apple Arcade的所有应用程序强制要求使用故事板。Apple不再接受带静态启动画面的应用程序送审。

简约启动故事板

建议你进行以下部分的学习,创建功能齐全的自定义故事板。 UE4能够创建单张画面类型的简易故事板,可用作临时启动画面或用于测试目的,以便你打包出有效的iOS项目。此工作流可在所有操作系统中使用(无论是否为C++项目)。

如需配置简易故事板,请打开 项目设置(Project Settings),然后导航至 平台(Platforms) > iOS > 启动画面(Launch Screen) 分段。

若未勾选 自定义启动故事板(Custom Launch Storyboard),则构建项目时,启动画面图像(Launch Screen Image) 中提供的图像将被转换为故事板。默认情况下,会提供一张带有虚幻引擎标志的备用图像。

图像指南

启动画面图像必须是没有透明度通道的PNG文件。最好采用正方形尺寸(例如2048x2048),以便缩放和裁剪,从而轻松适配尽可能多的设备。

在Xcode中创建自定义启动故事板

要创建自定义故事板,你需要一台装有Xcode的Mac。你无需在虚幻引擎中创建C++项目来完成这些步骤,但你需要Xcode来生成故事板。

设置Xcode项目

如果你打算创建C++项目,你可以直接在Xcode项目中为UE4游戏创建启动画面。或者,你可以在UE4项目之外的、任何有效的Xcode项目中创建启动画面,之后再将其移至UE4中。若你出于组织管理目的希望单独分开故事板项目,或者你打算创建一个蓝图项目,则可以借鉴此方法。

请遵循以下步骤创建一个独立的Xcode项目:

  1. 打开 Xcode,然后依次点击 文件(File) > 新建(New) > 项目(Project)

    点击放大图像。

  2. 在模板菜单中,选择创建 iOS 项目,然后点击 单视图应用程序(Single View App),再点击 下一步(Next)

    点击放大图像。

  3. 在选项菜单中填写产品名称、组织名称和组织辨识符。在此范例中,将生成 com.EpicGames.TestLaunchStoryboard束辨识符(Bundle Identifier)

  4. 用户界面(user interface) 下拉菜单中点击 故事板(Storyboard)。填写完所有必要信息后,点击 下一步(Next)

    点击放大图像。

  5. 将新项目放置在便利的文件夹中。在此范例中,项目位于 Users/UserName/Xcode Projects 下。

无需编译该项目。制作此项目只为了创建故事板,故事板将手动移入UE4项目。

创建启动故事板

建立项目后,请遵循以下步骤创建用作启动画面的故事板:

  1. 项目导航器(Project Navigator) 中右键点击项目,点击 New Group(新建组),然后创建一个名为 故事板(Storyboard) 的新组。

    故事板组

  2. 点击 文件(File) > 新建文件(New File)…

    点击放大图像。

  3. 在文件模板菜单中,导航至 用户界面(User Interface) 部分,选择 启动画面(Launch Screen),然后点击 下一步(Next)

    点击放大图像。

  4. 出现提示时保存文件。将文件放置在 Storyboard 文件夹中,它必须位于名称相同的组中,然后将文件名更改为 LaunchScreen,不带空格。

    点击放大图像。

  5. 点击 创建(Create) 按钮完成故事板的创建。名为LaunchScreen.storyboard的文件将出现在故事板(Storyboard)组中,带有简单的文本标签和版权声明。

    点击放大图像。

  6. 选择 视图控制器(View Controller)。在身份检查器(Identity Inspector)中,将 故事板ID(Storyboard ID) 设为"LaunchScreen"。在 恢复ID 部分勾选 使用故事板ID(Use Storyboard ID) 复选框。

    点击放大图像。

要在启动时识别故事板,必须为视图控制器(View Controller)设置故事板和恢复ID。若跳过此步骤,在显示故事板之前应用程序将停在黑屏状态中。

将图像添加到启动故事板

上部分创建的故事板已拥有足够功能,可在项目中按原样使用。在本部分中,将向故事板添加图像,了解如何将外部资源整合到Xcode项目中。

  1. 创建图像,作为故事板的背景。此图像应为不带不透明度的PNG。

  2. 项目导航器(Project Navigator) 中,右键点击故事板(Storyboard)组,点击 New Group(新建组),然后调用新组 资源(Assets)

  3. 查找器(Finder) 中,确保 Storyboard 文件夹中存在 Assets 文件夹,然后将PNG放在Assets文件夹中。

    点击放大图像。

  4. 点击并将PNG拖入项目导航器的资源(Assets)组,以将其添加到Xcode项目。

    AssetFolder_WithImage.png

  5. 点击Xcode窗口顶部的 + (加号)按钮,打开

    点击放大图像。

  6. 在库中找到 图像视图(Image View) 对象,然后点击将其拖入故事板。对象将替换默认 视图(View) 以及所有填充文本。

    点击放大图像。

  7. 选择 图像视图(Image View),然后在属性(Attributes)面板中,点击源图像下拉列表并选择PNG。若未显示属性(Attributes)面板,请点击标尺图标旁边中间有线条穿过的V形图标。

    点击放大图像。

  8. 在属性(Attributes)面板中将 内容模式(Content Mode) 设为 等比填充(Aspect Fill)

    AspectFill.png

  9. 点击标尺图标,选择 大小检查器(Size inspector)。点击 自动调整大小(Autoresizing) 部分中的所有四个 约束(constraints)。这将确保图像视图(Image View)基于四个方向调整大小。

    点击放大图像。

只要图像位于Xcode项目中的某个位置,图像视图(Image View)就能使用该图像。但是,我们建议将图像保存在Assets文件夹中,以便按照下一部分中的内容将其添加到虚幻引擎项目中。

图像指南

我们建议启动画面使用方形图像,以最大程度地兼容各种高宽比。但若目标为特定设备或特定高宽比,则可以自定义图像来完美匹配。

添加自定义故事板

将故事板添加到虚幻项目中:

  1. Project/Build/IOS/Resources/Interface 引擎安装目录中创建文件夹。

  2. 在查找器(Finder)中找到Xcode项目的 Storyboard 文件夹。

  3. 将LaunchScreen.storyboard和随附的Assets文件夹都复制到 Project/Build/IOS/Resources/Interface 中。

    点击放大图像。

    如果你在项目文件夹中没有按要求提供文件,系统则会回到引擎目录并查找这些文件。

  4. 虚幻编辑器(Unreal Editor)中打开 项目设置(Project Settings),然后导航至 平台(Platforms) > iOS > 启动画面(Launch Screen)

  5. 启用 自定义启动故事板(Custom Launch Storyboard) 复选框。

现在,打包iOS项目时,该项目将使用放置在IOS/Resources/Graphics文件夹中的自定义故事板,不使用默认的启动故事板。尽管Xcode项目在引用图像文件时不会依赖特定的文件夹结构,但UE4项目要求文件必须位于LaunchScreen.storyboard文件旁的Assets文件夹中。

延伸阅读

经过本指南的学习后,你应能掌握在UE4项目中实现基础启动故事板所需的全部知识。欲知配置和编辑iOS故事板的更多信息,请参阅Apple文档中有关[启动画面]的部分(https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/launch-screen/) and storyboards

Select Skin
Light
Dark

欢迎来到全新虚幻引擎4文档站!

我们正在努力开发新功能,包括反馈系统,以便您能对我们的工作作出评价。但它目前还未正式上线。如果您对此页面有任何意见与在使用中遭遇任何问题,请前往文档反馈论坛告知我们。

新系统上线运行后,我们会及时通知您的。

发表反馈意见