Skip to content
UI 控件-文本

UI 控件-文本

阅读本文大概需要 10 分钟

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

什么是文本?

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

文本属性-文本

文本

  • 修改文字内容

字体大小

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

字体间距

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

行距系数

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

水平显示

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

    • 自动换行

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

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

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

自适应文本框

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

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

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

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

  • 【最大字体大小】和【最小字体大小】
    • 开启【自适应文本框】时,如果计算出的自适应字号大于【最大字体大小】,则采用最大字体大小;如果计算出的自适应字号小于【最小字体大小】,则采用最小字体大小;如果计算出的自适应字号介于两者之间,就采用计算的自适应字号
    • 推荐同一批尺寸相同的文本框可以统一设定一个【最大字体大小】

文本属性-样式

字形

  • 修改文字的字形,目前默认字体支持的英文字形共六种(普通/粗体/细体/斜体/粗斜体/超粗体),中文字形共四种(普通/粗体/细体/超粗体)
  • 示意图:

删除线

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

下划线

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

字体颜色

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

阴影颜色

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

阴影偏移

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

水平对齐

  • 左对齐

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

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

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

垂直对齐

  • 上对齐

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

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

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

字体描边颜色

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

字体描边宽度

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

如何使用文本?

  • 文本控件是比较基础的 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))+""
	});
	}	
}
  • 示意图: