产品手册
Return to top
UI 控件-文本
编辑

UI 控件-文本 ​

阅读本文大概需要 10 分钟

本文概述了 UI 控件—文本的各项属性以及使用方法。

什么是文本? ​

文本是最基础的 UI 控件，即 2D 平面模式下，用于显示文字的控件，文字内容可以替换。

文本属性-文本 ​

文本 ​

  • 修改文字内容

字体大小 ​

  • 修改文字的字体大小
  • 示意图：

字体间距 ​

  • 修改文字之间的间隔距离
  • 示意图：

行距系数 ​

  • 修改每一行之间的间隔距离
  • 示意图：

水平显示 ​

  • 此属性用于修改要使用的换行策略

    • 自动换行

      • 根据文本框大小以及内容字符自动计算，将溢出控件边界的内容进行换行

    • 剪裁

      • 不会自动换行，并且溢出控件边界的内容会被剪裁

    • 不剪裁

      • 不会自动换行，并且溢出控件边界的内容不会被剪裁

自适应文本框 ​

  • 开启后会根据当前文本内容和文本控件大小，自动计算当前文本控件最适合的【字体大小】，尽可能大的充满整个文本框，而文本框大小不会变化

    • 当开启【自适应文本框】时，无法手动调整【字体大小】，也不能使用【变换-自动大小】

    • 【自适应文本框】的计算不考虑【字体描边宽度】、【阴影偏移】、【字体间距】和【行距系数】

      • 非默认值的【字体间距】、【行距系数】与【自适应文本框】同时使用时有可能会使文本超出文本框，因此请勿同时使用
      • 【字体描边宽度】描边宽度较小或【阴影偏移】偏移值较小的情况下不会超出文本框，可同时使用

    • 关闭【自适应文本框】功能后会退回开启自适应之前的【字体大小】

  • 使用场景：将游戏内中文批量翻译成英文，为了避免翻译后的英文会比中文长，导致超出文本框，可以开启【自适应文本框】，自动计算合适的文本大小；例如下图中，将字号大小为 58 号的汉字内容更换成英文后，英文的字号大小自动调整为 48 号

文本属性-样式 ​

字形 ​

  • 修改文字的字形，目前默认字体支持的英文字形共六种（普通/粗体/细体/斜体/粗斜体/超粗体），中文字形共四种（普通/粗体/细体/超粗体）
  • 示意图：

删除线 ​

  • 修改文字是否添加删除线
  • 示意图：

下划线 ​

  • 修改文字是否添加下划线
  • 示意图：

字体颜色 ​

  • 修改文字的字体颜色
  • 示意图：

阴影颜色 ​

  • 修改文字的阴影颜色，凸显文字的立体感
  • 示意图：

阴影偏移 ​

  • 修改文字的阴影的相对位置
  • 示意图：

水平对齐 ​

  • 左对齐

    • 文本内容以文本框水平方向的左侧靠齐的对齐方式

  • 居中对齐

    • 文本内容以文本框水平方向的中间靠齐的对齐方式

  • 右对齐

    • 文本内容以文本框水平方向的右侧靠齐的对齐方式

垂直对齐 ​

  • 上对齐

    • 文本内容以文本框垂直方向的上侧靠齐的对齐方式

  • 居中对齐

    • 文本内容以文本框垂直方向的中间靠齐的对齐方式

  • 下对齐

    • 文本内容以文本框垂直方向的下侧靠齐的对齐方式

  • 示意图：

字体描边颜色 ​

  • 修改字体描边的颜色。
  • 示意图：

字体描边宽度 ​

  • 修改字体描边的宽度。
  • 示意图：

如何使用文本？ ​

  • 文本控件是比较基础的 UI 控件之一，与按钮不同，没有点击等交互功能，文本主要用于说明介绍。
  • 举例说明：界面标题，公告说明，飘血数字等等。

示例一：制作显示角色速度 ​

  • 首先我们先创建一个 UI，并拖入文本控件。保存后，拖入主编辑器的对象列表中，生成 UI。

  • 然后我们开始编写脚本的逻辑，找到当前角色并获取到角色的速度。
  • 我们再创建一个脚本，找到咱们的 UI 文本控件，并且接受上面的速度事件，将获取到的角色速度显示在文本控件上。最后将这个脚本拖入 Root 目录下，完成与 UI 的绑定。
  • 示例脚本：
ts
@UIBind('')
export default class DefaultUI extends UIScript {
	private character: Character;
	private anim1 = null;
	
	/** 仅在游戏时间对非模板实例调用一次 */
  protected  onStart() {
		//设置能否每帧触发onUpdate
		this.canUpdate = true;
	}	
	/**
	* 每一帧调用
	* 通过canUpdate可以开启关闭调用
	* dt 两帧调用的时间差，毫秒
	*/
	protected onUpdate(dt :number) {
		const textBlock = this.uiWidgetBase.findChildByPath('Canvas/TextBlock_2') as TextBlock
	// 找到当前玩家角色
	Player.asyncGetLocalPlayer().then((player) => {
		this.character = player.character;
		textBlock.text=	Math.sqrt(Math.pow(this.character.velocity.x,2)+Math.pow(this.character.velocity.y,2))+""
	});
	}	
}
@UIBind('')
export default class DefaultUI extends UIScript {
	private character: Character;
	private anim1 = null;
	
	/** 仅在游戏时间对非模板实例调用一次 */
  protected  onStart() {
		//设置能否每帧触发onUpdate
		this.canUpdate = true;
	}	
	/**
	* 每一帧调用
	* 通过canUpdate可以开启关闭调用
	* dt 两帧调用的时间差，毫秒
	*/
	protected onUpdate(dt :number) {
		const textBlock = this.uiWidgetBase.findChildByPath('Canvas/TextBlock_2') as TextBlock
	// 找到当前玩家角色
	Player.asyncGetLocalPlayer().then((player) => {
		this.character = player.character;
		textBlock.text=	Math.sqrt(Math.pow(this.character.velocity.x,2)+Math.pow(this.character.velocity.y,2))+""
	});
	}	
}
  • 示意图：