美文网首页一只腊鸭做游戏
Laya FairyGui系列七 GTextField

Laya FairyGui系列七 GTextField

作者: s0ok | 来源:发表于2019-11-20 18:40 被阅读0次

文本(GTextField)

文本是一个基础组件,说到文本就不能不说字体。FGUI支持动态字体和位图字体,同时也支持BMFont等位图字体制作工具导出的fnt格式的位图字体。
动态字体是直接使用ttf字体渲染文字,ttf字体可以是系统中的也是可以是打包再游戏中的,但是这种做法很少,毕竟一个字体文件还是很大的。
不同的设备环境对ttf字体的渲染也会有一定的差异,所以导致最终有一些设备运行的时候效果会有一定的差异。
位图字体是由美术制作每个字符的图片,FGUI编辑器点击菜单“编辑”->“创建位图字体”,然后弹出的字体编辑窗口,把资源库中字体的图片子资源拖动到字体编辑窗口中,并切实每个图片对应的字符,点击保存即可。


GTextField.png

动态创建文本

const testText = new fairygui.GBasicTextField();
testText.setSize(100,50);   // 设置文本大小
testText.fontSize = 30;     // 设置文本字体大小
testText.color = "#ffffff"; // 设置字体颜色
testText.font = "ui://Package1/testFont"; // 设置字体
testText.text = '1234';
testCom.addChild(testText);

注意是GBasicTextField,不能是GTextField。
Laya中普通文本不支持UBB语法,虽然再编辑器中有效,但是发布后到Laya后任然会失效。普通文本不支持鼠标点击。
如果文本被设置成单行,换行符会被忽略。
如果实际使用中出现文本向上偏移时可以试试将文本框的高度拉大(官网至今也未彻底解决文本偏移问题)。

关于文本的其他一些常规使用就不赘述了,有疑问的可以看看这里

富文本(GRichTextField)

富文本继承自文本,然后对Laya的HTMLDivElement进行的包装,所以虽然支持UBB语法,但是FGUI实际还是将UBB转换成html,所以实际使用的时候可以直接使用html语法实现富文本。

  • 图文混排
// 无法设置资源包中的图片资源也不支持使用图集
testText.text = "Hello Fairygui<img src='res/skill014.png'/>";
GTextField_0.png
  • 修改显示图片的大小
testText.text = "Hello Fairygui<img src='res/skill014.png' style='width:50px;height:50px'/>";
GTextField_1.png
  • 获取富文本中的HTMLDivElement对象
var div:HtmlDivElement = aRichTextField.div;

其他的用法和HTMLDivElement无差,可以参考这位网友的帖子:Laya 富文本 HtmlDivElement

相关文章

  • Laya FairyGui系列七 GTextField

    文本(GTextField) 文本是一个基础组件,说到文本就不能不说字体。FGUI支持动态字体和位图字体,同时也支...

  • Laya FairyGui系列一 FairyGui接入

    一,什么是FairyGui FairyGUI(下面简称FGUI)提供了一个强大的UI编辑器,使用习惯与Adobe系...

  • Laya FairyGui系列八 GList

    列表(GList) 游戏开发过程中经常会用到列表组件,比如我们做排行榜,服务器列表等。FGUI的列表能实现很多种复...

  • Laya FairyGui系列六 GLoader

    装载器(GLoader) FGUI规定需要切换图片的Texture时就需要使用装载器,所以装载器在FGUI中的使用...

  • Laya FairyGui系列四 GButton

    按钮(GButton) 按钮毋庸置疑在任何引擎中都是比较常用的组件之一,FGUI中按钮的类时GButton,它包含...

  • Laya FairyGui系列三 Controller

    控制器(Controller) 控制器是FGUI的一个核心的功能,使程序员在写UI时可以节省大量控制UI的代码。可...

  • Laya FairyGui系列九 GProgressBar G

    进度条(GProgressBar) 点击顶部工具栏创建一个进度条组件,然后按照向导提示一步一步设置资源。 注意 进...

  • Laya FairyGui系列五 GImage GGraph

    图形(GGraph) 编辑器中使用图形点击侧工具栏中图形按钮即可创建图形,图形支持圆形,矩形,空白三种,空白不消耗...

  • Laya FairyGui系列二 GObject GComp

    GObject GObject是FGUI中UI组件的基类。GComponent,GImage,GGraph等都继承...

  • Laya开发-FairyGui使用

    xzhuan原创稿件,转载请注明出处! FairyGui简介FairyGUI(下面简称FGUI)提供了一个强大的U...

网友评论

    本文标题:Laya FairyGui系列七 GTextField

    本文链接:https://www.haomeiwen.com/subject/lmvgictx.html