跳到主要内容

自定义外观

注意

本文档适用于 LI PASS 客户端 V1.10 及之后版本，和 LI PASS 网页端。

LI PASS 提供标准 UI 模版供您快速接入使用，同时 LI PASS 支持您自定义外观，使组件与您的游戏风格保持一致。

按照本文步骤完成 客户端应用 或 网页登录组件 的外观自定义。

标准模版界面示例

图片：Standard1

图片：Standard2

图片：Standard3

图片：Standard4

客户端应用外观自定义​

步骤1：准备 UI 资源​

通过 Player Network 开发的 LI PASS UI 编辑器 准备 UI 资源，实现基础自定义，请参见 基础自定义 可自定义的范围。

在 LI PASS UI 编辑器最终确定修改后，即可直接导出客户端 UI 资源。

从 LI PASS V1.16 开始支持进阶的自定义 UI，详见 进阶自定义。

步骤2：替换资源​

将下载好的 UI 资源交给业务接口人，业务接口人返回定制 AssetBundle，将 AssetBundle 放到 StreamingAssets/LevelInfinite 即可。

步骤3：验收资源​

在编辑器或真机中运行游戏，打开 LI PASS 界面，观察界面样式是否按预期发生变更。

例如，默认为暗色的 LI PASS UI 已变更为亮色。

Dark mode:

Light mode:

网页登录器外观自定义​

步骤1：获取配置参数​

  1. 打开 LI PASS UI 编辑器，选择 网页端。 图片

  2. 在右侧调试配置，支持预览 登录注册页、合规页、弹窗 场景。默认提供深色、浅色配置。

  3. 调试完毕后，点击 复制配置参数。

    示例：

    {
        token: {
            colorPrimary: "#7064FF",
            colorSecondary: "#89839B",
            colorPrimaryBg: "#17131D",
            colorSecondaryBg: "#231C30",
            colorIcon: "#FFFFFF",
            colorInput: "#4D465A",
            fontSize: "MD",
            colorPrimaryText: "#ff6666",
            colorTextBase: "#FFFFFF", 
            colorTextButton: "#FFFFFF",
            colorError: "#FC725A",
        },
        algorithm: "dark"
    }

  4. [可选] 复制参数后可到 Component example 进行测试。

    1. 将参数粘贴到 theme 属性的输入框中。
    2. 点击 start 开始预览。

    图片

步骤2：配置登录器参数​

将参数配置到登录器 config 下的 theme 属性。

示例：

// 引入登录器资源
<script src="https://common-web.intlgame.com/sdk-cdn/infinite-pass/latest/index.umd.js"></script>
<link rel="stylesheet" href="https://common-web.intlgame.com/sdk-cdn/infinite-pass/latest/index.css" />

// 填写相关配置和 theme 参数
const newPass = new PassFactory.Pass({
    env: 'test',
    gameID: 11,
    appID: '0afef39eb02d069107db6e02efd71a2c',
    config: {
        langType: 'en',
        theme: {
            token: {
                colorPrimary: "#7064FF",
                colorSecondary: "#89839B",
                colorPrimaryBg: "#17131D",
                colorSecondaryBg: "#231C30",
                colorIcon: "#FFFFFF",
                colorInput: "#4D465A",
                fontSize: "MD",
                colorPrimaryText: "#ff6666",
                colorTextBase: "#FFFFFF", 
                colorTextButton: "#FFFFFF",
                colorError: "#FC725A",
            },
            algorithm: "dark"
        },
    },
});

// 挂载 pass 组件
newPass.start('#infinite-pass-component');

图片

基础自定义​

注意

基础自定义适用于 LI PASS 客户端 V1.10 及之后版本，和 LI PASS 网页端。

基础自定义包含图形的颜色、文字的大小及颜色的修改。

图形颜色​

图片：loginPanel

图片：accountSettingPanel

  1. 主题色
  2. 次主题色
  3. 主背景色
  4. 次背景色
  5. Icon 色
  6. 输入框色

文字颜色​

图片：loginPanel2

图片：regionTermPanel

  1. 基础文案
  2. 文字按钮
  3. 图形按钮
  4. 错误提示

进阶自定义​

注意

进阶自定义适用于 LI PASS 客户端 V1.16 及之后版本，网页端仅支持基础自定义。

若基础的自定义方案无法满足您游戏对风格的诉求，可手动替换部分图形资源，实现进阶的自定义 UI。
由于各版本图形资源有差异，具体图形规格要求请联系您的业务接口人。

下文说明了各图形可替换的样式示例。了解不同的图形处理方式，请参见 图形处理方式。

登录面板​

图片：MainBG

  1. 主背景：建议与弹窗的主背景保持统一，但尺寸可以不同。支持带花纹，通过等比例拉伸。
  2. 标题栏背景：支持带花纹，通过九宫格拉伸。
  3. 外部花纹区：通过九宫格拉伸。

示例

主背景（标准示例）：
图片：MainBG2

主背景花纹：
图片：MainBG3

标题栏背景：
图片：TitleBG

标题栏花纹：
图片：TitleBG2

外部花纹（主背景）：
图片：MainBG4

外部花纹（标题栏）：
图片：TitleBG3 图片：TitleBG4 图片：TitleBG5

弹窗​

图片：PopUp

  1. 主背景：建议与登录面板的主背景保持统一，但尺寸可以不同。支持带花纹，通过等比例拉伸。
  2. 外部花纹区：通过九宫格拉伸。

示例

主背景（标准示例）：
图片：PopUpMainBG

主背景花纹：
图片：PopUpMainBG2

外部花纹：
图片：PopUpMainBG3

账号中心​

移动端账号中心为全屏展示，PC 端账号中心为弹窗展示。

图片：accountSettingBG

  1. 主背景：支持带花纹，通过等比例拉伸。
  2. 标题栏背景：建议与登录面板的标题栏背景保持统一，支持带花纹，通过九宫格拉伸。
  3. Tab 背景：由 Tab 1 与 Tab 2 组成，其中 Tab 1（被选中 Tab）与内容区背景上下拼接。支持调整背景颜色、边角角度，通过等尺寸替换。
  4. 内容区背景：支持调整背景颜色、边角角度，调整边角角度时应注意与 tab 背景边角衔接。通过九宫格拉伸。
  5. 卡片背景：支持调整背景颜色、边角角度，通过九宫格拉伸。

示例

主背景（标准示例）：
图片：ASMainBG

主背景花纹：
图片：ASMainBG2

标题栏背景：
图片：ASTitleBG

标题栏花纹：
图片：ASTitleBG2

Tab 背景：
图片：ASTabBG

Tab 背景（直角）：
图片：ASTabBG2

内容区背景：
图：ASContentBG

内容区背景（直角）：
图片：ASContentBG2

卡片背景：
图片：Channel1

卡片背景（直角）：
图片：Channel2

全局​

输入框 - 支持调整内部颜色、带边框样式，边框通过九宫格拉伸。

  • 标准示例：
    图片：Inputbox
  • 边框示例：
    图片：Inputbox2

筛选框 - 支持调整内部颜色、带边框样式，边框通过九宫格拉伸。

  • 标准示例：
    图片：checkBox
  • 边框示例：
    图片：checkBox2

筛选框面板 - 支持调整背景颜色、边角角度，调整边角角度时应注意与筛选框边角衔接。通过九宫格拉伸。

  • 标准示例：
    图片：RegionBox
  • 直角示例：
    图片：RegionBox2

复选框：通过等尺寸替换，无样式限制，按尺寸提供即可。
图片：checkBox3

图形按钮 - 通过九宫格拉伸。应用图形按钮的场景较多，需要将一张图拉伸成不同宽度，若图形带花纹则易变性。建议采用纯色或竖直渐变样式。

  • 标准示例：
    图片：button
  • 竖直渐变示例：
    图片：button2

装饰型 icon - 通过等尺寸替换，无样式限制，按尺寸提供即可。
图片：Icon

功能型 icon - 通过等尺寸替换，无样式限制，按尺寸提供即可。
图片：Icon2

Toast - 横向拉伸，建议纯色或横向渐变，按尺寸提供即可。

  • 标准示例：
    图片：Toast
  • 其他样式示例：
    图片：Toast2

渠道卡片 - 指登录界面中第三方渠道按钮，支持调整边角角度，背景图通过等尺寸替换。

警告

由于各渠道有自己的设计规范，为避免影响产品正常上线，强烈建议使用默认颜色。如需进一步调整样式，请遵循各渠道的设计规范。

  • 标准示例：
    图片：thirdChannel2
  • 直角示例：
    图片：thirdChannel3

图片：thirdChannel

图形处理方式​

为控制图集大小，我们对图形采用了差异化处理方式，以下处理方式的介绍能帮助设计师输出更合适的图形资源：

  • 等尺寸替换：按照图形实际尺寸进行替换，适用于小尺寸图形，例如装饰型 icon、功能型 icon 等。

  • 等比例拉伸：将图形等比例拉伸成不同尺寸，以此保证图片样式不变形。
    适用于样式简单、尺寸比例统一的图形，例如主背景花纹。

  • 九宫格拉伸：将图形切分为九宫格，再对九个区域应用不同的缩放策略，以此来使图形的尺寸可以根据不同场景进行自动的尺寸拉伸适配。
    适用于外部样式复杂（带边框、角标）、内部样式简单（纯色、竖直渐变），且需要拉伸成不同尺寸的图形，例如标题栏、图形按钮等。

    • 四个角的花纹不可相交
    • 单个花纹位置不超过中线
    • 两个相邻花纹中间间距至少保留 1px 用于拉伸

    图片：Nine-gridStretch 图片：Nine-gridStretch2

最后于 更新