跳到主要内容

修改配置优化冷启动黑屏体验

在冷启动Unity应用时，如果不对工程做任何修改，画面会首先显示应用的logo，然后黑屏几秒钟，最后出现团结引擎的logo。
这种体验不太好，一个是第一个logo界面，白底和logo很突兀不好看，另一个是没有做加载优化的游戏，黑屏等待的时间会比较长。
修改前的默认效果是这样的

为了优化体验，有两个步骤可以进行针对性的修改。

修改logo启动界面​

研究双框架应用的启动后发现，没有logo+黑底或者白底的启动页面比较普遍，$\color{Red}{黑色或者白色取决于下一个界面的底色}$。 在DevEco工程中，决定此处表现的代码在文件src/main/module.json5中：

"abilities": [
      {
        "name": "TuanjiePlayerAbility",
        "srcEntry": "./ets/ability/TuanjiePlayerAbility.ts",
        "description": "$string:EntryAbility_desc",
        "icon": "$media:icon",
        "label": "$string:EntryAbility_label",
        "startWindowIcon": "$media:icon",
        "startWindowBackground": "$color:start_window_background",
        "visible": true,

  1. startWindowIcon": "$media:icon决定了开屏界面的logo, 为了实现全黑或全白的界面, 我们可以新建一个empty的png图片作为新的logo, 达到不显示logo的效果（因为这是个必填参数，无法空着）。 create 字段修改为 startWindowIcon": "$media:empty"

  2. "startWindowBackground": "$color:start_window_background"定义了开屏界面的底色, 按住ctrl点击后会跳到src/main/resources/base/element/color.json文件,

{
  "color": [
    {
      "name": "start_window_background",
      "value": "#FFFFFF"
    }
  ]
}

将value修改为对应的值即可,白色为 #FFFFFF, 黑色为#000000。

到此，即可完成开屏第一个页面的修改。

修改完效果如下：

没有白色背景了，但是黑屏的时间似乎更长了，因此需要进一步优化。

static splash界面设置​

在团结引擎中可以设置一个在等待引擎加载过程中显示的界面，设置位置如下图所示：

设置完成后即可在打包DevEco工程处发现src/main/resources/base/element/integer.json的值发生变化：

{
  "integer": [
    {
      "name": "ShowStaticSplashScreen",
      "value": 1
    },
    {
      "name": "StaticSplashScreenFit",
      "value": 1
    }
  ]
}

其中"name": "ShowStaticSplashScreen"字段表示是否显示此启动页面，显示的图像路径为src/main/resources/base/media/app_splash.png。 "name": "StaticSplashScreenFit"字段表示是否调整该图片的大小以填充目标平台的屏幕大小。

修改启动界面时长​

在团结引擎打包处无法修改启动界面的时长，固定为2.6s，但在DevEco工程内我们可以修改。 在文件src/main/ets/pages/TuanjiePlayerAbilityIndex.ets中有如下代码：

...
@Component
struct StaticSplashScreen {
  @State showStaticSplashScreen: boolean = GetFromGlobalThis('showStaticSplashScreen');
  @State imageFit: ImageFit = 0;

  async aboutToAppear() {
    let resourceManager = getContext(this).resourceManager;
    let resConf = $r('app.integer.StaticSplashScreenFit');
    let resource: resourceManager.Resource = {
      bundleName: resConf.bundleName,
      moduleName: resConf.moduleName,
      id: resConf.id
    }
    this.imageFit = await resourceManager.getNumber(resource);
    setTimeout(() => {
      this.showStaticSplashScreen = false
    }, 2600)
  }
  ...

修改2600为其他数字即可修改显示时长，项目可灵活配置以遮盖黑屏显示。

修改完成后效果如下：